【2017-2018年版】Sublime Text入門

Web開発現場では、パフォーマンスを上げるためにさまざまな作業を自動化するビルドシステムを導入する 開発環境が増えてきました。

モダンエディタの草分け的存在Sublime Text 1が誕生した後、様々な後続エディタが誕生しましたが、 昨今、あまりメモリを消費しないためパフォーマンスが高く、ビルドシステムとの親和性の高いエディタ Sublime Text 3が再び脚光を浴びてきました。

第1回では、Sublime Text 3の優れたプラグインを導入し、 フロントエンドコーディング環境を整えていきます。最新の環境を整えたい方におすすめの授業です。

第2回では、コーディングスピードを飛躍的に上げてくれるEmmetを SublimeTextに導入していきます。

EmmetとはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるテキストエディタ用プラグインです。スニペットを記述し、ショートカットキーで展開するという操作で、まとまったコードを一気に記述する事ができます。

2008年にVadim Makeevによって開発されたEmmetは、Sergey Chikuyonokと利用者により MIT Licenseのオープンソースとして継続して開発され続けています。

※Emmetのインストールは授業中に一緒に行いますので事前準備はいりません。

SFTPプラグインをインストールしてSublime TextにFTP機能を追加する授業です。

SFTPはFTP/SFTPの両方のサーバーにアップロードできる優れたプラグインです。
ファイルの保存と同時に自動アップロードができます。

第3回ではSublime Text 3上のローカルプロジェクトからネット上へファイルの更新・新規追加をしていく作業を学びます。

※Sublime Text入門 -第1回-【環境整備編】が前提授業となりますので事前にご受講をお願いします。

ウェブフロントエンド開発では「タスクランナー」や「ビルドツール」と呼ばれる必要な処理を自動化してくれる システムを挿入し、それらで作られた環境内に必要なツールをセットアップした環境で開発する事が多くなりました。

Grunt、 webpackなどがありますが、第3回では、今フロントエンドで最も多く使われているツールの一つ、 Gulpでの開発環境構築を学んでいきましょう。

GulpはNode.jsをベースとしたビルドツールです。 さまざまな作業を自動化することができます。
Gulpの特徴はファイルの処理をストリームで行うというところです。この事により複雑なタスクも細かく カスタマイズする事ができます。

※第4回ではコマンドラインを使います。Windowsでは「コマンドプロンプト」、 MacOSでは「ターミナル」が授業中に直ぐに起動できる様にしておいてください。

※受講前に最新のNode.jsのインストールをお願いします。
https://nodejs.org/ja/

・nvm（Node.jsのパッケージ管理ツール）を導入している場合は最新バージョンのNode.jsを使えるようにしておいてください。

・必ずコマンドプロンプト（Windows）かターミナル（Mac）で
　node -v
　と打ち、ストールがされている事を確認してから授業に臨んでください。
　インストールされている場合は、下記の様にヴァージョンが表示されます。
　v8.8.1

※Gulpについては以下の授業も参考にしてください。
Gulp入門

SassはEmmetとともに、コーディングスピードを飛躍的にあげるツールとして 今やフロントエンドの開発環境では定番となりつつあります。

SassとはCSSのメタ言語です。「Syntactically Awesome Stylesheets」の略で、 直訳すれば「素晴らしい構造のスタイルシート」という意味です。

この授業ではGulp環境ににSassを導入し、Sassで記述したファイルをコンパイルして、 CSSファイルを生成する手法を学でいきます。

※この授業はGulpの導入が前提になっています。必ず前回授業Sublime Text入門 -第4回-【Gulpで構築する開発環境】をご覧になってからご受講ください。

※Sassについては以下の授業も参考にしてください。
Sassをはじめからていねいに＜概要−基礎編＞
Sassをはじめからていねいに 〜応用編〜

CSSフレームワークであるBootstrapは、あらかじめ用意されたCSSのセレクタを選ぶ事で誰でも完成度の高いレスポンシブデザインのUIを作る事ができます。デフォルトで5色のバリエーションを持つ様々なパーツのデザインが用意されており、CSSにあまり慣れていない方でも統一感のあるデザインのサイトを簡単に作る事ができます。

実は、Bootstrapの魅力はCSSプリプロセッサであるSassでカスタマイズできる事にあります。
bootstrap-sassというgemがRubyベースと、Node.jsのnpmベースで用意されています。（npmとはNode.jsのライブラリやパッケージを管理することができるツールで、Node.jsをインストールすると一緒にインストールされます。）

BootstrapはそもそもCSSのプリプロセッサLessでコンパイルされていました。現在はSassでの開発がLessを上回る様になり、Bootstrapにおいても主流になりつつあります。(もちろん今でもLess用パッケージも用意されています)

bootstrap-sassを使えば、完成度に加えオリジナリティも高いサイトが実現できます。
第6回ではGulpでの開発環境で如何にしてbootstrap-sassのカスタマイズを行うかを学んでいきます。