Merge branch 'v4' into #258

# Conflicts: # htdocs/styleguide/category/Block/index.html # htdocs/styleguide/category/Button/index.html # htdocs/styleguide/category/Form/index.html # htdocs/styleguide/category/Global/index.html # htdocs/styleguide/category/Heading/index.html # htdocs/styleguide/category/Icon/index.html # htdocs/styleguide/category/Image/index.html # htdocs/styleguide/category/InteractiveComponent/index.html # htdocs/styleguide/category/Layout/index.html # htdocs/styleguide/category/Link/index.html # htdocs/styleguide/category/List/index.html # htdocs/styleguide/category/Navigation/index.html # htdocs/styleguide/category/Text/index.html # htdocs/styleguide/category/ThirdPartyComponent/index.html # htdocs/styleguide/color.html # htdocs/styleguide/index.html # htdocs/styleguide/namespace/l-/index.html # htdocs/styleguide/namespace/st-/index.html # htdocs/styleguide/namespace/sw-/index.html # htdocs/styleguide/namespace/test-/index.html # htdocs/styleguide/namespace/wisywig-/index.html # package-lock.json
manabuyasuda · Sep 27, 2019 · 1a2f93e · 1a2f93e
2 parents 93a1e59 + cd4e0da
commit 1a2f93e
Show file tree

Hide file tree

Showing 53 changed files with 9,413 additions and 1,500 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -60,6 +60,7 @@
     ],
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
+    "scss/selector-no-union-class-name": true,
     "order/order": [
       [
         "dollar-variables",

diff --git a/aigis/template_jade/index.jade b/aigis/template_jade/index.jade
@@ -14,7 +14,7 @@ html.no-js(lang="ja")
     script.
       document.documentElement.classList.remove('no-js')
   body
-    main
+    main#app
       .aigis-container
         include ./sidemenu
         .aigis-contents

diff --git a/document/component.md b/document/component.md
@@ -0,0 +1,55 @@
+# Component
+Vue.jsの単一ファイルコンポーネント（SFC）をコンポーネントと定義します。
+SFCはview（UI）とviewModel（ロジック）、そして装飾を1つのファイルで持つことができるからです。
+
+## ディレクトリ構成
+大きく2つにわけられます。
+
+1. components.js
+2. /componentName
+
+### components.js
+site.jsにインポートするため、コンポーネントを`function`としてエクスポートします。
+
+### /componentName
+コンポーネント名ごとにディレクトリを作ります。
+命名規則は[Vue.jsのスタイルガイド](https://jp.vuejs.org/v2/style-guide/index.html)を基準とします。
+
+`props`を受け取るだけのviewコンポーネント単体の場合は、viewコンポーネントがディレクトリ名になります。
+
+```
+components
+└── VButton
+    └── VButton.vue
+```
+
+`emit`を受け取るviewModelコンポーネントとviewコンポーネントがある場合は、viewModelコンポーネントがディレクトリ名になります。
+
+```
+components
+└── TheHeader
+    ├── TheHeader.vue
+    ├── TheHeaderLogo.vue
+    ├── TheHeaderNav.vue
+    └── TheHeaderSearch.vue
+```
+
+## 中規模以上のディレクトリ構成
+一定以上の規模の場合や、viewコンポーネントを再利用していろいろなViewModelコンポーネントを作りたい場合は、[large-scale-javascriptの分類](https://github.com/azu/large-scale-javascript/blob/master/docs/component.md#%E5%88%86%E9%A1%9E)を参考にしてください。
+`/componentName`がprojectになり、containerとui-kitが追加されるイメージです。
+
+```
+components
+├── container
+│   └── index
+│       └── index.vue
+├── project
+│   └── TheHeader
+│       ├── TheHeader.vue
+│       ├── TheHeaderLogo.vue
+│       ├── TheHeaderNav.vue
+│       └── TheHeaderSearch.vue
+└── ui
+    └── VButton
+        └── VButton.vue
+```
diff --git a/document/js.md b/document/js.md
@@ -2,64 +2,45 @@
 BabelとwebpackでES2015以降の書き方をES5にコンパイルしています。
 
 ## ディレクトリ構成
-JavaScriptは2つ大きくわけられます。
+JavaScriptは大きく6つにわけられます。
 
 1. site.js
-2. namespace
+2. polyfill.js
+3. /namespace
+4. /domain
+5. /infra
+6. /utils
 
-site.jsは他のJSファイルをインポートするファイルです。`import`を使用して、各ファイルをインポートしてください。
+### site.js
+JavaScriptのエントリーポイントです。`.js`と`.vue`はこのファイルで出力されます。
 
-```js
-import './polyfill';
-import 'what-input';
-
-import vueTest from './vueTest';
-import jsAlignHeight from './namespace/js/jsAlignHeight';
-import jsSmoothScroll from './namespace/js/jsSmoothScroll';
-import stBackToTop from './namespace/structure/stBackToTop';
-import stBreadcrumb from './namespace/structure/stBreadcrumb';
-import swDialog from './namespace/sitewide/swDialog';
-
-vueTest();
-jsAlignHeight();
-jsSmoothScroll();
-stBackToTop();
-stBreadcrumb();
-swDialog();
-```
+### polyfill.js
+古いブラウザに対応するためのポリフィルをインポートします。
 
-namespaceはECSSの考えをベースに使われる場所や状況ごとにディレクトリをわけて、さらにModuleごとにファイルをわけます。
+### /namespace
+HTMLまたはPHPに紐づく処理です。
+ECSSの名前空間のコンセプトを使って、使われる状況ごとにディレクトリをわけます。
+ファイル名は名前空間を含めたキャメルケースです。
 
+```js
+import jsSmoothScroll from './namespace/js/jsSmoothScroll';
 ```
-js/
-├── namespace/
-│   ├── js/
-│   └── data/
-└── site.js
-```
-
-ファイルはすべて結合されて`htdocs/assets/js/site.js`に出力されます。
 
-## exportとimport
-処理ごとにモジュール化をして、site.jsでimportするようにしてください。  
-以下は簡単な関数処理をexportする例です。
+### /domain
+ドメインオブジェクト。ある対象（名詞）の値を持ち・判断・加工・計算をして結果を返します。
+1つの`class`にすることで、重複しがちな処理を1箇所で管理することを目的としています。
 
-```js
-// util.js
-export const hello = (name) => {
-  return `Hello ${name}`;
-};
-
-// site.js
-import {hello} from './util';
-console.log(hello('world!!'));
-```
+- `MediaQuery.js` メディアクエリの条件（値）を持ち、条件に一致するかを返す
+- `Storage.js` ローカルストレージのキー（値）を持ち、取得・更新・削除などをする
+- `History.js` URLパラメーターの取得・更新・削除などをする
 
-JSファイルの先頭で以下のように指定するとJQueryも使用できます。
+### /infra
+データベースや外部APIとのやり取りをします。
 
-```js
-import $ from 'jquery';
-```
+### /utils
+1つの関数が1つの結果を返す汎用関数です。
+domainと違い固有の判断や値を必要とせず、他の値を変更する副作用を起こしません。
+JavaScript標準のメソッドやプロパティの組み合わせが必要な処理を、1箇所で管理することを目的としています。
 
 ## 環境変数
 `/config/`にあるファイルで環境変数を設定できます。

diff --git a/gulpfile.js b/gulpfile.js
@@ -189,7 +189,10 @@ function ssi() {
  * `.scss`を`.css`にコンパイルします。
  */
 function css() {
-  const plugins = [flexBugsFixes(), autoprefixer()];
+  const plugins = [
+    flexBugsFixes(),
+    autoprefixer({ grid: 'autoplace' })
+  ];
   return (
     gulp
       .src(src.css, {
@@ -206,10 +209,8 @@ function css() {
       .pipe(postcss(plugins))
       .pipe(
         gulpif(
-          isDevelopment,
+          isProduction,
           cleanCSS({
-            // 圧縮せずに整形して出力する
-            format: 'beautify',
             compatibility: {
               properties: {
                 // 0の単位を不必要な場合は削除する
@@ -221,8 +222,10 @@ function css() {
       )
       .pipe(
         gulpif(
-          isProduction,
+          isDevelopment,
           cleanCSS({
+            // 圧縮せずに整形して出力する
+            format: 'beautify',
             compatibility: {
               properties: {
                 // 0の単位を不必要な場合は削除する