【独学】未経験からWebエンジニアになるプログラミング勉強法【2022版】

プログラミングの勉強法を検索して、初心者向けのマトモな記事が少ないなーと感じたことありませんか？

この記事は、

Webエンジニアになりたい
独学でプログラミングを学びたい
Progateを終えたが次に何をしたら良いか分からない

そんなあなたに向けた記事です。

未経験からWebエンジニアになる事は可能です。

ただ、３ヶ月の勉強だけで即戦力の稼げるエンジニアになれると思っているのなら、少々認識を改めた方が良いかもしれません。

プログラミング学習法をなぜ書くのか？

Webエンジニアになる方法を「日本語」と「英語」で検索してみて下さい。

日本は、「プログラミングスクール」を勧めるライター（てか、ライターって、プログラミング勉強してるのかな？？）による記事が多いのに対し、英語では「実践的」な内容が上位を占めます。

例えば、「Roadmap to becoming a web developer 」とかですね。

ただ、初心者の段階でここに辿り着くのは難しいと思います。また、仮に辿り着いても、具体的に何をして良いか分からず途方に暮れてしまうかもしれません。

なので、この状況はマズイなと思い、書くことにしました。

プログラミング学習プランの神動画

自分が神と崇めている１人。「Traversy 」さんが、「Web Development In 2021 – A Practical Guide」の神動画をアップしてくれてますね。

フロントエンド寄りが専門ですが、誰にでも分かりやすく解説されています。

圧倒されるかもしれませんが、全部やる必要は無いですし、適切なメンターを付けるのはむしろやるべきです。

ただ、こういう全体像や、正しい情報をプログラミング初学者の頃から持っておけば、変な情報商材や、スクールに騙さる事は無いはずです。

人を盲目的に信じる前に、まずは自分の知識を増やしましょう。

【神本】ソフトウェア開発者の完全キャリアガイド

Webエンジニアをキャリアの一つとして考えている人は、悪い事は言わないので、「ソフトウェア開発者の完全キャリアガイド」をすり切れるまで読んで下さい。

あなたが思いつくような疑問は全て書いてあります。

ソフトウェア開発者になるにはどうしたら良いか？
効率的な技術スキルの身に付け方
どのプログラミング言語を選ぶべきか？
大学、プログラミングスクール、独学のどの方法を選ぶべきか？
未経験者の職の見つけ方
給料の交渉の仕方
フリーランスと会社員のどちらを選ぶべきか？
独立する場合はどんな準備をするべきか？

3,000円しますが、変な所にお金を使うより「100倍」有効なお金の使い方になることを保証します。

プログラミングは最強のビジネススキル

IT業界は、世界で最も賢く、稼いでいる人が集まっている業界です。

ビジネスを始めるのに、大きな資金を必要としませんし、国境も容易に越える事が出来ます。

仕組み化して数百人、数千人に相当する労働を１人でする事も出来ます。

ビジネスをするのに、これ以上の基礎スキルはありませんよね？

ただ、「技術」は「ビジネス」のあくまでも１要素です。「技術」だけを極めても、「ビジネス」を学ばないと、一生人に使われて終わります。（別にサラリーマンも気楽で良いですが）

「ビジネス」を学ぶのに一番の近道は、「経営者」から学ぶ事です。経営の本質は、人間に対する深い理解なので、ITに限らず、異業種からでも沢山学べます。

詳しい事はニュースレターでも解説しているので、興味がある人は登録してみて下さい。

0.学習を始める前に意識する事

プログラミングを「習慣」にする
全体像や目的を意識する
コードを沢山「書く！」
いきなり「完璧」を目指さない
良質なコードを沢山読む
早い段階から就職活動を始める

初心者の内は、プログラミングを「習慣」にし、コードを沢山書く事が大切です。

技術書や動画を見るだけで学習しようとするのは、水泳の仕方を本やビデオで何度も見て、プールに入らずに泳げるようになろうとするのと同じです。

必ず、手を動かしながら学習して下さい。

「インプット３vsアウトプット７」位になるのが理想です。

コードを書いていく中で、指が自然と覚えますし、腑に落ちる瞬間がやってきます。

ある程度、上達してきたら、良質なコードを沢山読みます。技術が生まれた背景、目的を合わせて学ぶ事で理解を深めていきます。

MENTAなどで、現役エンジニアの方のアドバイスを貰うのも良いです。

最初は中々上達しないと感じるかもしれませんが、毎日続ける事で少しずつ上手くなっていくので、めげずに頑張りましょう！

プログラミング学習オススメリソース

プログラミングスクールはどうなの？

お金に余裕がある社会人で、モチベーション管理や、学習サイクルを作りたい人は、良いです。実際、自分もプログラミングスクールに１回試しに通ってみました。

ただ、

「高いお金払ってプログラミングスクールに通えば、プロが手取り足取り教えてくれて３ヵ月で高額収入で手に職付いてリモートできる！」

なんて期待を持っているのなら、100％辞めた方が良いです。

逆説的に聞こえるかもしれませんが、プログラミングスクールで成功する人は、スクールがなくても成功する自走能力の高い人です。

プログラミングスクールの報酬目当てにアフィリエイトするサイトが多数ありますが、「全ての人が通うべき」という事は絶対にありえません。

（Google広告出して、プログラミングスクール比較を上位表示させてるサイトもあるので、儲かるのでしょう。）

PS、「働きたくない」のキーワードの１位が「プログラミングスクール」になってて話題になってましたね（笑）

世界最強のプログラミングスクール

ちなみに、個人的な世界最強のプログラミングスクールはここ。

世界最強の講師陣がカリキュラムを作り、完全就職保証で、GoogleとかFacebook、LinkedInとかに就職しています。もちろん、AirBnbとかで働いているメンターも付きます。

前金はあるものの、「就職してからお金を支払えば良い」」という破格のオファーも！（ビジネスしている人は、オファーとか動線の作り方超参考になります）

ただ、100万円超えなんですよね（笑）

逆にいうと、本気で良いスクール作るなら、これ位必要という事です。

カリキュラム取り寄せてみるだけでも勉強になると思うので、興味がある人はぜひ。

ちなみに、Udemyとかでも１００万円位する海外のプログラミングスクール講座をそのままコースにしているやつもあります。

（メルマガ読んでくれてる人は、あー、あの講座の事か分かりますよね？）

「プログラミング」と「ビジネス」を楽しく学べるメルマガを開始しました

転職したいだけなら全部やる必要ない

当たり前ですが、転職したいだけなら、ある程度勉強（300時間位）したら、さっさと面接なり情報収集に挑んだ方が良いです。

「技術だけが出来る」＝「就職」＝「高収入」ではないですから。

特に、２０代であれば、さしたるポートフォリオが無くてもポテンシャルだけで採用が決まってしまう事も多いです。

就活で例えると、内定がさっさと決まるのは、早くから就職活動の必要性に気づき、企業の方と適切にコミュニケーションを取りながら、ギャップをどんどん埋めていける人です。

決して、本番面接まで情報を取らずに「究極の自己分析」をしたり、「資格取得」に励む人ではありません。

「仕事能力」を図る基準は、「技術」以外にも沢山ある事に気づきましょう。

就職活動オススメリソース

１.基本ツール(初級）

PC（Macがオススメ）
Text Editor or IDE （VS Code or Atom）
Web ブラウザー（Google Chrome）
デザインツール（Figma, Adobe XD, Photoshop, Sketch）

まずは、基本的なツールを揃えましょう。

PCはWindowsでも良いのですが、プログラミング情報はMacの方が圧倒的に多いので、初心者であればあるほど、Macをオススメします。

エンジニアを目指すのであれば「Macbook Pro」がオススメですが、別に「Macbook Air」でも問題ありません。

また、Text EditorはVS CodeやAtomがオススメです。どちらも無料です。

VS Codeでどんな事が出来るかは、以下の記事を参考にしてください。

初心者にオススメなエディタは「VSCode」【拡張機能オススメ一覧】

デザインツールは、基本的な使い方を学んでおくべきですが、後回しでも大丈夫です。

基本ツールオススメリソース

2.HTML&CSS

最初に学ぶべき基本中の基本がHTMLとCSSです。

まずは、「Progate」で超基本を学びましょう。

その後、フレックスボックスやCSSグリッド等の発展的な内容について学習しましょう。

【CSS脱初心者】Flexboxの使い方を完全解説【画像・アニメーションで分かりやすく解説】

キレイなコードを書けている？

「キレイなコードを書くのが大切だ！」と言われても、最初の頃は、「何がキレイなコードか分からない！」というのが本音だと思います。

IDEやテキストエディターで自動整形してくれる事も多いですが、具体的にどの様なルールがあるか余裕があれば「Google HTML/CSS Style Guide」等を参照してみましょう。

例えば、以下は悪い例ですが、なぜ悪い例なのか分かりますか？

<!-- Not recommended -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css"
    type="text/css">

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Not recommended -->
<img src="spreadsheet.png">

Progateの後に路頭に迷っているあなたへ

Progateの後に何をしようか悩んでいる人は、海外プログラマーYoutuberのDev Edさんのコースもめっちゃ良いですよ。

初心者から、中級者まで一気にステップアップ出来ます。ちなみに、お値段は、$20です。

【神コース】HTML＆CSS学習のオススメ講座

HTML/CSSを遊びながら身につける

HTML/CSSはある程度の基本が出来たら、Wordpressブログを運営しつつカスタマイズしたり、プログラミングYoutuberの動画を見ながら遊びながら学ぶのも良いです。

やっぱり、楽しみながらじゃないと身に付かないですからね。

HTML/CSS学習のオススメリソース

3.基本的なWebサイトの仕組みを学ぶ

HTMLとCSSの基本が分かった所で、Webサービスを運営してみましょう。

ドメイン
レンタルサーバー
SEO（Analytics、Search Console）
FTP、SFTP
静的ホスト

オススメは、自分でサーバーを借り、ドメインを取って「Wordpress」のブログを運営する事です。

もちろん、「Google Analytics」、「Search Console」等のツールも導入して下さい。

「小さなお店＆会社のWordPress超入門」が最も簡単に書かれていますが、入門書はそこまで大きく違いはありません。

より本格的にWordpressを学びたい人は、「ビジネスサイトを作って学ぶ WordPressの教科書」が良いです。

興味がある人は、収益化にも挑戦してみて下さい。

コツコツと役に立つ情報を発信し続ける必要があり、挫折する人も多いですが、自分はおかげ様で技術書や、海外のオンライン講座、プログラミングスクールはWebサイト運営の収益から賄う事が出来てます。

収益は、自分のスキルを磨くか、ビジネスに再投資して更に収益を大きくしていく事がオススメです。

Webサイト運営のオススメリソース

Sassは、「Syntactically Awesome StyleSheet」の略で、CSSの機能を拡張し、プログラミング的な要素を加えた言語です（メタ言語と言います）。

あれ、HTMLとCSSってプログラミング言語じゃないの？と思ったあなた。とても良い疑問です。マークアップ言語等で調べてみましょう。

Sassを使う事で、効率的にコーディングする事が出来ます。

Sassは簡単で便利なので、まずは、以下の概念を最低限、押さえておきましょう。

変数
ネスティング
ミックスイン
継承

Sass学習のオススメリソース

5. Java Script

Javascript

JavaScriptは最近のWeb開発で最も重要なプログラミング言語といっても過言ではありません。

フロントエンドフレームワークはもちろん、バックエンドでも有力な候補です。

まずはプレーンなJavascriptを時間をかけて学びましょう。

データタイプ、関数、条件分岐、ループ
DOM操作
JSON
Fetch API
ES6＋(アロー関数、Promise、async）

例えば、簡単なアウトプットとして、おみくじを作ってみるなどがオススメです。

【Javascript】開運おみくじ作成【初心者のアウトプットにオススメ】

Javascript学習で悩ましい所

Javascriptの学習で悩ましい所は、古い書き方で書かれている技術書や講座が依然多く、初学者ではそれを見分ける事が困難な点です。

しっかりとしたメンターに習うか、技術書等を買う場合は、ES6(ECMAScript 6)以降の書き方になっているか注意してみて下さい。

例えば、以下の様な点が解説されているか着目してみましょう。

変数（letとconst）の違いと使い分けについて説明されていますか？
クラス定義（class）について書かれていますか？
アロー関数（=>）について解説されていますか？
アロー関数とfunctionの違い（thisの束縛の違い）について触れられてますか？

jQueryは小規模プロジェクトでは依然残りますが、トレンドとしては下火なので、必要に迫られたタイミングで学習する事でもOKです。

JavaScript学習のオススメリソース

6. LP模写＆簡単なポートフォリオ

ここまでがWebエンジニアになるための基礎です。

実際に手を動かして、LP（ランディングページ）模写や簡単なポートフォリオを作成していきましょう。

LP模写の必須ツールはたった３つ【無駄なく効率的にコーディング練習】

ここから、知り合いや、クラウドワークス、Web制作会社に営業をかける事で、お金を稼ぐ事が出来ます。

オススメは知り合いから受注する事ですが、クラウドワークスの場合はコーディング仕事から探し、着実に実績を積み上げるのが良いです。

付加価値をどの様に付けるか方向性を考える

最初は価格（コストリーダーシップ戦略）で勝負するのも良いですが、永遠に単純労働から抜け出せません。

将来に繋げるためにも、あなたがどの様に付加価値を付けるか戦略を立てて案件を受注していきましょう。

専門分野で特化
スキルの掛け算（+デザイン、+マーケティング）
丁寧なコミニュケーション
技術力や納期の信頼性

付加価値のコツは、お客様は、HPやLP（ドリル）が欲しいのではなく、ビジネスを成長させたい（穴が欲しい）という事を理解する事です。

ドリルを売るな、穴を売れやマイケルポーターの競争戦略といったマーケティング本を読んだ事がある人には当たり前かもしれません。

もし初めて聞くという人はLPに必須な７要素の記事と併せて読んでみて下さい。（こういった無料のツールがある中で、お客さんはなぜあなたに発注しなくてはいけないんですか？）

LP模写学習のオススメリソース

7. CSS Framework

CSS フレームワークを使用する事で、それなりの見栄えの良いサイトをサクッと作る事が出来ます。

ただ、個人的には、CSSフレームワークに時間をかける位であれば、CSSの基礎を深めた方が良いです。

なぜなら、実際のデザインは、Webデザイナーがするので、CSSフレームワークはあくまでもプロトタイピング用としての用途が強いからです。

最低限のデザイン原則を知っておく

エンジニアは、最低限のデザイン原則を知っておけば大丈夫です。

例えば、ノンデザイナーズデザインブックの4つの原則（近接、整列、反復、コントラスト）を知っておくと、なぜCSSフレームワークが綺麗に見えるのか？何を目指しているかが分かります。

実践編として、伝わるデザインの基本-良い資料を作るためのレイアウトのルールも非常に良い本です。

これ、資料作成の本ですが、これのおかげで仕事の評価がめっちゃ上がりました！

エンジニア転職目指している人は、普段の仕事の中で、原則を踏まえて練習出来ます（笑）

フロントエンドエンジニア志望の人は、アトミックデザイン等も学習してみましょう。

デザインは面白いですが、あくまでも深入りしすぎない様に！

チートシートを利用しよう

グリッドシステムについて理解した後は、Bootstrap Cheat Sheet（チートは「ズル」の意味で、日本語で言うカンニングペーパーの様なもの）で要素を組み合わせて開発出来ればOKです。

個人的に好きなのは、Bulmaです。

例えば、Udemyのクローンサイト（Mydemy（笑））をモックアップとして作った時のSign Upは15分位で以下の画面になりました。

Bootstrap学習のオススメリソース

8. Git及びGithub

git

ここで、Gitを導入して、バージョン管理をする様にしましょう。GitとGit Hubが使えないと、実務では全く使いものになりません。

絶対に練習をしておいて下さい。

まずは、サルでも分かるGitを読んだ後、Progateで簡単に練習します。

最後に、Learn Git Branchingで練習します。

まずは、

コミット
ブランチとマージ
クローン、プルリク
リモートリポジトリ（GitHub）へのプッシュ

位は最低限、身につけておきましょう。

Git学習のオススメリソース

9. 基本ツール(中級）

パッケージマネージャー（npm、yarn）
タスクランナー（gulp）
webpack
エディター拡張（ESLint, Prettier）

npmやyarnといったパッケージマネージャー、gulpといったタスクランナー、webpack等について何を

npmについては、Node.jsを導入すると一緒にインストールされるので、Node.jsと一緒に学習しても良いです。

エディター拡張(ES Lint, Prettier)については、「VSCode」【拡張機能オススメ一覧】の記事も参考にして下さい。

10.フロントエンドフレームワーク

名称	特徴（携帯の方はスクロール出来ます）
React	Facebookが開発したフレームワーク（ライブラリ）。仮想DOMを早くから導入し、高速な描画が出来ることで話題になった。
Vue.js	コミュニティ発のフレームワークで日本で人気が高い。習得のための学習コストが低く、小さく導入が出来る。
Angular	Googleが開発したフレームワーク。フルスタックのフレームワークであり、多機能。大規模な開発に向くが習得コストは高い。

フロントエンドエンジニアになるのであれば、フロントエンドフレームワークを最低１つは習得しておく必要があります。

（Reactは厳密にはライブラリーなのですが、細かいことは割愛します）

ReactかVue.jsから選ぶのが基本戦略

世界で一番人気なのは、「React」ですが、日本では最初の学習コストが低く、分かりやすい事から、「Vue.js」も非常に人気があります。

Angularを選択する場合は、実際の案件状況を見ながら慎重に判断してください。

ReactもVueも公式サイトが充実していますので、「公式サイト＋技術書」、または「公式サイト＋動画講座」がオススメです。

React学習のオススメリソース

Vue学習のオススメリソース

11.フロントエンドフレームワーク(状態管理）

Redux (React)
Vuex(Vue)
NgRx (Angular)

フロントエンドの規模が大きくなってくると、状態管理が必要になります。

フロントエンドフレームワークに応じて学習しましょう。

12.サーバーサイド言語を選択

Node.js（Javascript）
Python
PHP
Go
Ruby
C＃

次に、サーバーサイドのフレームワーク言語に良く使われる言語について基本的な文法を学習しましょう。

「新たな言語を学ぶのは嫌だ！」って人は、JavascriptベースのNode.jsを選択するのも良い手です。

実際、フロントエンドとバックエンド（サーバーサイド言語）の言語を統一出来るメリットからNode.jsは非常に沢山のサービスで使われています。

Rubyは日本語の情報は多いが、、、

Rubyはトレンドでは下火です。日本だったらまだ大丈夫ですが、海外だと仕事を探すのが難しくなってきてます。

日本語の情報も多いので、初心者にはオススメされる言語の一つです。（簡単にそれなりのサイトが出来るからプログラミングスクールではオススメされるって理由もありますが。。。）

出典:Ranking Programming Languages by GitHub Users

プログラミング初心者はどの言語がオススメ？人気の言語6選

コーディング規約も意識してみよう

ここまで来たあなたなら、「コーディング規約」にも意識して学習してみましょう。

コーディング規約とは、プログラムやシステムを作る際に、プログラマたちが守るよう決められたルールのことです。

皆好き勝手書いたら、「品質」も保てないですし、「保守性」も悪くなります。

プロジェクト毎に微妙に規約は違いますが、Pythonなら、PEP8、RubyならRuby Style Guide（実は、オフィシャルはまつもとさんの意向で無い）など、ある程度ベストプラクティスがあります。

Googleやairbnb、Uberなどのスタイルガイドを使うのも良いです。

後で悪い書き方を修正するのは大変なので、少しずつで良いので意識してみましょう。

Python学習のオススメリソース

13.サーバーサイドフレームワーク

Django or Flask(Python)
Laravel (PHP)
Ruby on Rails(Ruby)
Express（Node.js）
ASP.NET(C＃)

１２で選んだ言語に応じたサーバーサイドフレームワークを学びましょう。

どの様な視点でフレームワークを選択するか？

フレームワークを選択する際は、「フルスタック/最低限のフレームワークか？」、「コミュニティーは活発か？」、「Jobマーケットはどうか？」といった視点で見る必要があります。

例えば、PythonのフレームワークでDjangoとFlaskがありますが、どの様な観点で比較しているか以下の記事が参考になると思います。

【Django vs Flask】PythonのWebフレームワークを徹底比較-初心者にオススメは？

設計思想を理解するのが速修するコツ

どんなWebフレームワークでも、フレームワークを作るに到った「設計思想」があります。

初心者は、「設計思想」と言うと難しく感じるかもしれませんが、例えば「スポーツカー」と「ファミリーカー」だと思想は全然違いますよね？

スポーツカーは、スピード性能や見た目の良さに重点が置かれるのに対し、後者は車内空間の広さや、乗り心地に重点が置かれます。

例えば、Djangoの設計思想だと

DRY則（同じことを繰り返さない）
暗黙より明示
疎結合

などがあります。（Djangoの設計思想のページ見て下さいね）

Ruby on Railsだと、DRY則の他に、「設定より規約（ Convention over configuration）」が大切です。

「疎結合（Loose coupling）」、「高凝集（High cohesion）」、「DRY則」、「MVC」、「SOLID原則」など、何それ？って感じるかもしれませんが、「原理原則」は共通しているものが多いです。

フレームワークは、「生産性」を上げるためのツールなのだから、共通するのが多いのも納得出来ますよね？

こういった「原理原則」を意識して学習すると、他のフレームワークを新たに学習しても、スムーズに移行する事が出来ます。

以下の記事や本も参考にしてみて下さい。

チュートリアルが終わったら何をすれば良い？

大抵のフレームワークは、標準チュートリアルが併設されています。まずは、チュートリアルを完了しましょう。

チュートリアルを完了したら外部APIと連携するアプリを作成してみるのがオススメです。

【Python】データ可視化-株価を時系列に表示するCoolなグラフを作成【Dash】

14.データベースを学習

RDB(PostgreSQL, MySQL)
NoSQL (mongoDB)
Cloud(Firebase, AWS)

Webフレームワークの基礎を学んだ後は、データベースについて学習しましょう。

大量のデータを扱うアプリケーションでは、データベースが必須です。

まずは、基礎中の基礎であるRDB及びSQLについて理解を深めます。SQLの練習は、Progateや、Sqlzooといったサイトでオンライン上で手を動かしながら学べます。

次にNoSQLのDB（例えば、Node.jsのMERNスタック）や、クラウド形態のDB（AWSやFirebase）について学習していきましょう。

MongoDBをMacにインストールして基本操作を学ぶ

15.Dockerについて学ぶ

Docker公式ページより

Dockerは、「コンテナ仮想化技術」を実現する為のプロダクトです。

「コンテナ仮想化技術」により、アプリケーションを仮想マシンの様に「隔離された環境」で実行する事が出来ます。

「Git/Git-Hub」がソースコードを管理・共有する仕組みだとすると、「Docker/Docker-Hub」はプログラムの実行環境を管理・共有する仕組みです。

開発だけでなく、運用（システムの安定稼働）の基礎を知っておく事が自分の市場価値を高めるのに役立ちます。

まずは、Dockerの公式サイトからDockerをインストールして使いましょう。

公式サイトから、Docker Desktop for Mac（M1Macにも対応しています）ページに飛び、ダウンロードする所から始めましょう。

Dockerは基本的にLinuxOS上でしか動かないので、Linuxの場合はDockerEngineのみのインストールで済むのに対し、MacやWindowsの場合はLinuxOSや仮想化環境が必要となります。

それをまとめて提供してくれるのが「デスクトップ版」のDockerです（超便利！）

Dockerを解説した本は、以下の本が一番分かりやすいです。

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

16.DevOpsについて学ぶ

DevOps（デブオプス）は「開発（Development）」と「運用（Operations）」を組み合わせた造語で、開発・運用を協調させる事でより柔軟にスピーディーにシステムを開発する事です。

先ほど、Dockerについて学びましたが、AWSといったクラウドプラットフォームやNginx/Apache等について知っておきましょう。

長くなってきたので、後ほど追記します。