「WEB制作を副業にしたい」「リモートで働きたい」
といった入り口でWEBサイトコーディングの学習を始めた方、
そしてその後、たくさんの情報に囲まれながら、どうやって学習していけばいいのかわからない、
といった悩みを抱えている方、
そういった、WEBサイトコーディングの学習方法の迷子になっている方々へ向けた、
私なりの、たくさんある学習法の一つの道しるべとしての記事です。
私自身は特別な勉強方法を知っているわけではありません。
コーディングの専門学校・オンライン講座などでの体系的な学習も経験していません。
すべて独学・実務で身に着けた知識です。
ですから、「これが学習方法の正解である」といった話はできませんが、
どの知識が重要なのか、そしてそれはどの順番で習得したほうがいいのか、といったお話をできればと思います。
WEBサイトの作りから、習得順を考える
WEBサイトがブラウザを通してどのように表示されているかを解体してみると、
- HTMLでサイトに表示する情報や構造を定義し、
- CSSで見た目を装飾し、
- JavaScriptでクリックやスクロールなど利用者の操作に応じた動きを加え、
- PHPなどのサーバーサイド言語でデータ処理や動的な機能を実現する
というように、役割を分けて考えることができます。
（かなり大まかな説明であり、実際には例外やさまざまな実装方法があります）
つまり、この解体図の順番通りに学習していくのが、
スムーズにWEBサイトコーディングに必要なスキルを習得するための、一つの目安となります。
ここで重要なのは、いろいろな過程をごちゃまぜにしながら学習を進めないことです。
ある程度、技術を習得できたという自信がついてから、次のスキルへ進むことをお勧めいたします。
全てのタグを暗記するというような、マスターレベルまで習得する必要はありません。
タグ辞典などを引けばわかる状態にしておくだけで十分です。
まずはHTMLを習得すべし-土台を固める-
まずは1冊本を読もう
HTMLの体系的な学び方について、私自身がどうだったか…を思い出すのは正直なところ難しいのですが、とりあえずは初学者向けの本を1冊読んでみてください。
なるべく、HTML以外の情報が【ない】本がいいです。
私の手持ちの本だと、こちらはおススメです。
お勧めの読み方は、最初から最後まで、理解できなくとも一度通しで読むことです。
その時に気になるところ、読み返したいと思ったところには付箋を貼り、読むスピードは落とさないで最後まで読んでください。
そしてある程度、技術が習得できたと思った段階でもう一度読んでみてください。
1度目では頭に入らなかったことが、理解できることが実感できると思います。
HTMLコードを書く
ある程度、見出し（hタグ）、テキスト（pタグ・ulタグ）といった基本的なタグを覚えた後は、
仕事としての「コーディング技術」につながる練習を始めることができます。
その方法は、デザインファイルを元に、本で読んだことを実践しながら、HTMLコードを書く、ということです。
この段階で、見た目を気にする必要はありません。
デザインファイルに掲載されている全ての情報（文字・画像など、装飾以外の情報）を、正しいHTMLコードで書いてください。
該当するタグに迷ったら、HTML辞典を引いてください。
いきなりコードを書くのが難しい場合は、
- デザインファイルを印刷して、
- 一つ一つの要素に「h1」「h2」「ul」「p」…と書き込んでいき、
- タグで要素を分類してみてください。
それを見ながら、上から順番にHTML文書として記述していくだけでいいです。
出来上がったHTMLファイルの確認と検証
1ページ分のHTMLファイルを作成したら、文法チェックを行います。
方法はどれでも構いませんが、こちらのサイトを使うのが手軽でしょうか。
Another HTML-lint
とりあえず、簡単な記述ミス、文法エラーをなくすことを目指してください。
そのようにして出来上がったHTMLファイル（拡張子.htmlで保存）を一度ブラウザで開いてみてください。
見た目はもちろんデザインファイル通りではありませんが、何の情報が掲載されているのかは、分かるページになっているかと思います。
今回はそれが重要なのです。
ページ装飾もない・アニメーションもない、その状態でも必要な情報は確認できる。
そこを目標にHTML文書を作成する、という練習です。
なぜHTMLを書く、ということを重視するのか
検索エンジンや最近のAIは、HTMLに記述された情報や構造を元に内容を理解しています。
もちろんCSSやJavaScriptが不要という意味ではありませんが、「見出し」「本文」といった情報はHTMLによって伝えられます。
とはいえ、検索エンジンやAIのためにHTMLを書け、と言っているわけではありません。
「伝えたい情報を正確に、正しいマークアップで記述する」ことが目標です。
WEBサイトのすべての土台は「HTML」です。
「HTMLを正しく書く」という工程の重要性を意識しながら、是非コーディングの学習に取り組んでみてください。
まとめ
最近はコーダーになりたくても、WordPressを覚えたりAIツールを使ったり、いろいろな情報があふれてる中、学習方法の迷子になっている人も多いのではないか、と思いこの記事を書きました。
私がHTMLを覚えた頃はもっとシンプルな時代でしたが、それでも、その時習得した技術は今でも生きています。
コーディング技術の効率的な習得方法も分かりませんし、実際には遠回りな方法かもしれませんが、「コーダー」は「技術職」だとすると、やはり「基礎」を固めながら学習することは重要だと考えます。
cssの習得についてもそのうち記事を書ければと思っています。