初めまして、あるいはいつも読んでくださっている方はありがとうございます。私のブログでは、未経験からエンジニアを目指すうえでの学習記録や試行錯誤を綴っています。今回は、「HTML・CSS・JavaScriptを学んだ教材と進め方を全部見せます」というテーマで、私が実際に手を動かしながら学んだプロセスや使用した教材、そのときに感じたことを包み隠さずお話しします。
私自身、プログラミングを始めようと思った時、いろんなネット記事やYouTube動画を見ていました。ただ、「結局どの順番で学べばいいのか？」「独学で身につくのか？」と悩むことが多かったです。今振り返ると、私の場合は一番最初に触れた言語がHTMLとCSSで、その後にJavaScriptへ進みました。いわゆるWebの基本三種の神器のようなものですが、教材選びや学習の進め方を間違えると、思わぬ遠回りをしてしまうこともあると思います。
この記事では、私が実際に使った教材やWebサイト、そして学習時期ごとにどんなふうに学んでいたのかを時系列で振り返ります。初心者が最初に躓きがちなポイントや、そこをどうやって乗り越えたか、さらに複数の教材を使ってみての正直な感想も交えていくので、これから学習する人や、あるいは今まさに勉強している人の参考になればうれしいです。
1. なぜHTML・CSS・JavaScriptを最初に学ぶのです
私はWebエンジニアの勉強を始めるとき、「そもそも何の言語から手をつければいいのか」でかなり悩みました。PythonやPHPも人気だし、Ruby on Railsも聞いたことがあるです。スマホアプリを作るならSwiftやKotlinだってあるです。そんな中で、まずHTML・CSS・JavaScriptの三つをセットで学ぶことにしました。その理由は大きく二つあります。
一つ目は、WebサイトやWebアプリを作りたいと思ったとき、真っ先に必要となる基礎技術だからです。HTMLは構造、CSSは見た目、そしてJavaScriptは動きを担当します。これらを理解しておくと、たとえばWordPressや他のCMSを触るにしても、ある程度仕組みが見えるようになります。
二つ目は、環境構築が比較的ラクだという点です。ブラウザさえあれば実行できるので、最初からローカルサーバーを立てたり、Dockerを回したりといった手間が少なく済みます。もちろん、JavaScriptで本格的な開発をするならNode.jsを導入する必要がある場合もありますが、HTMLとCSSだけならメモ帳でも学び始められるのが魅力だと感じました。
結果的に、最初にHTML・CSSから入ったおかげで、Webの世界に対する全体像がなんとなく掴めるようになり、その後に他の言語やフレームワークを学ぶ際にも役立ったと実感しています。
2. 最初に手をつけたHTML・CSS学習: ドットインストールとコードジャンプ
2-1. ドットインストールで基礎固め
私がHTMLとCSSを学び始めたとき、一番活用したのはドットインストールです。3分程度の短い動画で、タグの書き方やプロパティの指定方法などをテンポよく学習できるのが魅力です。エディタを自前で用意しなくても、まずは画面を見ながら理解できるので、最初に雰囲気を掴むのにぴったりでした。
実際のところ、私はドットインストールをひと通り視聴しながら、自分のパソコンにインストールしたテキストエディタ（VSCodeなど）で同じコードを入力して確認するようにしていました。いくら動画で学んでも、自分で手を動かさないと記憶に残りにくいです。そこは「まず写経してみる」感覚で基礎を染み込ませた感じです。
2-2. コードジャンプでHP模写
ドットインストールでタグの構造や基本的なCSSを理解した段階で、次に取り組んだのが「コードジャンプ」を利用したHP模写です。コードジャンプは、デザインカンプをもとにHTML・CSSを組んでいく演習ができるサイトだったので、これは本当に実践的でした。私は見本のカンプと比べながらクラス名やCSSプロパティを考えて書いていき、「どれぐらい正確に再現できるか」をチェックしていました。
最初はかなり苦戦しましたが、模写コーディングをやると「レイアウトをどう組むか」「レスポンシブ対応をどうするか」「色やフォントの指定をどこでまとめるか」といったリアルな課題と向き合うことになります。これは、単にタグやプロパティを知っているだけでは解決できない実装力が身につくと感じました。
2-3. 書籍: 『HTML&CSSとWebデザインが1冊でしっかり身につく本』
途中で一度、書籍に頼りたいと思って買ったのが『HTML&CSSとWebデザインが1冊でしっかり身につく本』です。アナログな書籍のメリットは、紙に直接メモを書き込めることや、パラパラめくってどこに何が書いてあるか感覚的につかみやすいことだと思いました。
特にHTMLのセマンティックなタグの使い分けや、CSSのプロパティ一覧などは、本のほうが参照しやすいです。オンライン教材との併用で、理解を深めやすかったです。
3. JavaScriptで最初につまずいたこと
3-1. 動きのあるサイトを作りたいと思ったきっかけ
HTMLとCSSだけでもページは作れるのですが、やはり動きをつけたくなります。ボタンを押したらメニューが出てくる、スクロールしたらアニメーションが走る、そんな仕組みをJavaScriptで作れるのです。私は「自分だけのオリジナル感のあるサイトを作りたい」と思ったのがきっかけで、JavaScriptの学習を始めました。
3-2. 変数や関数の概念がわからない
最初は本当に苦戦しました。HTMLやCSSにはなかった“変数”や“関数”という考え方を理解するのに時間がかかったのです。文法的にも中括弧やセミコロン、イベントリスナーなど、知らないキーワードが多いです。
私が最初にやったのは、コンソールログに文字列や数値を出すだけの超簡単なスクリプトを何度も書くことでした。let message = 'Hello'; console.log(message);を打ち込んで結果を見たり、数字を足し算したり。とにかく小さいコードを動かすことで「変数に値を入れて操作する」流れを体感しようとしたのです。
3-3. ドットインストールと書籍『いちばんやさしいJavaScriptの教本』
JavaScriptの習得にもドットインストールは相変わらず便利でした。短い動画を見たあとに、自分で実際のコードを打ち込んで確認するという流れは、繰り返すほど理解が深まると感じました。
ただ、動画学習だけだと理解が追いつかない部分もあったので、書籍として『いちばんやさしいJavaScriptの教本』を手に取りました。これは初心者に寄り添った解説が多く、DOM操作やイベント処理などのサンプルが豊富です。何度も読み返しながら試しているうちに、だんだんと「何がわからなかったのか」が見えてきて、詰まりが解消されていきました。
4. 作品づくりでスキルを定着
4-1. 模写コーディング再び & 簡単なアプリの開発
HTML・CSS・JavaScriptをひととおり学んだ段階で、私が次にやったのは再びの模写コーディングと簡単なアプリ開発です。模写はコードジャンプを利用しながら、見た目だけではなく「ちょっとしたインタラクション」をJavaScriptで加えてみるよう工夫しました。メニューが開閉する、ページ内リンクでスムーズスクロールするなど、小さいギミックを盛り込むだけで実装力が鍛えられます。
同時に、シンプルなToDoリストアプリやメモアプリも作ってみました。テキストボックスで入力して追加、一覧に表示、削除ボタンを押すと消える、みたいな構造です。これだけでも、イベントリスナー、配列操作、DOM操作を総合的に使うため、「ああ、JavaScriptってこういう形で動いているんだな」と実感を得やすかったです。
4-2. GitHub Pagesで公開してモチベーションアップ
作ったアプリはローカルで動くだけだともったいないです。私はGitHub Pagesに公開して、友人に見てもらうことにしました。URLを共有すると「こんなの作ってるんだ。面白いね」と言ってもらえて、それが学習継続の大きな支えになりました。
また、少しずつ作品が増えてくると「ポートフォリオとしてまとめられるかも」と考えるようになります。最初は遊び半分でしたが、結果的に“自分が作ったものを外部に公開する”意識が芽生えたことで、コードの書き方も丁寧になったと思います。
4-3. フレームワークはまだ触らず
ReactやVue.js、Angularなどのフロントエンドフレームワークには魅力を感じていましたが、この段階ではあえて手を出しませんでした。まずは生のJavaScriptである程度の実装力をつけたほうが、後々フレームワークに移行するときも理解がスムーズだと思ったのです。実際、のちにReactを触ったとき「DOM操作はこうなるんだ」と比較するのに役立ちました。
5. もう少し上のレベルを目指す: UdemyとMDN
5-1. Udemyの講座で実務感をつかむ
ある程度自力でサイトを作れるようになると、もっと応用的なことを学びたいと思うようになります。そこで私はUdemyの有料講座を購入しました。セールのときに買うとリーズナブルに手に入ることが多いです。
Udemyの良さは、現役エンジニアや海外の人気講師が、実践的なプロジェクトを通じて教えてくれる点です。たとえばショッピングカート機能やシングルページアプリを作りながら学ぶような形式だと、コードの構成やGitを使った管理、エラー処理などをまとめて体験できました。やはり動画講義なので、学習の導線がスムーズです。
5-2. MDNで詳細を確認して理解を深める
Udemyや書籍だけで説明しきれない細部を調べるときには、Mozilla Developer Network (MDN)を活用しました。JavaScriptやCSSに関する公式リファレンス的な情報が網羅されているので、わからないメソッドやプロパティがあればとりあえずMDNを検索する、というクセをつけると安心です。
ときどき英語しかないページもありますが、Google翻訳を併用すればそれほど苦にならないです。英語リーディングの練習にもなるので、一石二鳥だと考えていました。
5-3. 情報発信で自分の頭を整理
学習したことをブログやSNSで発信するのも、私にとっては大きなモチベーションでした。特に初学者のうちは、つまずきやすいポイントが多いですが、それを言葉にしてまとめると「なぜつまずいたのか」「どうやって解決したか」が頭の中で整理されます。
たまに先輩エンジニアがコメントで補足してくれたり、同じように学習中の人と繋がれたりするのもメリットです。学習はどうしても孤独になりがちですが、コミュニティやSNSを活用すると孤立しにくくなります。
6. 私の学習ルートをまとめる
ここで、私のHTML・CSS・JavaScriptの学習ルートをざっくり振り返ります。
- ドットインストール（HTML/CSS）
- 短い動画で基本タグやプロパティを学ぶ
- 自前のエディタで写経して動かす
- コードジャンプでHP模写
- デザインカンプをもとに実際のコードを書いてみる
- レスポンシブ対応やクラス名の付け方を実践
- 書籍『HTML&CSSとWebデザインが1冊でしっかり身につく本』
- 紙の本を使ってリファレンス的に確認
- セマンティックなタグの使い分けなどを補強
- ドットインストール（JavaScript）
- 短い動画で変数・関数・イベント処理などを掴む
- 自分でコンソールログに出す小さな実験を繰り返す
- 書籍『いちばんやさしいJavaScriptの教本』
- ドットインストールだけでわからない部分を補う
- DOM操作やイベントのサンプルコードが役立つ
- 模写コーディング & 簡易アプリ作成
- JavaScriptでメモアプリやToDoリストを実装
- GitHub Pagesで公開してみる
- Udemy & MDNで応用学習
- 実務レベルのプロジェクトや詳細仕様を学ぶ
- 自分の足りない部分を補完
- 情報発信（ブログ/SNS）
- 学んだことを言葉にしてアウトプット
- コミュニティと繋がる
もちろん、これは一例に過ぎないです。学習スタイルは人それぞれですし、ペースや興味の方向も違います。大事なのは、自分が楽しみながら続けられる方法を見つけることだと思います。
7. 学びながら作る楽しさと、これからの方へのメッセージ
7-1. 「コードが動く」という喜び
HTML・CSS・JavaScriptを学んでいて一番楽しい瞬間は、自分が書いたコードがブラウザで思い通りに動いたときです。文字の色を変える程度でも、イベントで要素が消える動きを実装できても、どちらも「おお、できた」という達成感があります。この喜びがあるからこそ、多少のエラーにもめげずに学習を続けられるのだと感じました。
7-2. 複数の教材や手段を試すこと
私はドットインストールやコードジャンプ、書籍、Udemy、MDNと、さまざまな方法で学びました。一見遠回りにも見えますが、視点を変えて学習できるので、理解が深まると感じます。ある教材の説明がしっくりこなくても、別の教材を見れば「あ、こういうことだったのか」と腑に落ちるケースが多々ありました。
7-3. まだまだ勉強は続く
私もHTML・CSS・JavaScriptを一通り学んだとはいえ、Web技術の進化は速いですし、フレームワークや新しいAPIも次々出てきます。学びに終わりがないところが、むしろこの領域の面白さだと思います。今はReactやVue.js、TypeScript、サーバーサイドを含めていろいろ挑戦中です。
この記事が、これからHTML・CSS・JavaScriptを学ぶ方にとって少しでも参考になればうれしいです。自分の作りたいものや学びたい方向性によって学習ルートは変わってくると思いますが、「まずは動くものを作ってみる」「複数の教材を組み合わせて使う」という二つのスタンスは、多くの人にとって役立つはずです。ぜひ、楽しく手を動かしながらスキルを伸ばしていきましょう。
