丁寧に教えます！WEBコーディング効率化講座（Sass・Gulp入門)

2018年6月18日(月)に開催された「丁寧に教えます！WEBコーディング効率化講座（Sass・Gulp入門)」のレポートをお届けします。

講師を務めるのは、弊社のフロントエンジニア教育を担当している宮山。

今回は、CSSを効率よく記述できる「Sass」の環境構築方法や、 作業を自動化できる「Gulp」を使用する方法について教えてくれました。

SassとGulpでCSSを効率よく書こう

テーマは「SassとGulpを使用したコーディングの効率化」

CSSメタ言語の中で最も普及率が高まっている「Sass」

「コーディングの効率化を考える上でSassは必須になっていく。また、Gulpなどのタスクランナーツールを取り入れることで、コーディングライフをより快適にできる」

と宮山は語りました。

- SassとGulp -
Sass（Syntactically Awesome Style Sheets）：CSSを拡張したメタ言語
Gulp：Node.jsを使ったタスクランナーツール


- タスクランナーツール -
Sassのコンパイルや画像圧縮など、WEB制作における様々な処理を自動化してくれる。今回紹介しているGulp以外にも、WebpackやGruntなど、用途によって多様なタスクランナーツールがある。

講義はハンズオン形式。実際に手を動かしながら、SassやGulpの環境構築と使用方法について学びました。

また「Sli.do」を使用し、匿名で集めた質問をリアルタイムで解決していく講義スタイルを導入。参加者にやさしい講義進行となっていました。

- Sli.do -
チャット形式で匿名での質問を集められるサービス。主催者がイベントコードを発行⇒参加者がイベントコードを入力するだけで専用のチャットルームが表示される。

CodePenでSassのコードを試せる

講義で使用したオンラインエディター「Code Pen」

Code Penを使えば、ブラウザ上で気軽にSassのコードを書くことができます。また、ソースコードを保存・公開することができるので、他の人が公開しているソースを参考にすることも可能。

導入を検討している方は、下記手順を参考に一度試してみてください。Sassの便利な機能を実感できます。

▼手順

まず、ページ右上の「Create」をクリックし、「New Pen」を選択

「Change View」をクリックし、レイアウトを選択。

「Settings > CSS > SCSS」を選択

コーディング画面のCSS欄の横に(Sass)という文字が表示されれば設定完了です。実際にコードを書いて試してみましょう。

さいごに

1時間半の講義で、参加者ご自身のPCにSassとGulpの環境を構築することができました。Sassの導入に戸惑っていた参加者の方も「これでスタートが切れる」と、学習への意欲が高まった様子でした。

講義後には懇親会を開催しております。講義内容はもちろん、担当領域に関する事であれば登壇した講師にご質問いただけますので、興味のある方はぜひご参加ください。

今後も「みんなの情熱大学」にご期待ください。

(写真・文：H.S＠Web課 Webディレクター)

▼関連記事はこちら。初心者向けのコーディング講座も開催しております。

レポート：HTML5プロフェッショナル認定試験対応