この記事を読んでほしい方
- フロントエンドエンジニア初学者の方
- Web制作をする上で、どのようにプログラミング学習していけばいいか迷っている方
- 学習中だけど、何もかも分からず困惑してる方。
以前、おすすめの勉強法として「目標設定の方法や、写経の実践」をおすすめしました。
この記事に書いたことを自分が実践しているときは、「この方法で本当にうまくいくだろうか。。」とか
「間違った方法なのでは？」と考えることが多かったです。（結果的にうまくいったので記事で紹介してます。）
なるべくそういった迷いをなくしたいので、今回はおすすめの学習手順の全体像を紹介します。
プログラミング（フロントエンド）の学習で迷ったときは、ぜひ思い出してください。
※今回はあくまでWeb制作のフロントエンドをしたい方に向けて書きます。
まずは迷いながらも模写サイトをつくってみる。コードをそのまま丸パクリするのもOK。
まずは一サイト写経しましょう。
目安としては
- 仕事をしている方 →「3ヶ月で一サイト完成させる。」
- 一日作業ができる方 → 「1ヶ月で一サイト完成させる。」
くらいを目標においておくといいかなと。
ここで学習しておきたいポイントは下記の通り。
- HTML、CSS、Javascriptをどのように連携させるかを学ぶ。
- 実際にHTMLやCSSを書いてみて、Webサイトに反映されるかを確認。
- HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。
以前書いた下記の記事に、もう少し具体的なやり方が書いてます。
「HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。」についてですが、
「では大事と思わないところは飛ばして良いか？」というとそうではなく、
検索で調べて直ぐに反映できる状態にできていれば良い、
くらいの感覚で学習を進めていってください。
模写サイトが一つ作れてしまえば、正直、（非効率だけれども）Web制作のコーディング業務はできるようになると思います。
最悪調べればなんとかなる！くらいのレベルまで持っていきましょう。
なのでまずは、それぞれの言語の書き方があやふやだったり、
学習のやり方が闇雲に感じても、模写サイトを一つ作ってしまうことをおすすめします。
HTML、CSSを学習する。
学習概要
模写が終わったら、HTML、CSS、Javascriptと、「焦点を当てて勉強する」のがいいでしょう。
順番としては、一番基本となるHTML、CSSを最初に学習することがおすすめです！
目安としては
- 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
- 一日作業ができる方 → 「15日くらいで慣れつつ、コーディングしていく中で慣れていく。」
こんな感じの目標設定で良いと思います。
ここで学習しておきたいポイントは下記の通り。
- HTMLのタグにはどんな種類があって、それぞれどんなタイミングで使うかを学習。
- リセットCSSについて学ぶ。
- CSSはスタイルやレイアウトの組み方が色々あるので、それぞれ使っていく。（できれば検索無しで書けるようになる。）
- HTMLに使用する「クラス名」は、どのようなクラスを使うのがベストなのかを考慮してコーディングする。
このあたりになってくるかなと。
具体的には…
HTMLのタグについては、意外とつまづきポイントかもしれません。
タグによっては思ったとおりレイアウトを組めないことがありますので、意識してみてください。
リセットCSSは、「ブラウザ特有のスタイルを打ち消したり、元々のCSS設定を統一する」という目的があります。
ちなみにブラウザとは、Webサイトを閲覧するためのものですね。
Google Chrome、Firefox、Safari、Edgeとかあります。
ここまである程度理解できたら、作業する中でCSSに慣れていきましょう。
そして、HTMLに使用する「クラス名」について、どんなクラスを使うのが適切か、まで学べると良いかなと思います。
業務で実際にコーディングをしている方は、クラス名の意味合いをなるべく統一しましょう。
バラバラにしても組めるっちゃ組めるんですが、「他の人が見たときに分からない」ということをなるべく防ぐのが目的です。
ここ、コーダー、フロントエンドエンジニアとして差をつけるために結構重要です。
例えば、ページのセクションにあるテキストに「section01-text」というクラス名をつけた場合、次のセクションのテキストは「section02-text」とつけたり、
「これは何を表すクラス名なのか？」がひと目でわかるようなクラス名にすることから始めてみてください。
逆に他の方がコーディングしたHTML、CSSに手を加えるときは、その人がつけたクラス名に従って、コーディングするのがいいと思います。
最終的には…
最終的には「コーディング設計」を勉強できるとなお良いんですが、初学者を抜け出すという意味では、まだそこには触れなくてよいかと思います。
jQueryを勉強する。※Javascriptより先に学習することをおすすめします。
学習概要
HTML、CSSの学習が終わったら、jQueryを学習しましょう。
jQueryは、「Javascriptのライブラリ」でして、ざっくり言うと、Javascriptを簡単に書くためのものです。
このjQueryを使えば、Javascriptを使うよりも簡単に「Webサイトに動きをつけたり、UIを向上させる」ことができます。
目安としては
- 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
- 一日作業ができる方 → 「一ヶ月くらいで慣れつつ、コーディングしていく中で慣れていく。」
こんな感じの目標設定で良いと思います。
ここで学習しておきたいポイントは下記の通り。
- jQueryの実装を行うときに、身につけておく要点を知る。
- jQueryを使った動きの実装を、「サイトから真似るかたちでもよいので」できるようになる。
こんな感じです。
具体的には…
jQueryでサイトの動きを実装する際、「何故か動かない」ということが僕はよくありました。。
たとえば、他の人が作ったサイトを修正するときに、
すでにjQueryが読み込まれているのに、自分もそのサイトにjQueryを読み込ませて、二重に読み込まれていて動かない、とか
jQueryの書き方はHTMLやCSSに比べて、少しだけですが複雑なので、書き方が間違ってて動かない、とかですね。。
ここに関しては、コードを見て、書いて、実装してみて、慣れるしかないかなと。
ただ慣れたら実装できて、サイトに動きを付ける作業なので、結構達成感はあるかなと思います。
結構エラーが出やすかったりするので、「検証ツールでコンソール確認」の方法を知っておけば、
そのエラーをググって解決することができるので、コンソール確認の方法も合わせて学んでいってください！
（学習するかは人によるけど）Wordpressを学習する。
学習概要
WordPressを使うと、HTML、CSS、Javascriptで実装することが難しいこと（もしくは実装できないこと）を実装することができるようになってきます。
PHPというバックエンド寄りの言語が使われてます。
ちなみにこのサイトもWordpressを使って実装されています。
WordPressは、パターンが色々ありますが、HTMLの記述がPHPファイルに書いてあって、機能実装のために、そのHTMLの記述にPHPの記述が組み込まれているようなイメージです。
たとえば、Webサイトについている「お問い合わせフォームの実装」だったり、「共通しているパーツを一元化」だったりを実装できます。
学習目安としては
- 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
- 一日作業ができる方 → 「2ヶ月で一通り学ぶ。」
こんな感じの目標設定で良いと思います。
WordPressは、サイト制作を目的とするならば、HTML、CSS、jQueryを学んでから手をつけるのをおすすめします！
まとめ
いかがだったでしょうか？
学習手順を体系的に紹介しました。
今回はあくまで「Web制作をしたい方」に向けて書きましたので、
アプリ開発やバックエンド寄りのことを学びたい方に実践いただいても効果はあるかと思いますが、あまりおすすめはしないです。
今回紹介した方法と併用して、プログラミングスクールに通ったり、本で勉強すると、相乗効果が生まれてさらに網羅的に学習ができると思います！
プログラミングスクールは何社かありまして、値段感やそれぞれの強みが違うので、よく吟味してから申し込むことをおすすめします。
Freeks(フリークス)｜月額10,780円のサブスク型プログラミングスクール
本での学習を考えている方、今度おすすめの本を紹介しようと思うので、お待ち下さい！
それでは！
