30122011 javascript

javascriptを手っ取り早く学ぶためのjs本フローチャート

今年はjavascriptをちゃんと学ぼうという目標を立てて、Node.jsでWiki作ってみたり、ナポリン(富士のB級グルメのご当地キャラ)のゲームを作ったりしたので、一通りやった感は得られたかなと。

tw11128

Javascriptの本を何冊か読んだので、どういう順番で勉強したら効率的だろうかとGraphvizを使ってフローチャートにしてみた。

jsflow

パーフェクトJavascriptは必読かなと思うが、知識がない段階でいきなり読むと挫折する本なので、JGPかなんかで概要を掴んでおくか、普通にコード書けるようになってから読んだほうが得るものが多いですね。良書でしょう。

ProductName パーフェクトJavaScript (PERFECT SERIES 4)
井上 誠一郎
技術評論社 / 3360円 ( 2011-09-23 )


テスト駆動Javascriptは中級者向けですね。途中まで読んだけどこの本はおもしろい。Jenkinsと組み合わせて継続的インテグレーションまでやりたくなる。

それから、そろそろNode.jsの実戦向けの本が出てくれないかなぁと思っている。

13122011 javascript

パーフェクトJavaScriptはパーフェクト(回文風味)

初心者向けではないのでJavascript The Good Partsぐらいは読んでおく必要があるが、JGPを面白く読めたヒトにとってはPart2の言語仕様で復習できるうえに、さらに得るものがあるはずです。

特にEcmaScript第5版で追加された仕様の情報が嬉しい

Part4はJavascriptを必要とするHTML5のAPI(履歴管理、デスクトップ連携、オフラインストレージ,websocket)の解説になっていて、JGP -> HTML5と読書しているShizudeverにオススメな感じの内容になってますね。クリスマスプレゼントに自分に購入してあげるとイイかもしれませんね。

ProductName パーフェクトJavaScript (PERFECT SERIES 4)
井上 誠一郎
技術評論社 / 3360円 ( 2011-09-23 )


余談ですが、HTML5 Canvasは日本語訳がでるそうなので、そっちもあわせて買えば最強なんじゃないですかね。

Part.6はNode.jsの概要がさらっと書いてあるんだが内容は面白かった。

実践的な内容のNode本早く出ないかなぁ。

Part.2

6.8のbindの説明がわかりやすかった。

以下ECMAScript5

  • letを使ったブロックスコープができる
  • bindはFunction.prototypeのメソッド
  • use strictが使える(perl5みたいだな)

Part.3

Javascriptを外部ファイルに分けるメリット

  • ファイルがブラウザにキャッシュされる
  • シンタックスハイライト

CSS3でもそうだけどクロスブラウザ対応（特にIE6,7,8）を考えた場合にはjQueryとかを使ったほうが楽かなぁと思う。そういったブラウザを無視出来るなら、HTML5+CSS3+ECMA5は楽しい。

余談だが、パーフェクトJavascriptが大変に良かったのでパーフェクトJavaも書いましたとさ

ProductName パーフェクトJava (PERFECT SERIES) (PERFECT SERIES 2)
アリエル・ネットワーク株式会社
技術評論社 / 3780円 ( 2009-09-24 )


来年はAndroidな感じで。ってことでJavaとScalaかなぁ。

25112011 javascript

Node.jsでBDD

Vowsというのがよさそうなので、後でちゃんと触ってみる

ところでVowsのサイトの下の方にあるバーの挙動が面白い。ページをスクロールしてバーが上に張り付くとそのまま固定されるようになってる。

window.onscroll = function () {
  if (!docked && (menu.offsetTop - scrollTop() < 0)) {
    menu.style.top = 0;
    menu.style.position = 'fixed';
    menu.className = 'docked';
    docked = true;
  } else if (docked && scrollTop() <= init) {
    menu.style.position = 'absolute';
    menu.style.top = init + 'px';
    menu.className = menu.className.replace('docked', '');
    docked = false;
  }
};

ProductName Test-Driven JavaScript Development (Developer's Library)
Christian Johansen
Addison-Wesley Professional / 3652円 ( 2010-09-19 )


これの日本語版もそろそろ出るみたいですね。

27092011 javascript

パーフェクトJavaScriptが届いた

面白そうなんだけど、本が積まれてて読む暇がない。

ProductName パーフェクトJavaScript (PERFECT SERIES 4)
井上 誠一郎
技術評論社 / 3360円 ( 2011-09-23 )


どうしたもんか。

11.09.27 追記

とかいいつつ、ざざっと一気に読んでしまった。これは良書でした。理解が曖昧だったところとかがきっちり書いてあったので理解が深まった。後ろの方のコードは流し読みしてしまったので、あとでちゃんと手を動かす予定。

あとできちんと書く。

19092011 javascript HTML5

HTML5 CANVAS chapter 2

Shapeの扱い方全般。グラデーションのかけかたや、影の落とし方を覚えた。それからsaveとリストアが何をしているのかとか。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


Express+jade+coffeeで書いたのはGitHubにあげている。

18092011 javascript HTML5

HTML5 CANVAS chapter 1

文字当てクイズをCanvasで。コードはGitHubにおいた。

1-4

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


17092011 javascript

javascript読書会終了、来月からはHTML5読書会

JGPの最終話はJSLintの話

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


PythonにはPEP8、PerlにはPBPそしてjavascriptにはJSLint

綺麗なコードは好きですか？YES

そんな感じで。

時間が余ったので、LTっぽい話も。みんなネタ持ってんので、時間が余ってもそれはそれで有意義。

Project Euler @ksmakoto

もうすぐ100問超えなのか、すごいな。

CoffeeScript @kzfm

CoffeeScriptを使うことでJGPで指摘されているようなルールは結構解決すると思う。関数の最初で全ての変数宣言してくれるし、同値演算子もわかりやすいし。

ただ、デバッグはしにくいよね。

Windows8 @ishisaka

Windows8の起動はやい。うちのWinはXPで止まっているが「いいじゃん」って思った。あとjavascriptでデスクトップアプリの開発ができるらしい。

Soundation @yoshinabu

Chuckに続き、またも音ネタ。

さらにかぶせた。

次回からはHTML5の読書会になり、初回は10/29@三島の予定ですが、ラッキーなことに当日は三島バルが開催されるので、読書後、飲み歩きという楽しみが待っていますね。

ProductName HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


16092011 javascript coffeescript

HTML5 Canvasを読み始めた

600ページ超の熱い本だが、一通りきちんとコードを追いかけようと。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


ただ写経するだけではつまらないので、coffeescriptで書いていくことにする。

class Debugger
  log: (message) ->
    try
      console.log(message)
    catch exception
      return

canvasSupport = -> Modernizr.canvas

canvasApp = ->
  return if !canvasSupport()

  theCanvas = document.getElementById("canvasOne")
  context = theCanvas.getContext("2d")

  d.log("Drawing Canvas")

  drawScreen = ->
    context.fillStyle = "#ffffaa"
    context.fillRect(0, 0, 500, 300)
    context.fillStyle = "#000000"
    context.font = "20px _sans"
    context.textBaseline = "top"
    context.fillText("Hello World!", 195, 80)

    context.strokeStyle = "#000000"
    context.strokeRect(5, 5, 490, 290)

  drawScreen()

d = new Debugger
canvasApp()

Express+jade+CoffeeScriptという構成で書いてみている。 コードはGitHubに置いてある。

16092011 javascript Emacs

Emacsのcoffee-modeに" -> "を挿入するショートカットキーを設定した

CoffeeScriptはfunctionが->になっただけでしょっちゅう->を打たなければならない。

これは面倒なのでショートカットキーを割り当てた。

(require 'coffee-mode)

(add-to-list 'auto-mode-alist '("\\.coffee$" . coffee-mode))
(add-to-list 'auto-mode-alist '("Cakefile" . coffee-mode))

(add-hook 'coffee-mode-hook '(lambda ()
                             (local-set-key "\C-j" (lambda ()
                             (interactive)(insert " -> ")))
                 ))

;; CoffeeScript uses two spaces.
(defun coffee-custom ()
  "coffee-mode-hook"
 (set (make-local-variable 'tab-width) 2))

(add-hook 'coffee-mode-hook
  '(lambda() (coffee-custom)))

これでそこそこ便利になったが、もうちょっとカイゼンする余地はあるんだろうなぁ。

ProductName Emacsテクニックバイブル　～作業効率をカイゼンする200の技～
るびきち
技術評論社 / 2919円 ( 2010-08-03 )


おまけ

静岡javascript勉強会が10/1にあります。node.jsやjQueryMobileのトークも入ってて盛りだくさんなのでおもしろそうですね。枠が埋まっているけど、キャンセル待ちに入れておくといいと思います。

残念なことに僕がキャンセル第一号ですけどねー

10092011 javascript

9/17は第6回JavaScript読書会

来週末は最後のJavascript読書会です。

ついでに次回以降の読書会のネタぎめもやると思います。

  • 日　時　： 2011年9月17日（土） 13：00～17：30
  • 場　所　： b-nest 静岡市産学交流センター 演習室3
  • URL　　： http://www.b-nest.jp/
  • 地　図　： http://www.b-nest.jp/map.html
  • 定　員　： 20名
  • 費　用　： 1,000円 (学生・未成年無料)
  • 持ち物　： パソコン、課題図書
  • 課題図書： JavaScript: The Good Parts （ISBN-10: 4873113911）※各自事前購入
  • 環境　　： JavaScriptのコーディング用エディタ及び動作確認用webブラウザ
  • 範　囲　： 付録C　JSLint
  • 担　当　： きしもとさん

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


個人的にはこの本を読んでよかったと思っている。Node.jsのコードリーディングも楽になったし。

来週に向けてJSLintをコマンドラインから動かせるようにしておく

npm intstall jslint -g

これでjslintというコマンドラインで動くコマンドが手に入るのでちょっと使ってみる。

$ jslint echo.js

echo.js
/*jslint node: true, es5: true */
  1 8,13: Move 'var' declarations to the top of the function.
    for (var i=0;i < sockets.length; i++) {
  2 8,13: Stopping.  (42% scanned).

varは関数のトップで宣言しろとお叱りをうけた。

どっちかというとpep8に近い。