【未経験】【エンジニア転職】Rails, React, AWS, Docker を使用した SPA サービス作成までの独学方法

# 自己紹介

~~現在（２０２２年２月）、自社開発の企業を目標に転職活動をしています。~~
2022年4月1日から自社開発企業で働くことになりました。

私は小学校教員からエンジニア転職を目指して独学を継続しています。
webのことは全くわからない状態から学習を始めました。
最初は「発達障害をもつ子どもを支援するサービス」を自分で作れないだろうか、というところから学習がスタートしました。
学習をしていくうちに、「作るのが楽しい！もっとやってみたい。エンジニアになって、技術で社会に貢献したい」という思いに変化していきました。
自分でも驚いていますが、「やってみたい、チャレンジしてみたい」と思えることに出会えました。

忙しい中でも計画的に時間をかけて学習しました。これは効率性を考えるとおすすめできる学習方法ではありませんが、（継続できれば）誰でも再現可能であるともいえるかと思います。
仕事が忙しいからエンジニアに転職をすることを諦めている方の参考になればうれしいです。

# 作成したサービスについて
## [「困り感」のある子どもを支援するサービス Tech Teach!](https://www.tech-teach.net)
![名称未設定のアートワーク 28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/c6065b68-3078-629d-878c-3b3137217bea.jpeg)

「困り感のある子ども」×「先生」がマッチングするサービスです！
###### 作成背景
「困り感」のある子どもに適切な支援を！
私が現役教員として切実に感じている問題です。公教育ではカバーしきれない問題を、ITの力で解決したいと考えました。
公的な教育では、先生をえらぶことができません。「困り感」のある子どもは、相性の合わない先生と勉強することで、不必要な劣等感を抱いたり、自信を無くしたりすることがあります。
それぞれの子どもにマッチする先生を見つけて、素晴らしい個性を伸ばしていきましょう！
*「困り感」→ 不登校や発達障害（ADHD、自閉症、学習障害）などで困っている状態

# 使用した技術
###### フロントエンド
HTML/CSS, TypeScript, React, Material-UI

###### バックエンド
Mysql, Ruby, Rails6 ( API モード), Rspec, Rubocop

###### インフラ・開発環境
フロントエンド
AWS ( ACM / Route53 / S3 / CloudFront )
バックエンド
AWS ( EC2 / RDS / VPC / ALB / ACM / Route53 )

Docker/Docker-compose （開発環境）


# 作成する中で感じたこと
オリジナルサービスを作る中で大事だと思ったことを列挙していきます。

・自分なりの学習スタイルを早期に固定する
・エンジニア転職を目的とせずに、その後まで考慮して学習を継続する
・学習時間や学習期間は他者と比べても意味はない
　→大事なのは行動して、継続すること
　　→そうするとだんだんと作ることが楽しくなってくる


# 学習方法
###### 結論:朝学習の時間を軸とする
多くのエンジニア転職を目指している方々は、
平日は４時間
休日は８時間
みたいな学習時間を確保して、最大効率で進めていくことが有力かと思います。
しかし、私のように、現職の関係で毎日少ししか学習時間を確保できない方も多くいると思います。
そのために諦めてしまう方もいるのではないかと思います。

私は、自分自身を媒体として、
###### １日の学習時間は少ないが、継続することでエンジニア転職を成功させる
ことにチャレンジしています。（２０２２年２月１０日時点で転職活動中です。）

学習方法はいたってシンプルです。
###### ゴールデンタイムと言われる朝の時間に集中して学習することをひたすら継続する
これだけです。

私の場合、始業時間が早く、７時には家を出る生活です。
ですので、毎日５時に起きて１時間半学習してから仕事に行くということを継続しました。
家に帰ってから寝るまでの間にさらに追加で〜２時間程度学習をします。
朝の方が学習時間自体は短いですが、集中力や吸収力は圧倒的に朝が勝ります。
これは継続していると実感できると思います。

この学習スタイルを
２０２１年５月〜２０２２年２月（現在）まで継続しています。

また、メンターをしてくれる人を探して、開発のサポートをしてもらうことも併せていきました。
これについては、後述します。

# 継続方法
##### 結論：習慣化と健康的な生活を徹底する

５時に起きて学習して仕事もして、夜も学習する
という毎日を継続することは簡単ではありません。
局所的に実行することはできるかと思いますが（学生のテスト期間的な）
長期にわたって継続するにはコツが必要です。

##### コツ１　習慣化
習慣化に関する詳細は書籍などから科学的な根拠を知って欲しいです。
私が実行したのは１つで、if-thenプランニングです。
すでにある習慣に、身に付けたい習慣を合体させる方法です。
私の場合は「朝起きてコーヒーマシンをセットする」という習慣がすでにありましたので、そこに朝学習の起点となる「PCの電源を入れる」というアクションを合体させました。
また、夜お風呂から出たら「体温が下がるまで学習する」もやりました。

上記の習慣化した部分以外でも学習時間をとりますが、その日の疲れ具合によってムラが出ます。
しかし、
###### 習慣化している学習時間の部分だけは必ず毎日実行することができました。

##### コツ２　健康的な生活
これは、当たり前ですが、健康的な生活がないと学習への集中力と吸収力が下がってしまいます。
他のライバルたちは毎日４〜８時間学習しているわけですから、それに対抗するには、生産性が肝要だと思っています。

技術的なことではないので、詳細は割愛しますが私が実行したのは以下です。
・睡眠時間の固定
・和食メインのタンパク質豊富な食生活
・毎日の運動
・週２〜３の筋トレ
・入浴の最適化
などです。

##### エンジニアに転職することが目的ではなく、エンジニアになってからがスタートだと思います。
###### そのために、健康的でストイックな生活を造っておくことは、（個人的には）最重要なのでは？とすら思っています。

ただ、ここは個人的な見解がモリモリなので参考程度です。



# 学習期間
総学習時間：約７００〜８００時間
完全に未経験から学習を始めましたので、かなり時間がかかりました。
Railsだけでサービスを作成するのであれば、４〜５００時間ほどになるかと思います。
フロントエンドもやるとなると上記くらいは最低でもかかる体感です。

学習期間：１年と４ヶ月
これは非常に長いですが、本格的にやっていたのは１年間です。
詳細は学習マップで記載します。

# 主な使用教材
たくさんの教材を使用しましたが、主な使用教材を紹介します。
以下の教材が軸としてあり、適宜必要な情報はググっていました。
（下記以外にも、ネットワークや web の知識全般を学ぶために、基本情報技術者レベルの書籍を読んだり、ネットの記事を参考にしたりしています。）

[progate](https://prog-8.com/dashboard)
[ドットインストール](https://dotinstall.com/)
[プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで Software Design plus Kindle版](https://www.amazon.co.jp/dp/B077Q8BXHC/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
[rails tutorial](https://railstutorial.jp/)
[udemy Git：はじめてのGitとGitHub](https://www.udemy.com/course/intro_git/)
[techpit 【Ruby on Rails 6】Instagram風簡易SNSアプリを作ってみよう！](https://www.techpit.jp/courses/2)
[techpit RailsとReactでUberEats風SPAアプリケーションをつくってみよう！](https://www.techpit.jp/courses/138)
[techpit 【Ruby on Rails 6】Tinder風マッチングアプリを作ってみよう！](https://www.techpit.jp/courses/134)
[パーフェクト Ruby on Rails 【増補改訂版】 (Perfect series)](https://www.amazon.co.jp/%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88-Ruby-Rails-%E3%80%90%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88%E3%80%91-Perfect/dp/4297114623/ref=sr_1_1_sspa?keywords=Ruby+on+Rails&qid=1644620385&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFUWDJUSDNZS1AzTTYmZW5jcnlwdGVkSWQ9QTA3MDE2NTRYUjc0MUxXRDdKQlgmZW5jcnlwdGVkQWRJZD1BM0kwQ0c4TDJYVUlSNyZ3aWRnZXROYW1lPXNwX2F0ZiZhY3Rpb249Y2xpY2tSZWRpcmVjdCZkb05vdExvZ0NsaWNrPXRydWU=)
[さわって学ぶクラウドインフラ　docker基礎からのコンテナ構築 Kindle版](https://www.amazon.co.jp/%E3%81%95%E3%82%8F%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9-docker%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E6%A7%8B%E7%AF%89-%E5%A4%A7%E6%BE%A4-%E6%96%87%E5%AD%9D-ebook/dp/B089VZXX63/ref=sr_1_1?adgrpid=52334386214&gclid=Cj0KCQiAr5iQBhCsARIsAPcwROMms4FAPRcousYjVNkCCIiS_yQluLSrMP4jsPiNZ_94yBwdzvSwPTEaAiWTEALw_wcB&hvadid=553843458849&hvdev=c&hvlocphy=1009312&hvnetw=g&hvqmt=e&hvrand=3519777706428407739&hvtargid=kwd-304547027236&hydadcr=27488_14478954&jp-ad-ap=0&keywords=docker+amazon&qid=1644619825&sr=8-1)
[Everyday Rails - RSpec による Rails テスト入門](https://leanpub.com/everydayrailsrspec-jp)
[はじめてつくるReactアプリ with TypeScript Kindle版](https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%A4%E3%81%8F%E3%82%8BReact%E3%82%A2%E3%83%97%E3%83%AA-TypeScript-mod728-ebook/dp/B094Z1R281)
[udemy フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座](https://www.udemy.com/course/rails-kj/)
[udemy Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版](https://www.udemy.com/course/react_stepup/)
[udemy AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得](https://www.udemy.com/course/aws-and-infra/)

# 学習ルート
前提として、基礎などを暗記するより、頭の中に引き出しを作ることを重要視していました。
暗記するに越したことはないですが、未経験で暗記をしようと頑張ると挫折しやすいと思います。
ハマった時に解決できるよう、頭の中に「あの教材（記事）を見れば解決できそう」というような引き出しを作っていくことを意識しました。

##### 基礎学習　（８０時間）
Progate
ドットインストール
を使用して HTML/CSS, Git, SQL, Ruby, Rails, JS を学習しました。
この段階で躓くことがあっても気にせず進みまくることが大事です。

##### 基礎学習２ (１００時間程度)
ここでは、実際にアプリを作りながら基礎的なことを学習しました。
rails tutorial
techpit の教材を３つほど

##### Rails アプリ作成 (１００時間程度)
学んできたことを生かしてポートフォリオサイトの作成をしました。
基礎学習２で学んだ機能を導入したり、調べながら作成しました。

##### Rails アプリに応用技術導入 (７０時間)
ここで Docker や Rspec テスト、 CircleCI　自動テストを導入しました。
Docker と Rspec は書籍で学習したためかなり時間がかかりました。（６０時間）
ここはもう少しショートカットしても良いかなと反省しています。
というのも、独学レベルでは「完全に理解した」でしかないからです。。。

この時点でRails アプリのポートフォリオは完成してHeroku に公開ができました。
##### しかし、この技術レベルでは自社開発の企業の書類選考を通ることは難しいです。
実際にWantedly の求人を見て、SPA アプリを作成することが必要だと感じました。

##### SPA アプリ作成に向けて (１００時間)
ここからフロントエンドの学習が入ってきます。
Rails api モードで React をフロントエンドに使用したアプリを作る教材（techpitの教材）を2
周しました。
React Typescript を使用した todo アプリや天気を api から取得して表示するアプリなど、基礎的な教材を使用して手を動かしながら学習しました。

##### TechTeach 作成 （３００時間）
目標にしていた発達障害の子どもを支援するサービスの開発に着手します。
自分が必要と考えている機能、技術がある程度使用されている教材を元に作成を始めました。
しかし、バックエンドとフロントエンドを同時に開発していくのは大変でした。
バックエンドのエラーなのか、フロントエンドのエラーなのか特定するのが難しかったです。
というか、はじめは API をたたくことを理解するのに時間がかかりました。
###### このままでは効率が悪いと思って、 [MENTA](https://menta.work/member/dashboard) を使用してメンターをお願いすることにします。

メンターさんには、
・エラーを解決するためのチェックするべきこと
・設計のアドバイス
・ロジックの相談
などをサポートしていただきました。

このアプリを開発するのに大変な時間がかかっているのは、開発しながらキャッチアップしていたからです。
React や TypeScript の基礎をやったとはいえ、オリジナルアプリの機能を作成するとなると太刀打ちできませんでした。
Udemy の教材を使用したり、書籍を参考にしたり、ググったりして、自分なりに実装方法を考えてメンターさんに相談する。こういった方法で開発していくことでなんとか解決していきました。
また、インフラに　AWS を使用したかったので、こちらも Udemy の教材を使用して学習してからインフラを構築しました。
これもかなり苦労しましたが、結果的にはよかったです。
というのも、バックエンドは EC2 に、フロントエンドは S3 + CloudFront にデプロイするという経験で、web の流れを少しつかめたからです。
初めて AWS を学習する人は、EC2 とか RDS とかの用語がわからず、抵抗感が強いと思いますが、これまでにやってきたように少しずつ学習することでわかるようになるので諦めないでほしいと思います。



# 今後の展望と反省
２０２２年１月中旬ごろに、自分が一区切りしようと思っていた段階まで来れました。
２０２１年内に終わる計画で半年以上前からやっていたので、まあまあ計画通りにできたかなと思っています。
しかし、[TechTeach](https://www.tech-teach.net/) には改善点は山のようにあり、今後も個人開発をしながらスキルアップしていきたいと思います。

###### 今後追加したい技術や機能

-  CircleCI で自動デプロイ
-  ESLint Prettier の導入
-  検索機能の追加
-  タグ機能を追加
-  通知機能の追加

###### 反省点

- Qiita などでのアウトプットをもっとすればよかった
- 基礎学習に時間かけすぎた
- フレームワークに頼りすぎた

アウトプットの情報発信は、重要とわかっていましたが、テキストを書く時間を惜しんでやらないこととして決めていました。しかし、今となっては時間がかかってもやっておくべきだったかなと思っています。
転職活動の段階に来て、継続してきた証明になるものとして使えたな〜と後悔しています。

基礎学習は、教材の通りにやっていれば大抵うまくいくので、できた感がもちやすいです。ついつい楽しくなって基礎的な教材を色々やってしまうのはあるあるなのかなと思います。
しかし、オリジナルアプリを作る段階に来て、様々な壁にぶつかりまくることをしないと成長できないと思いました。

最後に、Rails はとても便利で、初学者が挫折しにくいフレームワークだと思います。よくわかっていなくても、Rails がよしなにやってくれちゃいます。素の Ruby がちゃんと理解できていない状態に陥ることがあると思います。
私自身そうなりました。慌てて[プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで Software Design plus Kindle版](https://www.amazon.co.jp/dp/B077Q8BXHC/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)を復習したりしています。
基礎をやりすぎるなと言ったばかりですが、基礎も大事です。
個人的な所感としては、基礎はさらっとやって、必要な段階がきたら（私の場合は、フレームワークだけできればいいってもんじゃないと気づいたとき）、復習するというやり方でいいのかなと思っています。
必要感がないと学習意欲も吸収力をイマイチだと思うので。



# さいごに
ここまで読んでいただきありがとうございます。
自分で書いていて、やっぱり４〜６ヶ月くらいでがっつり時間をとってやりきってしまう方が効率は良いなと思いました。
長期間は挫折しやすいですし、万人におすすめできないです。
ただ、私のように、現職も疎かにしたくないけど、エンジニアになるために頑張りたいという人の役に立てればいいなと思っています。

個人的には、学習と並行して生活改善をしてきたので、
###### 超健康的生活習慣が身に付いたこともかなり人生にプラスでした。
難しいことを同時並行することはおすすめできませんが、興味がある人は実行してみてもいいかもしれません。

この記事が多くの人に読まれるころには、転職活動終わりました！と編集できたらいいなと思っています。
まだまだわからないこと、壁がたくさんあると覚悟していますが、継続力で乗り切っていきます。

最後まで読んでいただきありがとうございました。