ド素人が2ヶ月半学んだWebページ制作の基礎

Web系エンジニア転職に向けてスクールで勉強中の日々。先日、HP制作の基礎であるカリキュラムが終了しました！！！
全くの未経験から、html, CSS, JavaScriptを学んだ2.5ヶ月の挑戦を今日は振り返ります。
これから、エンジニア転職を目指す方や、検討中の方の参考になればと思います。

１．エンジニアの勉強をするきっかけ

未経験からエンジニアの勉強をはじめたきっかけは、収入を上げるためです。理由は、自分の周りにいる大切な仲間（家族、友人、取引先など）を守るため、仲間が活躍できる場を開拓するためです。まずは、自分が収入を上げて、時間やお金を自由に動かせる状態にする必要がありました。

自分がエンジニアになることで、僕の周りでスタートアップを経営している友人のHP制作を手伝えます。彼らいわく、HPを作りたくても頼める人が少ないのが課題のようです。また、エンジニアとして実績を作ることで、最終的には仲間に仕事を紹介できるようになると、彼らの活躍の場が広がると考えました。

そんな経緯があって、未経験分野での僕の挑戦がスタートしました！当時の目標は1.5ヶ月で基礎をマスターすることでした。

２．いざスタート！環境構築、html、CSS

12月1日ついに、HP制作の基礎を学ぶカリキュラムがスタートしました。はじめは、環境構築、html、CSSを学ぶことに。

スタートして驚いたのは、自分の通ったスクールは講義やテキスト一切なし！自分で練習問題をひたすらすすめる形式でした。
右も左もわからないなかで、IT系の用語や文化に慣れるのに苦労しました。具体的には、html, CSSの構文はもちろんのこと、わからないことはGoogleを駆使して自ら調べる前提でした。

最初の半月は、とにかくコードを書いて、見た目を見て、調べて、修正しての繰り返し。見た目がお手本と崩れるたびに、CSSと格闘していました。気づいたら、カフェで数時間もたっていることはざらでした。

この頃気づいたのは、完成度100%でなくても、早くサポーターに質問することでスピード解決できることでした。完璧主義はとにかく時間がかかるので、早い段階で質問することで、乗り越えてきました。

３．感覚をつかんだワイヤーフレーム、レスポンシブ対応

つづいての単元は、HPのサンプルページを見ながら、コーディングする演習でした。年末年始の10連休サポート休暇をはさんだので、1ヶ月近くかかりました。

学ぶ中で気づいたのは、いきなりコードを書かずに、手書きのワイヤーフレームで頭を整理することでした。全体像をつかんでから、htmlを書いていくことで、課題がスムーズに進むようになったと実感しました。

しかしながら、同時に新たな問題点も浮上し…
レスポンシブ対応（※デバイスによって画面幅が変わっても表示が崩れないくすること）につまずく日々。あっという間に、年末が近づき、焦っていたのがこの時期です。
サポーターへ質問したことで、レスポンシブ対応のコツをつかみ、ようやく突破できました！

この期間で、サービス紹介、役員紹介、会社概要、ヘッダー、フッターなどの会社HPの基礎的な部分のhtml, CSSはマスターできました。

４．次なる難関JavaScriptの勉強

つづいての項目が、JavaScriptの項目でした。ボタンクリック時の動作やハンバーガーメニューなどの制作に取り組むことに。

JavaScriptも全くの未知からスタートし、何度コンパイルしてもエラーに悩まされる日々でした。そのため、感覚をつかむのに余裕で半月は過ぎてしまったのは自分でも予想外でした。

大きな原因は、ひとくちにJavaScriptと言っても、色々な種類があることです。自分がマスターすべき種類(Vue.js)に集中せずに、色々YouTubeで動画を見てしまったことで、混乱を招きました。

５．迫る期限！ついにコンプリート！

開始から1ヶ月半は余裕で過ぎ、2ヶ月たとうとしていた頃、相当焦っていました。その突破口を開いたのは、AI(ChatGPT, Gemini(当時Bard))の活用でした。

本当にAIは優秀で、大抵のエラーは修正コードを教えてくれました。さらに、各部の動きも解説してくれて、Google検索と併用すると格段にスピードアップした印象があります。また、典型的な部分のコードは自分がタイピングするより、AIが書いた方が早いので、効率化にもつながりました。

さらに、学習のスピードを加速させたのは、突如現れたライバルの存在です。勝手にベンチマークにしたことで、ライバルが自分より先の単元に進むことがSlackでわかるたびに、スピードを上げるきっかけに。

ついに、当初予定から1ヶ月遅れの2月9日で基礎カリキュラムコンプリートを達成しました！

６．さいごに

全くのエンジニア未経験の僕がスクールで学んだ2.5ヶ月を振り返ってきました。決して順調ではなかったものの、多くの学びがありました。
html, CSS, JavaScriptの使い方はもちろんです。それ以上に大きかったのは、調べ方、サポーターへの質問の仕方、AIの活用の仕方を学んだことです。

これから、模擬案件が始まります！2ヶ月の学習後に、ついにWeb系エンジニアとしてデビューできます！

早くスタートラインに立つためにも、案件をともにするPJチーム全員で、最速で駆け抜ける挑戦をしていきます！

今日はこの辺で。ありがとうございます。