## コンポーネントベースの
Webサイト制作
有限会社アップルップル 堀 悟大
## 前提
- 既存サイトのメンテナンス案件
- 中・大規模案件向き
## 自己紹介
### 有限会社アップルップル
### steelydylan
## 業務
- JSライブラリの開発
- a-blog cmsのフロント周りの担当
- Web制作の受託案件
## 今日お話しすること
- コンポーネントとは
- コンポーネントベースにすることのメリット
- コンポーネントベースで開発するには
- まとめ
## コンポーネントとは
- HTML/CSS/JavaScriptをセットで部品化すること
- 見た目や動作がある程度保障されている
## GET_Templateを使った場合
```html
```
# caption-box
実際にデータが入ってくると
マークアップ的には
```html
```
### GET_TemplateをHTMLのタグとして考え、
見た目や動作を担保！
## コンポーネントベースで
開発するメリット
- CSSの衝突防止
- デザインのずれを防止する
- 分業がしやすい
- 他の案件で使える
## CSSの衝突防止
コンポーネントベースで開発すると、HTMLとCSSがセットになるのでCSSのクラスの衝突などが起こりづらくなります。
詳しい実装方法は後ほど説明します。
## デザインのずれを防止する
すでに制作済みのコンポーネントを別のページで別のクラスで作ってしまう問題などを防げる
## 分業がしやすい
例）各コンポーネントごとにそれぞれ担当者をつけることで作業のコンフリクトが防げる
## 他の案件でも使える
- 似たような部品を他の案件で使うことになれば該当するディレクトリだけ移動すればいいので、他の案件でも使えます。
## コンポーネントベースで開発するには?
基本的なルールさえ守れていれば、誰でもコンポーネントベースで開発できます。難しいツールなどの導入は必要ありません。
## コンポーネントベースで開発するには?
1. コンポーネントごとにディレクトリーを切る
2. コンポーネントの命名規則
3. field.htmlの命名規則
4. a-blog cmsのモジュールにとらわれない
5. スタイルガイドの導入
## 1. コンポーネントごとにディレクトリーを切る
探しやすいようにディレクトリーと同じ名前をGET_Templateのidとします
## caption-boxの場合
- caption-box.html (SET_Templateなどの記述)
- caption-box.scss (caption-boxの見た目の記述)
- field.html (入力内容の設定)
## 2. コンポーネントの命名規則
さらにディレクトリーの名前をクラス名の接頭辞に
```css
.caption-box{
flex:1;
position:relative;
width: 100%;
}
.caption-box-bg{
width: 100%;
height: auto;
}
```
## 3.field.htmlの命名規則
fieldの変数もクラス名と合わせる
```html
```
## 3.field.htmlの命名規則
/admin/blog/field.html
```html
```
/admin/category/field.html
```html
```
## a-blog cmsのモジュールにとらわれない
SET_Templateの中ではなるべくa-blog cmsのモジュールを使わないようにしています。
## a-blog cmsのモジュールにとらわれない
```html
```
## スタイルガイドの導入
## スタイルガイドの導入
atomic-labを使っています。
```shell
npm install atomic-lab --save-dev
```
## スタイルガイドの導入
コンポーネントのプレビュー
## スタイルガイドの導入
HTML/CSSの確認
gulpfile.js
```js
var atomic = require('atomic-lab');
atomic.build({
src:"themes/example/components/",
dist:"themes/example/styleguide/resources/setting.json",
markup:"html"
});
```
jsやcssなどのbuildプロセスに含めてしまえば
スタイルガイドを意識する必要はありません。
## まとめ
- いつでもコンポーネントベースの開発は可能
- 見た目、動作を保証して安心なWeb制作をしよう