はじめに
以前 HTML とか JavaScript （2020年の人気言語、嫌われる言語でもあるようです）に関する記事をいくつか書いていたのですが、肝心の「HTML/JavaScriptをどうやって勉強しているのか」について書いていないことに気づいたので、復習も兼ねてこの記事で公開したいと思います。（参考：JS Best of the year 2020）
基本方針
基本方針は単純で、「技を盗む」です。もちろん、CSS のデザインは盗みません（テンプレートやジェネレータを使えばそもそも盗む必要はないですよね）。「この部分は JavaScript で書くとこのように効率化できるんだ」「こういう便利なプラグインがあるんだ」「<head>の部分はこうすればいいのか」というのを勉強していきます。
とにかく何でもいいからプログラミングをしよう
もちろんHTMLの各種タグを覚えるにはHTMLを勉強した方がいいのですが、多くのプログラミング言語に共通する仕組み（例えばクラス・関数・配列と繰り返し処理）を覚えるには他の言語で慣れておくのも有効だと思います。ただ汎用性の高い言語ほど学習目標を定めにくいので（その気になれば何でもできてしまうため）、方向を定めやすいのがHTML/JSの利点でしょう。
寄り道せず、HTMLの学習だけに注力したい方々のために「HTML Programming Language」なるものも現れました。軽く拝見しましたが、算術演算以外は勉強になると思います。
学生時代に授業でC/C++をやったことがあるという方も少なくないかもしれませんが、そういう場合はEmscriptenというJSへの変換ツールがあるので（解説記事）、C/C++と対比しながらJSを勉強するという手順もあると思います。最近C++20とか新しい学習用サイトが登場したのでこれを思い出しました。
すぐに簡単なHTMLコードを作ってみよう
以前の記事で紹介したHTML変換サイトを使えば、すぐにHTMLコードを生成できるので、MS Word と対比しながらHTMLの書き方が分かります。
-
https://wordtohtml.net/(有料の Pro 版もあります) https://wordhtml.com/
初心者向けのHTML学習サイトも参考になるでしょう。
-
巣ごもり中にプログラミングに挑戦！初心者向け「無料学習ツール」4種
実例を見てみよう
時々、ソースコードが公開されていなくて揉め事になることがあります。
しかし、HTMLにおいてソースコードが公開されていないということはあり得ません（ソースコードが公開されないのはウェブサイトが非公開の場合です）。ウェブサイト上で右クリックして「ソースを表示」を選択すれば（もしくはブラウザ上でCtrl+Uとすれば）すぐにソースコードが見えます。元のサイトとソースコードを対比して書き方が学べます。
ウェブサイトを試作してみよう
これまで、「HTML/JavaScript を勉強したけどウェブサイトは作らない」という方に何人かお会いしました。知識は活用してこそ身につくものなのでぜひ試作しましょう。以前の記事で紹介した Google Sites ならサイトの公開範囲を制限できるので他人の目を気にせず試作できます（もちろん無料です）。
エディタを使おう
HTMLはメモ帳よりもいろんな補助機能が使えるエディタで書くべきだと思います。HTML向けで無料で使えるものですと
- Visual Studio Code (Microsoft が開発、汎用)
- Sublime Text
- Brackets (Adobe が開発、ウェブ系が中心)
等があります。これらを比較した記事を書いているのでこちらもご覧ください。
たくさんお金をかける必要はない
もちろん端末とインターネット接続が必要なので全くお金がかからないわけではないのですが、高価で分厚い教科書を買う必要はないですし（買うにしても古本屋で十分、ただし古すぎる本には要注意）、専門学校や職業訓練学校に通う必要はありません（以前こちらで書きました、参考：なぜ大学生はプログラミングが上達しないのか、プログラミングスクールに通う意味はありますまいか）。ちなみに最近だと Tech Camp, Oracle LiveLabs, Microsoft Learn というのもあるようです。
参考文献
「HTML5辞典」が手元にあったらちょっとした確認をするときに便利かもしれません。JavaScript 関連ですと、Eloquent JavaScript とかJavaScript Primerが著者自身によって無償公開されています。WEBの人なら押さえておきたいツール＆サービス50選、Web制作の常識が変わる便利なオンラインツール48選とかあなたがまだ使っていないかもしれないHTML5の便利機能10選もご覧ください。
参考: 技術情報サイト
関連するQiita記事
- オンライン技術書プラットフォームの boosty を使用してみた！
- もっと気軽にアウトプットできる技術ブログサービス「Qrunch（クランチ）」をリリースした【個人開発】
- 高校生が本気でサイト読み込み速度の最適化に取り組んでみた
- 【Qiigle】というQiitaの記事を検索するサービスを作りました
- Web開発のためのOSSトレンドの調べ方
- 初心者がCodePenのサンプルを駆使したら、プロフィールページを良い感じに作れた話。
CSS関連
- あなたのCSS力の助けになってくれる素晴らしいWebサイト12選
- 全米が待ち望んでいた超便利なTailwind CSSツール10選
- フロントエンドコーディング時によく利用するジェネレーターサイト（CSS以外も含む）
JS関連
- JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ
- ブラウザ上でJavaScriptの実行ができるサービスまとめ（JSを試すには便利かも）
- ノンフレームワークなJavaScriptでもDOMとうまく付き合う方法
- コーダーが独学JavaScriptを駆使してHTMLメルマガの制作業務を自作ツールで駆逐する話
- JavaScript学習ロードマップ
- JavascriptとReactの学習ロードマップ
- 英語が苦手の僕がどうしてもやりたい英語js教材がありました
- 大嫌いだったJavaScriptがプログラミングの楽しさを教えてくれた
- 【JavaScript】分からない部分まとめてみたら最強だった件
- JavaScriptの勉強でつまづいたこと3選