gulp + slim テンプレートエンジンで html を効率よく書き出そう
TRANSCRIPT
![Page 1: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/1.jpg)
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!東区フロントエンド勉強会 2016年 第2回
excode Inc. Toshimichi Suekane1
![Page 2: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/2.jpg)
excode Inc. Toshimichi Suekane2
はじめにgulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
http://slim-lang.com/
![Page 3: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/3.jpg)
excode Inc. Toshimichi Suekane3
はじめにgulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
Slim is a template language whose goal is reduce the syntax
to the essential parts without becoming cryptic.
構文を減らすことを目的としたテンプレート言語
![Page 4: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/4.jpg)
excode Inc. Toshimichi Suekane4
はじめにgulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
Slim HTML
![Page 5: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/5.jpg)
excode Inc. Toshimichi Suekane5
はじめにgulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
Slim HTML
1. 閉じタグ不要 2. <>不要
3. 変数が使える
4. 関数や計算式が使える
5. インデントでネスト(入れ子)管理できる
![Page 6: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/6.jpg)
excode Inc. Toshimichi Suekane
今日やること
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
6
1. gulp + Slim のデモ
2. gulp + Slim の導入
3. gulp + Slim のハンズオン
4. おわりに
はじめに
![Page 7: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/7.jpg)
excode Inc. Toshimichi Suekane
1. gulp + Slim のデモ
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
7
1. Slim から HTML を出力
2. 変数を使ってみる
3. for ループを使って連番を振ってみる
4. 配列に格納したテキストで一気にHTMLを書き出してみる
![Page 8: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/8.jpg)
excode Inc. Toshimichi Suekane
Demo
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
8
1. gulp + Slim のデモ
![Page 9: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/9.jpg)
excode Inc. Toshimichi Suekane
2. gulp + Slim の導入
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
9
1. Slim の準備
2. gulp の準備
3. lesson.slim を作成
4. gulp を実行
5. gulp で監視
![Page 10: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/10.jpg)
excode Inc. Toshimichi Suekane
1. Slim の準備
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
10
2. gulp + Slim の導入
Slim をインストールするコマンド
![Page 11: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/11.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
11
2. gulp + Slim の導入
Slim のバージョンを確認
1. Slim の準備
![Page 12: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/12.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
12
2. gulp + Slim の導入
バージョンが表示されればOK
1. Slim の準備
![Page 13: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/13.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
13
2. gulp + Slim の導入
1. Slim の準備(SSL エラーが出る時)
rubygems.orgの URL を http に変更する
rubygems.orgの URL を元に戻す
ERROR: Could not find a valid gem 'sass' (>= 0), heres why: Unable to download data from https://rubygems.org…
rubygems.orgの URL を http に変更して、再度インストールを試みます
![Page 14: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/14.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
14
2. gulp + Slim の導入
これで Slim の準備は終わりです
1. Slim の準備
![Page 15: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/15.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
15
2. gulp + Slim の導入
2. gulp の準備
![Page 16: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/16.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
16
2. gulp + Slim の導入
一から作ると時間が足りないので、予め用意してきました
https://goo.gl/QNfMaU
2. gulp の準備
![Page 17: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/17.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
17
2. gulp + Slim の導入
ZIPファイルをダウンロードし、デスクトップ上に解凍してください
2. gulp の準備
![Page 18: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/18.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
18
2. gulp + Slim の導入
解凍したフォルダをデスクトップに保存
2. gulp の準備
![Page 19: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/19.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
19
2. gulp + Slim の導入
ターミナルに cd とタイプして、先ほどのディレクトリをドラッグします
2. gulp の準備
![Page 20: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/20.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
20
2. gulp + Slim の導入
2. gulp の準備
ターミナルに cd とタイプして、先ほどのディレクトリをドラッグします
![Page 21: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/21.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
21
2. gulp + Slim の導入
ディレクトリのパスが表示されますので、エンターキーを押してください。ターミナル上でそのディレクトリ内に移動します
2. gulp の準備
![Page 22: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/22.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
22
2. gulp + Slim の導入
gulp の動作に必要なファイルをインストールします。
2. gulp の準備
![Page 23: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/23.jpg)
excode Inc. Toshimichi Suekane
2. gulp の準備
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
23
2. gulp + Slim の導入
gulp + Slim の動作に必要なファイルをインストールします。
![Page 24: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/24.jpg)
excode Inc. Toshimichi Suekane
2. gulp の準備
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
24
2. gulp + Slim の導入
これで gulp の準備は終わりです
![Page 25: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/25.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
25
3. gulp + Slim のハンズオン
1. Slim から HTML を出力
2. Slim の書き方
3. 変数を使ってみる
4. for ループを使って連番を振ってみる
5. 配列に格納したテキストで一気にHTMLを書き出してみる
6. 共通部分を外部ファイル化する
![Page 26: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/26.jpg)
excode Inc. Toshimichi Suekane
1. Slim から HTML を出力
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
26
3. gulp + Slim のハンズオン
gulpfile.js のディレクトリ内で gulp slim を実行してみます
![Page 27: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/27.jpg)
excode Inc. Toshimichi Suekane
1. Slim から HTML を出力
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
27
3. gulp + Slim のハンズオン
gulpfile.js のディレクトリ内で gulp watch で監視をしてみます(デモでは gulp で監視に入るようにしています)
![Page 28: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/28.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
28
2. Slim の書き方
インデントを使ってタグの階層を制御します
3. gulp + Slim のハンズオン
![Page 29: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/29.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
29
2. Slim の書き方
テキストを書くときは3通りあります
3. gulp + Slim のハンズオン
![Page 30: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/30.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
30
2. Slim の書き方
要素名の後に#でID、.でクラスが付与されます #や.から書き出した場合はDIVタグとなります
3. gulp + Slim のハンズオン
![Page 31: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/31.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
31
2. Slim の書き方
タグを直接書き入れることもできます
3. gulp + Slim のハンズオン
![Page 32: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/32.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
32
2. Slim の書き方
スラッシュで始めた行はコメントアウトされます
3. gulp + Slim のハンズオン
![Page 33: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/33.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
33
2. Slim の書き方
変数を指定したい場合は - から書き始めます 変数を文字列として書き出す際は#{…}で囲みます
3. gulp + Slim のハンズオン
![Page 34: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/34.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
34
3. gulp + Slim のハンズオン
実際に編集
![Page 35: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/35.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
35
4. おわりに
Slim のいいところ • インデントを操作するだけでタグの階層を操作できる • 閉じタグを気にしなくていい
Slim の使いどころ • 複数ページをがっつり仕上げたい時 • 共同作業でありつつも属人的に作業をしたいとき
Slim でなくてもいいところ • 納品後のメンテナンスまで Slim で済ませる必要はない • ほんの数行程度なら、HTMLを書いた方が早い
![Page 36: gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう](https://reader033.vdocuments.net/reader033/viewer/2022051007/5876b8e21a28abad1a8b65f3/html5/thumbnails/36.jpg)
excode Inc. Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう!
36
お疲れ様でした