はじめに
駆け出しエンジニアのみなさん、ポートフォリオ1作成に悩んでいませんか？
駆け出しエンジニアにとっては、企画から開発まで自力でできる力を示すために、いかにポートフォリオを作り上げるかということが重要です。
しかし、初めての人がゼロから1つのプロダクトを作り上げるのはとても大変です。
- みんなはどんなポートフォリオをどんな技術で作っているんだろう？
- 自分と同じくらいの規模のプロダクトのソースコードを見てみたい
そんな悩みを解決するために開発したのが、このポートフォリオ集約サービス「Fledge Hub」です。
サービスについて
サービスに関して登録できる情報は、以下の通りです。
検索は、タイトルなどのフリーワード検索だけでなく、タグ検索も可能です。
なんとなく「Railsを使って診断系サービスを見てみたい」と思ったときは、以下のように検索することができます。
ユーザー一覧から、そのユーザーが作成したサービスを見ることもできます。
こだわりポイント
投稿時にOGPを取得する
フォームを見ればわかるのですが、入力項目がかなり多いです。できるだけ入力しなくてもいいように、サービスのURLからOGPを画像として取得するようにしています。
でも、追加でさらにスクリーンショットを登録してもらえるとめっちゃ嬉しいです。
ログイン
ログインはできるだけ楽にしたいけど、バリデーションエラーに対応できるようにしたいということで、GitHubログインでデータ取得＆登録という動線にしました。これはQiitaを参考にしています。
学習開始日はデフォルトだとGitHubの登録日です。
外部アカウント
投稿者をGitHubのアカウント、Twitterのアカウント、ブログなどと紐付けしたいなと思っていたので、アカウント名 / URLを入力できるようにしています。これもQiitaを参考にしました。
実装についてはこちら
使用技術
Ruby 3.0, Rails 6.1
みんな大好きRailsです。
Hotwire(Turboのみ)
フロントの開発にはあまり時間を割きたくなかったのと、DHHが推奨しているということで興味があったので、Hotwireを採用しました。とはいっても、Stimulusは現時点では使っていないのですが。
Turboのおかげで、何も設定しなくてもページ遷移がさくさくになるのが楽ですね。このさくさく感はぜひ体感してください。
ちなみに、ストックボタンの非同期処理はTurboStreamを使いました。
まだStimulusは使っていないのですが、さくさくと開発速度の両立でHotwireはなるほどいい選択肢になるかもしれないと思いました。ただ、DSLなのでわざわざ選ばれにくいというのは納得です。
サービス開発でコスパを求めるならHotwireはありだと思います。私もまだまだ浅瀬ちゃぷちゃぷですが。
Tailwind
できるだけ拡張性の高いCSSフレームワークを使いたかったのと、流行っているらしいという興味によって、Tailwindになりました。
CSSを書く感覚でクラスを書けるというのは本当でした。最初はドキュメントやサンプルとにらめっこしていましたが、そのうち大体の感覚でスタイルを当てられるようになりました。
「Tailwind card」とかで検索すれば、ある程度完成されたコンポーネントも出てくるのでよかったです。
クラスを見れば一目瞭然なので、グローバルなCSSが汚れない点は大きなメリットだと感じました。
しかし、共通化しようとするとグローバルにせざるを得ないので（フォーム用のクラスはapplication.scssに定義している）、結局……とはなりました。
あとは、やはりパッと見のクラス表記が汚い。
とはいえ、書きやすさとデザインの自由度でめちゃくちゃ気に入りました。
今後、ある程度自分でデザインをいじるものを開発するならTailwindを使うだろうなと思っています（デザイン雑にするなら他のCSSフレームワークかな）。
共同開発について
このサービスは元々私が発案し、なんやかんやがあって、私が卒業したプログラミングスクールRUNTEQ内でのOSSにしました。
開発に携わってくださった方は十数名、リリースまでは半年ほど掛かりました。
業務で学んだコードの書き方を活用できたり、やってみたいと思っていた技術を試すことができたので、個人的に楽しかったです。また、他の人のコードレビューを通して、それぞれの就職先での知見エッセンスを得られたような気もします。
私のわがままを通したところもありますが、みなさんの協力のおかげでリリースすることができました。本当に感謝の気持ちでいっぱいです。
今後も開発したいことはたくさんあるし、他の人の意見から改善もしていきたいと思っています。
最後に
過去にポートフォリオを作った経験のある、駆け出しエンジニアだった方へ。
自分の開発の軌跡を見返すために、そして、未来の駆け出しエンジニアのためにも、ぜひあなたのポートフォリオも登録していただけると嬉しいです。
（サービス終了していても大丈夫です）（駆け出しすぎたエンジニアの投稿も大歓迎です）
-
駆け出しエンジニア界隈の「ポートフォリオ」とは、技術力などを示す個人開発サービスを指します。 ↩