私なりのコーディング学習について
はじめまして。webデザインを学習しているアヤと申します。
今回は自分なりのコーディングの学習の方針や考え方を備忘録も兼ねてここに書いていきたいと思います。
はじめに
私はweb制作を始めるまでプログラミング、コーディングというものを何も知りませんでした。そんな私でも今はデザインデータをコードに起こすことができるようになりました。その為に何したか、どんなことを考えたかをざっくり書きました。
技術的なことやtips的なことは書いていません。
このnoteが今からweb制作、webデザインを始めたいけど学習の方向性とかどうしたらいいかな、という方の力になったらとてもうれしいです。
vscodeを自分が使いやすい環境に整える
まず私はずっと付き合っていくことになるvscodeの環境を自分用にカスタムすることから始めました。使いにくいとコーディングも進まないし、段々とvscodeを開くことがハードルになってきてしまうのでお勧めします。自分好みにカスタムすると愛着も沸いてくる気がします。
下の方で自分が使っている拡張機能についても軽く触れたいと思います。
ここら辺の情報が不要な方は「学習でやったこと」という部分まで飛んでいただければと思います。
日本語にする
私はとにかく英語が苦手なのですぐに日本語にしました。とにかく絶対に日本語にした方が良い！とは思いませんが、学習をするうえでコーディング以外の部分でつまづくのが嫌だったので日本語にしています。
拡張機能からダウロードすることで日本語にすることができます。
Japanese Language Pack for Visual Studio Code
好きなカラーテーマに変える
テーマを自分の好きな色に変えました。
左下の歯車のボタンから「テーマ」→「配色テーマ」で変更することが出来ます。色々あるので一度試してみると楽しいと思います。
私は憧れの制作会社の代表の方が作られたこちらのテーマを使っています。拡張機能の方からダウロードして使うことが出来ます。とてもハイセンスなちょ～かっこいい制作会社さんです！末尾にリンクを貼りますので是非ご覧になってください！
KTRZ Monokai
拡張機能をとにかく試す
とりあえず「vscode 拡張機能 おすすめ」とかで検索かけて出てきたものを片っ端から入れてみることをお勧めします。
人それぞれ合う合わないはあるとは思いますが検索上位に出てくるブログは同じ拡張機能をお勧めしていることも多く、多くの人が良いと言っているものはあんまりはずれがないです。怖がらずバンバンインストールすることをお勧めします。合わなければさっさと消して次の拡張機能いこう～くらいの気持ちで試してみてください。
私が使っている拡張機能も載せておきます。
Code Spell Checker
スペルの間違いを教えてくれるありがたい拡張機能です。クラス名とか変数名のスペルミス本当に多いので助かっています。
indent-rainbow
インデントを虹色に表示してくれる拡張機能です。初学者の方には本当にお勧めです。divの終わりとかで迷子にならなくなります。
IntelliSense for CSS class names in HTML
クラス名の予測を出してくれます。段々長くなってきたクラス名を最初から何度も書かなくて良いので助かります。
Live Server
書いたコードがweb上でどう表示されているかを見ることが出来ます。１度開いたらweb上で更新かけるだけで新しく書いた分のコードを反映してくれます。最初知らなくてちょっと書いては都度Go Liveしてタブめちゃくちゃ増やしてました。アホですね。
Prettier - Code formatter
コードのインデントを整えてくれる拡張機能です。保存かけたときにコードがスッと整うのを見るのが好きです。
他にもありますが、私のお気に入りたちはこの辺です。
拡張機能は数試してなんぼだと思います。色々試すの楽しいのでぜひぜひやってみてください。
学習でやったこと
今にいたるまでにやったことと考え方を書いていきたいと思います。
勉強を開始してから２か月間くらいは毎日とにかく出来ない分からないで辛かったですがあるとき「なんか書けるようになってきたな？」ってタイミングがあったのでそこにいくまで続けることが大切だと思います。私でも出来たので誰でも出来ます。
毎日書く
とにかく毎日コードを書きました。基本的にPC開かなかった日はないです。
小さいころにピアノを習っていたのですが、その時ピアノの先生に言われた「１日弾かないと１週間前に戻るよ」がかなり効きました。
コードを書く時の頭の使い方、手に動きを覚えさせるためにもどんなに少しでもいいので毎日PCに触ることをお勧めします。
とにかく手を動かす
コードのきれいさや設計は気にせずとにかく手を動かしました。
インプットも大切ですが結局１００回記事を読むんだったら１回コードを書いた方がいいです。私は１００回記事読むタイプの人間だったので頭ではわかっていても行動に移すのにかなり苦労しました。
ショートカットを覚える
かなり早い段階からやっていました。最初はなかなか手が覚えていないので普通に打った方が早かったと思います。でも何度も繰り返したことで結果的に少しは早くコーディングが出来ているんじゃないかな、と思います。
調べるとすぐにショートカット一覧とか出てくるので自分が好きなものを見つけて保存なりして時々見返したりするのが良いと思います。
最後まで作りきる
これが結構大変でした。
変に完璧主義なところがあり自分のコードが許せず何回も消したくなりました。実務ではそんなこと許されるわけもないので１度作ると決めたサイトは全て最後まで作りきりました。自分の力で作り切ったサイトを見るのは最高に気分が良いです。
（作りきった後にファイルごと全て消したこともありますが、、、）
作り始めた時のルールに従うことを徹底すると最後まで作れると思います。
分からないことはすぐに調べる
調べ方を勉強したという方が正しいかもしれません。
簡単に検索をかければなんでも教えてもらえる素晴らしい時代なのでこの実装どうするんだろ？とかは15分悩んで分からなければ検索かけるようにしました。（実際詰まって１日潰したとかも全然ありますが、、、）
本当に欲しい情報にたどり着くのは結構大変なことも多く、、、ChatGPTと友達になることもお勧めします。
調べたことはnotionに全部まとめました。どう詰まったのか、解決策、読んだサイトなどを残しています。
あとはスクールに通っていたので結構先生にすぐ質問しました。先生方はいつもすぐにほしい答えをくださり大変ありがたかったです。
実務で使えるコーディングができるようになることがゴールなのでそこに到達するために何が必要か考えて上記5点は特に意識しました。
スクールに通う
スクールに通って学習の方向性を考える手間をある程度省きました。
自分で学習計画立てるのがめちゃくちゃ苦手なのでそこでかなりの時間を使ったり間違った方向に突き進むことを防げたんじゃないかと思います。
スクールに通ったことで私自信が大きく変わったと思っているのでいつか記事に書きたいと思っています。
時間を測る
最初のうちはやった内容とかかった時間が見合わず結構病むこともあったのですが時間は事実として残るしこんなに頑張ったという積み重ねは自信にもなりました。
自分はどれくらいで集中が切れるか、1日どのくらい時間を勉強に使えるかを調べるなど様々な目的をもって測るとそれだけで得られるものがあると思います。
あと、ゲームが好きなのでRTA的なノリで実装までの時間を測るということもしました。効率よくコードを書くために頭を使って少しでもタイムを縮めるのは楽しいです。
※RTA（Real Time Attack）・・・ゲームのスタートからクリアまでの時間を競う競技です。実際のRTAと私がやっていることは全然違います！ノリです！
ノートの活用
紙のノートとnotionをめちゃくちゃ使っています。
紙のノートは書きなぐりや思考の流れを書くことに、notionは参考サイトをまとめたり紙のノートに書いたことをきれいに整理してまとめるのに使っています。
紙のノートにできること、notionにできることをそれぞれうまく生かしたいと考えています。
ここではざっくりとしか書きませんが、いつかノートの使い方は記事にしたいと思っています。
さいごに
つらつらと書きましたがまだまだ学習中の身です。
なので技術的なことは書かずに頭の中身的な部分を形にしようと思ってこの記事を書きました。
当初書こうと思った内容よりもだいぶ増えてとっちらかってしまいましたし、ところどころでまた記事にしますとか書いたりして、、、ちゃんと書きます。頑張ります。
拙い文章でしたが最後までお読みいただき本当にありがとうございました。
誤字脱字、間違った情報などありましたらXまでご連絡いただけますと幸いです。
〇関連リンク〇
株式会社キテレツ様
Xアカウント
https://x.com/_shining_melon_?s=21
この記事が気に入ったらサポートをしてみませんか？