初めまして。
aniumaでインターンをやらせてもらっているRyuseiです。
これから学習日記兼、備忘録としてやったこと、学んだことを残していこうと思います。
サイト作成
これからしばらくの間、HTML, CSS, JavaScriptを学習しながら個人プロフィールサイトを作成して実践的にWeb開発を学んでいこうと思います。
方法としては、schoo、ドットインストール等の動画をみて、実際にHTMLの記述から初めて、css, JavaScript等の基本的な言語を学習しながらラグジュアリなサイトを作れるように頑張っていこうと思います。
エディタ登録
Web開発といったらまずやることはエディタの使い方をマスターすることですね。今回、僕が使用していくエディタはcursorです。最近では、AIエディタとして人気になっているcursorを使用したいと考えている人は多いと思います。
何からしたらいいか分からないという人も多いと思うので、僕が学んだこと、やったことや躓いたポイントを参考にして一緒にm学んでいけると嬉しいです。
まず、エディタを選んで登録してHTMLファイルを開くところまでやっていこうと思います。
cursorはVSコードと基本的な操作は似ているので、元々VSコードを触ったことがある人は使いやすいかもしれません。cursorはエディタの右端にAIと対話しながらコードを書いていけるようになっているエディタなので、プログラミング初心者でもAIに教わりながら学ぶことができます。
今までは学習コストが非常に高かったプログラミングも学びながら開発ができてとても便利な時代になりましたね。
しかし、今回は学習、記法のマスターを目的として全て自分でコードを書いていくので、どうしても解消しないエラーが起きた時などに補助的な立ち位置で使用していこうと思います。
そこまで頻繁にAIを使用していくわけではないので無料プランを使用して、より高度なプログラミングをしていくタイミングで有料プランに入ろうと思います。
ファイル作成
エディタを登録できたので画像のOpen projectで使用するディレクトリに新規ディレクトリを作成します。
ディレクトリを選択したあとはエディタの左上に下の画像のようなマークがあります。左から、ファイル作成等の操作が可能なのでタブを選択します。
選択中のディレクトリにカーソルを合わせるとファイル作成とディレクトリ作成のアイコンが出てくるので一番左にあるアイコンを押します。
ファイル作成ができたらそのままファイル名を書き込んでプロジェクトを始めます。
「index.html」と入力することでHTMLファイルを作成することができます。
ファイル作成の慣習としてindex.htmlが一般的によく使われるファイル名らしくプロジェクトのルートディレクトリにはindex.htmlを作成します。
加えて、cssフォルダ、ファイルとimagesフォルダを作っておこうと思います。
ここではディレクトリを作成してその中に画像、index.cssなどのようなファイルを入れていきます。
今回は自分のサイトを、教材動画を真似しながら作成したのでエラーやうまくいかないところもなく、スムーズに作成できました。
しかし、id名やclass名を決めるところがうまくいかず、cssをあてる時に困ることが少しあったので次回からは命名規則について学んでいきたいと思います。
<次回から勉強していくこと>
次回からはschooの動画を見てフォルダ、ファイル、id、classなどの命名規則を学びながら、さらにサイト作成を進めていきます。
おわりに
最近のAIツールについても学習しながらまとめていくので参考にしていただけると幸いです。