読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

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

Webデザイン プログラミング フロントエンド

f:id:northgeek:20160416222657p:plain

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

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

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

HTML・CSS

f:id:northgeek:20160416224421p:plain

まずは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

f:id:northgeek:20160416224910j:plain

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

参考書籍

css3

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

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

参考サイト

  • エフェクト

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

  • グラデーション

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

Sass(SCSS)

f:id:northgeek:20160416225625j:plain

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

f:id:northgeek:20160416231137j:plain

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

f:id:northgeek:20160416230055p:plain

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

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

参考書籍

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

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

参考サイト

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

Emmet

f:id:northgeek:20160416230633j:plain

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

f:id:northgeek:20160416231916j:plain

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

参考サイト

5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう | Webクリエイターボックス

少し導入するにはハードルが高いですが、上記の参考サイトがとても丁寧に書かれています。gulpを導入するとしないではコーディングスピードが格段に違いますので絶対に導入をおすすめします。

Git

f:id:northgeek:20160416232315j:plain

バージョン管理が出来る「Git」。Git少し覚えるのは大変ですが、覚えるとこれまた大変便利です。特に複数人でコーディングを進めるときには必須です。また、複数でなくても導入をおすすめします。例えばよくフォルダの中が下記のようになることありませんか?

  • index.html
  • index.html_old
  • index.html_0515
  • index.html_new

これではどのファイルがどの時点ファイルなのかわかりません。Gitを使うことによってこういった問題を防ぐことができます。

参考書籍

Gitが、おもしろいほどわかる基本の使い方33〈バージョン管理、SourceTree、Bitbucket〉

Gitが、おもしろいほどわかる基本の使い方33〈バージョン管理、SourceTree、Bitbucket〉

Gitはむずかしいため、書籍を購入されることをおすすめします。この本は初心者向けに丁寧に書かれているため、Gitは使ったことあるけどいまいち理解していないという人にもぜひ読んでみてほしいです。

参考サイト

サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ

複雑なGitでも比較的わかりやすく紹介しているサイトです。難しいGitをわかりやすく解説しています。


フロントエンドエンジニアのための現在とこれからの必須知識

フロントエンドエンジニアのための現在とこれからの必須知識
フロントエンドエンジニアのための現在とこれからの必須知識

今のフロントエンドはどんな技術があり、どんな開発手法が主流なのかを知ることが出来る一冊です。フロントエンドエンジニアの間では人気がある書籍です。

さいごに

いかがでしたでしょうか。フロントエンドの開発環境と必要な知識・スキルを紹介いたしました。フロントエンドは便利なツールが次から次へと出てきますが、とりあえずこれくらい知っておけば問題ありません。

また、新しい技術はどんどん試すことと、便利なものはなるべく取り入れることをおすすめします。

www.north-geek.com

Copyright© North-Geek All Rights Reserved.