BabelとwebpackでES2015以降の書き方をES5にコンパイルしています。
JavaScriptは大きく6つにわけられます。
- site.js
- polyfill.js
- /namespace
- /domain
- /infra
- /utils
JavaScriptのエントリーポイントです。.js
と.vue
はこのファイルで出力されます。
古いブラウザに対応するためのポリフィルをインポートします。
HTMLまたはPHPに紐づく処理です。 ECSSの名前空間のコンセプトを使って、使われる状況ごとにディレクトリをわけます。 ファイル名は名前空間を含めたキャメルケースです。
import jsSmoothScroll from './namespace/js/jsSmoothScroll';
ドメインオブジェクト。ある対象(名詞)の値を持ち・判断・加工・計算をして結果を返します。
1つのclass
にすることで、重複しがちな処理を1箇所で管理することを目的としています。
MediaQuery.js
メディアクエリの条件(値)を持ち、条件に一致するかを返すStorage.js
ローカルストレージのキー(値)を持ち、取得・更新・削除などをするHistory.js
URLパラメーターの取得・更新・削除などをする
データベースや外部APIとのやり取りをします。
1つの関数が1つの結果を返す汎用関数です。 domainと違い固有の判断や値を必要とせず、他の値を変更する副作用を起こしません。 JavaScript標準のメソッドやプロパティの組み合わせが必要な処理を、1箇所で管理することを目的としています。
/config/
にあるファイルで環境変数を設定できます。
/**
* 開発環境の環境変数を設定します。
* 以下のように出力します。
* `process.env.NODE_ENV` => 'development'
* `process.env.API_BASE_URL` => 'dev.example.com'
*/
module.exports = {
API_BASE_URL: 'dev.example.com',
}
/**
* 公開環境の環境変数を設定します。
* 以下のように出力します。
* `process.env.NODE_ENV` => 'production'
* `process.env.API_BASE_URL` => 'prod.example.com'
*/
module.exports = {
API_BASE_URL: 'prod.example.com',
}
以下のような記述をすべてのJSファイルで利用できます。
if (process.env.NODE_ENV === 'development') {
console.log(process.env.API_BASE_URL); // => 'dev.example.com'
} else {
console.log(process.env.API_BASE_URL); // => 'prod.example.com'
}