Webサイト制作におけるフロントエンドの必須スキル&開発環境はこれで決まり！

f:id:northgeek:20160416222657p:plain

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で必要となるスキルと開発環境を紹介していきます。これくらい知っていると全く問題ない。といったことですね。

主にWebサイトを制作のスキルは、HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Gitについてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。

さて、そこでそれぞれの技術についておすすめ度や勉強の参考になるサイトと共に紹介していこうと思います。

HTML・CSS
- 参考書籍
- 参考サイト
CSS3
- 参考書籍
- 参考サイト
Sass（SCSS）
jQuery
- 参考書籍
- 参考サイト
SublimeText
- 参考書籍
- 参考サイト
Emmet
- 参考サイト
gulp
- 参考サイト
Git
- 参考書籍
- 参考サイト
フロントエンドエンジニアのための現在とこれからの必須知識
さいごに

HTML・CSS

まずはHTMLとCSSですね。この2つについては愚問です。どんなWebサイトやWebアプリケーションを使うにしても必ず登場しますね。HTML・CSSの難易度はそれほど高くはないため覚えるのは問題ないと思います。Webサイト制作の基本スキルと言っていいでしょう。HTML・CSSを覚えておくとブログのカスタマイズなども簡単にできますし、仕事以外にも使える幅は広がります。

参考書籍

f:id:northgeek:20160417110052j:plain

HTML5&CSS3標準デザイン講座

しっかりとHTML・CSSなら技術書を購入することをおすすめします。最近出版された書籍ですとこちらがおすすめです。レスポンシブデザインのことも記載されています。

参考サイト

HTML入門 (全24回) - プログラミングならドットインストール
CSS入門 (全23回) - プログラミングならドットインストール

初心者でもこのあたりの動画を3回も見ればHTMLとCSSの概要は理解できるようになるでしょう。ブログのカスタマイズくらいなら余裕でできるようになると思います。

CSS3

CSS3は従来のCSSでは表現できなかったことが出来るようにります。例えばグラデーション、アニメーション、移動、回転などCSS3を使うことによってWebサイトを動きのあるサイトにすることが出来ます。最近のおしゃれなサイトではCSS3は使われていないサイトはほぼないでしょう。

参考書籍

css3

CSS3 スタンダード・デザインガイド

CSS3の技術書といえば、これ一択です。他にHTMLとセットのものはありますが、CSS3のことがこれほどわかりやすく記載されている書籍はなかなかありません。

参考サイト

エフェクト

CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ - PhotoshopVIP
カラフルでおしゃれなテキストを使用したり、マウスオーバーでエフェクトをつけたりすることができます。

グラデーション

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ | Webクリエイターボックス
あとはグラデーションもここまで自由に設定することが可能となります。

Sass（SCSS）

CSSのメタ言語である「Sass」です。簡単に言うとCSSを使いやすく、かつ便利に記述することができるのです。僕はSassなしではコーディングの作業効率が3割くらいは落ちてしまいます。それくらい便利でおすすめです。

Sassは変数が使える

$MAX_WIDTH: 1000px;
$KEY_COLOR:  #34495e;

header{
  width: $MAX_WIDTH;
  color: $KEY_COLOR;
}
#content{
  width: $MAX_WIDTH;
  color: $KEY_COLOR;
}
footer{
  width: $MAX_WIDTH;
  color: $KEY_COLOR;
}

上記のように書く事ができるため、1000pxと指定するのが1回で済むため、1000pxから980pxに変わったとしても修正が1箇所で済みます。幅だけでっはなく、色など様々なことにも使えます。

また、変数以外にも便利機能はたくさんあります。詳細は参考サイトをご覧ください。

参考書籍

sass
Web制作者のためのSassの教科書これからのWebデザインの現場で必須のCSSメタ言語

Sassの技術書といえばこの紫本がもっとも有名ですね。Sassは機能が豊富のため技術書を購入して、学べば学ぶほど作業の効率がアップします。持っていて損はない一冊でしょう。

参考サイト

Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG
Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！｜ Tips Note

Sassの基本機能を説明しているページです。だいたいこれくらいの機能を知っているだけでも、コーディングの効率が上がります。まだ使用していない人はぜひ。

jQuery

JavaScriptのライブリであるjQueryです。簡単にいうとJavaScriptを超かんたんに使えるようにしてくれるのがjQueryになります。jQueryはスライドショーだったり、スムーススクロールだったりこれまた現在のWebサイト制作には欠かせないですね。スライドやアニメーションはCSS3でも出来るのですが、jQueryの方が細かいことを指定できますね。（ただしWebサイト制作以上のことをやるには、jQueryを使わないJavaScriptを覚えていた方が良いでしょう。）

AngularJSやReact.jsも便利ですが、Webサイトを構築するならjQueryが学習コストがもっとも低く、使い勝手がいいのでおすすめです。

参考書籍

f:id:northgeek:20160416165629j:plain
jQuery レッスンブック jQuery2.X/1.X対応

jQueryを覚えたいのであれば、この書籍が大変参考になります。HTMLとは違いプログラミングなので技術書は持っておいた方がいいでしょう。

参考サイト

jQuery入門 - ポンクソフト
jQuery 日本語リファレンス

jQueryの日本語リファレンスが1番参考になります。使い方や例やサンプルが用いて紹介されているので、わかりやすく便利です。

SublimeText

使いやすさ抜群「SublimeText」です。Windows、Mac、Linuxに対応しているテキストエディタになります。もちろん僕は使うOSすべてにSublimeTextをインストールして愛用しています。

SublimeTextの特徴として、軽快さ、多機能、プラグインが豊富、テーマが豊富、そして多くの言語でに対応していることが上げられます。そのためWebサイトのコーディングもサポートしてくれるので非常に楽になります。

参考書籍

f:id:northgeek:20160416171706j:plain
Web制作者のためのSublime Textの教科書
今すぐ最高のエディタを使いこなすプロのノウハウ

Webでもある程度の知識は得られますが、書籍の方が丁寧なのと、こんな機能もあるの？というのがわかるのでおすすめです。

参考サイト

今日から使える！Sublime Textの使い方【初心者向け】 | TechAcademyマガジン
SublimeTextの一般的の機能や一般的な使い方が丁寧に書かれていますので、参考にしてみてください。

Emmet

HTML+CSSのコーディングを爆速にするためのプラグインです。もうとてつもなく爆速なんです、どれくらい爆速かというと

Tabキー押下すると下記のように展開されます。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

ん？！ビックリマークだけでいいの？と驚かれるでしょう。
さらに…！

header>nav.menu>ul.nav-menu>li*5

こう書いて、Tabを押下すると…

<header>
	<nav class="menu">
		<ul class="nav-menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</header>

一気にナビゲーションメニューが出来てしまいます。爆速な理由がわかりましたでしょうか。Emmetを導入しない理由が見当たりませんよね。SublimeTextにも導入することが出来るのでぜひ、SublimeTextとEmmetのコラボで使用してみください。
（いやー、最近のコーディングって便利だよなぁとしみじみ感じます。）

参考サイト

Sublime Text 2とEmmetで制作効率アップ！@福岡マークアップ勉強会 | キリンブログ

Emmetの基本がを紹介しているサイトです。SublimeTextの導入から記載されていますので、インストール・設定もこれでOKです。

gulp

爆速シリーズの最終兵器「gulp」。さまざまなことを自動化してくれるタスクランナーです。例えばファイルを保存したと同時にブラウザを自動でリロード、Sassをコンパイル、画像やCSSを圧縮したりとこれらを瞬時に実行してくれます。「grunt」とよく比較されますが「gulp」の方が処理速度がはやく個人的には使いやすいです。gulpを導入しているとかなりイマドキっぽい開発環境になります。