プログラミングの勉強法を検索して、初心者向けのマトモな記事が少ないなーと感じたことありませんか？
この記事は、
- Webエンジニアになりたい
- 独学でプログラミングを学びたい
- Progateを終えたが次に何をしたら良いか分からない
そんなあなたに向けた記事です。
未経験からWebエンジニアになる事は可能です。
ただ、３ヶ月の勉強だけで即戦力の稼げるエンジニアになれると思っているのなら、少々認識を改めた方が良いかもしれません。
目次
- プログラミング学習法をなぜ書くのか？
- プログラミング学習プランの神動画
- 【神本】ソフトウェア開発者の完全キャリアガイド
- プログラミングは最強のビジネススキル
- 0.学習を始める前に意識する事
- １.基本ツール(初級）
- 2.HTML&CSS
- 3.基本的なWebサイトの仕組みを学ぶ
- 4.Sass
- 5. Java Script
- 6. LP模写＆簡単なポートフォリオ
- 7. CSS Framework
- 8. Git
- 9. 基本ツール(中級）
- 10.フロントエンドフレームワーク
- 11.フロントエンドフレームワーク(状態管理）
- 12.サーバーサイド言語を選択
- 13.サーバーサイドフレームワーク
- 14.データベースを学習
- 15.Dockerについて学ぶ
- 16.DevOpsについて学ぶ
プログラミング学習法をなぜ書くのか？
Webエンジニアになる方法を「日本語」と「英語」で検索して、その差に愕然としたからです。
日本は、「プログラミングスクール」を勧めるライターの記事が多いのに対し、英語では「実践的」な内容が上位を占めます。
例えば、「Roadmap to becoming a web developer in 2019 」をベースとした記事ですね。
ただ、初心者の段階でこれに辿り着くのは難しいと思います。また、仮に辿り着いても何をして良いか分からず途方に暮れてしまうかもしれません。
独学であれば、正しいプランを持つ事が非常に重要になってきます。
なので、この状況はマズイなと思い、書くことにしました。
プログラミング学習プランの神動画
自分が神と崇めている１人。「Traversy 」さんが、「Web Development In 2020 – A Practical Guide」の神動画をアップしてくれてますね。
フロントエンド寄りが専門ですが、誰にでも分かりやすく解説されています。
圧倒されるかもしれませんが、全部やる必要は無いですし、適切なメンターを付けるのはむしろやるべきです。
ただ、こういう全体像や、正しい情報をプログラミング初学者の頃から持っておけば、変な情報商材や、スクールに騙さる事は無いはずです。
人を盲目的に信じる前に、まずは自分の知識を増やしましょう。
【神本】ソフトウェア開発者の完全キャリアガイド
Webエンジニアをキャリアの一つとして考えている人は、悪い事は言わないので、「ソフトウェア開発者の完全キャリアガイド」をすり切れるまで読んで下さい。
あなたが思いつくような疑問は全て書いてあります。
- ソフトウェア開発者になるにはどうしたら良いか？
- 効率的な技術スキルの身に付け方
- どのプログラミング言語を選ぶべきか？
- 大学、プログラミングスクール、独学のどの方法を選ぶべきか？
- 未経験者の職の見つけ方
- 給料の交渉の仕方
- フリーランスと会社員のどちらを選ぶべきか？
- 独立する場合はどんな準備をするべきか？
3,000円しますが、変な所にお金を使うより「100倍」有効なお金の使い方になることを保証します。
プログラミングは最強のビジネススキル
IT業界は、世界で最も賢く、稼いでいる人が集まっている業界です。
ビジネスを始めるのに、大きな資金を必要としませんし、国境も容易に越える事が出来ます。
仕組み化して数百人、数千人に相当する労働を１人でする事も出来ます。
ビジネスをするのに、これ以上のスキルはありませんよね？
ただ、技術の移り変わりも早いので、定期的なアップデートは必要です。
詳しい事はニュースレターでも解説しているので、興味がある人は登録しておいて下さい。
0.学習を始める前に意識する事
- プログラミングを「習慣」にする
- 全体像や目的を意識する
- コードを沢山「書く！」
- いきなり「完璧」を目指さない
- 良質なコードを沢山読む
初心者の内は、プログラミングを「習慣」にし、コードを沢山書く事が大切です。
技術書や動画を見るだけで学習しようとするのは、水泳の仕方を本やビデオで何度も見て、プールに入らずに泳げるようになろうとするのと同じです。
必ず、手を動かしながら学習して下さい。
「インプット３vsアウトプット７」位になるのが理想です。
コードを書いていく中で、指が自然と覚えますし、腑に落ちる瞬間がやってきます。
ある程度、上達してきたら、良質なコードを沢山読みます。技術が生まれた背景、目的を合わせて学ぶ事で理解を深めていきます。
最初は中々上達しないと感じるかもしれませんが、毎日続ける事で少しずつ上手くなっていくので、めげずに頑張りましょう！
プログラミングスクールはどうなの？
お金に余裕がある社会人で、モチベーション管理や、学習サイクルを作りたい人は、良いです。実際、自分も使ってみました。
ただ、
「高いお金払ってプログラミングスクールに通えば、プロが手取り足取り教えてくれて３ヵ月で高額収入で手に職付いてリモートできる！」
なんて期待を持っているのなら、100％辞めた方が良いです。
逆説的に聞こえるかもしれませんが、プログラミングスクールで成功する人は、スクールがなくても成功する自走能力の高い人です。
世界最強のプログラミングスクール
ちなみに、個人的な世界最強のプログラミングスクールはここ。
世界最強の講師陣がカリキュラムを作り、完全就職保証で、GoogleとかFacebook、LinkedInとかに就職しています。もちろん、AirBnbとかで働いているメンターも付きます。
前金はあるものの、「就職してからお金を支払えば良い」」という破格のオファーも！（ビジネスしている人は、オファーとか動線の作り方超参考になります）
ただ、100万円超えなんですよね（笑）
逆にいうと、本気で良いスクール作るなら、これ位必要という事です。
カリキュラム取り寄せてみるだけでも勉強になると思うので、興味がある人はぜひ。
ちなみに、Udemyとかでも１００万円位する海外のプログラミングスクール講座をそのままコースにしている転載しているやつもあります。（メルマガ読んでくれてる人は、あー、あの講座の事か分かりますよね？）
１.基本ツール(初級）
- PC（Macがオススメ）
- Text Editor or IDE （VS Code or Atom）
- Web ブラウザー（Google Chrome）
- デザインツール（Adobe XD, Photoshop）
まずは、基本的なツールを揃えましょう。
PCはWindowsでも良いのですが、プログラミング情報はMacの方が圧倒的に多いので、初心者であればあるほど、Macをオススメします。
エンジニアを目指すのであれば「Macbook Pro」がオススメですが、別に「Macbook Air」でも問題ありません。
また、Text EditorはVS CodeやAtomがオススメです。どちらも無料です。
VS Codeでどんな事が出来るかは、以下の記事を参考にしてください。
デザインツールは、基本的な使い方を学んでおくべきですが、後回しでも大丈夫です。
2.HTML&CSS
最初に学ぶべき基本中の基本がHTMLとCSSです。
まずは、「Progate」で超基本を学びましょう。
その後、フレックスボックスやCSSグリッド等の発展的な内容について学習しましょう。
キレイなコードを書けている？
「キレイなコードを書くのが大切だ！」と言われても、最初の頃は、「何がキレイなコードか分からない！」というのが本音だと思います。
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はある程度の基本が出来たら、Wordpressブログを運営しつつカスタマイズしたり、プログラミングYoutuberの動画を見ながら遊びながら学ぶのも良いです。
やっぱり、楽しみながらじゃないと身に付かないですからね。
3.基本的なWebサイトの仕組みを学ぶ
HTMLとCSSの基本が分かった所で、Webサービスを運営してみましょう。
- ドメイン
- レンタルサーバー
- SEO（Analytics、Search Console）
- FTP、SFTP
- 静的ホスト
オススメは、自分でサーバーを借り、ドメインを取って「Wordpress」のブログを運営する事です。
もちろん、「Google Analytics」、「Search Console」等のツールも導入して下さい。
「小さなお店＆会社のWordPress超入門」が最も簡単に書かれていますが、入門書はそこまで大きく違いはありません。
より本格的にWordpressを学びたい人は、「ビジネスサイトを作って学ぶ WordPressの教科書」が良いです。
興味がある人は、収益化にも挑戦してみて下さい。
コツコツと役に立つ情報を発信し続ける必要があり、挫折する人も多いですが、自分はおかげ様で技術書や、海外のオンライン講座、プログラミングスクールはWebサイト運営の収益から賄う事が出来てます。
収益は、自分のスキルを磨くか、ビジネスに再投資して更に収益を大きくしていく事がオススメです。
4.Sass
Sassは、「Syntactically Awesome StyleSheet」の略で、CSSの機能を拡張し、プログラミング的な要素を加えた言語です（メタ言語と言います）。
あれ、HTMLとCSSってプログラミング言語じゃないの？と思ったあなた。とても良い疑問です。マークアップ言語等で調べてみましょう。
Sassを使う事で、効率的にコーディングする事が出来ます。
Sassは簡単で便利なので、まずは、以下の概念を最低限、押さえておきましょう。
- 変数
- ネスティング
- ミックスイン
- 継承
Sassは、必要になったタイミングで、Web制作者のためのSassの教科書 の１冊をやる位でOKです。
5. Java Script
JavaScriptは最近のWeb開発で最も重要なプログラミング言語といっても過言ではありません。
フロントエンドフレームワークはもちろん、バックエンドでも有力な候補です。
まずはプレーンなJavascriptを時間をかけて学びましょう。
- データタイプ、関数、条件分岐、ループ
- DOM操作
- JSON
- Fetch API
- ES6＋(アロー関数、Promise、async）
Javascriptの学習で悩ましい所は、古い書き方で、新しい書き方に対応していないものが沢山ある所です。
技術書等を買う場合は、ES6(ECMAScript 6)以降の書き方になっているか注意してみて下さい。
例えば、以下の様な点が解説されているか着目してみましょう。
- 変数（letとconst）の違いと使い分けについて説明されていますか？
- クラス定義（class）について書かれていますか？
- アロー関数（=>）について解説されていますか？
- アロー関数とfunctionの違い（thisの束縛の違い）について触れられてますか？
もし、Udemy等のオンラインコースで学びたい場合は、「The Complete JavaScript Course 2019: Build Real Projects! 」がここら辺の違いがシッカリと解説されており、オススメです。
jQueryは小規模プロジェクトでは依然残りますが、トレンドとしては下火なので、必要に迫られたタイミングで学習する事でもOKです。
6. LP模写＆簡単なポートフォリオ
ここまでがWebエンジニアになるための基礎です。
実際に手を動かして、LP（ランディングページ）模写や簡単なポートフォリオを作成していきましょう。
ここから、知り合いや、クラウドワークス、Web制作会社に営業をかける事で、お金を稼ぐ事が出来ます。
オススメは知り合いから受注する事ですが、クラウドワークスの場合はコーディング仕事から探し、着実に実績を積み上げるのが良いです。
付加価値をどの様に付けるか方向性を考える
最初は価格（コストリーダーシップ戦略）で勝負するのも良いですが、永遠に単純労働から抜け出せません。
将来に繋げるためにも、あなたがどの様に付加価値を付けるか戦略を立てて案件を受注していきましょう。
- 専門分野で特化
- スキルの掛け算（+デザイン、+マーケティング）
- 丁寧なコミニュケーション
- 技術力や納期の信頼性
付加価値のコツは、お客様は、HPやLP（ドリル）が欲しいのではなく、ビジネスを成長させたい（穴が欲しい）という事を理解する事です。
ドリルを売るな、穴を売れやマイケルポーターの競争戦略といったマーケティング本を読んだ事がある人には当たり前かもしれません。
もし初めて聞くという人はLPに必須な７要素の記事と併せて読んでみて下さい。（こういった無料のツールがある中で、お客さんはなぜあなたに発注しなくてはいけないんですか？）
7. CSS Framework
CSS フレームワークを使用する事で、それなりの見栄えの良いサイトをサクッと作る事が出来ます。
ただ、個人的には、CSSフレームワークに時間をかける位であれば、CSSの基礎を深めた方が良いです。
なぜなら、実際のデザインは、Webデザイナーがするので、CSSフレームワークはあくまでもプロトタイピング用としての用途が強いからです。
最低限のデザイン原則を知っておく
エンジニアは、最低限のデザイン原則を知っておけば大丈夫です。
例えば、ノンデザイナーズデザインブックの4つの原則（近接、整列、反復、コントラスト）を知っておくと、なぜCSSフレームワークが綺麗に見えるのか？何を目指しているかが分かります。
実践編として、伝わるデザインの基本-良い資料を作るためのレイアウトのルールも非常に良い本です。
これ、資料作成の本ですが、これのおかげで仕事の評価がめっちゃ上がりました！
エンジニア転職目指している人は、普段の仕事の中で、原則を踏まえて練習出来ます（笑）
フロントエンドエンジニア志望の人は、アトミックデザイン等も学習してみましょう。
デザインは面白いですが、あくまでも深入りしすぎない様に！
チートシートを利用しよう
グリッドシステムについて理解した後は、Bootstrap Cheat Sheet（チートは「ズル」の意味で、日本語で言うカンニングペーパーの様なもの）で要素を組み合わせて開発出来ればOKです。
個人的に好きなのは、Bulmaです。
例えば、Udemyのクローンサイト（Mydemy（笑））をモックアップとして作った時のSign Upは15分位で以下の画面になりました。
8. Git
ここで、Gitを導入して、バージョン管理をする様にしましょう。GitとGit Hubが使えないと、実務では全く使いものになりません。
絶対に練習をしておいて下さい。
まずは、サルでも分かるGitを読んだ後、Progateで簡単に練習します。
Rails Tutorialの１章にもGitについて書かれているので、目を通しておきましょう。
最後に、Learn Git Branchingで練習します。
まずは、
- コミット
- ブランチとマージ
- クローン、プルリク
- リモートリポジトリ（GitHub）へのプッシュ
位は最低限、身につけておきましょう。
9. 基本ツール(中級）
npmやyarnといったパッケージマネージャー、gulpといったタスクランナー、webpack等について何を
npmについては、Node.jsを導入すると一緒にインストールされるので、Node.jsと一緒に学習しても良いです。
エディター拡張(ES Lint, Prettier)については、以下を参考にして下さい。
10.フロントエンドフレームワーク
- React
- Vue.js
- Angular
フロントエンドエンジニアになるのであれば、フロントエンドフレームワークを最低１つは習得しておく必要があります。
（Reactは厳密にはライブラリーなのですが、細かいことは割愛します）
ReactかVue.jsから選ぶのが基本戦略
世界で一番人気なのは、「React」ですが、日本では最初の学習コストが低く、分かりやすい事から、「Vue.js」も非常に人気があります。
Angularを選択する場合は、実際の案件状況を見ながら慎重に判断してください。
ReactもVueも公式サイトが充実していますので、「公式サイト＋技術書」、または「公式サイト＋動画講座」がオススメです。
Reactの講座は、「Modern React with Redux [2019 Update]」か「The Modern React Bootcamp (Hooks, Context, NextJS, Router)」のどちらか１つを学んでおけばOKです。
11.フロントエンドフレームワーク(状態管理）
- Redux (React)
- VueX (Vue)
- NgRx (Angular)
フロントエンドの規模が大きくなってくると、状態管理が必要になります。
フロントエンドフレームワークに応じて学習しましょう。
12.サーバーサイド言語を選択
- Node.js（Javascript）
- Python
- PHP
- Go
- Ruby
- C＃
次に、サーバーサイドのフレームワーク言語に良く使われる言語について基本的な文法を学習しましょう。
「新たな言語を学ぶのは嫌だ！」って人は、JavascriptベースのNode.jsを選択するのも良い手です。
実際、フロントエンドとバックエンド（サーバーサイド言語）の言語を統一出来るメリットからNode.jsは非常に沢山のサービスで使われています。
Rubyは日本語の情報は多いが、、、
Rubyはトレンドでは下火です。海外だと仕事を探すのが難しくなってますが、日本だったらまだ大丈夫です。
日本語の情報も多いので、初心者にはオススメされる言語の一つです。（簡単にそれなりのサイトが出来るからプログラミングスクールではオススメされるって理由もありますが。。。）
まず、Rubyをやるなら、Rails GirlsやRails Tutorialを
13.サーバーサイドフレームワーク
- Django or Flask(Python)
- Laravel (PHP)
- Ruby on Rails(Ruby)
- Express（Node.js）
- ASP.NET(C＃)
１２で選んだ言語に応じたサーバーサイドフレームワークを学びましょう。
フレームワークを選択する際は、「フルスタック/最低限の機能のどちらを学ぶべきか？」、「コミュニティーは活発か？」、「Jobマーケットはどうか？」といった視点で見る必要があります。
例えば、PythonのフレームワークでDjangoとFlaskがありますが、どの様な観点で比較しているかの視点が参考になると思います。
また、チュートリアルを完了したら外部APIと連携するアプリを作成してみるのがオススメです。
14.データベースを学習
- RDB(PostgreSQL, MySQL)
- NoSQL (mongoDB)
- Cloud(Firebase, AWS)
Webフレームワークの基礎を学んだ後は、データベースについて学習しましょう。
大量のデータを扱うアプリケーションでは、データベースが必須です。
まずは、基礎中の基礎であるRDB及びSQLについて理解を深めます。SQLの練習は、Progateや、Sqlzooといったサイトでオンライン上で手を動かしながら学べます。
次にNoSQLのDB（例えば、Node.jsのMERNスタック）や、クラウド形態のDB（AWSやFirebase）について学習していきましょう。
15.Dockerについて学ぶ
Dockerは、「コンテナ仮想化技術」を実現する為のプロダクトです。
「コンテナ仮想化技術」により、アプリケーションを仮想マシンの様に「隔離された環境」で実行する事が出来ます。
「Git/Git-Hub」がソースコードを管理・共有する仕組みだとすると、「Docker/Docker-Hub」はプログラムの実行環境を管理・共有する仕組みです。
開発だけでなく、運用（システムの安定稼働）の基礎を知っておく事が自分の市場価値を高めるのに役立ちます。
16.DevOpsについて学ぶ
DevOps（デブオプス）は「開発（Development）」と「運用（Operations）」を組み合わせた造語で、開発・運用を協調させる事でより柔軟にスピーディーにシステムを開発する事です。
先ほど、Dockerについて学びましたが、AWSといったクラウド プラットフォームやNginx/Apache等について知っておきましょう。
長くなってきたので、後ほど追記します。