読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

mixiの新人研修トレーニングJavascript編の導入

プログラミング

f:id:inagex:20131210120829p:plain


mixi新人研修のトレーニングのJavascript編をやってみたので学んだことなどのメモです。
一緒にやっていきましょう。





けっして以前の謎のバズりを期待しているわけではないのであしからず。。

mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる - 理系大学生のwebメモmixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる - 理系大学生のwebメモはてなブックマーク - mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる - 理系大学生のwebメモ


驚異のはてぶ数でした…



基本的にSpeaker Deckのこのスライドをみながら進めていきます。


スライドの19枚目あたりに自動でjsのエラーチェックができる環境を整備していきたいと思います。


syntasticとjshint(とnode.js + npm)でJavaScriptの構文チェック環境(?)を整えたよ - 四角革命前夜syntasticとjshint(とnode.js + npm)でJavaScriptの構文チェック環境(?)を整えたよ - 四角革命前夜はてなブックマーク - syntasticとjshint(とnode.js + npm)でJavaScriptの構文チェック環境(?)を整えたよ - 四角革命前夜


こちらの記事がわかりやすいです。



僕もNeoBundleを使っているので

NeoBundle 'scrooloose/syntastic'

と記入して:NeoBundleInstallを実行します。

jshintの設定ですが、基本的にこちらと同じ設定にしました。

https://github.com/oryband/dotfiles/blob/master/jshintrc


これを~/.jshintrcに置きます。

npm install -g jshint

Node向けパッケージ管理ツールからjshintをインストールします。


これで環境が整いましたので

:SyntasticCheck

を実行すると

f:id:inagex:20131210123800p:plain


このようにエラーやヒント
bが定義されてないですよetc

が出てきます。

また有効か無効かを切り替えるには

:SyntasticToggleMode


またターミナルから

jshint 【確認したファイル名】

でtestできます。

例えばこんな感じでエラーが吐き出されます。

% jshint feed.js (git)-[master]
feed.js: line 0, col 0, ES5 option is now set per default
feed.js: line 19, col 1, ES5 option is now set per default
feed.js: line 24, col 10, Missing space after 'function'.
feed.js: line 29, col 32, Missing space after ','.
feed.js: line 29, col 53, Missing space after ','.
feed.js: line 29, col 61, Missing space after 'function'.
feed.js: line 24, col 17, Unmatched '{'.
feed.js: line 24, col 1, Unmatched '('.
feed.js: line 24, col 1, Wrapping non-IIFE function literals in parens is unnecessary.
feed.js: line 34, col 1, Expected an assignment or function call and instead saw an expression.
feed.js: line 34, col 1, Missing semicolon.


まだまだ今後に続きます。