はじめに
アプリ開発を進める上で、考慮すべきことややるべきことは多く、悩むことも多いと思います。私自身もあまり考えずに突っ走ってしまったことで後悔した経験がありますが、その中で得た知見も多くあります。
そこで、開発を進める前に考えておくべきことをまとめました。これは、私が開発する前に知りたかったことを中心に、新たに個人開発をする際の参考にするための備忘録です。
対象読者
- Ruby on Rails7で開発しようとしてる方
- フロントエンドに迷っている方
- Dockerを使おうとしている方
- 一通り学習を終えて、これからポートフォリオ作成に取り掛かろうとしている人
- 開発環境の構築方法を知りたい方
環境構築
開発前に開発環境を考えることは非常に重要です。
特に、バックエンドだけで開発を行う場合と、バックエンドとフロントエンドを分けて開発を行う場合では、それぞれのメリット・デメリットが異なるため、それらを考慮しながら進めるのが良いと思われます。
バックエンドのみで構築
メリット
- 開発環境の構築が比較的容易
- バックエンド技術に集中できる
- バックエンド技術を中心にさまざまな技術を試す時間が確保できる
- 開発を高速に進められる
デメリット
- Reactを導入するとRailsのTurboと競合が発生する
- リッチなUI/UXを作成するのに手間がかかるかもしれない
バックエンドだけの開発では、これまで学習した知識を活かしてスムーズに進めることができます。特に「esbuild」というビルドツールを使えば、従来の「webpack」と比べて高速にビルドを行えます。
ただし、本格的にReactを使って開発する場合、競合への対策が必要です。
以下の記事に内容はまとめております。
バックエンド/フロントエンド分けて構築
メリット
- よりリッチなUI/UXのアプリケーションを開発できる
- フロントエンドの技術にキャッチアップできる
- 就活で企業によっては評価が上がるかもしれない(賛否両論)
デメリット
- 開発環境の構築が複雑になることがある
- 開発に時間がかかるかもしれない
- RailsのAPIモードであれば通常の開発方法と異なってくる
- フロントエンドのキャッチアップにコストがかかる
バックエンドとフロントエンドを分けて開発することで、リッチなUI/UXを作って、ユーザー体験を向上させることができます。しかし、その分環境構築や統合に手間がかかることもあるため、事前に計画をしっかり立てることが重要です。
特に、APIモードのRailsではフロントエンドとバックエンドの統合が重要になります。納得のいくUI/UXを実現するためには、時間と労力がかかります。
以下の記事がわかりやすいです。
CSSフレームワークの選定
BootStrap
CSSフレームワークとしてのシェア率は非常に高く、クラスやコンポーネントが豊富に揃っているため、開発が高速に行えます。ただし、カスタマイズがしづらく、デザインが他のアプリと似通ってしまう可能性があります。しかし、CSSの知識があれば補うことも可能です。
TailwindCSS
個人開発ではよく見かける（私も大好きな）フレームワークです。柔軟にカスタマイズできるため、見た目の差別化がしやすいですが、クラスが増えやすく、扱うにはCSSの知識が必要です。拡張性が高く、daisyUIなどの美しいコンポーネントを使用することで、開発の幅が広がります。
Material UI
Reactと一緒に使われることが多いフレームワークです。豊富なコンポーネントが用意されており、高速に開発を進めることができます。
shadcn/ui
Reactと一緒に使えるコンポーネントライブラリです。一通りのコンポーネントが揃っており、使いやすいです。
Framer Motion
こちらもReactと使える動きをつけるためのライブラリで、リッチなアニメーションを実装できます。
フロントエンドの選定
JavaScript
基本の言語であり、Rails一つで開発する場合でもJavaScriptですべてを実装できます。
React
コンポーネントベースで管理や開発がしやすいですが、JavaScriptの知識が前提となるのに加え、学習コストが高くなります。シェア率が高く、広く使われているため、習得したら楽しくなりそうです。
TypeScript
型定義ができるため、安全性が向上します。その分学習コストが高く、設定が複雑になることがあります。Reactとよく一緒に使われるので、こちらも習得できたら良さそうです。
Next.js
Reactをベースにしたフロントエンドフレームワークです。Reactの機能に加えて、読み込み速度向上や自動でルーティングを生成などもしてくれてさらに機能性向上につながります。デプロイ先はVercelになりそうに感じました。
データベース選定
MySQL
高いシェアを誇っているRDBMSであり、基本的に無料で利用できてコストを抑えながらも、様々な環境に適用することができます。
Postgresql
シェア率が高く機能性も豊富なRDBMSで、デプロイ先次第ではこちらを使うと高速にデプロイできる(Render等)。
デプロイ先
Fly.io
簡単にデプロイでき、スケーリングが容易です。使用したリソース（CPU、メモリなど）に基づいて課金されます。
Render
簡単で迅速にデプロイできます。サービス自体は無料でデプロイできますが、データベースは1ヶ月無料で、その後は月々固定料金(7$)がかかります。
Heroku
拡張機能が豊富でスケーリングやサポートが手厚いです。安定性とドキュメントの量においては優れています。
Vercel
Next.jsとの相性が良く、簡単にデプロイできます。無料でスリープ対策も不要なので、フロントエンドのデプロイに最適です。
AWS
高い信頼性と豊富なサービスがありますが、学習コストが高く、設定も複雑です。個人開発には別のサービスを検討した方が良いと思われます。
考えたこと
個人開発を進めるには、自身の目的を考え、なぜその技術や環境を選定したのかを明確にすることで、方向性がブレずに進められます。
特に未経験のエンジニアは技術への興味があるかどうかで、就職できるかがわかれるため、そこに興味を示すためにも、選定理由は明確にしておく必要があります。そして、言語同士の比較などもできればなおさら良いです。
これから個人開発をされる方にとって、環境構築と使用技術は非常に悩ましいところですが、フロントエンドとバックエンドを分けてまで開発する明確な理由がなければ、バックエンド一つで開発することを私はオススメします。
もしバックエンドだけだと技術レベルが低くなるのではと躊躇している方がいるなら、今すぐ「未経験エンジニア ポートフォリオ レベル」で検索しましょう。エンジニアに求められるのは技術だけでないことがわかります。
とはいえ、アプリ開発に飽きてしまったり、開発に時間をかけすぎても仕方がないため、自分にあった最適な開発スタイルを見つけていただければ幸いです。
おわりに
以上、私が個人開発を通して感じたことをまとめてみました。この記事を見てもまだ開発がピンとこない場合は、実際に手を動かして技術検証してみることが一番です。この記事が何かしらの不安を解消する助けになれば幸いです。
私も実際に開発を終えてから気づいたことでもあるので、こうやっていろんな技術を調べて試すことで、知見が貯まるのは楽しいです！
この記事に対するフィードバックや改善点がありましたら、ぜひ教えてください。
開発を楽しみましょう！
参考