gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回）

テーマ

gulpとsassを使いコーディング効率を速度を上げ、短時間でより多くの案件をこなせるようになろう！

概要

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

どんなにHTMLとCSSの知識が豊富でも1日に書けるコードの量には限りがあるかと思います。
自動化できることは自動化し、省略できるところは省略し、時間を節約しましょう。
またsassを導入するとコードの見通しが良くなり修正も容易になります。
この機会に一緒に勉強してみませんか？

• gulp ... タスクランナー、様々な処理を自動化してくれます
• sass ... CSSプリプロセッサ、セレクタ入れ子にしたり、変数や簡易な関数を使えるのが特徴

対象

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

• HTML
• CSS

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

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

注意事項

会場はWi-Fiやネット環境がありません。通信する必要がありますので、各自テザリングできるスマホなど通信環境をご用意ください。（お持ちでなければテザリングをシェアしましょう）

事前準備のお願い（2015.7.27追記）

今回の勉強会について「平日の夕方」ということもあり当初数名程度の参加と見込んでおりましたが、facebookなどで多くシェアいただいたため、十数名と多くの方々にご参加いただくことになりました。

このため、当初予定しておりました「gulp, sass を利用する環境づくり」部分について、様々な環境のPCに対して会議室利用時間内に一斉に環境構築することが困難であると判断いたしました。

つきましては、以下 slideshare サイトに「gulp, sass を利用する環境づくり」部分のみをまとめた資料をアップロード致しましたので、こちらを参考にPCの環境準備をお願い致したく思います。

gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回）
環境準備編
http://www.slideshare.net/toshimichisuekane/gulp-sass-2015-1

設定の途中で分からないことがありましたら、メッセンジャーなどでお気軽にご質問ください。

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

当日のスケジュール（2015.7.27編集）

＜実演と説明＞

• 18:00 ... sassの簡単な説明
• 18:30 ... gulpの簡単な説明

＜ハンズオン＞

19:00 ... package.json/gulpfile.js の作成
19:30 ... gulpで監視し、sassをCSSで書き出そう
20:00 ... cssの整形を自動化しよう（ベンダープレフィクス、ミニファイ化など）
20:45 ... まとめ
21:00 ... 閉館時間のため一時解散

＜懇親会＞

会場の時間が限られているため、閉館後に香椎まで移動して、食事しながらうまく行かなかった部分や分からない部分を話し合いましょう。（割り勘）

主催

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