IT

40日間プログラミングを学習したので、これまでのことをまとめてみる【学習編】

こんにちは、ノマド航海士のナオマツモト@naosuke_shipです。

iSara事前学習も残り1週間を切ったので、この40日間自分がしてきたことをまとめていきます

それではいきましょう!

「HTML/CSS」でWebの見た目をつかむ

iSaraで使用する学習サイトはProgateですが、僕は補助としてドットインストールも使用していました。

なぜならドットインストールは動画形式で学ぶことができ、プログラミングの全体像を把握するにはもってこいだからです。

◎ドットインストールの動画を見てHTML/CSSはこんなことができるんだなぁ程度に全体像を学ぶ

(有料会員であれば視聴スピードを2倍速まで早められる&女性ボイスに変換可能)

◎その後、Progateで実際にコードを書き、それぞれの級を3周する

最初からすべてを理解する必要はありません。全てを理解しようとすると中々先に進まず、挫折してしまいます。理解度は下記を目安にすると良いでしょう。

◎理解度

1周目 10%

2周目 30%

3周目 50%

初級を終わらせるのに1回目は4時間くらいかかっていたのが、3回目には1時間ちょいで終わるような感じです。

とにかく半分くらいの理解度でもサンプルサイトを作っていくうちによく使うものは覚えていくだろうというスタンスでどんどん先に進みました。

 

【基礎学習終了後】

◎サンプルサイトの制作

Progateの道場編でもそうでしたが、0からコードを書くということがまったくできませんでした。そしてProgateと違いヒントや答えがないので、

ググる→試してみる

これをひたすら繰り返し、自分の中でのテンプレを増やしていきます。

 

「Responsive」は確実に

Progateの上級編ではレスポンシブデザインを学習します。それのアウトプットとしてレスポンシブサイトの制作をしました。

どんな制作をしたかと言いうと、既存サイトのレスポンシブ化です。僕はこれが苦手でかなり苦戦しました。

全く思い通りに進まないので気分転換にバックアップを取り、一度サイトがめちゃくちゃになるまで遊んでみます。(750pxになると全く違うサイトになるような笑)

これがうまく効いたのかだんだんと理解できるようになりました。

※こういった息抜きも楽しみながら学習する上で重要なことです

ポイント

手を動かすのを止めずに片っ端から試していく

・サイト制作の際はレスポンシブのことを考えながら制作する

 

「Bootstrap」で制作スピードを上げる

BootstrapとはWebフレームワークのことで、Webフレームワークとは簡単に説明すると、よく使う機能などをパッケージ化してさらに使いやすくしたものです。

学習方法は以下の通りです。

◎HTML/CSSの時と同じくまずはざっくりと全体像をみてから、実際に手を動かしコードを書いていく

◎終了後、サンプルサイトの制作

Bootstrapのよくある勘違いは、全てにおいてBootstrapを使用しなければならないと考えてしまうことです。使えるとこだけ使うというスタンスで進めると、うまく使いこなせるでしょう。

ちなみにBootstrapはグリッドシステムが重要なので、まずはそこを重点的に学習することをオススメします。

「jQuery」でWebサイトに動きをつける

やはりこれも学習方法はこれまでと一緒です。

◎ざっくりと全体像をみてから、Progateで実際に手を動かしコードを書いていく

◎終了後、サンプルサイトの制作

今まで全く動きのないサイト制作だったので、jQueryのサンプルサイトを見たときにこれは楽しい!とテンションが上がった反面、実装の難しさを感じました。

やはり実装が難しくひたすらにググり、最終的に分からないときの秘技、実装コードのコピぺを使いました。

そしてコピぺしたコードでなぜ動くのか、一つ一つコードの分析を行いました。

 

その他学習したもの

プログラミング以外にもパソコン自体初心者だった僕は、以下のことも意識して学んでいました。これらを身につけることで制作スピードが上がります

◎ショートカットキー

◎タイピング

◎ググり方

ショートカットキー

Macにはいくつものショートカットキーがあり、これを知っているかいないかでかなり制作スピードに差が出てきます。

【役立つショートカットキー一覧】

入力キー 処理内容
⌘+C 選択したものをコピー
⌘+V 選択したものを貼り付ける
⌘+Z 最後にした操作を取り消す
⌘+Y 取り消した操作を戻す
⌘+S 変更を保存する
⌘+R 更新
⌘+F 画面内の文字列を検索する
⌘+N 新しいウィンドウを開く
⌘+W  最前面のウィンドウを閉じる

 

タイピング

これは言うまでもなく早ければ早いほど制作スピードが上がります。ブラインドタッチはもちろんできず、なんなら片手で入力していた自分はまずタイピングの型を知ることから始めました。

タイピングにはホームポジションと言うものがあり、それぞれの指でどのキーを打つかが決まっています。この型を頭に入れ、毎日コードを書いていたら自然と早くなっていきました。

※「タイピング ゲーム」などでググると面白いゲームなどがたくさんあるので、息抜きにやるのもオススメです

ググり方

プログラミングはググる力が必要だと聞いていたので、

プログラミング ググり方」でまずググり方をググるということをしました。

プログラミング 初心者 ありがち」これもなかなか役に立ちます。

初心者はこんなところでミスをするんだなとあらかじめ知っておくことで、つまずきを減らせました。

 

まとめ

 

何度も出てきましたが、

基礎学習+サンプルサイト制作

プログラミング学習はこれに尽きるなと感じました。基礎学習でインプットしたものをすぐにサンプルサイトを制作することでアウトプットしていく、王道ですがこの流れを続けることでどんどん身についていきます。

 

〜40日間の成果〜

・それぞれ学習した基礎知識を使ってサンプルサイトを作成できるようになる

・デザイン画像をもとにコーディングをしてきたことで、画像を見たときにこの場所はあの要素が使えそうだなと感じれるようになる

 

次回はメンタル編です。

ではでは、ごきげんよー!(船乗りの別れの挨拶。以後お見知りおきを)