2024.03.15最終更新日:
2024.03.15
エンジニア就職は再現性が高い
こんにちは、井上です！
本記事では、文系理系問わず、プログラミング完全未経験の状態からどうすればエンジニアとして稼いでいけるようになるのかについて具体的に解説します。
具体的には以下のような悩みが解決できます。
- 文系だけど、プログラミングを勉強して稼げるようになるの？
- プログラミングには特別な知識が必要？
- 理系の学部出身or在籍中でプログラミングの経験はあるけど、レポートはほとんど友達に見せてもらっていた。そん状態からでもプログラミングを習得できるの？
実は、知識0の何もわからない状態からエンジニアとして稼いだり、エンジニアとして就職することは十分に可能です。
なぜなら、
- 開発する上で先天的な能力や「地頭」といった才能は必要ないため。
- 近年の開発の現場ではフレームワーク（決まった型のようなもの）が使われることが多いため。
- AI技術の進歩によって、開発が過去と比べて劇的に簡単になってきているため。
です。
私は文系の学部の所属しながら、プログラミングの「プ」の時もわからない状態から学習をスタートさせ、大学在学中にエンジニアのインターンを1年半経験した後、現在まで個人で複数の開発案件ジョインさせていただいています。
そのような経験から、この記事では何をどんな手順で独学すればエンジニアとして活躍し、稼いでいけるようになるのかについて具体的かつ行動ベースで解説していきます。
「具体的かつ行動ベースで」という点については、
- 何の教材を
- どれぐらいの期間で
- どういう状態になるまで
学習すべきかについて詳しく解説して行きますので、是非参考にしてみてください。
前提条件
手順の解説にあたって、下の2点を前提にお話していきます。
- 開発できる環境が整っている。
- エンジニアの職種としてはWeb系を想定する。
まず、プログラミングの学習を始められる環境の準備がされていることを前提にお話して行きます。
「環境の準備」に関しては、お持ちのPCを準備するだけでOKです。
PCをまだ持っていない方や、これから新しく購入する予定の方は、ご準備の上、本記事に戻ってきていいただければと思います。
ちなみに、PCに関してはMacbookをお勧めしてます！
Macをすすめる理由等に関して詳しく知りたい方は、以下の記事を参考にしてみてください。
そして、本記事ではWeb系の職種に絞ってお話していきます。
理由に関しては、別記事で詳しく解説する予定なので、ここでは簡単にまとめると、、、
- 稼ぎやすい
- 得意・不得意があまりない
- 横展開しやすい
「iOSアプリが作りたい」「Androidアプリが作りたい」「ゲームを開発したい」などのように特別なこだわりや願望がなければ、Web系を選択して損はないと思います。（領域が広く案件も多数あるため。）
上記の前提を踏まえた上で、解説に入って行きます。
先に、結論からお伝えします。
プログラミング独学のロードマップ
- コンピュータサイエンス
- コマンドライン
- HTML, CSS
- JavaScript
- 【実践①】簡単なWebサイトを作ってみる
- Ruby
- SQL, RDB
- Git, Github
- Ruby on Rails
- 【実践②】ポートフォリオを作る
上記の手順を約３ヶ月〜半年で完了させる。
期間に関しては、これ以上かけてしまうと、挫折する確率が高くなってしまいますので、基礎学習はなるべく最短で終わらしてポートフォリオアプリの作成に入っていくことをお勧めします。
それぞれ順番に解説して行きます。
ポートフォリオ（作品）の完成をゴールとする
手順の解説に入る前に、基礎学習のゴールを明確にしておきましょう。
基礎学習のゴールは、、
ポートフォリオを作り切る
です。
ポートフォリオとは、「portfolio: 作品集」と訳されるように、
自分の手で開発した成果物＝アプリケーション
になります。
企業との面談の際や、個人で案件を受ける際には、まず自分がどのような開発ができてどれぐらいのスキルがあるかをアピールするために、ポートフォリオの開発がほぼ必須になります。
いわば、未経験者にとっての応募資格みたいなものです。
学生であれば、ポテンシャル採用としてポートフォリオが必要ないケースもありますが、その場合であっても自分の成果物を持っておくだけで、かなりのアピール材料・評価材料になります。 （技術の世界なので、やる気や技術好きを全面的にアピールできます。）
特に未経験者にとっては、メインとなるアピール材料が自分のポテンシャルの他に、ポートフォリオしかありませんので、それなりに作りこんだものを用意する必要があるかと思います。
ポートフォリオに関しては別の記事で詳しく解説しますが、今後エンジニアとしてどこに応募するにしても、
「ポートフォリオが必要で他の人と差別化できる要素になり得る」
ということを理解しておいてください。
よって、インターンや就職、個人案件に応募する前の行動として、
ポートフォリオを作り切って公開する。
ことを目標に基礎学習を行いましょう。
1. コンピュータサイエンス
すでに大学の学部が情報系などの場合で、基礎的な内容がある程度理解できている人は飛ばしてもらっても良い内容なります。
コンピュータサイエンスの概要
プログラミング学習の入門として、まずはコンピュータやネットワークについてある程度理解する必要があります。
内容的には、
- n進数
- デジタルデータ（ビットとバイトなど）
- CPU・メモリ
- ハードウェア・ソフトウェア
- データベース
- ネットワーク（Webの仕組み等）
- セキュリティ
などになります。
上記で挙げた概念は、エンジニアの業務を行なっていく上でよく使われる概念になりますので、これら最低限の知識を得て業務に支障のないレベルで理解できていればひとまずは問題ありません。
CSの学習方法と教材
学習教材としては、基本情報技術者試験用の以下の教材がおすすめです。
主な特徴としては、
- 絵や図解が多く、内容イメージ・理解しやすい
- 内容が詳しすぎず、必要最低限である
なお、Chapter 18 企業活動と関連法規以降の話は若干目的と逸れる内容のため、飛ばしてしまって問題ありません。
１週目で理解が及ばなかったChaprterのみ、２週目でカバーするようにしてください。
CSの学習修了期間
やや分量の多い書籍になりますが、2, 3週間を目安に学習計画を立てるようにしましょう。
分量が多いChapterは1章/1日、少ないChapterは2章/1日ずつ進めれば、約２週間で終わります。
2. コマンドライン
コマンドラインの概要
「コマンドライン操作」とは、ターミナルと言われる、いわゆる「黒い画面」上でコンピュータを動かす操作のことを言います。
コマンドライン操作は、エンジニア業務を行う上では基本的な概念になります。
業務において、ローカルサーバーを起動する時など、特定のコマンドを入力して何らかの処理を施すみたいなことも度々ありますので、基本的なコマンドを覚えておく必要があります。
コマンドラインの学習方法と教材
教材に関しては、Progateとドットインストールを一通り学習しておけば問題ありません。
この辺りで登場するUNIXやLinuxという概念も重要なので、ある程度押さえておきましょう。
コマンドラインの学習修了期間
それほど、分量があるわけではありませんので、1 ~ 3日程度を目安に学習しましょう。
3. HTML, CSS
1のコンピュータサイエンスと同時か、一通り終えたらHTML, CSSの学習を始めましょう。
HTML, CSSに関する詳細な解説は割愛しますが、初めて聞く人向けに概要を簡単に説明します。
HTML, CSSの概要
HTMLとCSSはWeb技術の根幹となるような言語になります。
（プログラミング「言語」かどうかに関してはしばしば議論が分かれるところですが、便宜上、言語として話を進めていきます。）
Google検索をして表示されるホームページやWebサイトと呼ばれるものは全て、このHTMLとCSSという技術が使われています。
そのため、Web系のエンジニアを目指す上では、HTML, CSSは必須で学ばなくてはならない言語になります。
言語の解説記事ではないので、詳しく触れませんが学習を進めていく中でどんなものか理解しておきましょう。
まず、HTMLは
Webサイトの骨組みを作る言語
とだけ理解してもらえれば、現状は問題ありません。
次にCSSですが、これは、
骨組みとなるHTMLに装飾を加えるためのもの
とだけ認識を持っておいてください。
例えば、
- 文字の大きさを変える
- 背景をつける
- 要素に色を加える
などです。
概要について知っていただいたところで、早速、どのように学習していけば良いかについて解説します。
HTML, CSSの学習方法と教材
基本的にはProgate, ドットインストールというオンライン学習サイトを利用して学習していきましょう。
Progate(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。prog-8.com
ドットインストール3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、Ruby、Pythonなどの入門レdotinstall.com
それぞれの学習教材の特徴としては以下の通りです。
- Progate: 実際にコードを書きながら、ゲーム感覚てサクサク進められる。
- ドットインストール: 動画で基礎を丁寧に解説してくれる。1本の動画も短いため隙間時間に活用しやすい。
基本的には、上記2つの教材を併用するのがおすすめです。
理由としては、Progateだけだと若干解説が不親切な部分があるからです。
動画スタイルのドットインストールを並行して活用していくことで、知識の補完になり内容を理解しやすくなるかなと思います。
また、「Progateにはないけれど、ドットインストールにはある」重要な内容も、一部含まれていますので、そのような点からも併用をお勧めします。
具体的な使い方・流れとしては、
- Progateのチャプターはじめの解説に目を通す。（コードは書かない）
- 1に該当する箇所に関して、ドットインストールの動画講義で学習する。
- Progateに戻って、実際に手を動かして学習する。
のようにして進めると良いです。
また、受講すべきコース・チャプター一覧に関しても以下で記載しておきます。
一部、有料の教材も含まれますが、月額1000円程度なので必要経費と割り切りましょう。
ドットインストール
Progate
- HTML & CSS 初級編
- HTML & CSS 中級編
- HTML & CSS 初級編（道場レッスン）
- HTML & CSS 中級編 （道場レッスン）
- HTML & CSS 上級編
- HTML & CSS 上級編（道場レッスン）
- HTML & CSS Flexbox編
※レスポンシブデザインのチャプターは一旦後回しにしても問題ないかと思います。
HTML, CSSの学習修了期間
目安の期間としては以下のとおりです。
- HTML: 1週間
- CSS: 2週間
の合計３週間で基礎を終えられれば上出来です。
かなりボリューミーなフェーズになりますが、これだけやれればHTML, CSSの基礎に関しては十分なので、目安期間内に終えられるように取り組んで見てください！
4. JavaScript
JavaScriptの概要
続いて、JavaScriptという言語を学習していきましょう。（ここからが本当の意味で、「プログラミング言語」を扱うことになります。）
JavaScriptは、「クライアントサイド」「フロントエンド」の言語と呼ばれます。
「クライアント」「フロント」とは、簡単にいうと、「ユーザーの目に触れる部分」のことを指します。
このようなユーザーの目に触れる部分の仕組みを作るために、JavaScriptが使われています。
具体的に、JavaScriptを使うと以下のような機能を実装できます。
- ボタンをクリックしたら、メニューが開く
- 右にスライドしたら、画像が切り替わる。
- ブラウザバックしようとしたら、画面終了の警告アラートが表示される
上記のようなユーザーの動きに応じた処理( =「インタラクション」)を実現できるのがJavaScriptになります。
よりシステマチックな処理を実現するため、HTML, CSSと比べてやや難易度は上がりますが、Webアプリ開発ではほぼ間違いなく使われる言語になりますので、エンジニアを目指す上では学習は必須になります。
JavaScriptの学習方法と教材
使用する教材に関してはHTML, CSS同様、Progateとドットインストールを併用する形式で問題ありません。（有料講義も含まれます。）
受講するチャプターに関しては以下の通りです。
Progate
使い方に関してもHTML, CSSの時と同様、以下のステップで進めましょう。（再掲）
- Progateのチャプターはじめの解説に目を通す。（コードは書かない）
- 1に該当する箇所に関して、ドットインストールの動画講義で学習する。
- Progateに戻って、実際に手を動かして学習する。
わからない箇所は必要にググりつつ、5, 60%程度理解できたら先に進むようにしましょう。（実践の際に、残りの理解を補えば良いので。）
JavaScriptの修了期間
目安として、1週間程度で終わらせるようにしましょう。
5. 【実践①】簡単なWebサイトを作ってみる
HTML, CSS, JavaScriptまでの基礎学習を終えたら、実践として簡単なWebサイトを作ってみましょう。
「Webサイトを作る」というとハードルが高く聞こえるかもしれませんが、内容的には、、
サイトを模写する
ことに取り組んでいきます。
模写する課題としては、「Codejump」というサイトの入門レベルのサイトになります。
【HTML/CSS コーディング練習】入門編：プロフィールサイト／1カラム【HTML/CSS】コーディング練習【入門編】プロフィールサイトです。コーディング練習は、デモサイトと同じものを作る「模写コーディング」とデザインデータをもとにコーディングを行う「デザインカンプからのcode-jump.com
手順としては以下の通りです。
- 上記のURLにアクセスする
- (下にスクロールして)デザインデータをダウンロードする
- ローカルでHTMLとCSSファイルを準備する
- デザインカンプを見ながらコーディングしてみる
実務の現場では、デザインカンプを見ながらコーディングするのが一般的なので、それに従ってデザインデータからフォントやスペーシング等を抽出して、コーディングしていきます。
環境の準備に関しては、ドットインストールの最初の講座で行っているかと思いますのでそれらを用いつつ、必要なファイルを追加してコーディングしていきましょう。
（HTML, CSSのVSCodeを使った環境構築手順に関して、参考になるサイトを掲載しておきます。）
【初心者向け実践】HTMLとCSSの環境構築「8つの手順」プログラミング初級者に嬉しい、プロ仕様の「テキストエディタ」を使ってHTMLとCSSを演習する手順を8つのステップで紹介。自分のパソコンに開発環境を構築してみましょう。初心者向けの優しい解説と写真やオkisopro.net
JavaScriptを組み込む
一通り、HTML, CSSでコーディングしたサイトが出来上がったら、続いてJavaScriptを使って簡単なインタラクションを追加していきましょう。
上記で模写したサイトに以下の要素を追加してみてください。
- ナビゲーションメニューをハンバーガーメニューにして開閉できるようにする。
- ある程度までスクロールしたら、右下に「↑」アイコンを出し、クリックすると最上部までスクロールされるようにする。（トップボタン）
最低限、上記の2点に関しては実装してみることをお勧めします。
当然、最初はどうやって実装していいかわからないかと思いますが、色々なサイトを参考にしつつ・調べつつ、実際に手を動かしながら実装してみましょう！
参考までに、参考URLを添付しておきます。
（ハンバーガーメニュー）
JavaScriptでハンバーガーメニューを作ろう (全13回) - プログラミングならドットインストールJavaScriptでハンバーガーメニューを作る方法を見ていきます。dotinstall.com
（トップボタン）
ページトップへ戻るボタンの作り方【JavaScript】ページトップボタンをJavaScriptで実装したい人 JavaScriptで作るにはどうしたらいいんだろう？…sinpe-pgm.com
ここまでで、1回目の実践編は完了です。お疲れ様でした！
6. Ruby
続いて、Rubyという言語の基礎を学んでいきます。
Rubyを学ぶ理由としては、この後紹介するRuby on RailsというRubyのフレームワーク（Rubyを使って簡単に開発できるようにしたツール）使ってポートフォリオを作っていくためです。
基本的には、「素のRuby」（＝Ruby単体）でアプリを作成することは少ないです。
理由としは、細かい内容は色々ありますが、ここでは
その方が色々と簡単で便利だから
程度で理解しておいてもらって問題ありません。
具体的にどの点がどういう風に便利かについては、この後に解説するRuby on Railsのところで解説します。
Rubyの概要と選定理由
Rubyは、サーバー側で動く言語になります。（サーバーサイドの言語とも言われます。）
先で解説したJavaScriptはクライアントサイド、つまりはクライアント＝ブラウザ側で動く言語になりますので、役割が異なります。
クライアントサイドのJavaScriptに加えて、サーバーサイドのRubyを習得するすることで一連のアプリケーションを構築することができます。
Web系の言語の中で、Rubyを選定する理由に関しては沢山ありますが、中でも、
- コードがシンプルで経験や知識の浅い未経験者にもとっつきやすい
- 求人が多い（間口が広い）
- フレームワークを使って様々なアプリケーションを開発できる
などが主な理由として挙げられます。
3つ目の「フレームワーク」に関しては下記の、「Ruby on Rails」の部分で解説します。
日本人が開発した言語ということもあり、日本語のドキュメントが豊富で非常に学習しやすいです。
また、求人に関しても、IT求人サイト等で「Ruby」のキーワードで検索していただければ分かりますが、かなり求人数も多いので、Web系のエンジニアを目指す際は、Rubyを選択しておいて困ることはないかと思います。
Rubyの学習方法と教材
HTML, CSS, JavaScriptなどと同様にProgateとドットインストールを並行して進める形で問題ないかと思います。
Rubyは環境構築がやや面倒なので、なるべくこの段階ではローカルの環境構築が必要ない方法で学習するのがおすすめです。（Progateもドットインストールもローカルの環境構築不要で始められるかと思います。）
受講するチャプターに関しては以下の通りです。
Progate
使い方に関してもHTML, CSS, JSの時と同様、以下のステップで進めましょう。（再掲）
- Progateのチャプターはじめの解説に目を通す。（コードは書かない）
- 1に該当する箇所に関して、ドットインストールの動画講義で学習する。
- Progateに戻って、実際に手を動かして学習する。
Rubyの学習修了期間
Rubyの基礎文法学習の期間としては、約2週間程度で終わらせましょう。
7. SQL, RDB
続いてはデータベースに関する技術について学んでいきます。
SQL, RDBの概要
データベースとは、あらゆるデータを保管・管理しておくための箱のようなものです。
この世のあらゆるデータ（例、クレカ情報・プロフィール・商品の情報・SNS等の投稿）はすべて、このデータベースに保存されており、これを必要なタイミングで取り出して使用することができます。
どのようなシステムにおいてもデータべースはほぼ間違いなく使われますので、エンジニア業務においては必須のスキルになります。
中でも現場でよく使われる技術が、RDBとSQLという技術になります。
RDBは上記で説明したデータベースの一種です。
Relational Database（リレーショナルデータベース）と呼ばれ、データを表形式で管理するデータベースの仕組みです。
この表のことを一般的にテーブルと呼び、複数のテーブル同士の関係性(Relation)を明確にしたものがRDBになります。
少しイメージを持っていただくために、例を挙げて見ます。
「ユーザーテーブル」
| id（ユーザーID） | name |
|---|---|
| 001 | 木村 |
| 002 | 川島 |
| 003 | 岸 |
↓関連する↑
「購入商品テーブル」
| id（商品ID） | name | userId |
|---|---|---|
| 001 | PC | 002 |
| 002 | コピー機 | 003 |
| 003 | デスク | 001 |
上記の例は、「ユーザー」と「商品」のテーブルにそれぞれデータが登録されている例になります。
「購入商品」はそれぞれ、ユーザーに紐づいることから、、、
商品と、それらを購入したユーザーという関連性を持っていることがわかります。
ざっくり上記がRDBの概要になります。
続いて、SQLについてです。
SQLは、「Structured Query Language」の略で、
データベースにアクセスする（問い合わせる）ための言語になります。
SQLも言語の一つですが、言語といってもデータベースを操作することに特化した言語なので、アプリやシステムを構築できるその他のプログラミング言語(Python, Ruby, JavaScript, PHP等)とは異なります。
また、「データベース」と言いましたが、その中でも、先ほど説明したRDB (リレーショナルデータベース)を操作するための言語になります。
（今回はRDBとSQLの解説記事ではないので、詳しい解説は今後学習する中で深めていってください！）
SQLに関してもRDBを扱う上では必須の知識となるので、両者をセットで習得する必要があります。
RDB, SQLの学習方法と教材
教材としては以下のものが、初学者にもわかりやすくおすすめです。
スッキリわかるSQL入門 第3版 ドリル256問付き! (スッキリわかる入門シリーズ)
RDBの種類やそれぞれの違い、正規化など、網羅的に言及されています。
また、実際にSQLを書いて実践するセクションもあり、アプトプットするにも良い書籍になっています。
学習方法に関しては以下のように行うと良いかと思います。
- 1章ずつ学習する
- まずは、1章全体を通して読んで理解する（5割程度の理解でOK）
- 1章の最初に戻って7割程度理解する（実際に手を動かす）
書籍が一通り終えると、SQLに関してはほとんど理解できている状態になるかと思います。
続いて、Web開発でよく使われるMySQLについて、追加で学習しましょう。
Webアプリ開発においては、PostgreSQL, SQ Lite, Maria DBなどといったデータベースが使われることがありますが、その中でも使用率の高いDBがMySQLになります。
よって、ポートフォリオ開発においてもMySQLを使用することを前提として学習を進めておくことをお勧めします。
MySQLの使用教材に関しては、ドットインストールを使用すれば十分かと思います。
受講すべきレッスン↓
ドットインストール
先に紹介した書籍を一通り学習していれば、理解もスムーズかと思います。
RDB, SQLの学習修了期間
比較的ボリュームの多い内容になりますが、3週間を目安に学習完了させられるように計画しましょう。
内訳としては、
- 1~2週間目：書籍でSQLを学ぶ
- 3週間目：ドットインストールでMySQLを学ぶ
8. Git, Github
続いて、Git, Githubに関して学んでいきましょう。
始めにGit, Githubの概要について簡単に説明しておきます。
Git, Githubの概要
itとは、ソースコードをチームで共同編集するためにしようする仕組み・ツールのことです。（バージョン管理システムとも言われます。）
Web系の言語に関わらず、どのプログラミング言語を扱う上場合でも、それらの言語はすべてファイル内に記述され、それらをコンピュータが読む込むことでプログラムが実行されることは理解していただいているかと思います。
そのように、エンジニアリングとはファイルのソースコードを編集することがメインの作業になってきます。
また、エンジニアの業務おいては基本的にチームで開発するため、複数人で同一ファイルを編集することになります。
こうなると、以下のような問題が発生します。
「誰がどのようにファイルを編集したかわからない」
「先に編集していた内容が、後から編集した内容で上書きされ消えてしまった」
ファイルを編集するのがメインのエンジニアの業務において、こうした問題は頻発されることが予想されます。
それでは困るので、Gitという仕組みを使って解決します。
Gitを使うことによって、いわば、ファイルの変更に対して履歴を残していくことができます。
また、編集した内容を反映するタイミングも任意に決めることができるため、「上書きされ消えてしまう」といった問題もなくなります。
上記の内容からも理解していただけたかと思いますが、エンジニアとして業務を行なっていく上で、Gitを使えることは必須になります。
どの現場においても、ツールの違いこそあれど、必ずGitの仕組みを使って業務を行っているからです。
ちなみに、Git, Githubと2つの言葉を使用していますが、それぞれ別の概念になるので、簡単にまとめておきます。
GitとGithubの違い
- Git: 上記で解説したようなソースコードをチームで共同編集するためにしようする仕組み・ツール自体のの総称のこと。
- Github: それらGitの仕組みをクラウド上（インターネット上）で利用して、開発者が使いやすい形で提供されたもの。
細かい違いに関しては、実際に使っていく中での方が理解しやすいかと思いますので、現時点では明確に理解しておく必要はありません。
Gitの概要と必要性がわかったところで、学習方法や使用教材に関して説明していきます。
Git, Githubの学習方法と教材
Git, Githubの学習ポイントとしては1つです。
- 概要を理解したら必ず実践する
Gitは動画や教材を見ているだけではなかなかイメージしきれません。
そのため、動画等でインプットしたら、必ず同じように自分でも手を動かして実践して、どのような動きになるのかを確かめていく作業を入れるようにしましょう。
教材としてはドットインストールで学習するのがGit, Githubを一緒に学べておすすめです。
具体的なレッスンに関しては、以下の3つを受講しておけば十分かと思います。（それぞれリンクにしています。）
Git, Githubの学習修了期間
覚える内容にも限りがある上、そこまでボリュームがあるわけではないため、3 ~ 4日を目安に学習しましょう。
期間に余裕があれば、これまで書いてきたコードをリポジトリにプッシュしておくと良いでしょう。
9. Ruby on Rails
基礎学習の最後は、Ruby on RailsというRubyのフレームワークを学習していきましょう。
ここの学習を終えれば、いよいよオリジナルのポートフォリオ開発に入ることができます。
まずは概要の説明です。
Ruby on Railsの概要
先述の通り、Ruby on RailsはRubyのフレームワークになります。
フレームワーク(framework)というのは、日本語で「枠組み」などと訳されるように、
Rubyというプログラミング言語を土台として構築された、アプリケーション開発に必要なファイルが揃った枠組み・土台
のことです。
「蕎麦」を例にとると、蕎麦を作る際に小麦と蕎麦粉を混ぜて、引き伸ばして、カットしてというように麺から作るとなると大変です。
蕎麦にはすでに「このように作ればそばの麺ができる」というような枠組みが存在しているので、(よっぽどのこだわりがない限り)私たちが普段、蕎麦を麺から作ることはなく、あらかじめ麺として完成されているものをスーパーなどで買って使います。
話を蕎麦からフレームワークに戻しまして、上記の例をRubyとそのフレームワークのRuby on Railsに置き換えて説明しますと、
- Ruby: 蕎麦粉、小麦粉などの原材料
- Ruby on Rails: 原材料から作られ、完成された蕎麦
のような関係といえます。
フレームワークであるRuby on Railsを使うことによって、それを用いずに純粋なRubyだけで構築するよりも、より効率的で簡素にアプリケーションを作ることができます。
具体的には以下のような便利さがあります。
- ローカルサーバーやデータベースと連携するツールなどといった開発環境があらかじめ整っている。
- 基本的な構造・仕組み、記法が決められているため、それに則ることでアプリ開発に集中できる。
- ライブラリ（便利機能）が豊富に用意されている。
現段階では、具体的にイメージできる必要はありません。
実際に学習を進める中で、上記のような便利さを感じてもらえれば問題ありません。
そして、やや本題とはそれますがこうしたフレームワークはRubyに限った概念ではありません。
- Python: Django
- PHP: Laravel
- JavaScript: Vue
上記のように、ほとんどのプログラミング言語には専用のフレームワークが存在しています。
実務の現場でも、純粋な言語で実装することはほとんどなく、大抵はフレームワークを用いて開発を行います。（その方が圧倒的に効率的なので。）
Ruby on Railsの学習方法と教材
学習教材に関しては、Railsの学習において王道のRailsチュートリアルで学習しましょう。
1000円前後の教材にはなりますが、環境構築からデプロイまで、Ruby on Railsでの開発の流れを体系的に学べます。
これまでと比較してそれなりに難易度が上がりますが、この教材1つやっておけば十分にポートフォリオ開発に入ることができます。
Ruby on Rails チュートリアル：プロダクト開発の０→１を学ぼうSNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。railstutorial.jp
最新のバージョンが**Rails 7 (第7版)**になりますので、そちらで学習を進めましょう。
学習のポイントをいくつかまとめておきます。
- 1周目：見よう見まねで一通り学習してみる（3, 4割理解でOK）
- 2周目：ある程度理解しながら進める（わからない箇所は、逐一調べながら進める）
- 3周目：2周目までで理解しきれなかった箇所のみ学習し直す
一度で理解し切ることは、結構ハードルが高いので最低でも2周程度は反復しておくと定着するかと思います。
逆にそれ以上反復してしまうので、期間がかかり過ぎてしまい、肝心のポートフォリオ作りになかなか入れなくなってしまうので、最高でも3周までにしましょう。
有名な教材だけあって、ネット上に解説記事も多いので、行き詰まったら参考にしてみると良いかと思います。
また、教材の中にも解説動画が用意されていますので、必要があればそちらなども参考にしてみましょう。（少し、追加料金がかかるかもしれませんが、、、。）
Ruby on Railsの学習修了期間
期間に関しては1周目は2週間、2, 3周目も2週間の合計4週間で終えられると良いかと思います。
多少前後するかもしれませんが、このフェーズはある程度時間をかけて問題ないところにはなるので、あまり期間にこだわり過ぎずに学習しましょう。
10. 【実践②】ポートフォリオを作る
ここまでで、基礎学習が完了したら、いよいよポートフォリオ作りに入っていきましょう！
ポートフォリオ作りに関しての具体的な手順や流れに関しては、長くなってしまうため、別記事で詳しく解説していますのでそちらを参照してみてください。
ここでは簡単にポートフォリオ開発の流れについてお伝えしていきます。
- テーマを決める
- 設計を行う（画面遷移図、テーブル設計）
- タスクを立てる
- 実装する
実際にアプリを作り始めるまでにやるべきことは意外と多いですが、準備段階を怠ってしまいますと、低品質かつカオスに陥ってしまうので、丁寧に考えていきましょう。
1. テーマを決める
何はともあれ、まずは作るものを決めるところから始めます。
とはいえ、何を作ればいいのかわからない場合は、
ソーシャルメディア系のアプリケーション
を作ることをお勧めします。
「ソーシャルメディア系」というと、Twitter, Facebook, InstagramなどのSNSを連想される方も多いかと思いますが、それほどの規模やクオリティのアプリを作るわけではありません。
抽象化すると、以下のような要素・機能を含んだアプリを考えれば良いです。
（ユーザーが何らかのコンテンツを）
- 投稿できる
- 投稿を閲覧できる
- 投稿を編集できる
- 投稿を削除できる
こうした機能を含む、ソーシャルメディア系をおすすめ理由としては、
- アイデア次第でアレンジしやすい
- 機能が必要十分である
の2点かなと思います。
未経験者がいきなり特殊な機能を多く含むアプリを作ろうと思っても、今の技術力で実現可能性を判断するのは少々難しいです。
それよりも、アプリケーションとしての基本的な機能を組み合わせて作る方が、再現性は高いです。
よって、「〜版Twitter」とか「〜版Instagram」みたいな形でアレンジしながら独自性のある形に仕上げていくことが最も近道かなと思います。
加えて、作るものを決める上で考えなければならないこととして、
誰のどんな悩みを解決するアプリなのか
は明確にした上で、開発するようにしましょう。
ただ単に、Twitterクローンのような独自性のないアプリケーションを作っても、採用する側にとってみれば「手抜き」と捉えられてしまいますし、そんなものは誰でも簡単に作れてしまうので、アピール要素にもなりません。
なので、日常で抱える何かしらの問題意識を拾って、それらを元に課題解決するのがエンジニアの仕事でもありますので、そのような意識を持ってテーマ設定しましょう。
2. 設計を行う
テーマが決まれば続いては、設計を行っていきましょう。
（設計の話は長くなるため、別記事で詳しく解説します）
必要な設計内容としては主に以下の2つです。
- データベース設計（テーブル設計）
- 画面設計
1の「テーマを決める」で、作るものが決まったら具体的に
- どんな機能
- どんな登場人物
があるのかをざっと列挙しておくと良いです。
列挙した中から内容を取捨選択して、アプリに必要なデータとして設計します。
例えば、レシピサイトを作るとすると、以下のようなものがデータとして必要であることがわかると思います。
- ユーザー
- 名前
- 自己紹介文
- ユーザーのアイコン
- レシピ
- タイトル
- 作り方
- 材料
- レシピの画像
このようなアプリに必要となる要素は何で、どんなものをデータとして管理する必要があるのかを考え、テーブルに落とし込む作業が**データベース設計（テーブル設計）**になります。
次に、画面設計です。
画面設計では、
- 基本的なデザイン（配置、色、大きさ等）
- ページ遷移（どこを押したら、どこへ遷移する等）
デザインに関しては、他のWebアプリを参考にして取り入れられそうなものやお気に入りにものを1つ決めて、8割程度模倣して、残りを自分独自のデザインにすると良いです。
全て、一から決めようとするとほぼ間違いなく、素人が考えた感満載のいけてないデザインとなってしまう可能性が高いです。
3. タスクを立てる
設計がある程度決まったら、それらをタスクに落とし込んで作業を進めることをお勧めします。
ポートフォリオ開発は基本的には段階的に実装していく方が圧倒的に効率的です。
「Aが終わったら、Bを実装する。Bが終われば、次にCを実装する」
といった具合に、課題・問題を分割しながら徐々に進めていく方が
- 今、何を実装しているのか明確（初心者の場合、慣れない実装で目的を見失いやすい）
- 進捗が把握しやすい（いつまでに、就職・転職活動を始められるか把握できる）
といったメリットもあります。
また、エンジニアとして実務を行なっていくと、ほぼ間違いなくタスクベースで作業を進めることが多いです。
例えば、
「このタスクではここから、ここまでの機能・UIを実装してください」
みたいな形で、一定の粒度で区切られてタスクを割り当てられるのが一般的なので、この形式に慣れておくことをお勧めします。
4. 実装する
上記を全て終えたら、いよいよ実装に入りましょう。
実装に関しては
- ローカルで環境構築する
- まずはコピペから始めてみる
ことがポイントになります。
すでにインストール済みの場合は問題ありませんが、必要なツールを自分のローカルPCにインストールしていく作業が必要ですので、手順について調べながらインストールしていきます。
必要な環境が整ったら、ようやくコーディングです。
とはいえ、何から手をつけていけば良いかさっぱりわからないこともあると思うので、
まずは、自分の作りたい機能に関するコードをコピペしてそれを改造していく形で進めていくのがお勧めです。
例えば、ログイン機能を作りたい場合、、、
「Rails ログイン機能」
などで検索すると、候補となる記事がたくさん出てきますので、その中から、自分のアプリケーションに合いそうなコードを見つけて、コピペして動かしてみます。
実際にログインできていたら、そのコードをベースにアプリの仕様に沿って徐々に改良していきましょう。
まとめ
今回はプログラミング完全未経験からWeb系のエンジニアになるために、どのような手順で学習を進めていけば良いかについて解説してきました。
かなりボリューミーな内容になってしまいましたが、今回紹介した手順で進めていけば、たとえ未経験であっても（未経験だからこそ）就職・転職の可能性がかなり広がります。
なので、今回紹介したそれぞれの項目が終わるごとに、この記事に戻ってきてもらって、また次の項目の学習を進めるというような流れで活用していただけると良いかと思います！
プログラミング独学ロードマップ（まとめ）
- コンピュータサイエンス（2 ~ 3週間）
- コマンドライン（1 ~ 3日）
- HTML, CSS（HTML: 1週間, CSS: 2週間）
- JavaScript（1週間）
- 【実践①】簡単なWebサイトを作ってみる（2週間）
- Ruby（2週間）
- SQL, RDB（3週間）
- Git, Github（3 ~ 4日）
- Ruby on Rails（1ヶ月）
- 【実践②】ポートフォリオを作る（1 ~ 1.5ヶ月）
上記を3 ~ 6ヶ月間で終わらせる。
ポートフォリオの作り方！
今回は、主に基礎学習段階のロードマップをお伝えして、具体的なポートフォリオの作り方に関してはあまり詳しく触れませんでした。
- ポートフォリオの作り方について、もう少し詳しく知りたい。
- 何を作ればいいかわからない。作りたいものもあまりない。
このような方に向けて、ポートフォリオの作成方法を詳しく解説した記事も別で用意していきますので、ぜひそちらも合わせてご参照ください！
ここまで読んでいただきありがとうございました！
