プログラミング独学の勉強法【最速・200時間で完結する方法】

こんにちは。

この記事を読んでいるあなたは、

このように思っているのではないでしょうか？

プログラミングを学習する際、独学は必須です。
ただ、プログラミング初心者にとって、独学でどのように勉強を進めたらいいか分かりづらいですよね？

そこでこの記事では、プログラミング初心者が、最短200時間の独学でプログラミング言語をゼロから習得する方法を説明します。

具体的には、以下のような内容となります。

この記事を読むことで、プログラミング言語を習得する方法、そして今後プログラマー転職でも使えるWebサービスを作る手順が分かります！
今がプログラミング初心者の状態でも大丈夫です。

最後までしっかり読んで、プログラミングの独学を効率よく進められるようになってくださいね！

この記事の要約

まずはこの記事で書いている内容を要約します。

初心者の状態からプログラミング言語を最短・200時間で習得するには、以下のステップで勉強します。

この流れは、僕が実際にAngularを覚えたときにやった内容なので、信頼性のある内容です。

詳細は、次の章で説明します。

僕が新しいプログラミング言語を勉強したときの体験談＆実践したこと(この記事の信頼性)

僕が新しいWebサービスを立ち上げた時の話

僕は過去に、「Traca」と言われるWebサービスを作ったことがあります。
この「Traca」は、

こんなコンセプトのWebサービスでした。

このサービスを作っていたのは数年前で、世界的な感染症が広まる前で、日本のいたるところで、いろいろな国籍の人を見ることができました。
その頃は僕も電車に乗っているときに、「東京タワーまで、どうやって行ったらいいのか？」なんて聞かれたりしました。

そんな人達を助けられるようなサービスがあるといいな、と思ったのがこのサービスを思いついたきっかけです。

このWebサービスで使っていた技術

このWebサービスでは、フロントエンドはAngularというJavaScriptのフレームワーク、バックエンドはFlaskというPythonのフレームワークをメインに使って開発していました。

「日本に来ている海外の人を手助けしたい」という目標と同時に、「新しいプログラミング言語を勉強したい」という目標も持っていた僕は、このサービスを作るプログラミング言語(フレームワーク)として、AngularとFlaskを使うことにしたわけです。

このサービスの作成には、およそ8ヶ月間くらいかかった記憶があります。
平日と土日で平均すると、1日あたり1.5時間くらい開発していたと思います。

この8ヶ月間の開発で、フロントエンド・バックエンドの開発、画面のデザイン、サービス名やロゴ検討まで全てをやっていました。

つまり、この期間の開発にかけた時間としては、

です。

このうちフロントエンドの開発だけに限定すれば、360時間の1/3、120時間くらいです。

元々C++やJavaのプログラマーだった僕が、Angularの知識がゼロの状態からWebサービスを作り上げられるまでに、大体120時間くらいかかった計算になります。

実際にフロントエンドの開発にかけた120時間のうち、僕がやっていたのは、

という内容でした。

ここでは簡単に「こんなことやりました」と紹介しましたが、実際に新しいプログラミング言語を習得するのは簡単ではないと思います。
特にプログラミング初心者の人からすると、

思ってしまうのではないでしょうか。

そこで、「これからをプログラミング初心者から独学で勉強したい！」と思っているあなたに、僕が実際にやったことをお伝えします。
僕が実際にやった方法なので、実際に「プログラミング言語を覚えられた」「Webサービス開発で利用した」という実績があります。

200時間のプログラミング独学で目指せるレベルレベルは？

具体的な勉強方法をお伝えする前に、200時間の勉強で目指すポイントを共有しておきたいと思います。

それはズバリ、200時間の勉強で、

というところを目指します。

200時間の勉強でプログラミング未経験からそこまでやれるとすると、なかなかいい成果ですよね？

[前提]未経験の状態から200時間でプログラミング覚えるための条件

最後まで読んでいただいて「いやいや、そんな前提なのか！」と思われないために、まずは200時間でプログラミングを覚えるための前提をお伝えしておきます。

一般的にプログラミングを習得して現場レベルで使えるようになるためには、1,000時間くらいの勉強が必要と言われています。

正直、その全てを200時間でマスターできるわけではありません。
かける時間が1/5になっている分、一部で制限があります。

その制限とは、以下の内容です。

これら4つの制限さえ理解いただければ、200時間でプログラミングを習得することができます。

フロントエンドに注力する

今回、バックエンドには手をつけません。
フロントエンドとバックエンドは違うプログラミング言語で書かれることが多く、200時間の勉強ではその時間をとることができないからです。

とはいえ、今回の勉強方法は、バックエンドを勉強する時にも流用できる考え方です。
プログラミング言語同士の考え方は非常に似ており、何か1つのプログラミング言語の勉強をすれば、他のプログラミング言語にも応用をすることができます。

ウェブサービスを公開するところまではやらない

ウェブサービスを公開するところも、追加の知識が必要になるためです。
まずはPC上のローカル環境で動かせるところを目指しましょう。

フロントエンドのJavaScriptのフレームワークのReact, Vue.js, Angularいずれかのフレームワークを使う

これら3つのフレームワークをオススメするのには、理由があります。

これらのフレームワークには、標準で使える、便利なライブラリやコンポーネントが搭載されています。

これらのライブラリやコンポーネントを使うことで、開発速度を圧倒的に早めることができますし、CSSをゼロベースで書くよりも、圧倒的に見た目のいいサービスを作ることができます。

そして、これらのフレームワークは現場でも頻繁に使われているため、会社や案件によっては、これらのフレームワークが使えることが前提条件となっていたりします。

こういった理由により、JavaScriptのフレームワークのReact, Vue.js, Angularのいずれかのフレームワークを使います。

細かいデザインなどは手をつけない

細かいデザインも頑張った方が、見栄えは良くなります。
ただ、細かいデザインは非常に時間がかかることと、プログラミング言語を1つ覚えるという趣旨から外れるため、今回は200時間の対象外としています。

どのように、最速200時間でフロントエンド系のプログラミング言語を覚えるのか？

詳細に入る前に、まずは200時間でどのような進め方をするのか？の概要を説明します。

これを読んでくださっているあなたは、おそらくプログラミングがほぼ未経験の状態ではないかと思います。
そんなあなたのために、200時間の時間の使い方を、前半・後半の2つに分けます。

前半の80時間で、HTMLやCSSなど、フロントエンド系の開発をする上で必要なマークアップ言語の習得をします。

そして、JavaScriptのプログラミング言語を習得します。
これは、React, Vue.js, Angularのいずれのフレームワークにも使われているプログラミング言語です。

続いて、後半の120時間では、React, Vue.js, Angularのいずれかのチュートリアルでこれらのフレームワークに慣れつつ、JavaScriptやHTMLの実際の使い方を覚えます。
ある程度プログラミング言語やフレームワークに慣れた後に、あなたの作りたいものを少しずつ作っていくことになります。

最速200時間でプログラミング言語を習得するまでの手順

それでは、具体的に最速200時間でフロントエンドのプログラミング言語を使ってWebサービスを作るまでの手順を解説します。

Step 1: プログラミングの基礎を勉強 (合計80時間)

もしあなたがプログラミングを触ったことがなければ、まずは基本的なプログラミングの勉強をしてみましょう。

具体的には、以下の内容をオススメします。

今回フロントエンドのプログラミングを勉強するので、その基礎となるHTMLやCSSの知識は必須です。

これらの知識がないと、高度なフレームワークを勉強するときの効率が悪くなってしまいます。

もしあなたにある程度プログラミング経験があり、HTMLやCSS、JavaScriptなどの言語を問題なく使えるようであれば、このステップを省略したり、かける時間を減らしてもよいでしょう。

具体的に勉強するべき内容

僕がオススメするのは、Progateやドットインストールなどの教材です。
例えばProgateであれば、以下の内容を勉強することをオススメします。

ドットインストールであれば、以下の内容がよいでしょう。

ここで説明されている内容を一通り勉強して、ある程度あなた自身で書けるようになることが目標です。

このステップの勉強をするときの心がけ

HTMLやCSS、JavaScriptにしても、「完璧に理解する」ことは不可能です。
どの言語も非常に奥が深く、全てを網羅できないためです。

ですので、

という方法で進めることをオススメします。

勉強をするときに気をつけるべきこと

すでに説明しましたが、React Vue.js, Angularなどのフレームワークは、HTMLやCSSの記述が理解できていることが前提です。

a, div, p, button, h1などのHTMLが使えて、それらの要素をCSSで装飾する方法は理解しておくようにしましょう。
そうしないと、確実に次のステップで混乱します。

例えば「あれ？divってどうやって使うんだっけ？」と思う場合は、Step 0のおさらいをしてからStep 1に進むようにしましょう。

Step 1: 好きなフレームワークのチュートリアルを2周する (40時間)

続いて、React, Vue.js, Angularのいずれかのフレームワークのうち、あなたの好きなものを1つ選びましょう。
そして、選んだフレームワークのチュートリアルを2周します。

React、Vue.js、Angularのどれがいいか？

結論としては、基本的にどれでも大丈夫です。
使いやすそうだな、と思うものを選んでよいと思います。

とはいえ、強いてどれかを選ぶのであれば、Reactがオススメとなります。

理由は、以下のような感じです。

とはいえ、それぞれのフレームワークも似ている部分も多いので、どれか1つを習得すると他のフレームワークの習得も比較的容易です。
なので、あまり難しく考えすぎずにどれかを選んでみることをオススメします。

React、Vue.js、Angularのチュートリアル

この3つのフレームワークのチュートリアルは、以下のリンクからたどることができます。

どのチュートリアルを見ても、

など、各フレームワークを使う上で必須となる知識を習得することができます。

チュートリアルで勉強するときは、1周だとあまり覚えられないので、2周することをオススメします。

1周のチュートリアルが僕の経験上20時間くらいでまわることができます。
それを2周して、40時間の勉強となります。

チュートリアルを勉強する上で注意すべきポイント

チュートリアルで勉強するときは、チュートリアルを終わらせることが目的にならないようにしましょう。

特に勉強に疲れてくると、

という状態になりがちです。
ただ、それだとせっかく勉強をする意味が半減してしまいます。

改めて・・・ですが、チュートリアルで勉強する目的は、以下の通りです。

ここで手を抜くと、次のステップで「あれ、何も理解してない・・・」なんてことになります。
大変ですが、頭で理解しつつチュートリアルを進めるようにしましょう。

Step 2: チュートリアルをベースに少し改変してみる (40時間)

各フレームワークのチュートリアルが終わったら、自分の作りたいサービスを作るための準備期間に入ります。

Step 1のチュートリアルは、補助輪をつけた状態での勉強でした。
チュートリアルに沿って勉強することで、どのようにスタートすればいいか？次に何をやればいいか？が分かったかと思います。

一方、次のStep 3では、あなたの作りたいWebサービスをゼロから作ることになります。
あなたは、何から始めたらいいか？どのように進めたらいいか？を全て自分で決める必要があります。

実はこのStep 1とStep3の間には広くて深い溝があります。
プログラミングを始めたばかりの人は、この溝を超えられずに、

となってしまうケースもあります。

そこで、Step 1とStep 3のつなぎ役として、Step 2の「チュートリアルをベースに少し改変してみる」をやってみることをオススメします。

具体的には、以下のような進め方がオススメです。

作りたいものを決める

まずは、具体的に作りたいものを決めましょう。
作りたいものが明確になっていれば、何をすればいいかが分かりやすいですし、やる気も出やすいからです。

特にこのStep 2は本格的に作りたいものを作る前の「練習期間」です。
目的なく練習だけをやっていると中だるみしてしまう可能性があります。

そこで、作りたいものを明確にし、一直線で進めるようにしておくことが重要です。

と思う場合は、以下の記事も合わせて読んでみてください。

HTML (見た目部分)のレイアウトを変えてみる

まず最初に着手するのが、HTMLのレイアウトを変えてみる部分です。

いきなりJavaScriptやTypeScriptで書かれたプログラムを書き換えても問題はありません。
ただ、下手に書き換えると意味不明なエラーが出て混乱してしまう可能性があります。

そこで、一番難易度の低い部分から、少しずつ書き換えてみるのをオススメします。

具体的には、

こんな感じの進め方でよいです。

と思われるかもしれませんが、React、Vue.js、Angularなどのモダンなフレームワークは、何も知らない人が見ると入り組んだ構造に見えます。

なんてことは日常茶飯事です。

この「あれ？」という経験をすることで、プログラミング言語やフレームワークに対する理解が深まります。

ですので、是非、いろいろなところに文字を入れたりしてみましょう。

チュートリアルで書いた変数を変更してみる

続いて、JavaScriptやTypeScriptで書かれたプログラムの変数名を変国してみましょう。

おそらく想定していないところでエラーが出て、

となるかと思います。

特に、HTML側で使われている(バインドされている)変数を書きかえると、それぞれのフレームワークの仕組みを理解しやすいのでオススメです。

いろいろな箇所の変数を書き換えてみて、

という構造を覚えていきましょう。

新しくリスト画面やボタンなどの機能を追加してみる

ここから、少しずつ自分なりのプログラムにするための作業になります。

おそらくチュートリアルでは、リスト画面やテキストボックスなどのUIを使ったかと思います。

このステップでは、それらに加えて、さらに新しいリスト画面やテキストボックスなどの画面を追加してみましょう。

このとき、レイアウトや見た目は何でも問題ないですので、

こういった内容まで勉強できればOKです。

「画面上の操作がJavaScriptやTypeScript側とつながる」は、具体的にはJavaScriptやTypeScript側でログが書き出されているのを見るのが一番よいでしょう。

新しい関数やクラスを追加してみる

最後に、あなたのオリジナルな関数やクラスを追加してみましょう。

特にクラスを追加するときは、各フレームワークの重要なプログラムを変更する必要があります。

チュートリアルで勉強しているときは「おまじない」として書いていたプログラムの意味が分かってくるのもこのタイミングです。

その他、フレームワークごとに重要そうな機能を使ってみる

この段階はあなたが選んだフレームワークによって大きく異なりますが、共通で覚えておいた方がいいのは、

といったあたりでしょう。
これらが使えるようになれば、あなたの使えるプログラムにグッと幅が出ます。

この段階まで実施すれば、「自分である程度、オリジナルなプログラムは書いた」というレベルに到達するでしょう。

Step 2では、ここまでの内容を40時間くらいで勉強してみることをオススメします。

「40時間も長いよ・・・」と思われるかもしれませんが、想定しないエラーで丸一日ハマったりするので、40時間はあっという間です。

Step 3: 自分の作りたいサービスを作る(80時間)

最後のStepとして、あなたの作りたいサービスを作ってみましょう。
理想は、完全にゼロからプロジェクトを作って、少しずつ拡張していくことです。

このタイミングからは、あなたはチュートリアルを頼ることなく、一人でプログラミングをすることになります。

とはいえ、チュートリアルで身につけた知識は十分に使うことができます。

そしてここまで勉強をしてきたあなたは、「どこを見れば何が書いてある」ということも何となく頭に入っているのではないでしょうか？

それはチュートリアルの特定ページかもしれませんし、誰かの書いたブログかもしれません。

これからサービスを作っていくにあたり、その知識を持っていることで、調べる時間を圧倒的に短縮できるようになります。

プログラミングの学習を挫折せず効率よく進める方法

ここまで、プログラミングの勉強の方法を説明してきました。
最後に、プログラミングの学習を挫折せずに効率よく進める方法を説明したいと思います。

エラーが出たら、そのエラーメッセージを調べる

ある程度プログラミングの勉強をした人からすると、当然のことと思われるかもしれません。

未知のエラーが出たら、その都度、エラーメッセージを調べるようにしましょう。

エラーメッセージの調べ方を知っているのと知らないのとでは、プログラミングの勉強効率が全く違います。
というより、エラーメッセージの調べ方を知らないと、プログラミングの勉強はできないと言ってもいいくらいです。

というようにスルーすることなく、エラーのメッセージはきちんと把握するようにしましょう。

疲れたら休む

プログラミングに疲れたら休むのも大事です。

仮にあなたが(この記事でまとめたように)200時間でプログラミング言語を習得できたとしても、やはり200時間はそこそこ長い時間がかかります。

もちろん頑張ることも重要ではありますが、疲れているときはきちんと休み、頭が働いている時間に勉強するようにしましょう。

好きなものを作る

1つ前の項目とも重なりますが、プログラミングの学習で挫折しないようにするためには、好きなものを作るのが一番です。

という希望があれば、必然的にプログラミングの学習も楽しくなります。

チュートリアルを勉強する期間を過ぎたら、あなたも「こんなもの作ってみたいな」と思えるもの探すようにしましょう。

どうしても一人で勉強できない場合はプログラミングスクールに行ってみる

この記事では、プログラミングを独学で勉強するための勉強方法をまとめてきました。

ただ、この記事に書いてある内容をやってみた結果、

このように思うかもしれません。

その場合は、プログラミングスクールに通ってみるのも1つの手段です。

プログラミングスクールは、あなたの目的に合わせていろいろなものがあります。

特に、いくつかのプログラミングスクールではキャンペーンをやっているところもあり、今ならオトクに入会することもできます。

僕のエンジニア経験を踏まえたプログラミングスクールは、以下の記事にまとめていますので、興味があればこちらも合わせて読んでみてください。

[最後に]プログラミングがどこまで身につくかを決めるのは、あなたの頑張り次第

この記事では、200時間の短時間でプログラミングを独学で勉強するときの方法を紹介しました。
僕が試行錯誤した経験を踏まえているので、この通りに進めていただければ、ある程度プログラミングスキルが身につくこと請け合いです。

とはいえ、最終的に頑張るかどうかはあなた次第です。
この記事に書いてある内容を読んで満足してしまっては、スキルは身につきません。

ここまで読んでくださったあなたが次にやるべきは、リアルなプログラミングの学習です。

さあ、実際に開発環境を立ち上げて、最初の一行を書いてみましょう。

あなたにプログラミングのスキルが身につき、目標が達成できることを心よりお祈りしております。

ここまで読んでくださり、ありがとうございました。
この記事は以上です！