Hatena::ブログ(Diary)

フリーフォーム フリークアウト Twitter

2012-05-10

Maintainable JavaScript を読んだ

javascript | 22:40 |

Maintainable Javascript

Maintainable Javascript

Maintainable JavaScript という本を読みました. ハイパフォーマンス JavaScript などの著書が有名な, 元ヤフーのテクニカルリード Nicholas C. Zakas さんの新著です.

コードベースが大きくチームの人数も複数人なプロジェクトでのプラクティスがまとめられてます. コードの書き方そのものよりも, メンテナンス性の高いコードベースを保つための環境の作り方にフォーカスした本です. 実際の規約やツールの設定まで具体的に述べられていたので, チームの開発の枠組みをどうしようかと考えている人にとって参考になる本かと思います.

トピックは大きく以下の 3 つです.

コーディング規約はルールだけでなく "なぜそうしたほうがいいのか" まで説明されており好印象でした.

プログラミングのプラクティスは html/css/javascript は分離しようとか, どう書くとグローバルを汚さないかといった, メンテナンス性という観点からのコードの書き方について述べられています. この章はなるほどと思える作法がいくつか出てきて面白く読めました. とはいえ幾つかのトピックを紹介しているだけなので, JavaScript Patterns や Learning JavaScript Design Patterns あたりも目を通しておいたほうが網羅的かもしれません.

自動化の章ではプロジェクトのディレクトリ構成からはじまり, JSHint でのバリデーション, ファイルの連結, Minify, JSDoc 等によるドキュメンテーション, 自動テスト, 最終的に Jankins で CI ... という各トピックを自動で走らせる方法について説明しています. ビルドツールとして Ant が採用されていて, 具体的な設定方法から書かれていました.

説明を丁寧にしすぎて若干くどい印象をうけました. 初心者向けの本ではないので, もっとはしょって書いてもいいんじゃないかなという感想です. とはいえ appendix も含め 200 ページほどなので十分コンパクトで, さっと目を通すには良いのではないでしょうか.

まとめ

Maintainable JavaScript を読みました. チームで js を書いている人は参考になりそうな本でした. コンパクトなので知識の確認のため流し読みしたり, 必要なところを拾い読みしたりするのが良いかなと思いました.

コメントを書く

2012-04-21

"Crash Course: Design for Startups" メモ

斜め読み | 12:27 |

Crash Course: Design for Startups — PaulStamatiou.com を読んだメモ. 自分に必要なところだけメモっただけなので原文にあたるようにしていただけると.

Paul Stamatiou は Notifo, や Pic A Fight のデザイナ. 彼による Web デザインについてのスタートアップガイド.


  • Subtle is key! Except when it's not.
    • 覚えたてのテクニックを使いたくなりがち
      • text-shadow や border-radius やグラディエントや
    • 不必要に細部に凝りすぎるのは危険

  • Get Inspired and Stay Thirsty My Friends Organized
    • いいデザインはクリップしておく
    • LittleSnapper を使っている

  • Process (いつもデザインするときの流れ)
    • ターゲットオーディエンスの定義
    • 上記で定義したターゲットから, どのようにレイアウトするか考える
      • 近いサイトを幾つかピックアップ
    • レイアウトをスケッチする
    • スケッチを html にする
      • 20 分くらいでさっと
      • sass, chrome dev tool を活用
    • chrome dev tool でいろいろパラメータを変えて, スクリーンショットをとる
    • グレイスケールでレイアウトして, カラーを考える
    • 色調整, タイポグラフィの調整はいつも最後まで行う
    • ここまではだいたい "ホームページ" のための作業
      • ここまででできたなんとなく頭の中にあるコーディング規約に従って, 他のページの要素, サイドバーやセカンダリーナビゲーション, コンテンツページ, などの調整をする
    • フィードバックと改善


  • But Stammy, we launch in one week!!?!111
    • 良いアイコンセットを買う
    • クリックできるものはすべて hover や action の素材を準備する
      • フィードバック重要
      • LoVe HAte: link, visited, hover, active
    • とにかくアラインさせよ
    • 色
    • テクスチャ
    • プレインなエッジではなくて, 1px のラインを入れる. "rgba(255,255,255, [value from 0-1])"
    • 個別の要素のスタイリングは UI-Patterns.com へ
    • より空白を
      • 要素間の空白は, だいたいフォントサイズくらいとればいい
    • たくさんのリストの要素はゼブラカラーに
    • form input には padding を. スタンダードでないフィールドには tooltip で説明を. ":focus" もスタイリングする
    • 一番大きな要素は, 一番重要な情報になってる?
    • スペースになんでもつめこもうとしないこと
    • 余裕があったら A/B テスト
    • その他いろいろ
  • Try New Things
コメントを書く

2012-01-03

Google JavaScript Style Guide 和訳を Revision 2.28 にあわせて修正しました

javascript | 21:52 |

Google JavaScript Style Guide が Revision 2.28 にアップデートしていたので*1和訳も対応しました.

Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳

今回の変更点は,

  • getter, setter を使う際の注意点の追加 (基本的に使わないことを推奨).
  • JSDoc でのコメントの書き方について, セクションのレイアウトを変更.

というもので, diff は多いですが内容的には大きな変更はありませんでした.

訳文の diff

*1：原文のアップデートは11月末だったのですが仕事がばたばたしており対応が遅れてしまいました. アップデートは監視しているで把握はしていたのですが対応が伸び伸びに…

コメントを書く

2011-08-28

How Browsers Work を和訳しました

html/css | 16:19 |

先週くらいに How Browsers Work: Behind the Scenes of Modern Web Browsers という, ブラウザ内部の挙動についての文章が話題になっていました. とても面白そうなのですが長い文章で普通読むとくじけそうだったので, 翻訳しながら読むことにしました. 原文のライセンスが CC だったので, せっかくなので同じライセンスで公開させて頂きます.

How Browsers Work - Behind the Scenes of Modern Web Browsers — Translation of "How Browsers Work" v0.1 documentation

以下読んでみて思ったことなど.

この文章はなに?

Tali Garsiel さんというイスラエルの開発者の方がブラウザ内部の動きについてまとめた文章がオリジナルです. それを Paul Irish さんが HTML5 Rocks で再公開しました.

入門書と言っているだけあり, 詳細を見るというよりも外観をつかむのにもってこいな文章でした. ブラウザにはだいたいどういう要素があり, それらはどういう動きをするのかということをざっくり理解することができました. ブラウザの動きを理解する最初の一歩として良いと思います.

HTML と CSS の知識さえあれば読めそうでした. (JS の話は殆ど出てこなかったので, JS はわからなくても読めそうです)

さらに深追いしたい場合は

原文の最後にある参考文献によいリソースへのリンクが沢山あります.

日本語のリソースでは tokkonoPapa さんのブログエントリが良いです.

と, 偉そうなことを書いていますが, 自分も訳しながら意味がわからなかった所がいくつもあったので *1, これらのリソースから勉強させていただきたいです.

まとめ

How Browsers Works をちゃんと読むために翻訳・公開しました. ブラウザ内部の動きがわかるとても良い文章でした. ただ細かい部分をもっと説明してほしいなと感じることが多くあったので, 他のリソースにも手を出していきたいです.

2011-09-07 追記

株式会社シャノン技術ブログ さんのほうでも翻訳が出ていました.

株式会社シャノン技術ブログ: ブラウザってどうやって動いてるの？（モダンWEBブラウザシーンの裏側）

こちらも見比べると良いかもしれません.

追記

シャノンさんの翻訳とともに, html5rocks から paul irish さんにリンクして頂きました!

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

*1：特に Gecko のルールツリー・コンテキストツリーのくだり. 訳もかなり微妙になってます…

コメントを書く

2011-07-21

プログラミング経験者が JavaScript を学ぶためのリソース

javascript | 00:39 |

久しぶりの更新ですが, お手軽アクセス稼ぎエントリです.

Hacker News を見ていたら面白い StackOverflow の質問を見つけました.

Page Not Found - Stack Overflow

プログラミングの経験はあるんだけど, JavaScript を勉強するのに良いリソース (本, ビデオチュートリアル, etc) はない? というもの. リンク集として有用だったので, ここにまとめてみます.

Douglas Crockford のビデオチュートリアル

最も支持を集めていたのは Douglas Crockford のビデオシリーズでした. 結構たくさん数があって, 基本を抑えたいなら昔のものが良く, 最近のものも歴史や ES5 のことを扱っていて面白いとのことです.

おそらく一番古いであろう "The JavaScript Programming Language" のシリーズは (全部ではないですが) 見たことがあったんですが, Crockford on JavaScript は知りませんでしたし, 興味を惹かれました.

The JavaScript Programming Language

※m4v ダウンロード注意

An Inconvenient API: The Theory of the DOM

※m4v ダウンロード注意

Advanced JavaScript

※m4v ダウンロード注意

Crockford on JavaScript

Crockford on JavaScript: A Public Lecture Series at Yahoo!

  • Volume One: The Early Years
  • Chapter 2: And Then There Was JavaScript
  • Act III: Function the Ultimate
  • Episode IV: The Metamorphosis of Ajax
  • Part 5: The End of All Things
  • Scene 6: Loopage

JavaScript: The Good Parts

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

Crockford の著書である本書も同時に薦められていました. この本は 200 ページ程度でコンパクトにまとまっているので, プログラミングの基礎がわかっているが JavaScript は初めてという人には確かに最適だなと思います. 内容はもちろん良いものですし, Crockford 節を楽しみながら読み進めることができます.

Eloquent JavaScript

f:id:cou929_la:20110722003120p:image

Eloquent JavaScript: A Modern Introduction to Programming

各所ですこぶる評判の良い Marijn Haverbeke さんのフリーブックです (print 版 もあります). 特徴はなんといっても html でできていてサンプルコードを実行しながら学べる点です. いろんなブログやらなにやらで紹介されていて, もう定番になりつつあると思います. サイトトップには Brendan Eich からの推薦文も載っていてすごいです.

Mozilla のドキュメント

Mozilla Developer Network

Mozilla Developer Network (旧 MDC) にあるドキュメントです. JavaScript のイントロダクションとしては以下の文章がオススメだそうです (自分は知らなかったです).

A re-introduction to JavaScript (JS Tutorial) - MDN

また MDC (MDN) といえばやはり JavaScript のリファレンス ですね. 関数の使い方などリファレンスをひきたい時は "hogehoge mdc" でググるのはもはや定番です.

その他

このへんからはロングテールな意見達です.

Javascript: The Definitive Guide
Javascript: The Definitive Guide (Definitive Guides)

Javascript: The Definitive Guide (Definitive Guides)

言わずと知れたサイ本です. 全てはここに書いてあるといっても過言ではない, 最強の一冊だと思います. 個人的にはどれか一冊だけ選べと言われたら間違いなくこの本を薦めますが, 網羅的で分厚いので, はじめの一冊として適切かはわかりません.

最近出た第 6 版では HTML5 や ES5, jQuery, Functional な書き方など大幅に加筆修正されていてオススメです.

YUI Theater

YUI Theater

おそらく米 Yahoo! での Tech Talk です. JavaScript や HTML 関連の動画が沢山あります. Y 社の中の人の話や YUI の話だけではなく, Ryan Dahl が Node.js について話している動画などもありました.

DOM scripting

DOM Scripting: The book

Jeremy Keith による書籍. 開発者というよりはデザイナ向けだそうです.

ppk on JavaScript

ppk on JavaScript

Peter-Paul Koch 氏による書籍だそうです.

Koans Projects: JavaScript

liammclennan/JavaScript-Koans ? GitHub

qunit のテストケースがたくさんあるんですが, それぞれ expected の値が書かれていません. これらのテストケースを全部通すために書いていくうちに JavaScript が学べるという教材です. コンセプトが面白いです.

JavaScript Garden

JavaScript Garden

JavaScript の tips を集めたようなドキュメントです. 言語の知識を前提にしているので, ひと通り基本を学んだひとが読むと良いかもしれません. サイトのデザインがかっこいいです.

JavaScript Gardenの読書メモ - prog*sig

日本語の読書メモも.

John Resig の書籍

Book: Secrets of the JavaScript Ninja by John Resig

Pro JavaScript Techniques, by John Resig – Mastering the New Wave of Web Development

jQuery の作者である John Resig の書籍達です. JavaScript Ninja は半分くらい読みましたが, 楽しんで読めるので良いです.

あとは jQuery のソース読めという意見もちらほらありました.

ECMA-262

ECMA-262

ECMA-262 の仕様を深掘りしているブログで面白いです.

Essential JavaScript Design Patterns For Beginners

Learning JavaScript Design Patterns

Addy Osmani 氏によるフリーブック. JavaScript のパターンについて.

まとめと感想

Best resources to learn JavaScript から有益そうなリソースを集めてきました. Crockford 氏の人気がすごかったです.

さてここで唐突に rmurphey さんの記事からの引用ですが, ”The number one thing that will make you better at writing JavaScript is writing JavaScript” という意見に自分は結構同意しています. JavaScript のいいところは人のコードが全部見れるところでもあるので, プログラミングの経験のあるひとならばとにかくコードを読んで作りたいものを作るのが手っ取り早いかもしれませんね.

コメントを書く
Profile

cou929_la

cou929_la

注意力散漫なWeb系エンジニア. 最近はJavaScript. @cou929

Entries
Category
Link
Follow cou929 on Twitter
JS Function Example: Specifying arguments with the Function constructor