2020/02/02)【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】こんにちは、マナブです。こちらは「プログラミング基礎の完全ロードマップ」のページです。情報は随時アップデート上記の感じで、これらをすべて無料で提供します。人生において「プログラミングという武器」を手にいれましょう。プログラミング学習は短期間で終わるものではありません。徐々に、コツコツと積み上げて、少しづつ人生を変えるのが良いと思います。補足:プログラミング独立教材について本教材には「上位版の教材」が存在します。無料版で「月5万までの道」を進めたら、その後は「月20万への道」を進めてみてください。詳しくは「プログラミング独立の完全ロードマップ」をどうぞ。学習カリキュラム【挫折しない教材】カリキュラムは下記のとおり。実践編:クラウドソーシングで案件受注をしよう基本的には「世の中にある、良質な教材を使っていく」という方針です。カリキュラムはゼロから作成しておらず、基本的には「世の中にある、良質な教材を使っていく」という方針でして、その理由は「この方が、高速で高品質な教材を作れるから」です。それでは、学習をスタートしましょう。1.稼ぐためのマインドを理解しよう【本質】ここが最初ですが、最重要パートです。世の中には「稼ぐ力を持っている」という人が数多くいますが、そういった皆さんは「共通のマインド」があると思っています。具体的には下記のとおり。Take・相手の時間を奪わない・常に動きながら、考える・1勝9負を受け入れるこのあたりが大切だと思います。2019年2月9日もしかしたら「当たり前じゃん」と思うかもですが、驚くほどにできている人が少ないです。あるNG例として「なんでもかんでも、質問する」という人がいますが、これは「相手の時間を奪う」ということに相当します。このあたりの大切な思考法を、YouTube動画で解説しました。このあたりが大切だと思います。🔽Twitter...ここが本気で圧倒的に重要なので、できれば繰り返し視聴していだだけると嬉しいです。ビジネスは1人で完結しません。年収を上げるといった行為が、かなり難しくなると思います。2.プログラミングは「Web系」が良い理由プログラミング言語は色々ありますが、まずは「Web系」から始めることをオススメします。初心者でも、わりと理解しやすい柔軟な働き方を、実現できる市場が大きいので、仕事が多いこのあたりの理由です。人によっては「アプリ系の方がいい」とか「C言語からやるべき」とかって言うかもですが、入り口はWeb系で問題ないと思っています。Web系は初心者でも理解しやすいですし、収入にも繋がりやすいので。C言語とかでスタートすると、、、かなり挫折しやすいと思います。あと、プログラミング言語は「1つで完結しない」ということもあり、稼いでいるエンジニアは「みなさん、わりと複数言語を使える」という感じなので、最初の入り口は過度に気にしなくてOKです。読んでおくべき記事が「2本」あります【事実】プログラミングで言語選びする際の注意点【Javaは微妙です】:プログラミングの言語選びに関する記事です。3分くらいで読めますので、ざっと目を通していただけたら勉強になると思います。AI時代において『Web業界の今後』は明るい理由【向き不向きはない】:よくある質問で「プログラミングはAIで淘汰されませんか?」と聞かれます。AIは進化していきますが、大きな問題はない理由を解説しています。🔽プログラミングスクールを卒業すると就職/転職できる理由プログラミングがAIで自動化される時代の生き方論です。基本的に音声のみで理解できますので、通勤時間や空き時間とかに、気軽に聞いてみてください。3.学習前に質問力を高めよう【解決力の講座】エンジニアとして生きる上では「検索力」がマジで重要です。基本的には「質問をする=相手の時間を奪う」という考えを持ったほうが良くて、大半のエンジニアは「電話や会議」などを嫌います。生産性が下がるからですね。質問をする前にやるべきこと。手順1:まずはググッて解決を目指す手順2:質問サイトに投稿してみる手順3:質問部屋で質問する上記のとおり。質問サイトは「teratail」を推奨します。パブリックな質問サイトに投稿するとこで、その質問&回答が、その後に学習する人の助けになりますからね。基本的には「1対1での質問回答は、あまりコスパが良くない」という考えが良いと思います。質問サイトに投稿しても、すぐに返事は来ません。大切なことは「まずは先に進んでみる」ということです。過去の僕もそうだったのですが「分からないことがある→質問サイトに投稿する→回答がこない→先に進む→分からないことがなにかのタイミングで解決する」というループが生まれたりしますので。4.HTMLとCSSの基礎を理解しよう【入り口】ここから実践的なプログラミングがスタートです。テックアカデミーというプログラミングスクールが無料公開している動画です。HTMLとCSSを網羅的に解説している動画でして、最初からボリューミーですが頑張りましょう。見ておくべき動画が「2本」ありますはじめてのHTML(24本)はじめてのCSS(34本)スイマセン、、、いきなりかなり本数が多いですが、これらを閲覧するとこで、HTMLとCSSの技術書1冊分くらいの学びがあるはずです。技術書を購入した場合は、安くても3,000円はしますので、YouTubeでの学習は圧倒的にお得ですね。学習における注意点:必ず手を動かしましょうHTMLとCSS学習の動画を掲載しましたが、注意点は「手を動かすこと」です。具体的には「動画と同じように、自分でもコードを書いてみる」ということです。人によっては「学習時間がないので、移動中に見ています」という人もいると思います。それもOKなのですが、その場合は「移動中に見る→帰宅してからYouTubeを早送りしつつ、自分で手を動かしてみる」という感じにしてみてください。HTMLとCSSの難関は「float」かな、、と勝手に思っています。現代のテクノロジーだと「floatは、ほぼ使わない」という感じなので、しっかり理解できなくてもOKです。ぶっちゃけ実務でほぼ使いませんので。5.エディタをダウンロードしよう【SublimeText】ぶっちゃけエディタは「好みによる」と思っていますが、僕は「SublimeText」をオススメします。利用者が多いので、プラグインが豊富シンプルで軽量、基本は無料で使えるかっこいいデザインもあり、気分上々まぁこのあたりですね。いえ、人によっては「Atom」だったり、もしくは「VSCode」だったりしますね。1つ言えることは「初心者のうちは、別にどれを選んでも大差ない」ということです。Textの使い方【初心者向け】こちら読んでおけば問題ないと思います。「SublimeLineter」というプラグインが便利なので、必ず入れておきましょう。参考までに僕のSublimeTextの設定条件も公開しています。下記の記事からどうぞ。自分用メモ:SublimeText3の設定&ショートカット6.ディベロッパーツールを使ってみよう【神】このあたりまで理解してくると、徐々に「脱初心者かな」というレベルです。コードをゴニョゴニョといじったりできるレベルになるので、仮にカフェとかで作業をしたら「ドヤ顔できるレベル」でもあるかなと思います。基本的には「流し見」でもOKですが、しっかり理解するようにしてください。ディベロッパーツールが使えるようになると「カッコいいサイトのコードを、いい感じに真似できる」というスキルが身につくので、コーディング速度が爆速化します。Courseこちら英語なのですが、、、品質が高くオススメ。今後はちょくちょく「英語の教材」も混ぜていくので、ちょっと慣れてみてください。※英語が苦手だとキツイかもですが、コードの動きをみると理解できるはずです。大切なことがありまして、それは「まずは動画で理解→その後にブログ記事を読む」という流れです。大半の人は「まずは文字で理解する」という学習方法を使いがちですが、、、これは学校教育の弊害ですね。文字よりも動画の方が、圧倒的に理解しやすいですよ。動画で概要を理解したら、質の高いブログ記事だったりも拾っていき、さらに理解を深める感じです。7.レスポンシブサイトを作ってみよう【英語】ここで挫折者が増えるかもです。難しいですが、時間をかけても大丈夫なので、しっかり理解するようにしてください。Explanation今回も結構ボリューミーです。こちらの2本を技術書などで学ぶと、たぶん2,000円以上はかかってくると思います。YouTubeは素晴らしいですね。ちなみに2本目の動画は英語ですが、なんとか頑張ってみてください。今後もちょくちょく「英語の教材」を挟んでいきますが、その理由は「日本語教材よりも、圧倒的に質が高いから」です。英語をすべて聞き取る必要はなくて、コードの内容だけ理解できればOKです。※補足:2本目の動画でどうしてもバグに苦しんだら「答えのコード」を制作者さんのサイトからダウンロード可能です。inlineってなんだよ...」と思っている方がいるかもです。最近のCSSでは「Flexbox」という圧倒的に便利なCSSがありますので、floatの理解が微妙でも、とりあえずは大丈夫ですよ。floatを理解するに越したことはないのですが、、、そこで詰まって挫折したら意味ないので、一旦は「Flexbox」も学び、徐々に「HTMLとCSSでもレイアウト作り」に慣れていきましょう。Flexboxとりあえずこちらを見ておけばOKです。いうか、Flexboxに関しては「display:flex」の部分だけ覚える感じでも、わりと問題なかったりします。学習における注意点:必ず手を動かしましょう動画を見る際は、必ず手も動かしましょう。動画を流し見していると「なんとなく理解した気分」になったりしますが、実際に手を動かすと動かなくて苦戦したりしますからね。なにかエラーが出たら、以前に学習した「デベロッパーツール」にてエラー確認してみましょう。したら解決できるはずです。Flexboxのチートシートを作ったので配布しますこちらの記事も、圧倒的に良質ですね。動画をみたあとなら、記事を読んでもわりとスムーズに理解できずはすです。何度も繰り返して書いていますが、読むだけじゃなくて「手も動かす」という点を忘れないでください。9.Bootstrapを理解しよう【爆速でサイト制作】さて、ここから楽しいフェーズです。ここまでの学習とこれからの学習は大きく変わってきます。ここまでの学習:ちょっと地味。これからの学習:カッコいいサイトが作れる!楽しい!すんごいざっくりですが、上記のとおり。カッコいいサイト作りには「Bootstrap」というフレームワークを使います。有名どころだと「Airbnb」という世界的に有名なサイトが使っていたりしますね。下記のページは、開発にBootstrapが使われています。Airbnbこういった感じの「圧倒的にカッコいいページ」が作れるようになります。