未経験からスキマ時間３ヶ月でwebアプリを作った私の「プログラミング学習ロードマップ」
プログラミング未経験の状態から、会社に勤めながらスキマ時間３ヶ月を使ってwebアプリを作りました。
(↓現在はサービス停止しています🙇♂️↓)
作ってリリースしたら、100人くらいの方々に遊んでもらえたり。Twitterで拡散とかしていただけて、本当にありがたい限りです。
そして今は、ITベンチャーのUI/UXデザイナー兼フロントエンドエンジニアとしてwebサービスの開発に携わらせていただいてます。
まだまだ駆け出しエンジニアの身ではありますが、プログラミングに出会って初めて自分のオリジナルのアプリを作ったところまでの僕の「プログラミング学習ロードマップ」をnoteにまとめてみることにしました。
「これから、プログラミングの勉強をして何かを作ってみたい！」といった方々の役に立つ情報になると嬉しいです。
1. プログラミング学習ロードマップ全体像
まずはじめに全体像をお見せします。
１ヶ月目
前半：プログラミング学習サービス Progate を使って HTML, CSS, Ruby, Ruby on Rails の基礎を勉強する
後半：paiza のプログラミングスキルチェック問題をDランクからCランクまで解く
２ヶ月目
既存webアプリのクローンアプリ（同じ機能を持ったアプリ）を作って、webアプリ公開サービスHerokuを使って全世界へ公開
３ヶ月目
既存のリソースをフル活用しながら自作アプリの開発・リリース
文章にしてみると、とてもシンプルな内容ですね。
「自作アプリを作る」という目標を達成するために必要なことだけを考えて実行していきました。
ただ、その過程で「これはやる必要なかったな、、、」という失敗も、もちろんあったので各章で詳しく解説していきます。
また、１日あたりの学習時間は平日3〜4時間、休日8〜10時間くらいでした。
「平日会社勤めの社会人がスキマ時間で上手に勉強する方法」については別のnoteで紹介しますね。
...🖋
2. [１ヶ月目（前半）] まずは Progate から始める。参考書から始めるのは遠回り。
プログラミングに興味を持ったら、まずはじめに手をつけるべき教材はProgateです。
Progateは実際にコードを書きながらゲーム感覚でプログラミング学習ができるサービスで、月額1,080円で利用することができます。
動画で勉強するサービスもありますが、分かりやすさ・学びやすさの点ではProgateが一番だと感じました。
また、学習した内容は後から何度でも検索して読み返すことができるため、実際に自分でwebアプリを作る際にも大活躍します。
正直なところ、これほど学べる言語のバリエーションとがあり、質の高い教材が利用できるのに月額1,080円は安すぎるくらいだと思っています。
一方で、全くのプログラミング未経験者が参考書を使った学習から始めるのはなかなかハードです。
僕自身、学習はじめたての頃にプログラミング言語Rubyの参考書を３冊買って勉強してみましたが「分かりやすさ・手を動かせる量・スピード」の点でProgateの方が圧倒的に優位でした。
ただ、プログラミング言語の成り立ちや基礎の基の部分を網羅的に知ることができるため、参考書を買って損するということはないです。
後ほど、実際に買って使っている参考書も紹介します。
とても大切なことなので、繰り返しますが「初心者はProgateで充分です」「まずはじめはProgateに集中しましょう」
...🖋
3. 初心者がはじめに勉強するべき言語は HTML と CSS
Progateに登録して「いざ勉強を始めよう！」とブラウザを立ち上げたら学べる言語がズラーッと並んでいて、何から手をつけたらいいか迷います。
プログラミング初学者がはじめに勉強するべき言語は HTML と CSS です。
この２つはwebページの目に見える部分の構造と見た目を作るマークアップ言語と呼ばれるもので、記述したコードが目に見える形で画面に反映されていくため、初心者が学び始めるのに最適です。
HTML, CSS を学べば、特殊なデータの処理を必要としないホームページが作れるようになります。
僕のポートフォリオサイトも90%くらいが HTML と CSS でできています。
HTML と CSS のレッスンを全て完了させたら次に Ruby, Ruby on Rails のレッスンにチャレンジしましょう。
Rubyはサーバーサイド（バックエンド）のプログラミング言語で、Ruby on Rails はRubyを使ってTwitterやインスタグラムみたいなwebアプリを作るためのフレームワークです。
HTML, CSS に比べて難しいと感じるかもしれませんが、これがいわゆるプログラミングです。
自作のwebアプリを作る以上、避けては通れませんが、１回で全てを完璧に理解しようとはせず「こうゆうことができるのかー」くらいの気分で学習を進めましょう。
また、Progateには「道場コース」という力試しゲームがありますが、これはやらなくてもOKかなと思います。飛ばしてどんどん先に進みましょう。
それと注意点として、勉強した内容をノートに綺麗にまとめたり、コードを暗記しようとしている人をときおり見かけますがあまり意味がないです。
というのも、プログラミング学習は暗記学習ではないからです。
実際にプログラミングで何かを作る際、その都度必要なことをググったり、本で調べたりしながらコードを書いていきます。
プログラミングで重要なスキルは「たくさんのコードを覚えている暗記力」ではなく「実現したい機能をどうやって作るかを考えられる・設計できる論理的思考力」です。
どうやって「論理的思考力」を鍛えるのかを次の章で説明します。
...🖋
4. [１ヶ月目（後半）] 次にチャレンジする教材はpaizaのスキルチェック問題
Progateで HTML, CSS, Ruby, Ruby on Rails のレッスンを１周ずつ終えたら、次はpaizaのスキルチェック問題にチャレンジしましょう。
paizaはスキルチェック問題でプログラミングスキルを測って、そのまま就活につなげることができるサービスです。
スキルチェック問題を自分で考えて、コードを設計して、解いていくことで「論理的思考力」と「プログラムの設計力」を育てることができます。
このスキルチェック問題をDランクから始めましょう。
全問解かなくてOKです。そのランクの問題で満点が取れるようになったら、次のランクに進みます。
僕は楽しさのあまり、Bランクまで解きましたが、自作アプリを作るのであればCランクまで解ければ充分です。
Cランクが満点で解けるようになれば、充分な「論理的思考力」と「プログラムの設計力」が身についていると思います。
問題を解く際には、もちろん調べながらでOKです。
Progateのスライド検索で復習したり、参考書で調べながら解いていきましょう。
僕が実際に使った参考書はこの２冊です。
オススメは「プロを目指す人のためのRuby入門」です。
基本的なメソッドの使い方などが実際の例で丁寧に解説されているため、とても分かりやすいかつ実践的です。
「楽しいRuby」はプログラミング言語Rubyの開発者まつもとゆきひろさんが監修なさっていて、プログラミングを全くやったことがない、かつ初めて学ぶ言語としてRubyを選んだ人が対象の本です。
ProgateでRubyの基礎を一通り学んだ人にとっては、重複したような内容が多いです。
また、paizaで問題を解く際にはpaizaの解答欄にコードを直接打つのではなく、エディターをダウンロードして使いましょう。
エディターの導入のやり方もprogateでやさしく解説されています。
エディターを使うことで、以前書いたコードの使い回しやコードの補完入力機能を使うことができ、時間短縮＆単純なスペルミスなどの防止ができます。
...🖋
5. 初心者がつまづきやすい開発環境構築はProgateのチュートリアル通りにやってサクッと次のステップへ進む
Progateではブラウザを立ち上げればすぐにコードを書いてプログラムを動かすことができましたが、いざ自作のアプリを作ろうとするとそうはいきません。
まずはプログラムを動かす環境から作らなければいけないのです。
これが初心者がつまづきやすいポイント「開発環境構築」です。
とはいえ、つまずいている時間はもったいない無いのでProgateのチュートリアル通りにやってサクッと次のステップへ進みましょう。
ググって調べてみるとわかると思いますが「開発環境構築」と一口に言っても奥が深く、調べれば調べるほど、何をどうするのが一番良いのかわからなくなってきます。特に初心者の場合。
なので、まずは信頼できる情報を使ってひとまず動くものを整える。
気になったり、詳しく知りたくなったら調べて、その都度自分にあったものに更新していく。という気持ちで進めたほうが効率的だと思います。
...🖋
6. [２ヶ月目] 既存のwebアプリのクローンアプリを作って、Herokuを使って全世界に公開してみる
開発環境の構築ができたら、TwitterやInstagram、Facebookなどの既存webアプリのクローンアプリ（同じ機能や動きをするアプリ。丸パクリはダメですよ）を作ってみましょう。
何を作ろうか迷ったら、ProgateのRuby on Railsコースを自分の開発環境で作ってみるのもおすすめです。
同じものをゼロから作るというだけでも、作らなければいけない機能、考えなければいけないことが次から次へと出てきてものすごく頭を使います。
エラーもたくさん出てきます。
Progateのように答えを見ることはできないので、自分でエラーメッセージを読んで、どこが原因なのかを考えなければいけません。
実際に自作のwebアプリを作る際も開発のほとんどの時間をエラーの解決、デバッグに費やします。
このデバッグ作業がパズルを解いている感覚で楽しく思えたら、進むスピードは加速していくと思います。
そして、ある程度クローンアプリが出来上がったらHerokuを使って全世界に公開してみましょう。
開発環境で作っているプログラムは自分のPC（ローカル開発環境）からしか使うことができません。
自分以外の人にもアプリを使ってもらえるようにするには、全世界どのPCやスマホからでもアクセスできるようにする必要があります。
その際、本番環境というものをさらに構築して、そこへプログラムをデプロイするという作業が必要になるのですが、それをまとめてやってくれるのがHerokuというサービスです。
Herokuへの詳しいデプロイ方法については、こちらの記事がとても丁寧に解説してくださっています。
【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】
Herokuへクローンアプリをデプロイして、自分のPC以外のデバイスからもアクセスして使えるようになったら晴れてリリース完了です！
...🖋
7. [３ヶ月目] いよいよ自作webアプリ作り！既存のリソースをフル活用して最短ルートで作っていく
クローンアプリの作成とデプロイを通じて「自分の開発環境で、自分の手でコードを書いてプログラムを組んで、リリースする」までを経験したことになります。
クローンアプリ作成と自作アプリ開発との違いは「作る目標物・見本があるかないか」です。
自作アプリ開発では「何をどうやって作るか」から考えていきます。
それ以降はクローンアプリの作成と全く同じ手順です。
ただ、すべての機能を自分でゼロから作る必要はありません。
プログラミングの世界では「車輪の再開発をしない」「巨人の肩に乗る」という心構えの言葉がよく使われるそうです。
意味は「すでに世の中にある良いものを上手に使って、もっと良いものを効率よく作りましょう」的な感じです。
もっと良いものを作るというのがポイントですね。丸パクリはNGですよ。
具体的には、GitHub や Qiita などのサービスにストックされている、先人たちの知恵やコードなどのリソースを、有り難くフル活用しましょう。
僕もこれまでに作ったプログラムのコードはGitHubで公開しています。
ここでひとつ、初心者がやりがちな注意点ですが、先人たちのコードを自分のプログラムにコピペしても大体の場合、動かないです。
先人たちの知恵やコードを活用するには、まずそのコードの動き方や仕組みを理解して、自分のプログラムに適した形へと編集してあげる必要があります。
ここでも「論理的思考力」と「プログラムの設計力」が必要になってくるのです。
自分の頭で考えて、手を動かして、調べてを何度も繰り返して少しずづ自分の作りたいものを形にしていきましょう。
自分で何度考えても、どうしてもわからないときには、Teratailで質問してみたり、MENTAでプロのエンジニアのメンターを見つけて教えてもらうのもとても有効です。
使えるサービスは積極的に利用して、効率的に学んでいきましょう。
相手に自分の状況を的確に伝えて自分が欲しい回答を引き出す質問力も大切なスキルです。
ただ、求めるばかりのクレクレ君になると相手や世間からの信頼がガタ落ちするので用法用量にはご注意を。
...🖋
9. 終わりに
ここまで読んでいただきありがとうございます！
この記事は僕が未経験から３ヶ月間プログラミング学習してきた道のりでもあり、その過程で気づいて蓄積したきた経験知です。
この記事を通して上手く伝えることができていたら幸いです。
特にプログラミング学習初学者が悩みがちな部分（当時の僕が悩んだ部分）に焦点を当てて文字に起こしました。
自分のやり方が絶対に正しいとは思いませんが、１つの上手くいった例として受け取ってもらえたらとも思います。
この記事を読んだことで、あなたのこれからのプログラミング学習がより楽しくなったり、目標の達成に近づくことができたらこの上ない喜びです。
もしこの記事の内容が少しでも「役に立った！」と感じていただけたなら、左下のハートマークをポチッとしていただいたり、SNSでシェアをしていただけるとすごく嬉しいです。
シェアして頂いた内容は拝見して、僕のアカウントからいいねやお礼のコメントをさせて頂くかもしれません。あしからず🙏
ではまた。
↓いけあつのTwitterはこちら↓
https://mobile.twitter.com/ikat_de
いただいたサポートは、みなさまのお役に立てるような記事を書くために必要な「やる気」を蓄えるために、大好きなクラフトビール購入に使わせていただきます🍻