フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。
初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。
まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。
今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。
ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。
良いスタイルガイドとは
巷にはスタイルガイド(コーディング規約)と銘打ったものがあふれています。
そのため有効に活用できるスタイルガイドを自身で見極めなければなりません。
頼りにするスタイルガイドが大雑把で必要なことが書いてなかったり、1000 ページもあってすぐ必要な場所が探せないようでは使えません。
私がスタイルガイドを見たときに良さそうだなと思うのは次のような場合です。
- 目次をみて言語やフレームワークの機能を網羅しているか
BadとRecommendedの両方のスタイルが提示されているか- そのスタイルに至った理由や背景が書かれているか
- スタイルの提示だけではなく、具体的なユースケースが提示されているか
このようなことを頭の片隅に置きながら、自分にあったスタイルガイドを探すといいと思います。
なぜスタイルガイド？
私がスタイルガイドを読む理由はいくつかあるので紹介しますね。
良いコードを書くために悩む時間を短縮
例えば、Javascript でのオブジェクトや配列の定義の仕方については、通常{}と[]が使われると思いますが、Javascript の言語自体あまり普段やらない人にとってはそれすらわからないと思います。
// bad
var item = new Object();
// good
var item = {};
// bad
var items = new Array();
// good
var items = [];
スタイルガイドを読むことで基本的な部分では悩まなくなります。基本的なことで悩まないということは、本当にやるべきところで悩むことに集中するために大切なことです。
様々な書き方存在する中で良いコードを書くために悩む時間を少なくしたいですね。
(とはいえ、悩むのですが。。。)
地雷源を早期に把握
良いスタイルガイドには、先人達がその言語やフレームワークにて発見した地雷源が記載されています。
例えば、AngularJS で controller などを作成する際に、複数の書き方ができるのですが、スタイルガイドを読むことで悩むことなく自分が書くべきコードを見つけることができました。
世の中のサンプルは avoid で実装されていることが多いです。それを疑わないままそのまま覚えてしまうことは危険です。
/* avoid */
angular
.module("app")
.controller("Dashboard", [
"$location",
"$routeParams",
"common",
"dataservice",
function Dashboard($location, $routeParams, common, dataservice) {},
]);
/* recommended */
angular.module("app").controller("Dashboard", Dashboard);
Dashboard.$inject = ["$location", "$routeParams", "common", "dataservice"];
function Dashboard($location, $routeParams, common, dataservice) {}
johnpapa/angularjs-styleguide | Manually Identify Dependenciesより
また、DI の部分を以下のように省略して書いてしまうとソースコードを Minify したときにエラーになるという地雷も発見することができました。
/* avoid - not minification-safe*/
angular
.module('app')
.controller('Dashboard', Dashboard);
function Dashboard(common, dataservice) {
}
/* recommended - minification-safe*/
angular
.module('app')
.controller('Dashboard', Dashboard);
Dashboard.$inject = ['common', 'dataservice'];
function Dashboard(common, dataservice) {
}
これらの先人たちの地と涙を汗の結晶である地雷源情報を参考にしない手はありませんね。
コードリーディング時間の短縮
チームで作業する場合に、同じスタイルガイドを参照することで統一感のあるコードを書くことができます。
これは OSS でも同じことで同じスタイルガイドに習うことで他人のコードも読みやすく、また自分のコードも読んでもらいやすくなります。
例えば、Nodejs では API 呼び出しの最後の引数に function を渡すことで、API 呼び出し後に callback を実行させることが慣例となっています。(引数が 1 つの場合はそれが callback になることが多いです。)
express のサーバー作成のコードを例として提示します。
// Setup server
var app = require("express")();
var server = require("http").createServer(app);
// Start server
// [MEMO]3番目のfunctionがcallback
server.listen(port, ip, function () {
console.log("Express server listening on %d", port);
});
どこかでこんな内容のガイド見たのですが、忘れてしまいました。知っているかたいましたら教えてください。
自分が作成した node 製モジュールの API で、最初の引数を callback にしてしまった場合はどうでしょうか。 他人が読む場合とてもストレスを感じると思います。
Go に入れば Go に従えではないですが、そのコミュニテイ内でのルールは守ったほうがいいですよね。
スタイルガイドの紹介
私がよく参照するスタイルガイドを紹介します。これからフロントエンド習得しようと思う方は参照してみてください。
(よく利用しているフレームワークに偏りあるので、全ては網羅していませんが。。。)
Javascript
airbnb のスタイルガイドを私が翻訳したものです。(本家はこちらairbnb/javascript)
有名なスタイルガイドは他にもいくつかあるのですが、内容とボリュームがちょうどいいと思います。
もうちょっと手が動く様になるとこちらも読むといいです。
Backbone
スタイルガイドというかパターン集ですね。最近の Backbone はMarionette.jsを併用することが多いので、これはもうあまり出番がないかも。。。
AngularJS
AngularJS はこれを読んでおけばいいです。
CSS
基本ですね。
本格的に勉強したい場合はまずこちらを読むといいです。
HTML
結構マークアップで悩む事が多いので、参考になります。
まとめ
進化の早いフロントエンドの世界ですが、私が進化に追いつくためにスタイルガイドを有効活用しているという話をしました。
特に最近は特定のフレームワークや言語のスタイルガイドが付属するようなトレンドになってきたような気がしています。
(ここで言うスタイルガイドは、従来のスタイルガイドとは違うジャンルの新しいタイプのものなのかもしれませんね。)
他の習得方法として、書籍を読む方法もいいと思いますが、スタイルガイドで特性などを把握してから本を読み進んだほうが、途中で挫折しないような気がしています。
スタイルガイドは面倒な前置きなどないので、忙しいエンジニアは普段使いするには向いていると思いますし。
(書籍の内容は StackOverflow で参照できる内容もおおくありますし。。。)
良いスタイルガイドを知ることは、自分の組織やプロダクトでどのようなスタイルガイドを作成すればいいか、重要なヒントが隠されていると思います。