gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう！

テーマ

gulpとSlimを使い効率よくHTMLコーディングをして、短時間でより多くの案件をこなせるようになろう！

概要

ホームページのコーディング、１案件にどのくらい時間をかけていますか？

どんなにHTMLとCSSの知識が豊富でも1日に書けるコードの量には限りがあるかと思います。
自動化できることは自動化し、省略できるところは省略し、時間を節約しましょう。

Slim を導入するとコードの見通しが良くなり修正も容易になります。
また、タグの閉じ忘れやインデント崩れも皆無になります。

この機会に一緒に勉強してみませんか？

• gulp ... タスクランナー、様々な処理を自動化してくれます
• Slim ... HTMLテンプレートエンジン、変数やRubyの関数を使えるのが特徴

Slim について

本来は Ruby on Rails の HTML テンプレートエンジンとのことなのですが、今回のハンズオンでは HTML を省略して書くためのツールとして利用します。
インデントのみでタグの階層を制御するので、とても見通しが良く修正が容易になります。

Slim の書き方 （sample.slim）

.container
  h1 見出し
  p
    a href="#" リンク

出力される HTML （sample.html）

<div class="container">
  <h1>見出し</h１>
  <p>
    <a href="#">リンク</a>
  </p>
</div>

内容

１．Slim のデモ

実際に Slim で書かれたコードからHTMLが出力されるまでのデモを行います。

• Slim から HTML を出力
• 変数を使ってみる
• for ループを使って連番を振ってみる
• 配列に格納したテキストで一気にHTMLを書き出してみる
• ...など

２．Slim を導入してみよう

持参いただくPCで Slim が使えるように環境構築をします。

• Slim をインストール
• gulpfile.js を編集
• 動作確認

※あらかじめ、gulp が動作する環境を構築しておいてください。

３．Slim のハンズオンをします

• Slim から HTML を出力
• 変数を使ってみる
• for ループを使って連番を振ってみる
• 配列に格納したテキストで一気にHTMLを書き出してみる
• 共通パーツの外部ファイル化
• ...など

対象

今回の勉強会はHTMLとCSSの基礎的な知識があることを前提に進めさせていただきます。このため以下の知識が必須となります。

• HTML
• CSS

当日ご用意いただきたいもの

• ノートパソコン（必須）
• テザリングできるスマホ（あれば）

事前準備のお願い

【重要・必須】今回初参加をされる方は、gulpが使えるよう環境構築をしておいてください。

gulp + Sass の環境準備
http://www.slideshare.net/toshimichisuekane/gulp-sass-2015-1

参考：gulp + Sass 本編（第一回の内容です）
http://www.slideshare.net/toshimichisuekane/gulp-sass-2015-1-51123451

※環境準備で分からないことがありましたら、メッセンジャーなどでお気軽にご質問ください。

末包 俊道 (facebook)
https://www.facebook.com/toshimichi.suekane

当日のスケジュール

18:30 ... Slim のデモ
18:45 ... Slim の導入
19:30 ... 休憩（15分）
19:45 ... Slim のハンズオン
20:45 ... まとめ
21:00 ... 閉館時間のため一時解散

注意事項

会場にはWi-Fiが設置されておりますが、接続数が多いとネットに繋がりにくくなるようです。スムーズにハンズオンまで進めるよう、各自テザリングできるスマホなど通信環境をご用意ください。（お持ちでなければテザリングをシェアしましょう）

懇親会

会場の時間が限られているため、閉館後に千早駅近くで食事しながらうまく行かなかった部分や分からない部分を話し合いましょう。（飲食費は3,000円前後目安）

主催

エクスコード株式会社
http://excode.jp
フロントエンドエンジニア　末包俊道