ほぼ未経験の僕、アプリ開発するってよ。[３ヶ月目] [ポートフォリオ公開]

はじめに

初めてのポートフォリオ、ついに完成しました！！！

ほぼ未経験の僕、アプリ開発するってよ。[１ヶ月目の学習記録]以降、更新が止まってましたが、その後もrailsの学習を継続して、なんとかポートフォリオを完成させることができました！
今回は空白の２ヶ月目も合わせて、どういった手順でここまで到達したのか、どのようなポートフォリオを作成したのかという２点についてお話します。

・これからプログラミング学習を始める方
・転職、新卒入社目的でプログラミング学習されている方
には非常に参考になると思います。

また、前回の記事をお読みになってない方は先に読まれることを推奨します。読まれた方がより鮮明にトレース出来るかと思うので。

では本編です！

ここまでの学習軌跡

僕が１ヶ月目のときに書いた記事
ほぼ未経験の僕、アプリ開発するってよ。[１ヶ月目の学習記録]
では、railsチュートリアルの2章まででした。
そこから、どのような軌跡を辿ってポートフォリオ完成まで至ったのか見ていきましょう！

まずアウトラインです。

○２ヶ月目

railsチュートリアル
↓
現場rails

○３ヶ月目

ポートフォリオのアイディアを捻出
↓
設計
↓
デザイン
↓
フロントエンドコーディング (HTML CSS JavaScript)
↓
バックエンドコーディング (Rails)
↓
AWSデプロイ

では詳細に見ていきます。

○２ヶ月目
２ヶ月目の目標は「railsの基礎を固める」です！
そこでまずは、railsエンジニアの登竜門railsチュートリアルです。
その後、より高度な内容を学習するため「現場で使える Ruby on Rails 5速習実践ガイド」を学習しました。（教材等はAmazonのリンクを貼ってます。アフィリエイトはありません。以降のリンクも同様です）

railsチュートリアル
総学習時間は３５時間程度でした。
知らない概念や専門用語が連続して、かなりしんどかった記憶があります。
当時は自走力も低かったので、全ての概念を調べきることができず、所々飛ばしながらやりました。
到達度としては80%程度だと思います。
十分に可視化されている情報だとは思いますが、１周目で全てを理解しようとしなくていいと思います。
２週目で完璧に理解する。または、80%程度の理解で次のタスクに進むというのがおすすめです。
私は後者です。

現場で使える Ruby on Rails 5速習実践ガイド
総学習時間は30時間程度でした。
とても丁寧に解説されていて、控えめに言ってすごく良かったです。
railsチュートリアルの内容の復習もでき、その上発展的な内容に挑戦できました。
Ajaxや共同開発、リファクタリング等、発展的な内容は盛りだくさんで勉強になることが多かったです。
特に、migrationをバージョンとして扱う考え方などは印象的でした。今までは細かいことを考えずに「えいやっ！」とマイグレーションを作成していたのを、反省するいい機会になりました。
2つめの教材として大変良かったと思います。

２ヶ月目の学習はこんな感じでした！

ここまででrailsの基礎が十分に固まったので、いざポートフォリオを作成！３ヶ月目に進みます。

○３ヶ月目
ついにやってきました。３ヶ月目の目標は「ポートフォリオの作成」です。
学習時間は100時間。まるまる１ヶ月かかりました。
主な目的は、アウトプットをしてスキルアップすること、ポートフォリオで企業へのアピールが出来るようになることの２つです。

制作フローは

ポートフォリオのアイディアを捻出
↓
（設計）
↓
デザイン
↓
フロントエンドコーディング (HTML CSS JavaScript)
↓
バックエンドコーディング (Rails)
↓
AWSデプロイ

です。

では細かく解説して参ります！

ポートフォリオのアイディアの捻出
メンターに助言をもらいながら、割とサクッと決まりました。
コンセプトは「2chのような質問掲示板」。
誰かにプログラミングについて質問が出来るサービスがいくつかありますが、どれも少し堅苦しいという印象があるんですよね。
もっと気軽に質問ができる場所、ただプログラミングについてだらだら話せる場所。
そういう居場所があってもいいなと思ったのです。
ということで、言っちゃうと６割くらいは2chのパクリです笑

[コラム]アイディアを捻出するちょっとしたコツ
アイディアを捻出する方法は色々あると思うのですが、一番簡単なのは「自分が欲しいもの」じゃないでしょうか。日頃の生活の中で感じる「不便」とか結構いいヒントになる気がします。

設計
設計についてはスクールのメンターにしてもらいました。
もちろん設計も自分でやった方が良いのでしょうが、学習の優先度的にコーディングすることが最重要であったため、ここはメンターの力を借りました。要望を上手いこと設計に落としてもらえました。

デザイン
これは「figma」という無料のツールを用いて作成しました。
設計を元に、「どういうデザインにしたらUI,UXが向上するか」を常に考えながら作成しました。
またこの時点で、設計について違和感がある所や、疑問は全て質問して解決しました。

○デザインをして良かったこと
・作成するアプリのイメージが鮮明になる
設計があるからと言って、急にコーディングするのはやっぱり難しいですよね。
どういうアプリなのかを具体的にイメージできた方がやっぱり、コーディングしやすいです。
どういう動きになるのか。それは実際にコーディング出来るのか。など考慮する良い機会になります。

・デザイナーの気持ちになる
デザイナーさんからデザインをもらって、それをコーディングする。というのが一般的なwebエンジニアの仕事ですよね。実際に自分でデザインを作ってみないと、デザイナーの気持ちが理解できないと思うのです。デザイナーの気持ちになって、「デザインって作るの大変だな」「どうやったらコーディングしやすいデザインが作れるだろう」などと考えるには良い機会になります。

フロントエンドコーディング
作成したデザインを元にHTML CSS JavaScriptでアプリの見た目を作成していきます。
デザインがあったので、サイトの模写コーディングと何ら変わり無かったです。
シンプルなデザインだったので、難しいことも特にありませんでした。
ただ一点、bootstrapを用いてほとんどのスタイルを書こうと思ってたのですが、実際に書いてみるとあまり融通がきかなかったので、結局ほとんど生のCSSで書きました。（勉強不足でただ不慣れだった説は否めません）

バックエンドコーディング
ついに来ました。Railsのコーディング。
ここがメインです！一番時間をかけました。
ではアプリ作りましょう！と１から自分で書くとなると「あれ、何すればいいんだっけ？」てなります笑
rails new からつまづいたのは良い思い出です。
バージョン等の諸々の設定に、オプションを使います。でも、「あれどうやって指定するんだ？」「この設計の場合はこの設定する必要はあるのか？」など考慮することが多く、コマンド一つ馬鹿に出来ません。
今までも何も考えずに与えられたコードを入力してただけですが、一つ一つのコマンドやコードを吟味する必要が出てきて、とても良いトレーニングになりました。

「ここにこだわったよ！」って所は、後にコードを見せながら詳細に解説します！

AWSデプロイ
プログラム自体が完成しても、それをサーバーにあげないともちろん誰にも使ってもらえません。
また本番環境で動作させてみると、開発環境では起きなかったエラーが発生する可能性もあります。
もちろんデプロイせずにgit hubに公開して完成としてもいいんですが、今回は勉強がてらAWSにデプロイしました。
世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで
こちらのqiita記事を参考にしながらデプロイしました。
とても大変でした。。。
AWSの設定自体もそうですが、秘密鍵、公開鍵の設定など、普段触れない技術領域でした。
エンジニアは学習することが多いなと再認識しました。

ポートフォリオ公開！

さあ、そうこうして完成したポートフォリオ、公開します！

ドン！！！
TechBoard
ドン！！！

どうでしょうか？見ていただけましたかね。
もちろんまだプロトタイプなので改善点は多いのですが、それを気にしてたらいつまでも公開できないなと思ったので公開しちゃいます。
少しでも触って頂けたら泣いて喜びます

ここに注目！

プログラムを用いて簡単な解説をしようと思ったのですが、思ったよりもヴォリュームがあったので別記事におこします！

現在準備中ですm(. .)m

まとめ

再三言いますが、やはりエンジニアは学習することが多いですね。
エンジニアが触れる領域は、広くて深いです。
様々技術を活用して一つのサービスが形になっているというのがよくわかりました。
学習をだらだらやっていると、いつまで経っても一人前のエンジニアにはなれないと危機感を感じると共に、案外エンジニアは楽じゃないなと感じました。
と言いますのも、私は皆さんがよく知るようなインフルエンサーに煽られてプログラミングを始めた経緯があります。完全にエンジニアをなめてました笑

同じくエンジニアを目指されている方に少しでも参考になれば幸いです！