TOP

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

イベント内容

テーマ

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

概要

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

どんなに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>見出し</h1>
  <p>
    <a href="#">リンク</a>
  </p>
</div>

内容

1.Slim のデモ

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

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

2.Slim を導入してみよう

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

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

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

3.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
フロントエンドエンジニア 末包俊道

参加者
9人 /定員10人
申込先
会場
福岡市立東市民センター(なみきスクエア)
福岡市東区千早4丁目21番45号 福岡市立東市民センター 第3多目的室(1階)

注目のイベント

タグに関連するイベント

2018/04/27(金) 19:30 〜 21:45
東京都
2018/05/11(金) 19:30 〜 21:45
東京都
2018/05/15(火) 10:00 〜 17:00
東京都

コラム

イベント New

目指すは究極の“個客”対応。ファーストリテイリング「デジタル改革」の本気度

ファーストリテイリングが2017年2月から本格的に始めた全社改革「有明プロジェクト」が注目を集めている。...
96 views
イベント New

【レポート】トランザクションの多いゲーム運用、負荷分散ノウハウetc…裏側をみせます! - KLab TECH Meetup -

2017年9月4日(月)19時30分より、「KLab TECH Meetup −トランザクションの多いゲーム運用、負荷分散ノウ...
74 views
イベント

インメモリデータベースの今後。新領域への適用可能性 - デジタルトランスフォーメーション時代の最新データベース技術勉強会 -

2018年3月6日(火)19時10分より、「【エンジニア向け勉強会】デジタルトランスフォーメーション時代の最新...
232 views