Written by Manabu Bannai

【保存版】プログラミング学習の完全ロードマップ【挫折しない教材】

こんにちは、マナブです。
こちらは「プログラミング学習の完全ロードマップ」のページです。

プログラミング学習の完全ロードマップとは

  • プログラミング基礎解説
  • フリーランスの基礎解説
  • 僕が使った生データ公開
  • 質問回答チャットを用意
  • 情報は随時アップデート

上記の感じで、これらをすべて無料で提供します。
人生において「プログラミングという武器」を手にいれましょう。

なお、プログラミング学習は短期間で終わるものではありません。
徐々に、コツコツと積み上げて、少しづつ人生を変えるのが良いと思います。

ページのもくじ

1.学習カリキュラム【挫折しない教材】


スイマセン、まだ未完成です。
学習コミュニティで会話しつつ、徐々に完成させていきます。

また、カリキュラムを完全に「ゼロから作成する」というつもりはなくて、基本的には「世の中にある、良質な教材を使っていく」という方針です。

あくまで教材の目的は「プログラミングを身につける」ということなので、この点だけご了承ください <(_ _)>

カリキュラムの構成(未完成です)

1.稼ぐためのマインドを理解しよう【本質】
2.プログラミングは「Web系」が良い理由
3.学習前に質問力を高めよう【解決力の講座】
4.HTMLとCSSの基礎を理解しよう【入り口】
5.エディタをダウンロードしよう【SublimeText】
6.ディベロッパーツールを使ってみよう【神】
7.レスポンシブサイトを作ってみよう【英語】
0.Bootstrapを理解しよう ※ここで月5万は稼げます
0.jQueryの基礎を理解しよう
0.PHPの基礎を理解しよう
0.WordPressの基礎を理解しよう
0.WordPressのオリジナルテーマを作ろう
0.SEOの基礎を理解しよう
0.SNS発信の基礎を理解しよう
0.ランサーズで仕事を受注してみよう
0.見積書や請求書の作り方の基本
0.ポートフォリオサイトを作成しよう(アウトプット)
0.AdobeツールでLP案件を大量受注する方法

1.稼ぐためのマインドを理解しよう【本質】

ここが最初ですが、最重要パートです。
世の中には「稼ぐ力を持っている」という人が数多くいますが、そういった皆さんは「共通のマインド」があると思っています。具体的には下記のとおり。

個人で稼ぐために大切な思考法

もしかしたら「当たり前じゃん」と思うかもですが、驚くほどにできている人が少ないです。

よくあるNG例として「なんでもかんでも、質問する」という人がいますが、これは「相手の時間を奪う」ということに相当します。このあたりの大切な思考法を、YouTube動画で解説しました。

個人で稼ぐために大切な思考法の解説動画

ここが本気で圧倒的に重要なので、できれば繰り返し視聴していだだけると嬉しいです。

ビジネスは1人で完結しません。必ず相手が存在しますので、要するに「相手に気持ちよくなってもらう」というマインドが必須で、ここが出来ないと、どんなにスキルを身につけたとしても、個人で稼ぐ or 年収を上げるといった行為が、かなり難しくなると思います。

2.プログラミングは「Web系」が良い理由

プログラミング言語は色々ありますが、まずは「Web系」から始めることをオススメします。理由は次のとおり。

  • 初心者でも、わりと理解しやすい
  • 柔軟な働き方を、実現できる
  • 市場が大きいので、仕事が多い

このあたりの理由です。

人によっては「アプリ系の方がいい」とか「C言語からやるべき」とかって言うかもですが、入り口はWeb系で問題ないと思っています。Web系は初心者でも理解しやすいですし、収入にも繋がりやすいので。いきなりC言語とかでスタートすると、、、かなり挫折しやすいと思います。

あと、プログラミング言語は「1つで完結しない」ということもあり、稼いでいるエンジニアは「みなさん、わりと複数言語を使える」という感じなので、最初の入り口は過度に気にしなくてOKです。

読んでおくべき記事が「2本」あります。

見ておくべき動画が「1本」あります

プログラミングがAIで自動化される時代の生き方論です。基本的に音声のみで理解できますので、通勤時間や空き時間とかに、気軽に聞いてみてください。

3.学習前に質問力を高めよう【解決力の講座】

エンジニアとして生きる上では「検索力」がマジで重要です。

基本的には「質問をする=相手の時間を奪う」という考えを持ったほうが良くて、大半のエンジニアは「電話や会議」などを嫌います。なぜなら生産性が下がるからですね。

質問をする前にやるべきこと。

  • 手順①:まずはググッて解決を目指す
  • 手順②:質問サイトに投稿してみる
  • 手順③:質問部屋で質問する

上記のとおり。質問サイトは「teratail」を推奨します。

パブリックな質問サイトに投稿するとこで、その質問&回答が、その後に学習する人の助けになりますからね。基本的には「1対1での質問回答は、あまりコスパが良くない」という考えが良いと思います。

なお、質問サイトに投稿しても、すぐに返事は来ません。
なので、大切なことは「まずは先に進んでみる」ということです。

過去の僕もそうだったのですが「分からないことがある→質問サイトに投稿する→回答がこない→先に進む→分からないことがなにかのタイミングで解決する」というループが生まれたりしますので。

どうしても分からないなら、質問しよう

ぶっちゃけ「出血大サービス」だと思っていますが、今回の教材では「質問部屋&専属講師」を無料提供します。
» 質問部屋の使い方を読む(ページ下部にスクロールします)

4.HTMLとCSSの基礎を理解しよう【入り口】

ここから実践的なプログラミングがスタートです。

テックアカデミーというプログラミングスクールが無料公開している動画です。HTMLとCSSを網羅的に解説している動画でして、最初からボリューミーですが頑張りましょう。

見ておくべき動画は「2本」あります

スイマセン、、、いきなりかなり本数が多いですが、これらを閲覧するとこで、HTMLとCSSの技術書1冊分くらいの学びがあるはずです。技術書を購入した場合は、安くても3,000円はしますので、YouTubeでの学習は圧倒的にお得ですね。

学習における注意点:必ず手を動かしましょう

HTMLとCSS学習の動画を掲載しましたが、注意点は「手を動かすこと」です。具体的には「動画と同じように、自分でもコードを書いてみる」ということです。

しかし、人によっては「学習時間がないので、移動中に見ています」という人もいると思います。それもOKなのですが、その場合は「移動中に見る→帰宅してからYouTubeを早送りしつつ、自分で手を動かしてみる」という感じにしてみてください。

よくある挫折ポイント&対応策

  • floatは無視してOK → HTMLとCSSの難関は「float」かな、、と勝手に思っています。しかし、現代のテクノロジーだと「floatは、ほぼ使わない」という感じなので、しっかり理解できなくてもOKです。ぶっちゃけ実務でほぼ使いませんので。

※挫折ポイントを募集中です。ここがわからなかった、という部分があれば、学習コミュニティの「教材の改善部屋」でお知らせください。

5.エディタをダウンロードしよう【SublimeText】

ぶっちゃけエディタは「好みによる」と思っていますが、僕は「SublimeText」をオススメします。

  • 利用者が多いので、プラグインが豊富
  • シンプルで軽量、基本は無料で使える
  • かっこいいデザインもあり、気分上々

まぁこのあたりですね。 とはいえ、人によっては「Atom」だったり、もしくは「VSCode」だったりしますね。 1つ言えることは「初心者のうちは、別にどれを選んでも大差ない」ということです。

SublimeTextの設定方法の記事

こちら読んでおけば問題ないと思います。特に「SublimeLineter」というプラグインが便利なので、必ず入れておきましょう。なお、参考までに僕のSublimeTextの設定条件も公開しています。下記の記事からどうぞ。
» 自分用メモ:SublimeText3の設定&ショートカット

6.ディベロッパーツールを使ってみよう【神】

このあたりまで理解してくると、徐々に「脱初心者かな」というレベルです。

そして、コードをゴニョゴニョといじったりできるレベルになるので、仮にカフェとかで作業をしたら「ドヤ顔できるレベル」でもあるかなと思います。

見ておく動画は「2本」あります。

上記の2本です。基本的には「流し見」でもOKですが、しっかり理解するようにしてください。ディベロッパーツールが使えるようになると「カッコいいサイトのコードを、いい感じに真似できる」というスキルが身につくので、コーディング速度が爆速化します。

追加:こちらの「1本」も見てみてください

こちら英語なのですが、、、品質が高くオススメ。そして、今後はちょくちょく「英語の教材」も混ぜていくので、ちょっと慣れてみてください。
※英語が苦手だとキツイかもですが、コードの動きをみると理解できるはずです。

読んでおくべき記事が「2本」あります

上記の2本です。
そして大切なことがありまして、それは「まずは動画で理解→その後にブログ記事を読む」という流れです。

大半の人は「まずは文字で理解する」という学習方法を使いがちですが、、、これは学校教育の弊害ですね。文字よりも動画の方が、圧倒的に理解しやすいですよ。

動画で概要を理解したら、質の高いブログ記事だったりも拾っていき、さらに理解を深める感じです。

7.レスポンシブサイトを作ってみよう【英語】

ここで挫折者が増えるかもです。
ちょっと難しいですが、時間をかけても大丈夫なので、しっかり理解するようにしてください。

見るべき動画は「2本」あります

今回も結構ボリューミーです。こちらの2本を技術書などで学ぶと、たぶん2,000円以上はかかってくると思います。しかしYouTubeは素晴らしいですね。完全に無料です。

ちなみに2本目の動画は英語ですが、なんとか頑張ってみてください。今後もちょくちょく「英語の教材」を挟んでいきますが、その理由は「日本語教材よりも、圧倒的に質が高いから」です。 なお、英語をすべて聞き取る必要はなくて、コードの内容だけ理解できればOKです。

※補足:2本目の動画でどうしてもバグに苦しんだら「答えのコード」を制作者さんのサイトからダウンロード可能です。
» 参考:Responsive Web Design Tutorial | LearnWebCode

カリキュラムは作成中です

スイマセン、、、<(_ _)>
一旦はここまででお願いします。 人によっては「もう、すべて過去に学習済みでした…」という感じかもですが、徐々にアップデートしていきます。更新は学習チャット or Twitterでお知らせします。
» マナブ@バンコク(@manabubannai)さん | Twitter

2.学習コミュニティの使い方とルール


基本原則は「相手を批判しないこと」です。
批判に時間を使っても無駄なので、その時間で学習しましょう。

基本ルール

下記のルールを守るようにお願いします。

  • カリキュラムは勝手にコピー&公開してOKです
  • ブログにカリキュラムを転載してもOKです
  • カリキュラムが分かりづらいなら、指摘OKです
  • 質問前に、しっかりググることが必須です
  • Takeだけじゃなく、Giveも考えてみてください

できれば「自由空間」がいいのですが、とはいえルールがないということは、つまり「無法地帯」にもなってしまいますので、最低限だけルール設定しました。

なお、ありがたいことに、現在は「約5,000名」の参加者がいるのですが、この規模だと「ルールがないと崩壊する」かと思っており、繰り返しですが、ぜひ「ルール厳守」だけお願いします<(_ _)>

Slack内での部屋の使い方

下記のとおりです。
部屋が荒れた場合は、コミュニティ閉鎖 or 有料化を検討します <(_ _)>

  • 挨拶部屋
  • 雑談部屋
  • なんでも質問部屋
  • 講師への質問部屋 ※ここが重要

挨拶部屋

挨拶部屋は、みなさんご自由に挨拶どうぞ。
そこから会話が生まれるのもいいかなと思っています。挨拶からスタートする、わりと自由空間です。

雑談部屋

雑談部屋も、なんでもご自由にどうぞ。
さきほどチラっと覗いたら、筋トレの話とかがでており、自由を感じました。

なんでも質問部屋

なんでも質問部屋は、こちらも自由空間です。
学習コミュニティには上級エンジニアも所属してますので、人生相談してもいいかもですね。

講師への質問部屋 ※ここが重要

講師への質問部屋だけ、注意点があります。
カリキュラムの「3.学習前に質問力を高めよう」でも解説していますが、必ず下記の手順を踏んでください。

  • 手順①:まずはググッて解決を目指す
  • 手順②:質問サイトに投稿してみる
  • 手順③:質問部屋で質問する

質問サイトは「teratail」を推奨します。 どうしても解決しない場合は、「講師への質問部屋」にどうぞ。なお、質問内容は「カリキュラムに関することのみ」とさせてください <(_ _)>

学習コミュニティに参加する

学習コミュニティの使い方とルールに同意いただけた場合のみ、参加可能です。下記のボタンをクリックすると、Slackのチャットグループに参加できます。Slackが初めての方は、使い方をググってみてください。
» 無料で学習コミュニティに参加する

3.学習で重宝する参考サイトまとめ


下記のサイトです。

かなり質が高いと思います。 空き時間などに目を通してみたり、わからないことは上記サイトを中心に検索してみると、わかりやすい答えにたどり着きやすいと思います。