私がどうやってHTML/JavaScript を独学しているか

10984 ワード
GoogleSite HTML HTML5 JavaScript githubpages HTML テキストリンク

はじめに

以前 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学習サイトも参考になるでしょう。

しかし、HTMLにおいてソースコードが公開されていないということはあり得ません（ソースコードが公開されないのはウェブサイトが非公開の場合です）。ウェブサイト上で右クリックして「ソースを表示」を選択すれば（もしくはブラウザ上でCtrl+Uとすれば）すぐにソースコードが見えます。元のサイトとソースコードを対比して書き方が学べます。

ウェブサイトを試作してみよう

これまで、「HTML/JavaScript を勉強したけどウェブサイトは作らない」という方に何人かお会いしました。知識は活用してこそ身につくものなのでぜひ試作しましょう。以前の記事で紹介した Google Sites ならサイトの公開範囲を制限できるので他人の目を気にせず試作できます（もちろん無料です）。

エディタを使おう

HTMLはメモ帳よりもいろんな補助機能が使えるエディタで書くべきだと思います。HTML向けで無料で使えるものですと

等があります。これらを比較した記事を書いているのでこちらもご覧ください。

たくさんお金をかける必要はない

もちろん端末とインターネット接続が必要なので全くお金がかからないわけではないのですが、高価で分厚い教科書を買う必要はないですし（買うにしても古本屋で十分、ただし古すぎる本には要注意）、専門学校や職業訓練学校に通う必要はありません（以前こちらで書きました、参考：なぜ大学生はプログラミングが上達しないのか、プログラミングスクールに通う意味はありますまいか）。ちなみに最近だと Tech Camp, Oracle LiveLabs, Microsoft Learn というのもあるようです。

参考文献

「HTML5辞典」が手元にあったらちょっとした確認をするときに便利かもしれません。JavaScript 関連ですと、Eloquent JavaScript とかJavaScript Primerが著者自身によって無償公開されています。WEBの人なら押さえておきたいツール＆サービス50選、Web制作の常識が変わる便利なオンラインツール48選とかあなたがまだ使っていないかもしれないHTML5の便利機能10選もご覧ください。

参考: 技術情報サイト

関連するQiita記事

CSS関連

JS関連

代替JavaScript言語など

TypeScript

HDu 1907 John(マッチ取りゲーム)
(一)初試験Matlab Guiの配列参照