Zenn
🐕

【Day2】システムで使っている技術スタック紹介と選んだ理由3

に公開
JavaScript
frontenddevelopmen
technicalwriting
webengineering
portfoliodevelopme
tech

こんにちは、Keisukeです。
【Day2】シリーズ第3弾では、現在個人開発で使っている技術スタックの中から、実際に使ってみて感じたこと・導入の工夫・ハマりポイントなどを、5つのトピックに分けてご紹介します。

① JavaScript（ES6+）の「即実装できる強さ」

JavaScriptは「0秒でフロントが書ける」感覚があり、小さなアイデアをすぐ試せる言語です。
特にES6以降は構文もかなり洗練され、const や アロー関数、テンプレートリテラルなどのおかげで見やすく・書きやすいコードになりました。

個人開発ではスピード感が最優先なので、ReactやVueなどに入る前段階としても、Vanilla JSの強さを改めて実感しています。

② Firebase：ログイン機能のハードルを下げる

Firebase Authentication を使うことで、わずか数行でログイン機能を実装できました。
とくに匿名ログインは、ユーザーの初回ハードルを下げるのに非常に有効です。

リアルタイムDBと組み合わせると、ログイン→投稿→一覧反映までの流れがスムーズになり、UI/UXにも良い影響が出ています。

③ CSSレスポンシブ対応の考え方

スマホファーストを意識して、基本は max-width: 768px 以下で調整しています。
flex や grid を活用し、なるべくメディアクエリを細かく書かなくても済むレイアウトを意識しました。

また、表示速度や視認性を上げるために loading="lazy" やスケルトンUIも導入済みです。

④ デプロイの使い分け：Vercel × GitHub Pages

  • Vercel：Next.jsとの親和性が高く、動的ルーティングやAPI連携を含むアプリをデプロイ
  • GitHub Pages：完全静的なデモや資料用LPなどに活用

両方無料プランで利用でき、用途に応じて軽量に切り分けられるのが魅力です。GitHub連携によるCI/CDの導線もシンプルで管理が楽になりました。

⑤ 実は裏で活躍しているツールたち

表には出していませんが、開発の裏では以下のツールも大活躍しています：

  • Figma：UIの事前設計（ボタン配置・動線確認）
  • Notion：開発ログ・フィードバックメモの蓄積
  • Postman：API連携のテスト
  • VS Code拡張：Prettier／Live Server／Thunder Client など

どれも無料で使える＆軽い＆学習コストが低いので、個人開発との相性抜群です。

📝 おわりに

今回のように、使っている技術を定期的に振り返ることで、自分がなぜそれを選んだのかを再確認できます。
そして、「この選択は今の自分に合っていたか？」と自問しながら進めることで、今後のスキル選択にも役立ちます。

もしこれから個人開発を始める方がいれば、参考になれば嬉しいです！

Discussion