【Ruby on Rails】スクールを超えるポートフォリオを実装する3STEP【実例あり】

 

この記事を書いた人

けんぞう
エンジニア

プログラミングを独学し、実務未経験からWebサービス自社開発企業へ転職した人。プログラミング独学の方法や、転職活動に関する情報を発信しています。

 

この記事では、Ruby on Railsを学習して最初のポートフォリオを実装するまでの手順を解説します。実際に僕がRailsを独学して作成したアプリケーションが、こちらです。ソースコードも公開します。

上記のアプリケーションは、Dockerの使用、CloudFrontを使用し速度改善を行い、CI/CDツールによるデプロイ自動化、独自ドメインの設定まで行なっています。これらは、少なくとも僕の観測範囲内では、スクールの卒業生の方々が手の届いていないところまで実装しています。

こういった「スクールを超えるポートフォリオの実装手順」について具体的に解説をしていきます。

ポートフォリオを実装するまでの学習全体像

先にポートフォリオを実装するまでにどういう学習をすればいいか?について解説します。実際に僕が学習した手順が以下の通りです。

  • 手順①:まずはProgateで全体を俯瞰する
  • 手順②:次に書籍を購入し、知識を拡張する
  • 手順③:ポートフォリオを拡張する

なおこの記事では「HTML・CSS・Git・SQLの基礎については、すでに理解している」という前提で、Railsの学習ステップのみを解説しています。HTML〜SQLまでの学習を含めた全体像については、以下の記事をご参照ください。

実務未経験からスクールなしで自社開発企業に転職した僕が、どのようにプログラミングを独学したのか。

手順①:まずはProgateで全体を俯瞰する

Ruby on Railsのスタート地点としては、Progateが最適解だと思います。理由は挫折する可能性が、非常に低いからです。

もちろん、Railsチュートリアルドットインストールを使って学習を進めても全く問題ありません。自分が勉強しやすい教材で、挫折なく学習を進めることが、学習初期段階においては最も大切です。

Progateと同時にやってほしいこと

Progateのチュートリアルと同時にやってほしいことが「ローカルで同じように開発を進める」です。具体的には以下のツイートの通りです。

☝️こちらのツイートに書いた通り「Progateで学んだことをローカルで同様に開発し、理解を深める」という学習が非常にオススメです。そして必ず、デプロイまで行なってください

デプロイとは、自分が作ったWebアプリケーションをインターネットで利用可能にすることです。これを行い「自分が作ったサービスがインターネットで動いているところを、目にする」ことで、その後のモチベーションが爆上がりします。

詳しいデプロイ手順については、以下の記事をご参照ください。

ここで一度オリジナルアプリを作ってみる

ここから、早速オリジナルアプリを自分で作ってみましょう。

基本的なモデルの設計などは、Progateと同じ(ユーザーと投稿が1対多の関係)で作りましょう。オリジナルアプリの実装期間としては、Progateのコースを修了した時間と同じくらいで作り切りましょう。

ちなみに僕がこの段階で実際に作ったオリジナルアプリが、こちらです。

SNS認証ログインなど一部技術的にチャレンジした部分もありますが、基本的な機能については、Progateで作るものと全く変わりありません。

オリジナルアプリをつくっているなかで分からないところは必ず出てきます。その際は、Progateのスライドを見直したり、Googleで検索しながらできるだけ自分で問題を解決する力をつけましょう。

ここをやりきれば、「ある程度のことは、自分でなんとか出来る」という自信がつくので、デプロイまで走りきってみてください。


手順②:書籍で知識を拡張する

上記の流れでポートフォリオを作成し切った段階では、知識に穴がありまくります。Progateは良くも悪くも初学者向けであるため、難しい所は大幅にカットされていたり、ちょっと古い情報が残っていることもあります。

(例:2019年3月に僕が学習した時点では、form_tag によるフォーム実装が解説されていましたが、現状Railsではform_tagは非推奨となっています。参照:【Rails 5】(新) form_with と (旧) form_tag, form_for の違い

おすすめ書籍は「現場で使える Ruby on Rails 5速習実践ガイド」です。僕は他も購入しましたが、この一冊がこの時点のレベル感としては最適であり、足りていない知識の補充として十分です。

ちなみにこの書籍では、以下のことを学習可能です。

  • テンプレートエンジンに「slim」を採用した実装
  • Active Storageでの画像アップロード機能
  • Rspecでのテスト実装

特にRspecを使ったテスト実装は実務でもしっかり活かしていける知識ですので、テストの部分はしっかりと学習されることをおすすめします。


手順③:ポートフォリオを実装する

ここから本格的にポートフォリオの実装を行なっていきます。

  • Active Storageを使った画像アップロード ←書籍を参照
  • AWSS3に画像を保存する機能 ←Qiitanの記事を参照
  • 5つ以上のモデルの関連付けを行い、一定の複雑性があるアプリケーションにする
  • Rspecによるテストも実装する←書籍を参照
  • CloudFrontによるCDN配信を実装する←Qiitaの記事を参照
  • CI/CDツールを利用して、テスト〜デプロイまでを自動化する←Qiita記事を参照
  • Dockerを利用する←Qiita記事参照

これらを全部やったのが、僕のポートフォリオなのですが、ここまでやっておくと割とスカウトとかももらいやすくなるので、時間がある人は上記の項目は全て実装することをおすすめします。

スカウトをもらうための具体的な行動については以下の記事で紹介しているので、気になる方は合わせてご覧ください。

【未経験エンジニア転職】なぜ実務未経験の僕が「スカウトを10通」獲得できたのか?スカウトを受け取るための具体的な5つの行動

未経験からのエンジニア転職は、かなりテンプレ化されてきています。その中で自分を差別化するには、チュートリアル終えたくらいのしょぼいポートフォリオでは、実際なかなか通用しません。

ぜひ、上記であげた項目をしっかり実装して転職や就職活動で使えるポートフォリオを作ってください。