【無料公開：準備編】ポートフォリオ作成のロードマップ
このロードマップの全体像は次のようになっています。
▼ロードマップの全体像
【無料公開：準備編】
【実践編①】RSpec、Rubocop導入
【実践編②】ユーザーの登録、日本語化、ログイン
【実践編③】ユーザーの更新、一覧、削除
【実践編④】料理の投稿
【実践編⑤】画像投稿、フォロー、お気に入り
【実践編⑥】コメント、通知、リスト
【実践編⑦】ログ、Bootstrapテンプレート
【実践編⑧】検索、AWS S3、CSV出力、総仕上げ
準備編（こちらのnote）は全て無料でご覧いただけます。
実践編では、具体的なポートフォリオの作成手順を一つ一つ解説しています。
▼ ロードマップ実践編 購入者の声
《転職振り返りメモ (10)》
— 👼 (@arigato3581) July 13, 2020
私の転職の一番の恩人は、こうだい@kodai_0122さん。
彼の『ポートフォリオ作成のロードマップ』を何回も繰り返して実力つけました。
彼に会えたのが一番の幸運でした！
直接お礼出来ていないのですが、本当に有難う御座います👼✨#駆け出しエンジニアと繋がりたい https://t.co/EQE2DcKFAS
エンジニア転職に向け、オリジナルのWEBアプリを制作する時に
— りょうすけ@エンジニア1年目 (@nabesuke1992) July 25, 2020
こうだいさん(@kodai_0122 )のnoteには救われました☺️
基本的な機能実装からrspecを使ったテストまで網羅的に解説してくれています🙆♂️
基礎学習を終えてこれからオリジナルサイトを作る段階の人には圧倒的におすすめです✨ https://t.co/5GWp3DvbFW
こうだいさんのポートフォリオ作成ロードマップを購入いたしました！
— まさかず@Web制作×エンジニア×パパ (@masa_kazu5) July 16, 2020
早速拝見、勉強になります😁テストコードが多く、仮想チーム開発も取り入れようと思います✨
まずは概要から考えます！
ポートフォリオ作成のロードマップ｜こうだい＠自社開発エンジニア @kodai_0122 https://t.co/K91JbkD0OA
RSpec,Rubocopを開発初期から導入していく考えがなかった。Issuesを活用した擬似チーム開発も！
— k.k (@tkmy789) May 11, 2020
早速ポートフォリオに生かします。
こうだいさん（@kodai_0122 ）のnote、めちゃくちゃ勉強になります🙇#駆け出しエンジニアと繋がりたい #今日の積み上げ
【TwitterのDMより】
非常に分かりやすく明快なポートフォリオロードマップで、
頭に入りやすくRailsの技術書を読むより勉強になっております。
ありがとうございます。
【2021/07/30 追記】ロードマップnoteの販売部数は累計1,400部を突破
（マガジンでのセット購入は170名様突破）しました✨
【2021/06/08 追記】ロードマップnoteの販売部数は累計1,300部を突破
（マガジンでのセット購入は160名様突破）しました✨
本当にありがとうございます！！
ポートフォリオ作成に必要なエッセンスを詰め込んだので、
準備編だけでもぜひ読んでいってください😊
===ここからnoteの内容===
こんにちは。こうだい(@kodai_0122)です。
未経験から転職し、今年1月からRailsエンジニアとしてWeb系自社開発企業で働いています👨💻
30歳・転職5回目だった私にとって、転職は容易ではありませんでした。
だからこそポートフォリオの質にはとてもこだわりました。
※ポートフォリオ（オリジナルアプリ）の動画 📹
今更ながら、オリジナルアプリの動画を上げてみます。
— こうだい@自社開発Webエンジニア (@kodai_0122) May 9, 2020
Web制作用じゃないので見た目の華やかさはないけど、バックエンド側の動作はこだわって作ってます。
クックログという料理投稿SNSアプリを作りました🍽#駆け出しエンジニアと繋がりたい #プログラミング初心者 pic.twitter.com/RRGaowISfp
その結果、計4社（自社×2、SES×2）から内定をいただくことができました😄
今働いている企業は、基本フルリモート、優秀なエンジニアが多く在籍する自社開発企業です。基本は経験者しか採らない企業だったのですが、ポテンシャルを評価され内定をいただきました🙏
内定を勝ち取れた要因として、やはり「ポートフォリオの質にこだわったこと」が大きかったです💡
高評価なポートフォリオとは？🤔
バックエンドエンジニア転職を目指す場合、
ポートフォリオ ＝ 自分のスキルを詰め込んだオリジナルアプリ
となります。これをアピール材料に転職活動を進めます🏃♂️
※スクール課題のアプリをポートフォリオとして転職するのは難しいです🙅♂️
私はオリジナルアプリをしっかり作り込んだおかげで、様々な企業の面接においてかなり高評価を受けました🙆♂️
高評価なポートフォリオの特徴は、次のようなものがあります。
(1) 誰かの悩みを解決する視点で作られている
(2) テストがRSpecでしっかり書かれている
(3) リンター（Rubocopなど）を導入している
(4) GitHubのプルリク・イシューを活用している
(5) Ajaxを使った非同期処理を実装している
(6) 5〜6個のModelを関連付けて、そこそこ複雑な処理を実現している
(7) AWS・Docker・CircleCIを導入している
(1)〜(7)のうち、私は(4)以外の6項目を網羅していました ⭕️
(7)のAWS・Docker・CircleCIに関してはちょっと難易度が高く、誰でもできるとは言い切れません🙅♂️
ただ、(1)〜(6)に関してはやり方さえ覚えれば誰でも再現できます。
そして、そこまでできていれば十分エンジニア転職が可能です👌（複数知人の成功実績あり）
実際に私が面接で評価されたのも、「テストがRSpecで厚く書かれてるね」「リンター使ってるね」「複数のモデルで複雑な処理を実装できてるね」というところが大きかったです😄
このロードマップでは、(1)〜(6)を網羅したポートフォリオの作り方について、私のオリジナルアプリを例に解説しています。これを読めば内定を勝ち取れるポートフォリオの作り方がわかるようになっています🔥
ロードマップで得られるもの 🎉
✅ 内定を勝ち取るポートフォリオの詳細な作り方がわかる
✅ モダンなRSpecテストの実践的な書き方をマスターできる（Model, Request, System specを使用 / 合計 209 examples のテストを掲載）
✅ Rubocop（リンター）を導入した開発方法がわかる
✅ お気に入り、コメント、検索など汎用性の高い機能の実装方法がわかる
✅ 9つのModelを関連付けした複雑なシステムの実装方法がわかる
【準備編】と【実践編①〜⑧】を通して、オリジナルアプリの全作成手順を解説しています。
ソースコードは全てnoteに貼り付けてあるので、noteを読み進めていけば必要なコードがわかります。また実践編を購入された方にはGitHubリポジトリのURLも共有します。
ちなみに文字数で言うと、実践編①〜⑧を併せて32万文字になります（ソースコード含む）。これほど丁寧に解説しているnoteは他にないと思います。価格もなるべく安価に抑えているので、コスパはかなり高いはずです！！
ロードマップの活用方法 ✏️
✅ ロードマップを参考に自分のオリジナルアプリを作っていく
✅ ロードマップを読みながら、練習として同じコードを書いてみる
✅ 辞書代わりに使う（テストの書き方がわからないとき、特定の機能の実装方法が知りたいときなど）
色々な使い方があると思います。ぜひ最大限に活用してください。
ただもちろん、このアプリを丸パクリして転職活動に臨んでも意味はありません。このロードマップは最大限活用しつつ、自分自身のオリジナルアプリを作りましょう。
こんな人にオススメ 🙆♂️
⭕️ Ruby、Railsでアプリ作成しようとしている人
⭕️ どんなポートフォリオを作ればいいか悩んでいる人
⭕️ ポートフォリオは自分で作れる自信があるけど、テクニックを盗みつつ最速で仕上げたい人
⭕️ プログラミング学習しているけど、ぶっちゃけエンジニア転職できるか不安な人
こんな人にはオススメしません🙅♂️
❌ Ruby以外の言語でアプリ作成しようとしている人
❌ エンジニア転職に自信満々な人
オススメに該当する方は、ぜひ活用してみてください。
このロードマップで作成していくオリジナルアプリの概要とURLを載せておきます。
※※※ 【重要】※※※
アプリで使用していた Heroku Postgres の有料化(参考)に伴なってメンテナンスの継続が困難になったため、本アプリは予告通り 2022/11/19 に公開停止しました🙇♂️
※※※※※※※※※※※
▼ オリジナルアプリの概要
・アプリ名：クックログ
・概要：作った料理を記録して共有できる、料理投稿SNSサービス
・URL：https://cooklog-v3.herokuapp.com ※ 2022/11/19 公開停止
・機能：ログイン、ページネーション、料理の投稿、フォロー
お気に入り、コメント、通知、検索（料理名 or 材料）
CSV出力、リスト、ログ
お待たせしました。いよいよポートフォリオ作成の準備に入っていきます！
▼ 実践編①〜⑧を収録したセットはこちら
☆単品購入に比べて920円お得！
▼ 実践編①〜⑧と転職ノウハウnoteのセットはこちら
☆単品購入に比べて1,220円お得！
ポートフォリオとなるオリジナルアプリを作ろう！
■準備① オリジナルアプリのテーマを決める
ポートフォリオを作るにあたってまず悩んだのが、「オリジナルアプリって何作ればいいの？」という点です。
作りたいサービスなんて特になかったですし、良いアイディアもありませんでした。
そこで妻に「何か悩んでることない？」と聞いてみたところ、
「毎日の夕飯メニューを決めるのに結構悩んでいる」と返ってきました。
そこで【料理のレパートリーを写真やメモと共に保存し、家族と共有できるサービス】を作るというアイディアを得ることができました。
✅ テーマを決めるポイント
・自分または身近な人（家族、友人）の悩みを解決するアプリを作ること
・既存で似たサービスがあってもOK。大事なのは自分で必要な機能を考え、1から作ること
何を作ればいいか迷ったら、家族や友人、または自分に対して何か悩んでいることはないか聞いてみると良いです。
これは実際のプロダクト開発と同じ流れ（ユーザーのニーズ調査→サービス開発）なので、面接での評価が高くなります。
また過去に例のない斬新なアプリを考える必要は全くありません。
「自分で1から必要な機能を考え、実装した」ということが大事なので、多少似たサービスがあっても大丈夫です。
自分で考えて作れば、オリジナリティのあるアプリが出来上がります。
■準備② 仕様を決める
アプリの構想ができたら、次は仕様を決めましょう。
簡単に言うと、「必要な機能を考える」と捉えてもらってOKです。
私の場合、例えば「お気に入り機能」「コメント機能」「検索機能」などが欲しいなと考えました。
必要な機能を一覧にしてまとめます。後で追加したり変更したりしてもOKと考え、今思いつく限りで書き出してみましょう。
■準備③ テーブル設計
次にテーブル設計をします。
Railsアプリで言うと、先ほど考えた機能を実現するために必要なモデルとカラムを考える作業です。
例えばコメント機能を作りたいから、Commentモデルが必要で、カラムはuser_id, dish_id, content の3つが必要だな、という風に考えていきます。
私はこんな感じでスプレッドシートにまとめてました。
これも最初に予測できる範囲で大丈夫です。
まず作ってみて、随時更新していきましょう。
またテーブル設計ではないですが、各モデルのコントローラに必要なアクションについてもまとめておくと、開発を進めるときに便利です。
■準備④ rails new
ここからいよいよアプリを作っていきます。
最初にrails newして、Railsアプリの骨格を作りましょう。
環境構築については次のQiita記事に詳しくまとめたので、方法がわからない方は読んでみてください。
次の画面が出るようになったら完了です。
■準備⑤ GitHubにソースコードをプッシュ
プッシュの方法は、次の記事がわかりやすかったのでこちらを参考にしてください。
■準備⑥ マイルストーン、イシューの作成
GitHub上で、マイルストーン（Milestone：開発期限）とイシュー（Issue：追加する機能、その他やること）を作成します。
具体的なやり方は次の記事にまとめたので、読んでみてください。
イシュー（Issue）はこんな感じで作ります。
まず思い付けるだけ作っておき、あとで必要に応じて追加すれば大丈夫です。
これで準備編は終わりです！次はいよいよ実践編になります。
内定を勝ち取るポートフォリオを、ぜひ一緒に作っていきましょう！
▼実践編①はこちら
▼ 実践編①〜⑧がセットになったマガジンはこちら
☆単品購入に比べて920円お得！
▼ 実践編①〜⑧と転職ノウハウnoteのセットはこちら
☆単品購入に比べて1,220円お得！
▼ 累計250部を突破した転職ノウハウnoteはこちら
この記事が気に入ったらサポートをしてみませんか？