2012-05-10
Maintainable JavaScript を読んだ
javascript | |
- 作者: Nicholas C. Zakas
- 出版社/メーカー: Oreilly & Associates Inc
- 発売日: 2012/05/31
- メディア: ペーパーバック
- クリック: 127回
- この商品を含むブログを見る
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" メモ
斜め読み | |
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 (いつもデザインするときの流れ)
- ターゲットオーディエンスの定義
- 上記で定義したターゲットから, どのようにレイアウトするか考える
- 近いサイトを幾つかピックアップ
- レイアウトをスケッチする
- 手書き
- または photothop など
- とにかく変更しやすい方法で
- スケッチを html にする
- 20 分くらいでさっと
- sass, chrome dev tool を活用
- chrome dev tool でいろいろパラメータを変えて, スクリーンショットをとる
- グレイスケールでレイアウトして, カラーを考える
- 色調整, タイポグラフィの調整はいつも最後まで行う
- ここまではだいたい "ホームページ" のための作業
- ここまででできたなんとなく頭の中にあるコーディング規約に従って, 他のページの要素, サイドバーやセカンダリーナビゲーション, コンテンツページ, などの調整をする
- フィードバックと改善
- Required Reading
- Universal Principles of Design や The Design of Everyday Things のデザインの名著でもいいけども, ここでは web グラフィックデザインにフォーカスする
- Non-Designer’s Design Book
- 色の理論の基礎と C.R.A.P (コントラスト, 繰り返し, アラインメント, 近接) を学ぶ
- Five Simple Steps - A Practical Guide to Designing for the Web
- だいたい網羅されていておすすめ
- 自分は作者を応援するために買ったけど, 無料でも読める
- The Elements of Typographic Style Applied to the Web
- Web デザインにおけるタイポグラフィならこれ
- More Homework
- Typekit のアカウントをとって font をブラウズ, 構造を見たり, font stack について学ぶ
- 実際にサイトで使ってみる. フォントのフォールバック を忘れずに
- Lettering.js を学ぶ
- Web デザイナはタイポグラフィを見落としがち. 良いデザイナはテキストを UI として扱う
- Principles of grouping - Wikipedia, the free encyclopedia
- Particletree » Visualizing Fitts’s Law
- The Meaning of User Experience | User Intelligence
- But Stammy, we launch in one week!!?!111
- 良いアイコンセットを買う
- クリックできるものはすべて hover や action の素材を準備する
- フィードバック重要
- LoVe HAte: link, visited, hover, active
- とにかくアラインさせよ
- 色
- Color Trends + Palettes :: COLOURlovers や [0to255](http://0to255.com/) でピックアップ
- テクスチャ
- プレインなエッジではなくて, 1px のラインを入れる. "rgba(255,255,255, [value from 0-1])"
- 個別の要素のスタイリングは UI-Patterns.com へ
- より空白を
- 要素間の空白は, だいたいフォントサイズくらいとればいい
- たくさんのリストの要素はゼブラカラーに
- form input には padding を. スタンダードでないフィールドには tooltip で説明を. ":focus" もスタイリングする
- 一番大きな要素は, 一番重要な情報になってる?
- スペースになんでもつめこもうとしないこと
- 余裕があったら A/B テスト
- その他いろいろ
- Try New Things
- More books..
- Envisioning Information
- The Elements of User Experience
- Don’t Make Me Think
- Rocket Surgery Made Easy
- User Interface Design for Programmers
- Designing Interfaces: Patterns for Effective Interaction Design
- The Nature & Aesthetics of Design
- Designing for the Digital Age: How to Create Human-Centered Products and Services
- The Humane Interface: New Directions for Designing Interactive Systems
- The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity
- About Face 3: The Essentials of Interaction Design
- The Smashing Book
- The Web Designer’s Idea Book #2
- Designing Interactions
- The Information Design Handbook
- Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation
- The Art of Innovation Lessons in Creativity from IDEO, America’s Leading Design Firm
- Thoughtless Acts?: Observations on Intuitive Design
2012-01-03
Google JavaScript Style Guide 和訳を Revision 2.28 にあわせて修正しました
javascript | |
Google JavaScript Style Guide が Revision 2.28 にアップデートしていたので*1和訳も対応しました.
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
今回の変更点は,
- getter, setter を使う際の注意点の追加 (基本的に使わないことを推奨).
- JSDoc でのコメントの書き方について, セクションのレイアウトを変更.
というもので, diff は多いですが内容的には大きな変更はありませんでした.
2011-08-28
How Browsers Work を和訳しました
html/css | |
先週くらいに How Browsers Work: Behind the Scenes of Modern Web Browsers という, ブラウザ内部の挙動についての文章が話題になっていました. とても面白そうなのですが長い文章で普通読むとくじけそうだったので, 翻訳しながら読むことにしました. 原文のライセンスが CC だったので, せっかくなので同じライセンスで公開させて頂きます.
以下読んでみて思ったことなど.
この文章はなに?
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
2011-07-21
プログラミング経験者が JavaScript を学ぶためのリソース
javascript | |
久しぶりの更新ですが, お手軽アクセス稼ぎエントリです.
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
- Douglas Crockford: ”The JavaScript Programming Language”/1 of 4
- Douglas Crockford: ”The JavaScript Programming Language”/2 of 4
- Douglas Crockford: ”The JavaScript Programming Language”/3 of 4
- Douglas Crockford: ”The JavaScript Programming Language”/4 of 4
※m4v ダウンロード注意
An Inconvenient API: The Theory of the DOM
- Douglas Crockford: ”Theory of the DOM” (1 of 3)
- Douglas Crockford: ”Theory of the DOM” (2 of 3)
- Douglas Crockford: ”Theory of the DOM” (3 of 3)
※m4v ダウンロード注意
Advanced JavaScript
- Douglas Crockford: ”Advanced JavaScript” (1 of 3)
- Douglas Crockford: ”Advanced JavaScript” (2 of 3)
- Douglas Crockford: ”Advanced JavaScript” (3 of 3)
※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 ―「良いパーツ」によるベストプラクティス
- 作者: Douglas Crockford,水野貴明
- 出版社/メーカー: オライリージャパン
- 発売日: 2008/12/22
- メディア: 大型本
- 購入: 82人 クリック: 1,442回
- この商品を含むブログ (174件) を見る
Crockford の著書である本書も同時に薦められていました. この本は 200 ページ程度でコンパクトにまとまっているので, プログラミングの基礎がわかっているが JavaScript は初めてという人には確かに最適だなと思います. 内容はもちろん良いものですし, Crockford 節を楽しみながら読み進めることができます.
Eloquent JavaScript
Eloquent JavaScript: A Modern Introduction to Programming
各所ですこぶる評判の良い Marijn Haverbeke さんのフリーブックです (print 版 もあります). 特徴はなんといっても html でできていてサンプルコードを実行しながら学べる点です. いろんなブログやらなにやらで紹介されていて, もう定番になりつつあると思います. サイトトップには Brendan Eich からの推薦文も載っていてすごいです.
Mozilla のドキュメント
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)
- 作者: David Flanagan
- 出版社/メーカー: Oreilly & Associates Inc
- 発売日: 2011/05/10
- メディア: ペーパーバック
- 購入: 1人 クリック: 130回
- この商品を含むブログ (3件) を見る
言わずと知れたサイ本です. 全てはここに書いてあるといっても過言ではない, 最強の一冊だと思います. 個人的にはどれか一冊だけ選べと言われたら間違いなくこの本を薦めますが, 網羅的で分厚いので, はじめの一冊として適切かはわかりません.
最近出た第 6 版では HTML5 や ES5, jQuery, Functional な書き方など大幅に加筆修正されていてオススメです.
YUI Theater
おそらく米 Yahoo! での Tech Talk です. JavaScript や HTML 関連の動画が沢山あります. Y 社の中の人の話や YUI の話だけではなく, Ryan Dahl が Node.js について話している動画などもありました.
DOM scripting
Jeremy Keith による書籍. 開発者というよりはデザイナ向けだそうです.
ppk on JavaScript
Peter-Paul Koch 氏による書籍だそうです.
Koans Projects: JavaScript
liammclennan/JavaScript-Koans ? GitHub
qunit のテストケースがたくさんあるんですが, それぞれ expected の値が書かれていません. これらのテストケースを全部通すために書いていくうちに JavaScript が学べるという教材です. コンセプトが面白いです.
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 の仕様を深掘りしているブログで面白いです.
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 のいいところは人のコードが全部見れるところでもあるので, プログラミングの経験のあるひとならばとにかくコードを読んで作りたいものを作るのが手っ取り早いかもしれませんね.



