2020年に立ち上げたWebフロントエンド構成の振り返り

こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての

[xxxxxxxxlarge]

NextってCSRだけの開発にはtoo muchなんだよなあ。vercel前提、SPAには別途Routerが必要。SPAならViteでReactが設定が楽、立ち上がりが速くて最高。

[otchy210]

綺麗。多少冗長だろうが重かろうが、これだけ綺麗に決められていてツールも整備されていると、後から参加する人が凄く楽で良い。こういうのって優秀な人がひとりで最初にデザインすると良いよね。

[highgrenade]

単純にNext.js使いました！的な感じではなく、ステート管理、コンポーネント設計、デザインシステム、バックエンドとの連携、テスト、CIなど隅から隅まで理想的な構成。すごく勉強になります。

[prjpn]

皆、そんなに巨大なシステム作ってるのだろうか

[d4-1977]

なるほど。

[ryosuke-fujii]

「基本的にstyleはUI Componentに集約し、pageやmodelのComponentではUIを組み合わせることでデザインを実装できるのが理想形」共感

[mumei-0]

“scaffolderの活用”

[Nyoho]

“protoファイルからGo/TypeScriptの型定義ファイルを生成してそれぞれ使うことで、通信部分も型安全” へーそんなことができるのかー全く知らんかったー

[tettekete37564]

多分実践的で参考になりそう

[onesplat]

いいじゃん。でもVercelかぁ

[daaaaaai]

アーキテクチャおもしろそう。リリース楽しみ。Protocol Buffers採用してるのかー

[mayumayu_nimolove]

そのアイコンどこかで見た

[ko-ya-ma]

今どきな構成