☰

Written by Manabu Bannai

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

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

プログラミング基礎の完全ロードマップとは

  • プログラミング基礎解説
  • 月５万を稼ぐ方法の解説
  • フリーランスの基礎解説
  • 稼ぐ事から逆算した教材
  • 情報は随時アップデート

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

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

補足①：プログラミングの初心者コミュニティについて

講師付きでプログラミングを学びたい方向けに「CodeBegin」というオンラインスクールを運営しております。質問し放題で、あと生徒同士での横の繋がりも作れます。詳しくは「初心者向けのプログラミングコミュニティを始めます」をどうぞ。

補足②：プログラミング独立教材について

本教材には「上位版の教材」が存在します。 無料版で「月５万までの道」を進めたら、その後は「月20万への道」を進めてみてください。詳しくは「プログラミング独立の完全ロードマップ」をどうぞ。

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


カリキュラムは下記のとおり。

カリキュラムの構成

１．稼ぐためのマインドを理解しよう【本質】
２．プログラミングは「Web系」が良い理由
３．学習前に質問力を高めよう【解決力の講座】
４．HTMLとCSSの基礎を理解しよう【入り口】
５．エディタをダウンロードしよう【SublimeText】
６．ディベロッパーツールを使ってみよう【神】
７．レスポンシブサイトを作ってみよう【英語】
８．CSSの神業である「Flexbox」を理解しよう
９．Bootstrapを理解しよう【爆速でサイト制作】
10．HTMLとCSSのレベルチェックテスト ※ここで月５万を達成
実践編：クラウドソーシングで案件受注をしよう

基本的には「世の中にある、良質な教材を使っていく」という方針です。

カリキュラムはゼロから作成しておらず、基本的には「世の中にある、良質な教材を使っていく」という方針でして、その理由は「この方が、高速で高品質な教材を作れるから」です。

それでは、学習をスタートしましょう。

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

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

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

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

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

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

【人生が変わる】個人で稼ぐために大切な思考法【５つある】

✅個人で稼ぐ際に大切な思考 ・相手の気持ちを考える ・100 Give、1 Take ・相手の時間を奪わない ・常に動きながら、考える ・１勝９負を受け入れる このあたりが大切だと思います。稼いでる人は、こういった思考が体に染み込んでおり、ここを身に着けないと、スキルを高めてもキツイと思いました 🔽Twitter…

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

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

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

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

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

このあたりの理由です。

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

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

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

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

プログラミングはAIで自動化されるけど、勉強した方が良い話【事実】

動画の内容 ・プログラミングは、AIで自動化されていく【ほぼ確実な結論】 ・プログラミングが自動化される時代に、快適に生きていく方法 🔽プログラミングスクールを卒業すると就職/転職できる理由

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SublimeTextの設定方法の記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

８．CSSの神業である「Flexbox」を理解しよう

ここまでの学習で、もしかすると「floatが難しい…」とか「display: blockとかdisplay: inlineってなんだよ…」と思っている方がいるかもです。しかしご安心を。

最近のCSSでは「Flexbox」という圧倒的に便利なCSSがありますので、floatの理解が微妙でも、とりあえずは大丈夫ですよ。

もちろん、floatを理解するに越したことはないのですが、、、そこで詰まって挫折したら意味ないので、一旦は「Flexbox」も学び、徐々に「HTMLとCSSでもレイアウト作り」に慣れていきましょう。

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

とりあえずこちらを見ておけばOKです。というか、Flexboxに関しては「display:flex」の部分だけ覚える感じでも、わりと問題なかったりします。

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

動画を見る際は、必ず手も動かしましょう。動画を流し見していると「なんとなく理解した気分」になったりしますが、実際に手を動かすと動かなくて苦戦したりしますからね。

そして、なにかエラーが出たら、以前に学習した「ディベロッパーツール」にてエラー確認してみましょう。そうしたら解決できるはずです。

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

こちらの記事も、圧倒的に良質ですね。動画をみたあとなら、記事を読んでもわりとスムーズに理解できるはずです。そして何度も繰り返して書いていますが、読むだけじゃなくて「手も動かす」という点を忘れないでください。

９．Bootstrapを理解しよう【爆速でサイト制作】

さて、ここから楽しいフェーズです。ここまでの学習とこれからの学習は大きく変わってきます。

  • ここまでの学習：ちょっと地味。すこし眠くなる。
  • これからの学習：カッコいいサイトが作れる！楽しい！

すんごいざっくりですが、上記のとおり。

そして、カッコいいサイト作りには「Bootstrap」というフレームワークを使います。有名どころだと「Airbnb」という世界的に有名なサイトが使っていたりしますね。下記のページは、開発にBootstrapが使われています。

Bootstrapで開発されているページ

こういった感じの「圧倒的にカッコいいページ」が作れるようになります。
どうでしょう。ワクワクしますよね。

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

まずは上記の２本を読みましょう。基本的にマスターすべきは「グリッドシステム」の部分です。

Bootstrapはとても便利ですが、流行った理由の１つが「グリッドシステム」だと思いまして、Webサイトを12分割してコーディングしていく概念ですね。

グリッドシステム以外にも色々な機能がありますが、機能がありすぎるので、最初は「グリッドシステムだけ、しっかり覚えよう」という意気込みで大丈夫です。

補足：Bootstrapのバージョンは「３ or ４」を使おう

最新版は「バージョン４」ですが、学習の際は「バージョン３」を使って良いと思います。上記で２本の記事を紹介していますが、双方ともに「バージョン３での解説」になっています。バージョン３でも４でも、似ている仕様なので、大きな問題なしです。
※グリットレイアウトの仕様が少し変更されているので、バージョン４を使う際はそこだけご注意ください。

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

こちらまた英語なのですが、かなり良質です。 先ほど紹介した日本語の解説記事を理解していれば、仮に英語が聞き取れなくても「コードを見ることで、理解できる」という状態になると思います。

というわけで、Bootstrapの学習は以上です。ここまでいくと「月５万円くらい」が射程圏内なので、次のステップで「レベルチェックテスト」をしてみましょう。

10．HTMLとCSSのレベルチェックテストをします

さて、そろそろテストをしましょう。
ここをクリアできたら、ほぼ確実に「月５万円」は達成できます。

残念なお知らせがあります

ちょっと残念なお知らせとして、下記を事前にお伝えしておきます。

  • レベルチェックテストは、たぶん難しいです
  • 細かいエラーとかで、思いっきり苦しみます
  • 月５万円を稼ぐのは、想像の10倍ほど大変です

このあたりですね。今までの学習は、言ってしまえば「準備運動」のようなもんです。しかしここからは本番に入っていきますので、ぜひ勇気をもって進めてみてください。

レベルチェックテストは「ページの模写」です

下記の２ページを模写してください。

先ほど紹介したAirbnbのページです。
こちらのページを見つつ、HTMLとCSSのコーディングをしてみてください。

レベルチェックテストのルール解説

ルールは下記のとおり。

  • HTMLやCSSコードのコピーはNGです
  • 画像はサイトからDL、もしくは似ている素材をネットで探してきてください
  • PC版とスマホ版がありますので、レスポンシブでコーディングしてください
  • 模写が完了したら、レンタルサーバーで公開してください（※注意点あり）
  • 検索機能などは、動作しなくてOKです（見た目だけ真似しましょう）

上記のとおりです。

１つ補足として、模写したサイトはサーバーを借りて、ベーシック認証を付けて、公開してみてください。ベーシック認証なしで勝手に公開してしまうと、著作権上の問題があります。

そしてサーバーレンタルにはお金がかかりますが、これくらいの払えないのはNGなので、必要な投資です。あと、レンタルサーバーはエンジニアとして稼ぐ際にも、わりと必須です。

おすすめなレンタルサーバーとは

個人的には「エックスサーバー」がおすすめです。そしてベーシック認証は簡単で「アクセス制限（BASIC認証）」のページで解説されています。

おめでとうございます(｀･ω･´)ゞ

ここまでの学習、お疲れ様でした。
現時点であなたは「プログラミングで月５万円を稼ぐ」というスキルを身に着けています。

具体的には「１件１〜３万の案件を請けれるかな」という状態なので、今後のカリキュラムでは、案件の取り方も含めて解説していきます。

しかし、ご注意を。あなたのスキルは伸びていますが、圧倒的に「実力不足」であることも事実です。なので、稼ぐ努力も大切ですが、引き続きカリキュラムに沿って学習を続けましょう。

実践編：クラウドソーシングで案件受注をしよう

ここから実践編です。クラウドソーシングという「フリーランス向けの求人サイト」にて仕事を探していきましょう。 そして、ここをクリアすると、あなたは「プロのエンジニア」になります。理由は次のとおり。

  • プロのエンジニア→エンジニアとしてお金を稼いでる
  • プロじゃないエンジニア→エンジニアとして稼ぐために勉強中

大半の人は「行動するのが怖いので、まずは基礎固め」という感じで足踏みをします。しかし、繰り返しですが、現時点でのあなたでも「スキルは不足しているけど、稼げることも事実」という状態です。行動しましょう。

悲報：クラウドソーシングの案件は稼ぎづらいです

スイマセン、いきなり悲報ですが、クラウドソーシングは稼ぎづらいです。

  • クラウドソーシングの案件→競争が激しく、価格が安い。発注者も初心者の場合が多く、納品後にも修正指示が多い場合がある。
  • 直営業で受注した案件→自分で営業したり、見積もり作成したり、契約書を作ったりという作業が発生。しかし、クラウドソーシングよりは遥かに儲かる。

あくまで僕の経験から思うことですが、上記の感じです。クラウドソーシングを批判する訳じゃないですが、、あくまで僕の意見としてご査収ください。

そして、できれば早い段階で「脱・クラウドソーシング」という状況を目指して欲しいのですが、準備運動としてランサーズから始めるのもありです。最初は辛いです。しかし、徐々に楽になっていきます。

クラウドソーシングで案件の探し方

大手のクラウドソーシングサイトは「ランサーズ」と「クラウドワークス」があります。案件数は同じくらいですが、今回はクラウドワークスを使って解説します。そして、あなたが受注できる案件例が、下記のとおり。

上記の案件で、たぶん案件をみたときに「これなら出来るかも・・・」と思うはずです。その際に「これなら、80%は問題ないな」と思ったら、提案しちゃってOKです。そして、仕事の探し方は下記のとおり。

上記のとおり、仕事検索バーの部分で「コーディングのみ」と入力して検索したらOKです。そして出てきた案件で「できそうだな」と思うものに提案するだけです。

まずは「20件」くらいの提案をしよう

勘違いする人が多いですが「提案する＝受注する」というのは間違いです。
というか、たぶん提案しても落選します。

提案数 × 受注率 = 受注数

上記が数式ですが、初心者の場合は実績がないので「受注率は10%以下」となります。つまり、10件の提案をしても、1件とれたら良い方、という感じ。 なので、最初は行動数が必須です。できそうな案件に、ガンガン提案しましょう。

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

ベーシックインカムを稼ぐ方法【月10万円に必要なプログラミング知識】

人生に消耗してるなら、ベーシックインカムを稼げるスキルを身につけてましょう。
例えば、HTML/CSS/Bootstrapを3ヶ月で独学したら、月10万円は稼げますので。このような、ベーシックインカム的なスキルがあると、疲れたときに南の島でのんびりと現実逃避できるからオススメ。

仕事の探し方を超具体的に説明してます。必見です。

ちなみに、動画内では「プログラミング学習の手順」も解説していますが、その部分は飛ばしちゃってOKです。基本的は本ページとほぼ同じ内容を解説していいます。

あと補足ですが、上記の動画では「月10万円を稼げる」と話していますが、月５万でも月10万でも、そこはあまり関係なくて、要するに「受注する案件の数で決まる」と考えてください。ちょっと人によっては疑問を感じるかもなので、補足しておきました。

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

上記の記事をどうぞ。ランサーズやクラウドワークスで提案する際の「提案文の書き方」をまとめています。このとおりに提案したら、通りやすいと思います。

ここで「必殺技」も公開します

未来を先読みすると「クラウドソーシングで提案しても受注できない、、、」と悩む人が増えると思うので、必殺技をお伝えします。それは「相手がビビるくらいに値引きすること」です。要するに下記のとおり。

  • 初心者の頃はあまり受注できない（仕方ないです）
  • 受注できないので、実績づくりと割り切って値引きする
  • 値引きすると、徐々に受注できるようになる
  • そして、実績が溜まってきて、その後は受注率が上昇
  • 実績を出しつつ、安定的に受注できるようになる

こんな感じですね。例えば「発注者が３万円くらいを希望」と書いている案件に対して、例えば「5,000円でやります」と提案する感じです。

安すぎても怪しまれるので、安くしている理由は「実績を増やしたいから」と伝えてOKだと思います。

あとは行動するだけです

というわけで、解説は以上となります。ぶっちゃけ、世の中に「ここまで順を追って解説している教材」は存在していなかったと思います。

ぼく自身が経験から蓄積したノウハウなので、ぜひ行動してみて、徐々に人生を変えてみてください。プログラミングスキルは、ほぼ確実にあなたの人生に影響を与えるはずだと思っています。

これ以降は「有料」となります

下記が詳細となります。
プログラミングで「月20万」を稼ぐ道です。

【公開】プログラミング独立の完全ロードマップ【月20万を稼ぐ道】

プログラミング独立の完全ロードマップを公開しました。プログラミングで「月20万を稼ぐ道」を解説しています。有料教材となりますが、プログラミングで１件でも案件受注したら、余裕で回収できる金額です。プログラミングを通して、徐々に人生を変えていきましょう。

補足：学習で重宝する参考サイトまとめ


下記のサイトです。

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

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