【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】
こんにちは、マナブです。
こちらは「プログラミング基礎の完全ロードマップ」のページです。
プログラミング基礎の完全ロードマップとは
- プログラミング基礎解説
- 月5万を稼ぐ方法の解説
- フリーランスの基礎解説
- 稼ぐ事から逆算した教材
- 情報は随時アップデート
上記の感じで、これらをすべて無料で提供します。
人生において「プログラミングという武器」を手にいれましょう。
なお、プログラミング学習は短期間で終わるものではありません。
徐々に、コツコツと積み上げて、少しづつ人生を変えるのが良いと思います。
補足①:プログラミングの初心者コミュニティについて
講師付きでプログラミングを学びたい方向けに「CodeBegin」というオンラインスクールを運営しております。質問し放題で、あと生徒同士での横の繋がりも作れます。詳しくは「初心者向けのプログラミングコミュニティを始めます」をどうぞ。
補足②:プログラミング独立教材について
本教材には「上位版の教材」が存在します。 無料版で「月5万までの道」を進めたら、その後は「月20万への道」を進めてみてください。詳しくは「プログラミング独立の完全ロードマップ」をどうぞ。
学習カリキュラム【挫折しない教材】
カリキュラムの構成
2.プログラミングは「Web系」が良い理由
3.学習前に質問力を高めよう【解決力の講座】
4.HTMLとCSSの基礎を理解しよう【入り口】
5.エディタをダウンロードしよう【SublimeText】
6.ディベロッパーツールを使ってみよう【神】
7.レスポンシブサイトを作ってみよう【英語】
8.CSSの神業である「Flexbox」を理解しよう
9.Bootstrapを理解しよう【爆速でサイト制作】
10.HTMLとCSSのレベルチェックテスト
※ここで月5万を達成
実践編:クラウドソーシングで案件受注をしよう
基本的には「世の中にある、良質な教材を使っていく」という方針です。
カリキュラムはゼロから作成しておらず、基本的には「世の中にある、良質な教材を使っていく」という方針でして、その理由は「この方が、高速で高品質な教材を作れるから」です。
それでは、学習をスタートしましょう。
1.稼ぐためのマインドを理解しよう【本質】
ここが最初ですが、最重要パートです。
世の中には「稼ぐ力を持っている」という人が数多くいますが、そういった皆さんは「共通のマインド」があると思っています。具体的には下記のとおり。
個人で稼ぐために大切な思考法
✅個人で稼ぐ際に大切な思考
・相手の気持ちを考える
・100 Give、1 Take
・相手の時間を奪わない
・常に動きながら、考える
・1勝9負を受け入れるこのあたりが大切だと思います。稼いでる人は、こういった思考が体に染み込んでおり、ここを身に着けないと、スキルを高めてもキツイと思いました
— マナブ@バンコク (@manabubannai) 2019年2月9日
もしかしたら「当たり前じゃん」と思うかもですが、驚くほどにできている人が少ないです。
よくあるNG例として「なんでもかんでも、質問する」という人がいますが、これは「相手の時間を奪う」ということに相当します。このあたりの大切な思考法を、YouTube動画で解説しました。
個人で稼ぐために大切な思考法の解説動画
【人生が変わる】個人で稼ぐために大切な思考法【5つある】
✅個人で稼ぐ際に大切な思考 ・相手の気持ちを考える ・100 Give、1 Take ・相手の時間を奪わない ・常に動きながら、考える ・1勝9負を受け入れる このあたりが大切だと思います。稼いでる人は、こういった思考が体に染み込んでおり、ここを身に着けないと、スキルを高めてもキツイと思いました 🔽Twitter…
ここが本気で圧倒的に重要なので、できれば繰り返し視聴していだだけると嬉しいです。
ビジネスは1人で完結しません。必ず相手が存在しますので、要するに「相手に気持ちよくなってもらう」というマインドが必須で、ここが出来ないと、どんなにスキルを身につけたとしても、個人で稼ぐ or 年収を上げるといった行為が、かなり難しくなると思います。
2.プログラミングは「Web系」が良い理由
プログラミング言語は色々ありますが、まずは「Web系」から始めることをオススメします。理由は次のとおり。
- 初心者でも、わりと理解しやすい
- 柔軟な働き方を、実現できる
- 市場が大きいので、仕事が多い
このあたりの理由です。
人によっては「アプリ系の方がいい」とか「C言語からやるべき」とかって言うかもですが、入り口はWeb系で問題ないと思っています。Web系は初心者でも理解しやすいですし、収入にも繋がりやすいので。いきなりC言語とかでスタートすると、、、かなり挫折しやすいと思います。
あと、プログラミング言語は「1つで完結しない」ということもあり、稼いでいるエンジニアは「みなさん、わりと複数言語を使える」という感じなので、最初の入り口は過度に気にしなくてOKです。
読んでおくべき記事が「2本」あります
- 【事実】プログラミングで言語選びする際の注意点【Javaは微妙です】:プログラミングの言語選びに関する記事です。3分くらいで読めますので、ざっと目を通していただけたら勉強になると思います。
- AI時代において『Web業界の今後』は明るい理由【向き不向きはない】:よくある質問で「プログラミングはAIで淘汰されませんか?」と聞かれます。もちろんAIは進化していきますが、大きな問題はない理由を解説しています。
見ておくべき動画が「1本」あります
プログラミングはAIで自動化されるけど、勉強した方が良い話【事実】
動画の内容 ・プログラミングは、AIで自動化されていく【ほぼ確実な結論】 ・プログラミングが自動化される時代に、快適に生きていく方法 🔽プログラミングスクールを卒業すると就職/転職できる理由
プログラミングが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
8.CSSの神業である「Flexbox」を理解しよう
ここまでの学習で、もしかすると「floatが難しい…」とか「display: blockとかdisplay: inlineってなんだよ…」と思っている方がいるかもです。しかしご安心を。
もちろん、floatを理解するに越したことはないのですが、、、そこで詰まって挫折したら意味ないので、一旦は「Flexbox」も学び、徐々に「HTMLとCSSでもレイアウト作り」に慣れていきましょう。
見ておくべき動画が「1本」あります
とりあえずこちらを見ておけばOKです。というか、Flexboxに関しては「display:flex」の部分だけ覚える感じでも、わりと問題なかったりします。
学習における注意点:必ず手を動かしましょう
動画を見る際は、必ず手も動かしましょう。動画を流し見していると「なんとなく理解した気分」になったりしますが、実際に手を動かすと動かなくて苦戦したりしますからね。
そして、なにかエラーが出たら、以前に学習した「ディベロッパーツール」にてエラー確認してみましょう。そうしたら解決できるはずです。
読んでおくべき記事が「1本」あります
こちらの記事も、圧倒的に良質ですね。動画をみたあとなら、記事を読んでもわりとスムーズに理解できるはずです。そして何度も繰り返して書いていますが、読むだけじゃなくて「手も動かす」という点を忘れないでください。
9.Bootstrapを理解しよう【爆速でサイト制作】
さて、ここから楽しいフェーズです。ここまでの学習とこれからの学習は大きく変わってきます。
- ここまでの学習:ちょっと地味。すこし眠くなる。
- これからの学習:カッコいいサイトが作れる!楽しい!
すんごいざっくりですが、上記のとおり。
そして、カッコいいサイト作りには「Bootstrap」というフレームワークを使います。有名どころだと「Airbnb」という世界的に有名なサイトが使っていたりしますね。下記のページは、開発にBootstrapが使われています。
Bootstrapで開発されているページ
こういった感じの「圧倒的にカッコいいページ」が作れるようになります。
どうでしょう。ワクワクしますよね。
読んでおくべき記事が「2本」あります
まずは上記の2本を読みましょう。基本的にマスターすべきは「グリッドシステム」の部分です。
Bootstrapはとても便利ですが、流行った理由の1つが「グリッドシステム」だと思いまして、Webサイトを12分割してコーディングしていく概念ですね。
グリッドシステム以外にも色々な機能がありますが、機能がありすぎるので、最初は「グリッドシステムだけ、しっかり覚えよう」という意気込みで大丈夫です。
補足:Bootstrapのバージョンは「3 or 4」を使おう
最新版は「バージョン4」ですが、学習の際は「バージョン3」を使って良いと思います。上記で2本の記事を紹介していますが、双方ともに「バージョン3での解説」になっています。バージョン3でも4でも、似ている仕様なので、大きな問題なしです。
※グリットレイアウトの仕様が少し変更されているので、バージョン4を使う際はそこだけご注意ください。
見ておくべき動画が「1本」あります
こちらまた英語なのですが、かなり良質です。 先ほど紹介した日本語の解説記事を理解していれば、仮に英語が聞き取れなくても「コードを見ることで、理解できる」という状態になると思います。
というわけで、Bootstrapの学習は以上です。ここまでいくと「月5万円くらい」が射程圏内なので、次のステップで「レベルチェックテスト」をしてみましょう。
10.HTMLとCSSのレベルチェックテストをします
さて、そろそろテストをしましょう。
ここをクリアできたら、ほぼ確実に「月5万円」は達成できます。
残念なお知らせがあります
ちょっと残念なお知らせとして、下記を事前にお伝えしておきます。
- レベルチェックテストは、たぶん難しいです
- 細かいエラーとかで、思いっきり苦しみます
- 月5万円を稼ぐのは、想像の10倍ほど大変です
このあたりですね。今までの学習は、言ってしまえば「準備運動」のようなもんです。しかしここからは本番に入っていきますので、ぜひ勇気をもって進めてみてください。
レベルチェックテストは「ページの模写」です
下記の2ページを模写してください。
先ほど紹介したAirbnbのページです。
こちらのページを見つつ、HTMLとCSSのコーディングをしてみてください。
レベルチェックテストのルール解説
ルールは下記のとおり。
- HTMLやCSSコードのコピーはNGです
- 画像はサイトからDL、もしくは似ている素材をネットで探してきてください
- PC版とスマホ版がありますので、レスポンシブでコーディングしてください
- 模写が完了したら、レンタルサーバーで公開してください(※注意点あり)
- 検索機能などは、動作しなくてOKです(見た目だけ真似しましょう)
上記のとおりです。
1つ補足として、模写したサイトはサーバーを借りて、ベーシック認証を付けて、公開してみてください。ベーシック認証なしで勝手に公開してしまうと、著作権上の問題があります。
そしてサーバーレンタルにはお金がかかりますが、これくらいの払えないのはNGなので、必要な投資です。あと、レンタルサーバーはエンジニアとして稼ぐ際にも、わりと必須です。
おすすめなレンタルサーバーとは
個人的には「エックスサーバー」がおすすめです。そしてベーシック認証は簡単で「アクセス制限(BASIC認証)」のページで解説されています。
おめでとうございます(`・ω・´)ゞ
ここまでの学習、お疲れ様でした。
現時点であなたは「プログラミングで月5万円を稼ぐ」というスキルを身に着けています。
具体的には「1件1〜3万の案件を請けれるかな」という状態なので、今後のカリキュラムでは、案件の取り方も含めて解説していきます。
しかし、ご注意を。あなたのスキルは伸びていますが、圧倒的に「実力不足」であることも事実です。なので、稼ぐ努力も大切ですが、引き続きカリキュラムに沿って学習を続けましょう。
実践編:クラウドソーシングで案件受注をしよう
ここから実践編です。クラウドソーシングという「フリーランス向けの求人サイト」にて仕事を探していきましょう。 そして、ここをクリアすると、あなたは「プロのエンジニア」になります。理由は次のとおり。
- プロのエンジニア→エンジニアとしてお金を稼いでる
- プロじゃないエンジニア→エンジニアとして稼ぐために勉強中
大半の人は「行動するのが怖いので、まずは基礎固め」という感じで足踏みをします。しかし、繰り返しですが、現時点でのあなたでも「スキルは不足しているけど、稼げることも事実」という状態です。行動しましょう。
悲報:クラウドソーシングの案件は稼ぎづらいです
スイマセン、いきなり悲報ですが、クラウドソーシングは稼ぎづらいです。
- クラウドソーシングの案件→競争が激しく、価格が安い。発注者も初心者の場合が多く、納品後にも修正指示が多い場合がある。
- 直営業で受注した案件→自分で営業したり、見積もり作成したり、契約書を作ったりという作業が発生。しかし、クラウドソーシングよりは遥かに儲かる。
あくまで僕の経験から思うことですが、上記の感じです。クラウドソーシングを批判する訳じゃないですが、、あくまで僕の意見としてご査収ください。
そして、できれば早い段階で「脱・クラウドソーシング」という状況を目指して欲しいのですが、準備運動としてランサーズから始めるのもありです。最初は辛いです。しかし、徐々に楽になっていきます。
クラウドソーシングで案件の探し方
大手のクラウドソーシングサイトは「ランサーズ」と「クラウドワークス」があります。案件数は同じくらいですが、今回はクラウドワークスを使って解説します。そして、あなたが受注できる案件例が、下記のとおり。
- イベントページのコーディング案件:数万円の案件です
- レスポンシブ化の依頼:数万円の案件です
- 【継続あり】通販LPコーディングの依頼:5,000〜20,000円の案件です
上記の案件で、たぶん案件をみたときに「これなら出来るかも・・・」と思うはずです。その際に「これなら、80%は問題ないな」と思ったら、提案しちゃってOKです。そして、仕事の探し方は下記のとおり。
上記のとおり、仕事検索バーの部分で「コーディングのみ」と入力して検索したらOKです。そして出てきた案件で「できそうだな」と思うものに提案するだけです。
まずは「20件」くらいの提案をしよう
勘違いする人が多いですが「提案する=受注する」というのは間違いです。
というか、たぶん提案しても落選します。
上記が数式ですが、初心者の場合は実績がないので「受注率は10%以下」となります。つまり、10件の提案をしても、1件とれたら良い方、という感じ。 なので、最初は行動数が必須です。できそうな案件に、ガンガン提案しましょう。
見ておくべき動画が「1本」あります
ベーシックインカムを稼ぐ方法【月10万円に必要なプログラミング知識】
人生に消耗してるなら、ベーシックインカムを稼げるスキルを身につけてましょう。
例えば、HTML/CSS/Bootstrapを3ヶ月で独学したら、月10万円は稼げますので。このような、ベーシックインカム的なスキルがあると、疲れたときに南の島でのんびりと現実逃避できるからオススメ。
仕事の探し方を超具体的に説明してます。必見です。
ちなみに、動画内では「プログラミング学習の手順」も解説していますが、その部分は飛ばしちゃってOKです。基本的は本ページとほぼ同じ内容を解説していいます。
あと補足ですが、上記の動画では「月10万円を稼げる」と話していますが、月5万でも月10万でも、そこはあまり関係なくて、要するに「受注する案件の数で決まる」と考えてください。ちょっと人によっては疑問を感じるかもなので、補足しておきました。
読んでおくべき記事が「1本」あります
上記の記事をどうぞ。ランサーズやクラウドワークスで提案する際の「提案文の書き方」をまとめています。このとおりに提案したら、通りやすいと思います。
ここで「必殺技」も公開します
未来を先読みすると「クラウドソーシングで提案しても受注できない、、、」と悩む人が増えると思うので、必殺技をお伝えします。それは「相手がビビるくらいに値引きすること」です。要するに下記のとおり。
- 初心者の頃はあまり受注できない(仕方ないです)
- 受注できないので、実績づくりと割り切って値引きする
- 値引きすると、徐々に受注できるようになる
- そして、実績が溜まってきて、その後は受注率が上昇
- 実績を出しつつ、安定的に受注できるようになる
こんな感じですね。例えば「発注者が3万円くらいを希望」と書いている案件に対して、例えば「5,000円でやります」と提案する感じです。
安すぎても怪しまれるので、安くしている理由は「実績を増やしたいから」と伝えてOKだと思います。
あとは行動するだけです
というわけで、解説は以上となります。ぶっちゃけ、世の中に「ここまで順を追って解説している教材」は存在していなかったと思います。
ぼく自身が経験から蓄積したノウハウなので、ぜひ行動してみて、徐々に人生を変えてみてください。プログラミングスキルは、ほぼ確実にあなたの人生に影響を与えるはずだと思っています。
これ以降は「有料」となります
下記が詳細となります。
プログラミングで「月20万」を稼ぐ道です。
【公開】プログラミング独立の完全ロードマップ【月20万を稼ぐ道】
プログラミング独立の完全ロードマップを公開しました。プログラミングで「月20万を稼ぐ道」を解説しています。有料教材となりますが、プログラミングで1件でも案件受注したら、余裕で回収できる金額です。プログラミングを通して、徐々に人生を変えていきましょう。
補足:学習で重宝する参考サイトまとめ
- サルワカ | サルでも分かる図解説明マガジン
- Webクリエイターボックス
- manablog | 人生のアウトプットブログ
- from Garage|小さな挑戦が 未来を変える
- ずくろぐ | 国内外を住み歩くノマド女子のブログ
- HPcode | えいちぴーこーど
かなり質が高いと思います。 空き時間などに目を通してみたり、わからないことは上記サイトを中心に検索してみると、わかりやすい答えにたどり着きやすいと思います。