By ナオマツモト
- プログラミングの学習方法
- プログラミングの学習スピードを上げる方法
プログラミングの学習方法｜学習編｜結論
- プログラミングの学習方法
・「HTML/CSS」でWebの見た目をつかむ
・「Responsive」で各機器に対応させる
・「Bootstrap」で制作スピードを上げる
・「jQuery」でWebサイトに動きをつける
★【基礎学習＋サンプルサイト制作】を繰り返す - プログラミングの学習スピードを上げる方法
・ショートカットキーを使いこなす
・タイピング速度を上げる
・ググり方を考える
プログラミングの学習方法
「HTML/CSS」でWebの見た目をつかむ
有名なプログラミングの学習サイトはProgateですが、僕は補助としてドットインストールも使用していました。
なぜならドットインストールは動画形式で学ぶことができ、プログラミングの全体像を把握するにはもってこいだからです。
- ドットインストールの動画を見てHTML/CSSはこんなことができるんだなぁ程度に全体像を学ぶ（有料会員であれば視聴スピードを２倍速まで早められる＆女性ボイスに変換可能）
- その後、Progateで実際にコードを書き、それぞれの級を３周する
最初からすべてを理解する必要はありません。全てを理解しようとすると中々先に進まず、挫折してしまいます。理解度は下記を目安にすると良いでしょう。
▶︎理解度の目安
- １周目 １０％
- ２周目 ３０％
- ３周目 ５０％
初級を終わらせるのに１回目は４時間くらいかかっていたのが、３回目には１時間ちょいで終わるような感じです。
とにかく半分くらいの理解度でもサンプルサイトを作っていくうちによく使うものは覚えていくだろうというスタンスでどんどん先に進みました。
▶︎基礎学習終了後
- サンプルサイトの制作
Progateの道場編でもそうでしたが、０からコードを書くということがまったくできませんでした。そしてProgateと違いヒントや答えがないので、
ググる→試してみる
これをひたすら繰り返し、自分の中でのテンプレを増やしていきます。
「Responsive」で各機器に対応させる
Progateの上級編ではレスポンシブデザインを学習します。それのアウトプットとしてレスポンシブサイトの制作をしました。
どんな制作をしたかと言いうと、既存サイトのレスポンシブ化です。僕はこれが苦手でかなり苦戦しました。
全く思い通りに進まないので気分転換にバックアップを取り、一度サイトがめちゃくちゃになるまで遊んでみます。（750pxになると全く違うサイトになるような笑）
これがうまく効いたのかだんだんと理解できるようになりました。
※こういった息抜きも楽しみながら学習する上で重要なことです
- 手を動かすのを止めずに片っ端から試していく
- サイト制作の際はレスポンシブのことを考えながら制作する
「Bootstrap」で制作スピードを上げる
BootstrapとはWebフレームワークのことで、簡単に説明すると、よく使う機能などをパッケージ化してさらに使いやすくしたものです。
学習方法は以下の通りです。
- HTML/CSSの時と同じくまずはざっくりと全体像をみてから、実際に手を動かしコードを書いていく
- 終了後、サンプルサイトの制作
Bootstrapのよくある勘違いは、全てにおいてBootstrapを使用しなければならないと考えてしまうことです。使えるとこだけ使うというスタンスで進めると、うまく使いこなせるでしょう。
ちなみにBootstrapはグリッドシステムが重要なので、まずはそこを重点的に学習することをオススメします。
「jQuery」でWebサイトに動きをつける
やはりこれも学習方法はこれまでと一緒です。
- ざっくりと全体像をみてから、Progateで実際に手を動かしコードを書いていく
- 終了後、サンプルサイトの制作
今まで全く動きのないサイト制作だったので、jQueryのサンプルサイトを見たときにこれは楽しい！とテンションが上がった反面、実装の難しさを感じました。
やはり実装が難しくひたすらにググり、最終的に分からないときの秘技、実装コードのコピぺを使いました。
そしてコピぺしたコードでなぜ動くのか、一つ一つコードの分析を行いました。
プログラミングの学習スピードを上げる方法
プログラミング以外にもパソコン自体初心者だった僕は、以下のことも意識して学んでいました。これらを身につけることで制作スピードが上がります。
- ショートカットキー
- タイピング
- ググり方
ショートカットキー
Macにはいくつものショートカットキーがあり、これを知っているかいないかでかなり制作スピードに差が出てきます。
【役立つショートカットキー一覧】
| 入力キー | 処理内容 |
| ⌘＋C | 選択したものをコピー |
| ⌘＋V | 選択したものを貼り付ける |
| ⌘＋Z | 最後にした操作を取り消す |
| ⌘＋Y | 取り消した操作を戻す |
| ⌘＋S | 変更を保存する |
| ⌘＋R | 更新 |
| ⌘＋F | 画面内の文字列を検索する |
| ⌘＋N | 新しいウィンドウを開く |
| ⌘＋W | 最前面のウィンドウを閉じる |
タイピング
これは言うまでもなく早ければ早いほど制作スピードが上がります。ブラインドタッチはもちろんできず、なんなら片手で入力していた自分はまずタイピングの型を知ることから始めました。
タイピングにはホームポジションと言うものがあり、それぞれの指でどのキーを打つかが決まっています。この型を頭に入れ、毎日コードを書いていたら自然と早くなっていきました。
※「タイピング ゲーム」などでググると面白いゲームなどがたくさんあるので、息抜きにやるのもオススメです
ググり方
プログラミングはググる力が必要だと聞いていたので、
「プログラミング ググり方」でまずググり方をググるということをしました。
「プログラミング 初心者 ありがち」これもなかなか役に立ちます。
初心者はこんなところでミスをするんだなとあらかじめ知っておくことで、つまずきを減らせました。
プログラミングの学習方法｜まとめ
- プログラミングの学習方法
・「HTML/CSS」でWebの見た目をつかむ
・「Responsive」で各機器に対応させる
・「Bootstrap」で制作スピードを上げる
・「jQuery」でWebサイトに動きをつける
★【基礎学習＋サンプルサイト制作】を繰り返す - プログラミングの学習スピードを上げる方法
・ショートカットキーを使いこなす
・タイピング速度を上げる
・ググり方を考える
プログラミングの学習は、
基礎学習＋サンプルサイト制作
これに尽きるね！
基礎学習でインプットしたものをすぐにサンプルサイトを制作することでアウトプットしていく、王道ですがこの流れを続けることでどんどん身についていきます。
▶︎２〜３ヶ月後の学習目安
- それぞれ学習した基礎知識を使ってサンプルサイトを作成できるようになる
- デザイン画像をもとにコーディングをすることで、画像を見たときにこの場所はあの要素が使えそうだなと感じれるようになる
案件の取り方を知りたい人は下の記事も見てみてね！
ではでは、ごきげんよー！
