プログラミングには興味があるけど、どうやって勉強したらいいかわからない。
そんなことを考えてる人も多いと思います。いろんな人がいろんなことを言ってるから、どれを信じていいのか、困ってしまいますよね。しかも、プログラミング言語がたくさんあって、どれを選べばいいかもわからないというのも大きな問題です。
僕も悩みつつ勉強中ですが、今までやってきたものを振り返って、これからプログラミング学習を始める人向けに、ちょっと先に進んでる人の立場から「こんな感じで勉強するといいと思うよ」ということをお伝えしたいと思います。
「Web系プログラミングの学習ロードマップ」という大げさな名前にしてありますが、プログラミング学習を始める前の自分に教えるつもりで書いています。
なぜWeb系プログラミングなのか？
明確な目標があってプログラミングを学びたいなら、それに合わせたプログラミング言語を選ぶことができます。でも、目標が明確じゃなかったり、とりあえずやってみたかったりするのであれば、Web系がオススメです。
その理由は「わかりやすいから」です。
よくわからない文字列を打ち込んで、「文字が表示された！」とか「計算できた！」というのもいいんですが、もっとわかりやすい感じの達成感があった方がいいですよね。
その点で、Web系はサイトというわかりやすいものを作れるのでオススメです。
サイトを作るのに必要なHTMLとCSSは厳密にはマークアップ言語と呼ばれて、プログラミング言語ではないそうなんですが、ここではあえてごちゃ混ぜにしておきます。プログラミングの最初の一歩として、最適なものの1つかなと思うので。
もう1つの理由は、「稼ぐことに繋がりやすいから」です。
これ自体は僕の経験ではなく、そう言ってる人たちが多いというものなので、実際はどうなのかはわかりません。詳しく知りたい人は、マナブさんの動画が参考になります。
ただ、後で説明しますが、目指す方向によってはマナブさんのオススメ通りに進まない方が良さそうなので、「こういう稼ぎ方もあるんだ」くらいにしておいた方がいいかもしれません。
Web系プログラミングの学習ロードマップ
Web系プログラミングの学習ロードマップはいくつかの段階に分けられると思います。今のところ、次のような3段階を想定してます。
- HTMLとCSSでサイトを作れるようになる
- JavaScriptとjQueryで動きをつけられるようになる
- RubyやPHPでWebサービスを作れるようになる
※Webデザイン系は想定してません
※現段階でこの記事に書いてあるのは第1段階までで、それ以降は今後追加予定
これらはすべて完璧にできるようになる必要はなくて、何ができるようになりたいか、何をやりたいかで、どこに特化してくかを決めてく感じになると思います。
Progateというサービスの「Web開発パス（Ruby on Rails）」ではJavaScriptとjQueryが入ってないので、Webサービスを作るには必須ではないのかもしれません。
第2段階を極めてくとフロントエンドエンジニア、第3段階を極めていくとバックエンドエンジニアという感じだと思います。まずは第1段階をやって、そこからどの方向に進みたいかで分かれてく感じですかね。どっちにしてもある程度の知識は必要だと思うので、ざっくりと学んでくという方法もいいかもしれません。
第0段階：プログラミング学習の準備
プログラミング学習にはいくつかの方法があります。
- 完全無料の独学
- 有料教材や有料サービスを使ったオンライン学習
- プログラミングスクールを使った学習
ここでは、1番の「完全無料の独学」をベースとして、2番の「有料教材や有料サービスを使ったオンライン学習」が必要なら使ってくという方針で説明します。
有料サービスを使ったオンライン学習では、ブラウザ（Google ChromeやMicrosoft Edge、Internet Explorer、Safariなど）だけで完結するものがたくさんあります。その場合は、アカウント登録や課金などだけで学習を始められます。
一部無料でサービスを行ってるところもあるので、そこから始めるのもいいと思います。
でも、完全無料の独学であれば、無料の教材を使って学習してくことになるので、事前の準備が必要です。
どのパソコンを選べばいいかわからない人は「【Mac？】プログラミング学習で最初に買うパソコンは？【Windows？】」をご覧ください。
エディタの準備
まずは、プログラムを書いてくためのエディタと呼ばれるソフトが必要になります。メモ帳などでもいいんですが、プログラミング用のエディタの方が使い勝手がいいので、それをインストールするところから始めます。
オススメのエディタはMicrosoftが出してるVisual Studio Codeです。
Visual Studio Codeは無料で使えるので、これからプログラミング学習を始める人にとってはありがたい限りです。ちなみに、Visual Studio CodeはVSCodeと略されたりします。
エディタは他にもたくさんありますが、候補をいくつも出すと迷ってしまうので、ここでは他のエディタは紹介しません。興味がある人はググってみてください。プログラミング学習ではググって調べるのが重要なスキルです！
Visual Studio Codeのダウンロードはこちらから
Visual Studio Codeの問題点の1つは、初期設定では英語仕様になってることです。そのままでも大丈夫ならいいですが、日本語にしたいなら日本語化が必要です。
インストールと日本語化は「VisualStudioCodeのインストールと日本語化」を参考にしてください。
第1段階に進む前に、もう1つプラグインを入れておきましょう。
それはLive Serverです。これはコードを入力するとブラウザが自動的にリロードするようになるというとても便利なものです。保存して、リロードして、という面倒な作業がいらないので、必ず入れておきましょう。
詳しくは、「HTML/CSSをブラウザで自動更新！VSCodeエディタが超便利」を参考にしてください。
Google Chromeをインストールする
Web系プログラミングの学習で欠かせないものの1つがGoogle Chromeです。これはブラウザと呼ばれるソフトで、Windowsに最初から入ってるMicrosoft Edge、Macに最初から入ってるSafariもブラウザです。
この辺がよくわからない人にとっては、「ネットを見るために使うソフト」と言われるとわかりやすいかもしれませんね。
後から出てきますが、Google Chromeのデベロッパーツールが必須ツールなので、Google Chromeは必ずインストールしておきましょう。何なら、普段使いのブラウザにしちゃってもいいくらいです。
第1段階：HTMLとCSSでサイトを作れるようになる
プログラミング学習はモチベーションの維持が大変です。挫折率が高いという話も聞いたことがあります。そのため、「できた！」感の強いものから始めてくのがオススメです。
そういう意味で、サイトを作れるようになることを最初の目標にするといいと思います。そのために必要なのがHTMLとCSSです。
この段階では、基本的にマナブさんのロードマップに従いますが、必要ないと思うものなどは除いて、必要だと思うものを追加して、順番を入れ替えてあります。
こんな素人みたいな人が考えたロードマップより、もっとちゃんとした人が考えたロードマップの方がいいという人は、マナブさんの「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」を参考にしてください。
今のところ僕が考えているHTMLとCSSでサイトを作れるようになるまでのロードマップはこんな感じです。
- はじめてのHTML入門講座：YouTube
- はじめてのCSS入門講座：YouTube
- CSS3 入門 レッスン66 flexbox：YouTube
- 日本語対応！CSS Flexboxのチートシートを作ったので配布します ：記事
- ブログのデザインカスタマイズ！Google Chromeの開発者ツールでCSSを思いのままに操る！：YouTube
- 今更聞けない！ ブラウザデベロッパーツールの使い方：YouTube
- Webサイトをコーディング模写するやり方と使用するツール
- 模写コーディングその1
- はじめてのレスポンシブWebデザイン入門講座：YouTube
- 模写コーディングその2
- Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
- 【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる
- 模写コーディングその3
こうやってリストアップすると、やることたくさんで大変そうだなと思いますよね。実際大変でもあるんですが、ある程度できるようになると楽しくなってきます。
ちなみに、模写コーディングは実際にあるサイトを見ながらコピーしてくコーディング方法です。見本と同じようなものが出来てくると嬉しくなるので、そこまで頑張ってください。
最も重要なのは手を動かすことです。
動画を見るだけでは身につきません。自転車に乗れるようになりたかったら、自転車の乗り方動画を見るだけじゃなく、実際に乗ってみるのが必要なのと同じです。そのために、第0段階でプログラミング学習の準備をしたわけです。
それでは、それぞれについて見ていきましょう。必要ないという人は、すぐに始めちゃってもOKです。
HTMLとCSSを学んで、模写コーディングできるようになる
プログラミング学習の最も重要なことの1つは、完全に理解しようとしないことです。
テストじゃないので、ググりながら、調べながら、やってくうちに自然と身についてくという感じでOKです。重要なのは、「こういうことやる方法あったような」と思ってググれることです。
ということで、まずは「模写コーディングその1」まで進んでいきます。一番大変なところかもしれないので、一気にやってしまった方がいいと思います。
「模写コーディングその1」までのロードマップをおさらいしておきましょう。
- はじめてのHTML入門講座（TechAcademy）：YouTube
- はじめてのCSS入門講座（TechAcademy）：YouTube
- CSS3 入門 レッスン66 flexbox：YouTube
- 日本語対応！CSS Flexboxのチートシートを作ったので配布します ：記事
- ブログのデザインカスタマイズ！Google Chromeの開発者ツールでCSSを思いのままに操る！：YouTube
- 今更聞けない！ ブラウザデベロッパーツールの使い方：YouTube
- Webサイトをコーディング模写するやり方と使用するツール：記事
- 模写コーディングその1
※1～6までを有料サービスでやりたい場合はProgateがオススメです。
「はじめてのHTML入門講座」と「はじめてのCSS入門講座」はセットと考えてください。
HTMLはサイトの構造、CSSはサイトの見た目を決める言語なので、この2つをセットにしないとそれっぽいサイトができないんです。
HTMLは、「ここは見出しで、ここが本文で、ここにこの画像を入れて～」というように、サイトの構造というか、構成というか、どんなものがそこにあるかを示すものです。
CSSは、「見出しと本文の文字の大きさはこのくらいで何色で、画像はこの場所で～」というように、サイトの見た目を整えてくものです。
こんな感じなので、HTMLとCSSはセットというわけです。
その中で、レイアウトを決めてくのがCSSになります。「はじめてのCSS入門講座」ではfloatというものが使われていますが、最近はFlexboxが主流と言われてるので、floatはとりあえず完全無視で大丈夫です。「6-1 floatプロパティ（CSSのボックスの配置）」は飛ばしてもOK。
その代わりに「CSS3 入門 レッスン66 flexbox」と「日本語対応！CSS Flexboxのチートシートを作ったので配布します」を使います。
ここまで来れば、知識的には模写コーディングに入れますが、その前に模写コーディングで役に立つ情報を仕入れておきましょう。
「ブログのデザインカスタマイズ！Google Chromeの開発者ツールでCSSを思いのままに操る！」と「今更聞けない！ ブラウザデベロッパーツールの使い方」で、Google Chromeのデベロッパーツールの使い方を学びます。
これも何となくわかれば、あとは必要なときにググりながらという感じでOKです。
「模写コーディングはどこまで再現するの？」、「画像とか文字の大きさとかはどうするの？」という疑問に答えてくれるのが、「Webサイトをコーディング模写するやり方と使用するツール」です。
この記事のルールを使って模写コーディングをやっていきましょう。これが合わないという人は、他の記事を探して参考にしてもOKです。
模写コーディングの前にくりのすけさんの通称「くりnote」をやると理解が効率的だと思います。2020年3月末まで一部無料になってます。
最後に、模写コーディングのオススメサイトを紹介します。というか、僕がやったものの紹介です。
- 東急リバブルPC版サイト（LP）
- 東急リバブルスマホ版サイト（LP）※ブラウザでスマホ版サイトを開けるようにする必要あり
レスポンシブデザインでサイトを作れるようになる
最近はレスポンシブデザインという、パソコンでもタブレットでもスマホでも、1つのページで表示できるようにするデザインが主流になってます。パソコンでウィンドウサイズを変えると、見た目も変わってくサイトがレスポンシブデザインで作られたサイトです。
これができるようになると、スキルアップした気分になれます。
以前はパソコン版から作って、タブレット版、スマホ版と作ってく感じだったみたいですが、Googleさんのモバイルファーストの流れで、スマホ版を先に作ってレスポンシブ化してく感じになってるみたいです。
この段階のロードマップはこんな感じでしたね。
- はじめてのレスポンシブWebデザイン入門講座（TechAcademy）：YouTube
- 模写コーディングその2
スマホでサイトを開いたときに、たまにパソコン向けのページで見にくいということがありますよね。ユーザー側からすればレスポンシブデザインは必須と言ってもいいくらいな気がしてます。
でも、実際にレスポンシブデザインでコーディングするのはなかなか大変だったりします。それと同時に、実現できると嬉しかったりもするので、ぜひ挑戦してみてください。
ここでも、模写コーディングのオススメサイトを紹介します。
Bootstrapを使ってサイトを作れるようになる
BootstrapはTwitter社が作ってるCSSフレームワークというもので、比較的簡単にサイトを作れる魔法のようなツールです。最新版はBootstrap4で、ググるとBootstrap3の情報も出てくるので注意が必要です。
Bootstrapを使って作られてるサイトはたくさんあるみたいですが、似た感じのデザインになってしまうというデメリットもあるそうです。
この段階のロードマップはこんな感じでした。
個人的にはグリッドシステムが画期的だと思います。レイアウトが簡単にできるのを体験してみてください。
Bootstrapを体験すると、「なんかできそう」と思えます。きっと、それまでの積み重ねがあったからなんでしょうが、ここでやる気がアップします。
さて、ここでの模写コーディングでやっとマナブさんがオススメしてるAirbnbが出てきます。僕はいきなり1つ目をやってものすごく苦労しました。ちなみに、2つ目はまだやってません。
ちなみに、最近では実務に近い形でコーディング練習ができるデザインカンプと呼ばれるものが無料・有料であるようなので、模写コーディングよりもそっちで練習した方がいいかもしれません。
さて、ここまで来ると、HTMLとCSSだけでは実現できないものにぶつかってると思います。スクロールで出てくるページトップボタンなど。
もしかしたら僕が知らないだけで実現できるのかもしれませんが、ググった感じだとJavaScriptやjQueryが必要になります。
JavaScriptとjQueryで動きをつけられるようになる
Coming soon
RubyやPHPでWebサービスを作れるようになる
Coming soon
Web系プログラミング学習を進める方向
Web系に限らず、プログラミングはどの方向に進むかによって何を学ぶかが変わってきます。今回はWeb系プログラミングなので、大きく分けるとフロントエンド方向と、バックエンド方向になると思います。
あるいは、その両方を極めてく方向や、エンジニアというよりWebサービスを提供する方向（起業なども含む）もあるでしょう。
マナブさんのロードマップは「稼ぐ」ことにフォーカスしたもので、マナブさん自身もエンジニアとしてはそんなにスキルが高いわけじゃないとYouTubeで言ってたと思います。これも1つの方向ですね。
マナブさんは単にエンジニアとしてのスキルだけじゃなく、SEOのスキルとの組み合わせで稼いでたそうです。この辺も動画を見てけば明言されてるので、「プログラミングスキルがあればすぐ稼げる！」というわけじゃないことに注意が必要です。
このマナブさんのロードマップについて、KENTAさんが興味深いことを言ってます。マナブさんはWordPress案件で稼ぐことを勧めてますが、KENTAさんはエンジニアとしての成長を考えたときにWordPress案件は良くないとYouTubeで解説してます。
さらに、WordPress案件は低単価案件ばかりになる、契約的にトラブルが発生しやすい、ということもあるようです。
詳しくはKENTAさんの動画をご覧ください。
ちなみに、WordPressはブログのためのシステムで、このブログもWordPressを使ってます。
どの方向でWeb系プログラミングを学習してけばいいのか？
僕はIT業界に身を置てるわけじゃないので、内部事情などは全くわかりません。これからWeb系プログラミングを学習しようと思ってる人は、身近にWeb系エンジニアがいるならその人に話を聞くと良さそうです。
身近にWeb系エンジニアがいなければ、いろんな情報をどう判断してくかという問題になります。
現段階での僕の結論は、「最初の段階ならとにかく手を動かせ！」です。
何事も効率的に進めてければいいんですが、最初はわからないことだらけなので、効率が悪いのが普通です。だとしたら、やりながら考えればいいというわけです。
もしかしたら最初にやりたかったことと違うことに興味を持つかもしれないし、知識が増えることでわかることも増えてくるので、考えてる時間があったら手を動かした方がいいと思います。
僕も迷いながらですが、やりたいことの方向に進んでくために選択をしてます。もちろん無駄だったなと思うこともあります。それすらも1つの学びとして、次の選択に活かしていければいいかなと思ってます。
というわけで、この記事が少しでも参考になれば嬉しいです。
プログラミング学習で挫折しない方法については「心理職が考えるプログラミング学習で挫折しない方法」に書いてあります。
