読まないなんてありえない!『フロントエンドエンジニア養成読本』が素晴らしすぎた | Select *
Web Web制作 書評 趣味

読まないなんてありえない!『フロントエンドエンジニア養成読本』が素晴らしすぎた

IMG_0974Rubyエンジニアな@deepblue_willです。

私はサーバーエンドよりもフロントエンドエンドを実装するほうが好きで、最近フロントエンドエンジニアという職種に興味があります。でも、いったいに何を学べばいいんだ!と模索気味でもありました。そこで見つけたのが「フロントエンドエンジニア養成読本」という本。もうこれは買うしかないと思い、予約して購入しました。案の定とてもいい本だったので珍しく技術本の紹介をしたいと思います!

スタイルガイドを書く

プログラミングではコード中にドキュメントを書くのは普段からやってます。
JavaならJavadoc、RubyならRdocというふうに。
コマンド一発でHTMLのドキュメントが生成できます。
それと同じように、CSSにドキュメントを書くことでスタイルガイドが生成できるツールがあることを初めて知りました。
プログラミングでは普通にやっていたことをCSSでなぜやろうと思わなかったのか今まで不思議です。

本で詳しく紹介されていたのが「StyleDocco」というツール。
node.jsのnpmで配布されてます。
以下のようにCSSのコメントとしてドキュメントを書くことができ、コマンドでHTMLを生成できます。
ドキュメントはマークダウン記法で書けるので、専用の文法を覚えるコストもかかりません!
これをちゃんと書くようにすれば、各セレクタがどんなスタイルなのかすぐ分かるようになるなぁと思いました。

[参考]
『StyleDocco』でCSSプリプロセッサのスタイルガイド作成

SMACSSとBEM

SMACSSはOOCSS(オブジェクト指向CSS)の考え方ベースに作られたCSSセレクタのガイドラインです。
BEMはOOCSSにおけるclassの命名規則です。

CSSのセレクタってなにも考えないと同じようなスタイルなのにいくつもclass作っちゃってあとで修正が大変になったりします。
そういう問題を無くすためにプログラミングにあるオブジェクト指向の考え方をCSSにも適用したのがOOCSSです。
要は、オブジェクトと呼ばれる部品を組み合わせることでスタイルをしていきましょうってことです。
身近な例が「Bootstrap」です。

名前自体は知っていたのですが、ちゃんと調べたことがありませんでした。
よくよく調べてみると、フロントエンド界隈ではわりと当たり前のように取り入れられていて、ちゃんとわかっていた方がいいかなと思いました。
Web制作者のためのCSS設計の教科書という本も発売されたし、今度本腰いれて勉強したいと思っている内容です。

[参考]

JavaScriptの便利なライブラリ「Lo-Dash」


Lo-DashUnderscore.jsからフォークされた便利なライブラリです。Underscore.jsのほぼ全てのAPIが使えて、カスタマイズ性やパフォーマンスの改善がされてます。
underscore.jsは知っていたのですが、それをさらに良くしたとされるLo-Dashはこの本で初めてしりました。

生のJavaSciptでは扱いづらい配列関連の便利なメソッドが各種用意されていて、これはかなり使い勝手がよさそうです。
例えば_.each。配列のループにいちいちforを使わなくても良くなります。
var ary = ["a", "b", "c"];
_.forEach(ary, function(str){
  console.log(str);
});


他には配列の要素を探すfindやソートするsortByなどなどいっぱいあります。
もちろん配列以外のメソッドもありますよ。
詳しく知りたい方はLo-Dash documentationを見てみてください!

Chromeの開発者ツールにはスニペットが登録できる!


Consoleパネルでよく使うコードはスニペットとして登録ができます。
例えば、JQueryを使ってないサイトのデバッグでJQueryを読み込ませるコードとか。
これも知りませんでした。。

Source > Snippets で登録できます!

便利なスニペットはDevTools Snippetsでいろいろ公開されてます。

Mapleがすごいやばい!


最近、Web制作者の中でWebページのひな形を簡単に生成できるYeomanや、AltJSやCSSプリプロセッサーのビルドを製作中にリアルタイムでビルドできるGrunt、Javascriptのライブラリの管理ができるBowerがよく使われるようになりました。

これらのツールをいいかんじに設定したものをMapleという形で公開してくれているそうです。
使ってみたらこれがものすごく便利で、例えば変更を検知して自動でブラウザをリロードしてくれたりだとか、JSやCSSのMinifyしてくれたりだとあげたらキリがないくらいのいろんな機能をコマンド一発でやってくれる素晴らしいライブラリです。

これを使ってGitHub Pageとして公開しているdeepblue-will/deepblue-will.github.ioを作りなおそうかなと思っています。

最後に

久しぶりにすごいためになった技術書です。おなじシリーズに「Webアプリエンジニア養成読本」もあるのでこれも今度読んでみたいと思います!

紹介したのはほんの一部で、他にもUI/UX、HTML5、パフォーマンスなどなどいろんなことが書かれています。
私みたいにフロントエンドエンジニアに興味があるエンジニアの方、もっとスキルアップしたいフロントエンドエンジニアの方にぴったりな1冊なので読んでみてください!

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)