投稿日:2021/11/06 最終更新日:2022/06/07
【完全版】教員からエンジニアになれたプログラミング勉強法
今回は未経験からエンジニアに転職をするためのプログラミング勉強法を解説します。
未経験でエンジニア転職を考えている人向けなので教員の方だけでなく、色んな職種の人にも参考になる内容となっています。
今回紹介する勉強方法は実際に私が転職に向けて積み重ねた勉強方法が中心となっています。
巷で話題のオンラインスクールに通ったこともなく完全独学の勉強法です。
それに加えてエンジニアに転職した後に「これもやっておくべきだった」と思うことも盛り込んでいますので、この内容を正しく実践していけば面接時や入社後も未経験だとしても使える人材だとアピールすることが出来ます。
管理人の実績
まず、読者であるあなたに信用してもらえるよう私の実力や経歴について簡単にお伝えします。
実力に関しては、まずこのサイトは私個人で作成をしました。
もちろんエンジニアにはすでになっているので誰かに手伝ってもらったり、業務委託の形で作成をしてもらってはいません。
基本的にはWordPressを用いて自作テーマを作成をしました。
初心者向けに簡単に説明をすると、まずHTMLやCSSを使ってサイトの形を作ります。
それだけでは記事の投稿も出来なくもないですが大変なので、PHPに書き換えることでWordPressの管理画面から記事を書くとデータベースに保存出来る仕組みを活用してサイトを作っています。
これは特に難しい技術などを用いてはおらず、しっかりWordPressについて学習をすれば扱えるようになります。
また、トップページや投稿ページなどのテンプレートファイルをSCSSでスタイリングしてコンパイルしたCSSを反映させています。
(少し不具合のある所もあるのでこれから修正をしていく予定です、気になるところがあればお問い合わせページからお知らせください)
ゴリゴリのエンジニアの方であればこれくらい簡単に出来ることなので、当たり前やと思われる方がいましたら申し訳ありません。
他にも現在ではJavascriptで色んなアニメーションを作成したり、複数ページで構成されたWEBサイト(静的サイト/動的サイト)を作成することが出来ます。
ちなみにエンジニアになろうと決心して勉強を始めた1年半ほど前は、
HP表示の仕組みやHTMLを全く知らない&書けないレベルでした。
（2020年1月当時）
では、どんな勉強を転職するまでにしたのかをざっと挙げると、
- ＜2020年1月〜2021年1月＞
- 【勉強スタート時のレベル】
- HTML,CSSを知らない
- ホームページの仕組みがわからない
- プログラミングは何で書けばいいかわからない
- 【やった勉強(転職時の到達レベル)】
- HTML(簡単なLPであれば見た目そのまま作れるレベル)
- CSS(HTMLと同じ)
- JQuery(基本的なアニメーションを実装出来るレベル)
- Bootstrap(レスポンシブサイトを組めるレベル)
- PHP(WordPressを覚えるために基礎は分かるレベル)
- WordPress(簡単なテーマなら作成出来るレベル)
- 【勉強時間(1年間)】
- 平日：3時間/日×5日＝15時間×4週＝60時間
- 休日：5時間/日×2日＝10時間×4週＝40時間
- 100時間/月×12ヶ月＝1200時間
ざっくりとこんな感じです。
教員は平日とても忙しいので睡眠時間やプライベートの時間を使って勉強時間に当てていました。
詳しい1日のルーティーンを紹介した記事も載せておきます。
到達レベルをまとめると、超複雑なアニメーションを作るとかでなければ大体のWEBサイトは作ることが出来るくらいのレベルでした。
結論
未経験だけどエンジニア（WEB系）になりたい人であれば、以下の内容で勉強進める方が良いです。
- 1-1. HTMLとCSSの基礎を覚える
- 1-2. 簡単なLPを3つ作る
- 2. LPをレスポンシブ化させる
- 3-1. JavaScriptの基礎を覚える
- 3-2. 3本のLPにアニメーションを実装する
- 4-1. WordPressの基礎を覚える
- 4-2. 自作テーマを作ってみる
補足しておくと「半年でプログラマーに～」とか「3ヶ月で〜」とか広告を出しているプログラミングスクールなどがありますが、
まずそんな短期間で活躍出来るエンジニアにはなれないと思ってください。
実際に業務として使える人材になるためには働いて案件に触れないと覚えられないこともあるので覚えることはたくさんありますが、ここでお伝えする勉強法は短くても1年ほどの勉強期間を見積もっていた方がいいです。
私は今ではある程度仕事でもコードを書くようになり力をつけていますが、全然活躍出来ているとは思っていません。
しかも、恥ずかしいことに入社前に1200時間勉強したことで結構自信を持ってエンジニアの世界に飛び込みましたが、先輩エンジニアとのレベル差が天と地ほどあると痛感した経験があるので、きっぱり言いますが甘い世界ではないです。
あくまで今回の記事は未経験でも雇ってもらえるまでの実力をつけるための勉強方法をお伝えします。
1-1. HTMLとCSSの基礎を覚える
一番最初にHTMLとCSSを覚えましょう。
まずはHTMLとCSSはどんなものなのか紹介します。
HTMLはハイパーテキストマークアップランゲージ(Hyper Text Markup Language = HTML)といい、簡単に言えば、文字をサイト上に表示するための言語です。
ちなみにHTMLはプログラミング言語ではなくマークアップ言語というので、HTMLが書けるようになった段階でプログラミングが出来ている気になっていると恥ずかしい思いをするので気をつけましょう。
CSSはカスケーディングスタイルシート(Cascading Style Sheet = CSS)といい、簡単に言えば、文字に色や背景色を付けるための言語です。
これも、プログラミング言語ではなくスタイルシート言語と言います。
なぜこの2つから勉強するかというと、一番学習難易度が低くWEBエンジニアであれば必ず仕事で利用することがあるからです。
一番難易度が低いと言っても、正直最初は結構難しく感じると思います。
ただ、どのエンジニアも最初は難しくて理解するのに時間がかかったはずなので、気にする必要はありません。
そして、まずは基礎を勉強すべきと言いましたが、無料で勉強or少しお金を払って勉強の2パターンがあります。
無料で勉強をしたいのであれば、MDNのチュートリアルを読みましょう。https://developer.mozilla.org/ja/docs/Web/Tutorials
MDNはMozillaというFireFoxを制作した会社が運営するWEB開発者向け公式サイトです。
世界各国の言語で翻訳されており、多くのエンジニアが訪れるサイトなので情報の信頼性が高いです。
結構解釈が難しい部分もありますが、内容がしっかり網羅されているので覚えられそうだなという人であればこれで十分です。
このサイトのチュートリアルにある入門レベルを最低3回ほど読んである程度覚えたなと思うくらいまででOKです。
少しお金を払っても大丈夫だという人はProgateかドットインストールがおすすめです。
Progateは実際にエディター(コードを書くためのPC上にあるノートみたいなもの)でコードを書きながら基礎を学ぶことが出来るので実践的な学習をすることが出来ます。
また、間違えてしまった時はちゃんとエラーで教えてくれますし、どうしても分からない時はヒントも出してくれるので、手を動かして覚えたいよという人にはオススメです。
料金も有料コースなら月1000円で全てのコースが学べるので費用もそんなに掛かりません。
しかも、HTMLやCSSであればほぼ基本的な内容を無料で勉強できます。
Progate｜プロゲート
https://prog-8.com/
ドットインストールは講師の実演動画を見て学習を進めて行きます。
実際にエディターを自分のPCにインストールしたりと準備が必要ですが、一番のポイントは動画の本数がかなり多いことです。
Progateと比べるとかなりいろんな言語を学ぶことが出来るので、将来的に他にもたくさん学んでみたいよという人にいはオススメだと思います。
こちらも月1000円ほどで全コースが受講出来るので費用は抑えられます。
ドットインストール-3分動画でマスター出来る-
https://dotinstall.com/
個人的には全くの初心者の人であれば、Progateの方が初心者向けにしっかり作られていてポイントの説明や答えなどをすごく簡単な内容に噛み砕いて解説してくれるので、途中で投げ出さずに進めやすいかなと思います。
ドットインストールは少し話の難易度がProgateより高く扱う言語も多種多様にあるので、ある程度コードを書くことに慣れてきてもっと勉強したいよという人におススメです。
ここで、無料でも有料でも一番のポイントをお伝えします。
- コードは自分で書かないと覚えない
一番やってはいけないのが基礎をずっと繰り返してしまうこと。
初めは完璧に覚えないといけないと感じて少しでも忘れたらやり直す人が多いですが、ゴールは「自分の頭で考えてコードを書けるようになる」ことなので、基礎はちゃっと終わらせて実戦練習である次のLP制作に進みましょう。
1-2. 簡単なLPを3本作る
正直、ここが一番キツイです。
おそらくここでエンジニアになることを諦める人が98％くらいいると思っています。
ここを乗り越えるかどうかでエンジニアを目指せるか分かれてきます。
とにかく歯を食いしばって頑張りましょう。
まず基礎を覚えただけなので、何をどう書いたらいいか分からないと思います。
なので、この時点で全然出来なくても問題ないです。
先ほどの基礎を押さえたらLP制作を実際にやりましょう。
LPとはランディングページといい「お問い合わせページ」や「アーカイブページ」といった複数ページで作られるサイトではなく、1枚のページしかないサイトを指します。
よく商品の販売促進をするためのページとして作られていて、縦長のページになっているのが特徴です。
LP制作は「LP 模写 初心者」で検索して出てくる題材ならなんでもOKです。
とにかくこの時点では完成させることが目的ではなくコードを書くことが目的なので、簡単な内容だと取り掛かりやすいです。
あと、初めから綺麗なコードを書くことは意識せず汚くても見た目通りのLPを作ることを意識してください。
綺麗に書こうとすると100%挫折します。
そして、次のことをルールとして守ってください。
- 答えはカンニングしない
- 見た目通りに作る
- 分からなかったらやり方をググる
答えを途中でカンニングしないでください。
なぜなら、答えを見てしまうと「自分で考えて書く力」が養えないからです。
カンニングをしたまま何本書いてもその時は楽なだけで長い目で見たときに実力はつかないと思ってください。
最初はどんなに苦しくてもカンニングは絶対せず自分で調べながら作っていきましょう。
見た目通りに作ることも心がけましょう。
見た目は1pxでもズレることのなく、フォントも同じ種類で色も違うことのないように照らし合わせて作ってください。
模写コーディングをする際はデザインデータなどはありませんので、以下のChrome拡張機能が非常に便利です。
Page Ruler Redux（ページ上で何pxなのか測ることが出来る）
https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ja
WhatFont（フォントのサイズ、種類などを調べられる）
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
Colorzilla(サイト上にある特定の色を調べることが出来る)
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
見た目通りに作ることは最初の時点で難しいですが、やっていくうちに見た目通りのデザインを自分で書けるようになってくるのでとにかく模写をたくさんしましょう。
分からなかったらやり方をググるようにしましょう。
私もエンジニアになった以後も分からないことがあったらたくさんググります。
調べることは恥ずかしいことではまったくありません。
大切なのは最終的に理想の形にすること。
カンニングをして答えを見ない限りはヒントとなるCSSのセレクターやサンプル集などを積極的に調べましょう。
最初は調べるだけでめちゃくちゃ時間がかかると思いますし、作り終えるまでに1週間〜2週間かかる可能性がありますが、答えをカンニングするよりは全然いいので気にせずじっくりググりながら自分の力で作り上げましょう。
最後、1本LPが完成したら答え合わせをしましょう。
元のサイトをじっくり見つつ照らし合わせたり、どういう実装をして作られているのかを確認して自分のやり方と答えを比べてみることが重要です。
そして、答えの実装方法に書き換えてみると新たな理解が生まれてより深い理解へと変わっていきます。
以上の流れを3本繰り返しやりましょう。
ここまでやり切れば相当な力が付いてきているはずです。
2. LPをレスポンシブ化させる
今度はレスポンシブについて学びましょう。
レスポンシブとはスマートフォンでも綺麗に表示出来るよう調整することです。
前回までの模写コーディングではPCだと見栄えは問題ないと思いますが、スマホで見ると読みにくいと思います。
これはレスポンシブ化をしてスマホでもしっかり見れるように修正していないためです。
今ではPCよりもスマートフォンでサイトを見る人の方が多いです。
日本のWEB閲覧での端末使用比較
https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
なので、レスポンシブ化を覚えなければWEB制作が出来るとは言えません。
ここでは、上記で作成した3本のLPを活用しますが一旦置いておきます。
まず「1-1. HTMLとCSSの基礎を覚える 」で紹介したMDNやProgateを開いてレスポンシブの基礎を覚えてください。
内容としては@media screen and (max-width: 〇〇〇px){}と紹介されているものです。
- MDN：レスポンシブデザイン、メディアクエリーの初心者向けガイド
- Progate：HTML & CSS 上級編～HTML & CSS Flexbox編
- ドットインストール：詳解CSS レスポンシブウェブデザイン編
3周ほど繰り返して覚えたら切り上げましょう。
基礎を覚えたら実践あるのみです。
先ほど作った3本のLPそれぞれの答えもレスポンシブ化されているはずなので、スマートフォンで答えのサイトを見ながら見た目通りに調整しましょう。
ルールは先ほどと同じです。
- 答えは途中で絶対に見ない
- 見た目通りに作る
- 分からなかったらやり方をググる
完成したら同じく答え合わせをして照らし合わせたり、実際に答えを試してみたりと自分と答えの違いを埋めつつ、理解が落とし込めるまで続けてください。
3-1. JavaScriptの基礎を覚える
いよいよプログラミング言語のJavaScriptをやっていきましょう。
JavaScriptは今まで作ってきたLPなどのページにアニメーションを付けることが出来ます。
例えば、画像が自動で横に流れて違う画像を表示させるスライドショーなどはJavaScriptで作られています。
現代のWEB制作ではアニメーションのないサイトはあまり見かけないくらいJavaScriptが使われていることがほとんどなので、絶対に勉強しておくべきです。
また、いろんなサイトをご覧になっていると思いますが、「初心者はJavaScriptよりJQueryを勉強すべき」と書かれているサイトを見ている人もいると思います。
絶対にJavaScriptを勉強しましょう。
なぜなら、私がJQueryだけを勉強してエンジニアになった結果、JavaScriptを勉強してなかったことを後悔したからです。
JQueryはフレームワークと言ってJavaScriptをすごく簡単に書けるように作られたJavaScriptライブラリです。
学習レベルで言えばJQuery＜JavaScriptなので勉強しやすいですし数年前であればJQueryのみでもやっていくことは出来たのですが、現在はJavaScriptをしっかり学習した上でReactやNode.jsという技術を使ってWEB制作をすることが当たり前に行われているので、トップのエンジニアと肩を並べて働くことを目指しているのなら、JavaScriptの方をしっかりやった方が早い段階で活躍出来る可能性が広がります。
それでも、JQueryはまだ現役で使われているのも事実です。場合によっては転職先でJQueryのアニメーションを実装することもあると思います。しかし、上記のことを踏まえてJavaScriptをしっかり学んだ人であればJQueryはすぐに覚えられるので、今のうちにJavaScriptをしっかり勉強しておきましょう。
ただ、初めは難しいと思いますし私も数十回心が折れかけたことがあります。
しかし、続けて勉強しているうちに感覚でよく使う記述やパターンを覚えて来るので、諦めずに勉強を続けることが重要です。
基礎は同じくMDNかProgate、ドットインストールで勉強しましょう。
- MDN：Javascript チュートリアル入門レベル
- Progate：JavaScript I
- ドットインストール：はじめてのJavaScript
HTMLとCSSと違い、学習コストが少し高いので5回ほど繰り返し勉強して基礎を染み込ませて行きましょう。
5回ほどやったら実践へ移って行きましょう。
3-2. 3本のLPにアニメーションを実装する
いよいよJavascriptの実践です。
ここでは「2. LPをレスポンシブ化させる 」で修正した3本のLPを使います。
今回は以下の3つのアニメーションをLPに実装して行きましょう。
- スライドショー
- タブメニュー
- ハンバーガーメニュー
この3つはよくWEB制作をする際に仕事で使うことが多いので、出来るようになっておくと面接のアピール材料になります。
スライドショーは先ほど説明したような画像が自動で横に流れてきて違う画像を表示させるアニメーションです。
スライドショーがイメージできない人は以下のサイトを一度ご覧ください。
https://lab.risewill.co.jp/notes/web-design/images-slideshow
こちらもどんなスライドショーでいいので一つ選び、LP内の好きな部分に作ってみましょう。
ここでのルールも同じです。
- 答えは途中で絶対に見ない
- 見た目通りに作る
- 分からなかったらやり方をググる
スライドショーの反映はLPのどこでもOKです。
使用する画像がない場合は以下のサンプル画像を使ってください。
サンプル画像
完成をしたら答え合わせをしてゆっくり確認の時間を取りましょう。
大事なのは自分の作ったものと答えの違いを見つつ、良い書き方を発見して積み上げること。
この発見こそがプログラミング学習で最も成長出来る瞬間です。
ここで、もう1種類のスライドショーに挑戦してもOKです。
次はタブメニューです。
タブメニューはタブというボタンをクリックすると中身の表示を切り替えることが出来るアニメーションです。
タブメニューがイメージできない人は以下のサイトを一度ご覧ください。
https://coco-factory.jp/ugokuweb/move01/5-4-1/
※こちらのサイトはJQueryで実装しているのでタブメニューとは何かだけ確認をしてください。
こちらも見た目を確認したら自分の手を動かして形にしてみましょう。
完成したら答えを確認してじっくり理解に落とし込んでください。
タブメニューを実装する位置はLPのどこでもOKです。
次はハンバーガーメニューです。
ハンバーガーメニューはスマートフォンでサイトを見たときに右上のメニューが3本の横線のアイコンに切り替わり、押すとメニューが表示される仕組みです。
イメージ出来ない人はこちらのサイトを一度見てください。
https://knoweb.net/html-css/css/responsive-hamburgermenu/
ハンバーガーメニューもデザインは何でもOKです。
位置はヘッダーの右側(画面右上)に作りましょう。
流れは「答えを見ずに作成」→「答え合わせして自分のとじっくり比較」です。
ここまでやり切った後でまだ理解が足りていないなと思う場合は復習をしてもOKです。
一度自分である程度納得するまで手を動かして覚える方が自分の成長につながります。
完了したら次に進みましょう。
4-1. WordPressの基礎を覚える
次はWordPressを勉強して行きます。
WordPressはCMS(コンテンツ管理システム)といいブログや企業のコーポレートサイトを作る時によく用いられます。
なぜWordPressを使うのかというと、例えば「ここの少し文章を変えたいなー」とか「この記事の画像を変えたいなー」とかコーポレートサイトでは季節や時期によって小規模な修正を加えて行きます。
しかし、普通の会社員がコード上から修正してサーバーに上げて表示させるのは難易度が高くて現実的ではないです。
ここで登場するのがWordPressです。
WordPressは管理画面という色んな機能を集めたページをブラウザ上で操作出来ますし、文章もWordのように簡単に修正が出来ます。
つまり、WordPressはサイト編集を素人でもいつでも簡単に出来るようにするためのソフトウェアということになります。
WEBエンジニアでサイトを作りたい人は扱えるようになると仕事の幅が増えます。
WordPressの学習は少しお金が掛かりますが以下の本がオススメです。
この写真は私が実際に使用していた参考書です。
下に購入先のリンクを貼っておきますね。
この参考書の良いところはこの1冊でWordPressの学習を完結させられることです。
これ本以上に求められる知識は現状必要ないので、この1冊で学習を進めて行きましょう。
まずはこの本のチャプター2までを2周ほどじっくり読んでいきましょう。
完璧に覚える必要はありませんが、作り方を頭でイメージしながら読んでください。
2周ほど読んだら次に進みましょう。
4-2. 自作テーマを作ってみる
チャプター2まで読んでいたらわかると思いますが、
簡単な自作テーマはチャプター2までの内容で作成できます。
なので、読みながら付属しているサンプルファイルを使ってテーマの作成をしていきましょう。
ここでは見ながらで大丈夫なのでコピーを作る気持ちで進めて行きつつ、作業イメージを頭で作りながらやってください。
オススメは最低でも2周繰り返す方がいいです。
1周目は見ながら→2周目はあまり見ずにという感じでやると頭に残りやすくなります。
もし、ここで理解が足りていないなと感じた場合は基礎に戻って1周読みましょう。
そして、もう1回自作テーマを作ってみると理解が2倍増になるはずです。
ここまで来ると未経験でも伸びしろのある人材に成長出来ているはずです。
まとめ
一度流れをおさらいしておきましょう。
- 1-1. HTMLとCSSの基礎を覚える
- 1-2. 簡単なLPを3つ作る
- 2. LPをレスポンシブ化させる
- 3-1. JavaScriptの基礎を覚える
- 3-2. 3本のLPにアニメーションを実装する
- 4-1. WordPressの基礎を覚える
- 4-2. 自作テーマを作ってみる
この記事で紹介している内容を最初から最後までやると、最低でも1年は掛かります。
ただ、プライベートの時間があまりない教員時代にしていた勉強の話なので、もう少し余裕のある社会人や大学生の方ならもう少し早い段階で習得できるかもしれません。
ただ、ゴールは「自分でコードを書けるようになる」ことなので楽な道に行かないよう自分をストイックに追い込んで進めてください。
「答えは見ずに出来るまで調べてやる」という気持ちでやれば、時間はかかるけど途中で答えを見てしまうより、理解定着度とその後の成長に良い影響を与えるはずです。
ここで解説している内容は私の経験とこうしておけばよかったと思うことをまとめてますので、実践すれば間違いなく力になるはずです。
今後も加筆修正をしていきますので、ぜひ定期的にチェックをしてみてください。
以上、「【完全版】新卒教員からエンジニアになるためのプログラミング勉強法」でした。
