Backend, Frontend に分けた環境の開発

[SenruoYusei]

1. As Is

• 現在、backend のコードしか存在しない

2. To Be

• bot のレスポンスの形式を考慮して frontend の実装をする
• Clean Architecture を満たすコードになる

3. アクション

• [ ] backend, frontend にフォルダ分けする
• [ ] API によって双方を接続する

[SenruoYusei]

考慮すべき要素がいくつかありますが、提案された条件に基づいてフロントエンドの最適な言語とフレームワークを選択することができます。

1. Go言語との相互運用性:

   • フロントエンドとバックエンドが異なる言語で開発される場合、相互運用性が重要です。JavaScriptはWebフロントエンドの標準言語であり、Go言語との相互運用性を確保するためには、JavaScriptとの連携が容易なフレームワークを選択することが理想的です。

2. Clean Architectureのサポート:

   • フロントエンドのフレームワークは、Clean Architectureをサポートし、UI層、ビジネスロジック層、データ層を明確に分離する能力がある必要があります。これにより、フロントエンドのコードを容易にテストし、保守性を高めることができます。

3. API 接続とパフォーマンス:

• フロントエンドのフレームワークは、バックエンドのAPIとの効率的な通信をサポートし、高いパフォーマンスを提供する必要があります。また、SPA（Single Page Application）の開発を可能にすることが望ましいでしょう。

  4. スキーマ駆動開発:

• スキーマ駆動開発は、フロントエンドとバックエンドの間でデータの構造を一貫して管理するための重要な方法です。選択したフロントエンドのフレームワークは、スキーマ定義や型システムをサポートしていることが望ましいでしょう。

これらの要素を考慮して、最適なフロントエンドの言語とフレームワークは次のとおりです。

1. 言語: JavaScript（またはTypeScript）

• Webフロントエンドの標準言語であり、Goとの相互運用性が高いです。
  2. フレームワーク: React.js（またはVue.js）
• React.jsは、Clean Architectureを実装しやすいコンポーネントベースのフレームワークであり、SPAの開発に適しています。また、GraphQLなどのスキーマ定義や型システムをサポートするライブラリも利用できます。Vue.jsも似たような特徴を持っており、選択肢として考慮する価値があります。

これらの選択肢は、フロントエンドの開発においてバックエンドの要件を満たし、効率的で保守可能なアプリケーションを構築するためのものです。

[SenruoYusei]

各フレームワークのメリットとデメリットを、要件（Clean Architecture、API接続、スキーマ駆動開発、パフォーマンス）を考慮して説明します。

JavaScript

1. Vue.js

   • メリット: 学習曲線が低い：シンプルで直感的なAPIを持ち、新しい開発者でも迅速に学ぶことができます。 柔軟性：小規模から大規模なアプリケーションまで、柔軟に対応できます。 公式ツールとエコシステム：Vue CLI、Vue Router、Vuexなどの公式ツールが豊富で、開発が効率的です。
   • デメリット: エンタープライズ採用率：ReactやAngularに比べて、エンタープライズレベルの採用率が若干低い場合があります。 ドキュメントとリソース：他のフレームワークに比べて、特定の問題に対するドキュメントやリソースが少ない場合があります。

2. React.js

   • メリット: エコシステムの豊富さ：Redux、React Router、Formikなど、豊富なサードパーティライブラリがあります。 柔軟なアーキテクチャ：コンポーネントベースであるため、Clean Architectureの実装が容易です。 広範なコミュニティとサポート：問題解決のリソースが豊富です。
   • デメリット: 設定の複雑さ：設定が他のフレームワークに比べて複雑な場合があります。 初期学習コスト：JSXやコンポーネントの概念に慣れるまでに時間がかかることがあります。

TypeScript

1. React (with TypeScript)

   • メリット: 型安全：TypeScriptによる型チェックがあり、バグの早期発見が可能です。 エコシステムの強さ：TypeScriptサポートが豊富で、多くのライブラリが型定義を提供しています。 コンポーネントベース：Clean Architectureの実装が容易です。
   • デメリット: 複雑な設定：TypeScriptとReactの設定が初心者には難しいことがあります。 初期学習コスト：TypeScriptとReactの両方を学ぶ必要があります。

2. Vue.js (with TypeScript)

   • メリット: 型安全：TypeScriptの利点を活用できます。 シンプルなAPI：Vueの直感的なAPIとTypeScriptの組み合わせが学習しやすいです。 公式サポート：Vue 3はTypeScriptを公式にサポートしています。
   • デメリット: エコシステム：TypeScriptとの統合に関して、Reactに比べて一部のライブラリが不足している場合があります。 複雑な型定義：Vueの特定の構文とTypeScriptの組み合わせで複雑な型定義が必要になることがあります。

3. Angular

   • メリット: 包括的なフレームワーク：フルスタックフレームワークであり、ルーティング、フォーム、HTTPクライアントなどが統合されています。 依存性注入：強力な依存性注入機構を持ち、モジュール性が高いです。 公式サポートとドキュメント：公式のツールとドキュメントが充実しています。
   • デメリット: 学習曲線が高い：学習するために多くの概念を理解する必要があります。 柔軟性の制限：フルスタックフレームワークであるため、柔軟性に欠ける場合があります。

4. Next.js (with TypeScript)

   • メリット: サーバーサイドレンダリング (SSR)：SEOに有利で、初期表示速度が速いです。 静的サイト生成 (SSG)：高速なビルドと高いパフォーマンスを実現します。 TypeScriptサポート：初期設定からTypeScriptが簡単に利用できます。
   • デメリット: 複雑な設定：SSRやSSGの設定が初心者には難しい場合があります。 特定のユースケース：特にサーバーサイドレンダリングや静的サイト生成が必要ない場合は、オーバーエンジニアリングになることがあります。

まとめ

• Vue.js (JavaScript/TypeScript) は、学習が容易で、柔軟性が高く、小規模から中規模のプロジェクトに適しています。
• React.js (JavaScript/TypeScript) は、豊富なエコシステムとコミュニティサポートを持ち、大規模なアプリケーションに適しています。
• Angular は、フルスタックフレームワークとして、大規模なエンタープライズアプリケーションに最適です。
• Next.js (with TypeScript) は、SSRやSSGを必要とするプロジェクトに最適で、高いパフォーマンスを提供します。

プロジェクトの要件とチームのスキルセットに基づいて、最適なフレームワークを選択してください。

[SenruoYusei]

これらのことから

• 言語: JavaScript
• フレームワーク: React.js

を使用するのが、パフォーマンス的に最適かと思われます。

[ktaroabobon]

めっちゃちゃんと調べてるやん さすがもりわか！さすもり！！

[ktaroabobon]

個人的な思いとしてJSよりTS勉強したいです...！！！！

[ktaroabobon]

正直TSとJSは型あるかないかだからあんま変わらんと思う

[ktaroabobon]

ちなみにReactはさわったことある？ > @SenruoYusei

[SenruoYusei]

JavaScript は Vue.js, Nuxt.js 触ってて、 React.js はない！ よく聞くフレームワークだから、勉強込みでやってみようと思ったけど TypeScript 自体も触ったことない言語だから賛成です！

個人的な思いとしてJSよりTS勉強したいです...！！！！ これは TypeScript の React ってこと？ > @ktaroabobon

[ktaroabobon]

Reactはそんなに難しくないで〜〜〜

TSはJSに静的型付けされただけの言語だからJS触ったことあるなら全然難しくないと思う ちなみに、このサバイバルTypeScriptはめっちゃおすすめ なんでTSができたのかっていう歴史解説から（確か）Reactの思想解説までされてる

[ktaroabobon]

ちなみにWebは、

• backend: Go
• frontend: React(TS)
• openAPI: swagger が割と最近流行り（3年前くらいから）な構成だと思う〜

[ktaroabobon]

ちなみに静的型付けがあるGoとTSに触れてから自分はpythonとJSが嫌いになりました笑

[SenruoYusei]

ちなみにWebは、

• backend: Go
• frontend: React(TS)
• openAPI: swagger が割と最近流行り（3年前くらいから）な構成だと思う〜

みんなが使ってる React って、TypeScript なのかw 知らなかったw

[SenruoYusei]

ちなみに静的型付けがあるGoとTSに触れてから自分はpythonとJSが嫌いになりました笑

Python とかに慣れてしまうよりかはマシだと思うww

[ktaroabobon]

ただ、今回どのくらいReact使えるかな〜

あくまでwebサイトのためのフレームワークだからがっつり使うのは無理かもね〜 複雑なUIとかもないし、、、

[ktaroabobon]

1. discordでコマンド叩く
2. 必要な処理をBsckendに求める
3. Backendから返ってきた値をコンポーネント使って組み立てる
4. discordに返す

必要なのは2, 3, 4くらいだよね〜

[ktaroabobon]

ちょっとリッチになりすぎないか心配ではある、、、 この状態だとfront側で学べることはそんなに多くないかもしれんとだけは言っとく

がっつりwebサイト作るならめっちゃ勉強できること多いと思うよ！