【2017-2018年版】Sublime Text入門

  • このエントリーをはてなブックマークに追加
Sublime Text入門 -第1回-【環境整備編】
次回の生放送
12月23日(土)
14:00 - 14:45
生放送の参加は無料です

Sublime Text はクロスプラットフォーム対応の高機能エディタです。

2008年1月18日に初版Sublime Textが発表、2013年7月8日にSublime Text 2が公開され、 ついにSublime Textの最新版Sublime Text 3が2017年9月13日に正式公開されました。

Sublime Text 3では、定義へ移動する機能、新しい構文強調エンジン、拡張されたAPIが導入されました。またロゴも一新され、インターフェイスが新しくなり、パフォーマンスはSublime Text 2からさらに向上しています。

このコースは、フロントエンドコーディング環境をSublime Text 3とビルドツールで整えていくという授業です。

 

※本授業では、Sublime Textがインストールされている事を前提に授業が進んでいきます。
   事前に下記URLからダウンロードして準備していただくと、よりスムーズにご受講することができます。
  (授業内で設定を一緒に学んでいきますので、授業前に各種設定することは不要です)
  https://www.sublimetext.com/3

※この授業はHTML+CSSコーディングの基礎スキルを習得された方向けです。
   HTML+CSSコーディング基礎スキル未習得の方は、下記の授業を先に受講される事をおすすめします。
 ・HTML入門
 ・WebデザインのためのHTML入門
 ・CSS入門
 ・WebデザインのためのCSS入門

 

【ソフトウェア情報】
名称:Sublime Text 3
著作権者:Sublime HQ Pty Ltd(オーストラリア)
対応OS:Windows、Mac、Linux
<ソフト種別>シェアウェア 80米ドル
<バージョン>Build 3143(17/09/13)

Sublime Textは、無料で試用できますがプロプライエタリですので継続して使用する場合はライセンス(80米ドル)の購入が必要です。 2013年2月以降にライセンスを購入した場合は、「Sublime Text 3」でもそのライセンスを利用することができます。 また、「Sublime Text 1」「Sublime Text 2」の利用者向けには低価格なアップグレードライセンスが提供されています。

次回の生放送

12月23日(土) 14:00 - 14:45

Sublime Text入門 -第1回-【環境整備編】

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

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

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

授業一覧
Sublime Text入門 -第1回-【環境整備編】
生放送12月23日(土) 14:00 - 14:45

Google カレンダーに登録

授業内容は変更になる場合があります

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

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

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

Sublime Text入門 -第2回-【Emmetの導入】
生放送12月23日(土) 15:00 - 15:45

Google カレンダーに登録

授業内容は変更になる場合があります

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

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

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

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

Sublime Text入門 -第3回-【SFTP導入】
生放送12月23日(土) 16:00 - 16:45

Google カレンダーに登録

授業内容は変更になる場合があります

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

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

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

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

Sublime Text入門 -第4回-【npmで構築する開発環境Gulp編】
生放送1月13日(土) 14:00 - 14:45

Google カレンダーに登録

授業内容は変更になる場合があります

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

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

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

 

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

 

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

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

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

 

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

 

Sublime Text入門 -第5回-【npmで構築する開発環境Sass編】
生放送1月13日(土) 15:00 - 15:45

Google カレンダーに登録

授業内容は変更になる場合があります

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

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

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


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

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

Sublime Text入門 -第6回-【npmで構築する開発環境Bootstrap導入】
生放送1月13日(土) 16:00 - 16:45

Google カレンダーに登録

授業内容は変更になる場合があります

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のカスタマイズを行うかを学んでいきます。

こんな人にオススメ
フロントエンドエンジニア(初級)

フロントエンドエンジニア。バックからフロントまでマッシュアップで構築していくことを目指すエンジニアの⽅。

タグ
担当の先生
受講生代表
  • 下井田 春佳

    下井田 春佳

    スクー放送部

  • 徳田 葵

    徳田 葵

    スクー放送部

この授業を受けたい(290人)
その他 210人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

Sublime Text入門 -第1回-【環境整備編】

【2017-2018年版】Sublime Text入門

次回 12月23日(土) 14:00~14:45

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×