👨🏻💻
デパートフロントエンド開発環境
前提
前提としてお客さまの要件に合わせて適しているかを判断し、
開発環境が新たに設計が必要な場合には設計をします。
Node.jsに関して
Node.jsは各プロジェクトでバージョンの違うものを利用しているケースが多いです。
Voltaなどのバージョン変更が容易な管理ツールを導入しておくことを推奨しています。
パッケージマネージャーは特に指定はないですが、
お客さまと共同で開発する場合には合意を取った上で設定してください。
- npm
- yarn
- pnpm
基本的なWebサイト制作の場合
使用ツール
- Node.js
- Gulp
- Webpack
- EJS
- Sass（dart-sass）
- Typescript, Javascript
社内で基本開発環境テンプレートを用意してあります。
Node.jsはそのテンプレートの設定時の最新安定板のバージョンを使用。（2022年時点 v16）
タスクランナーはGulpを使用し、テンプレートエンジンにはEJSを採用しています。
jsのバンドラーはWebpackを使用し、Babelを通してTypescriptも利用できるようにしています。
CSSはSass（SCSS）で記述しますが、node-sass（LibSass）ではなく sass（Dart Sass）です。
WordpressなどのCMSサイト制作の場合
使用ツール
- docker
- CMSの言語（PHPなど）
- Node.js
- Webpack
- Sass
- Typescript, Javascript
Wordpressであればdockerで立ち上げつつ、テーマファイルのCSSとしてビルドし、テンプレートはそのままWPのテンプレートで書くようにしています。
どうしても静的にコーディングを行なってからテンプレート変換をしなければならないケースは、基本開発環境テンプレートでコーディングを行い、そのあと組み込みを行います。
CSSやjsの考え方は基本開発環境テンプレートど同様です。
JSフレームワークの場合
使用ツール
- Node.js
- フレームワーク提供CLI、Vite、Webpack
- Sass、PostCSS
- Typescript, Javascript
- StoryBook
フレームワーク提供のを使うケースと、Viteを使うケースがありますが、
案件の要件に合わせて選択をします。
Sassに関してはフレームワークのバージョンによってはnode-sassの場合もあるので、
共通Sass系を用意する場合には記述が変わることを注意してください。
コンポーネントは基本的にテンプレートファイル（jsx、vue）と同じ階層に
scssとstories.jsを配置します。