開発_環境構築段取り - Paku-Soba/Svelte-example-app GitHub Wiki
- フロントエンド側
- 開発環境構築向け段取り
- 技術選定 → 開発環境構築向け情報収集 → 技術検証 → 環境構築 → 起動及び動作確認
→ 環境構築手順ドキュメント化及び環境構築までの考え等ナレッジ化
- 技術選定 → 開発環境構築向け情報収集 → 技術検証 → 環境構築 → 起動及び動作確認
- 開発環境構築向け段取り
技術選定
- フロント側のUIフレームワームは、コンパイラが付随しているSvelteを選定する。
- ReactやVue.jsなどのフレームワークは、ブラウザ上で、現在ブラウザに描画されているものと次に描画されるべきものの差分を計算して再描画する。
- Svelteのアプローチは、この処理を事前に済ませる。
- Svelteコンパイラは、Svelteコンポーネントを差分計算相当の処理を終えたJavaScriptに変換する。
- 事前にコンパイルすることで、実行時の差分計算が不要となる。
- よって、ブラウザ上で実行するJavaScriptの量が減り、通信量や性能、使用メモリ量も改善するメリットがある。
- また、Svelteはリアクティビティの仕組みがあるUIフレームワークである。
- リアクティビティとは、データの変化とUIとが同期して更新される性質のことを指す。
- Svelteでは、通常のJavaScriptとほとんど変わらない書き方で、内部状態の変化をDOMへ反映させる。
- コンポーネントで使えるリアクティビティの仕組みだけではなく、コンポーネントをまたいでリアクティブな状態を共有できるストア機能もある。
- Svelte Kitは、Svelteコンパイラを呼び出し、 .svelte ファイルを、DOM を構築する .js ファイルとそれをスタイリングする .css ファイルに変換する。
- また、開発サーバーやルーティング、デプロイメント、SSR サポートなど、web アプリケーションを構築するのに必要な要素も提供する。
- CSSを新たに書く必要性やスタイル実装時class名をその都度考える必要がないTailwind CSSを選定する。
- Tailwind CSSのクラス名には、すでにスタイルが定義されている為、スタイルを記述する必要がないメリットがある。
- Tailwind CSSのプラグインは必要に応じて追加する可能性がある。
▶︎開発環境構築向け情報収集
技術検証
- このリポジトリにて、UI、CSSフレームワークの環境構築検証及び技術検証を行う。
- 環境構築での検証にてうまくいかなかった部分等は、解決方法を模索して対応する。
- 環境構築後、技術が使用できる状態であるか確認を行う。
- 必要に応じて、要素（プラグインやライブラリを含む）の技術検証も行う。
環境構築
- GitHubリポジトリ作成を行い、フロントエンド側の環境構築を行う。
- 作成したリポジトリにて、ユーザーインターフェース開発を行う。
- HTML、CSSでのUI実装ができることを優先にして環境構築検証を進めている為、
- 現段階では、Gitの管理、ブランチ運用、各ローカル上の環境設定などチームでの開発は考慮していない。
- 開発環境構築向け情報収集及び技術検証
- このリポジトリにて、UI、CSSのフレームワークが使用できる状態にする。
- 12/15 (金)まで、環境構築検証は完了目処に進める予定。
- 技術検証は、必要に応じて並行して進めていく。
- GitHubリポジトリ作成での環境構築及び起動動作確認
- 1/5 (金)まで、完了目処に進める予定。
- 1/9 (火)から、本実装できるように進めていく。
- 環境構築手順ドキュメントまとめ及び考えのナレッジ化
- 実装を優先に進める予定。連携するタイミングや状況によって、スケジューリングを行う。
→ 1月から、本実装のユーザーインターフェース開発ができる状態にする。
→ 現段階では、どのようなユーザーインターフェースを求めているか把握できてない為、
必要な要素（プラグインやライブラリ等を含む）は画面実装しながら検討及び技術検証を行なっていく。
- ユーザーインターフェース開発ができることを優先にして環境構築検証を行なっている。
- Gitの管理、ブランチ運用、各ローカル上の環境設定などチームでの開発時必要な決め事は考慮していない。
- チーム開発での決め事は、どのようなシステムを開発するのか、各プロジェクトの規模感など、状況に応じてチーム内で議論し決める必要がある。