Brackets覚え書き〜JavaScript

  • 2014.11.11 Tuesday
  • 12:49


JavaScriptの開発環境で、Mac/Winの両方で開発できるものはないかと探していたら、
次のエディタが世の中では有名なようです。

■Sublime Text
http://www.sublimetext.com/

日本語環境で動かすまでが少々面倒ですが、ソースコードの全体表示や同じ文字列を検索したいときなど便利です。

■Brackets
http://brackets.io/

あのAdobeが作っている、オープンソースのエディタです。
UTF8しか読み込めない、CPUパワーがそれなりにいる(※)、
Chromeブラウザを入れないと、簡易Webサーバが立ち上がらない

という点だけが、自分の中では突っかかる物の、
取っつきやすさやプラグインなどのチューニングの手軽さではSublimeよりいいので、
こちらを主に使っています。

※Core 2 Quadでは使い物にならないくらいもっさり、
たぶんjshintなどのチューニングすれば使えるのでしょうが
Chromeもオープンソースなので、いじれば別ブラウザで起動できるのかもしれない。


で、Bracketsをはじめて使う時にチューニングしておいた方が良さそうなものの、覚え書きです。



■JSLint
デフォルトのJSLintがガチガチに構文をチェックしてくるので、
やや弱めのJSHintに落としてあげた方がよいです。

例えば、brackets-jshintとか

追加すると、JSLintよりもエラー件数が軽めになりますが、
デフォルトの表示件数が50件なので、隠れてしまっているエラーが埋もれてしまうことがある。

そこで、プラグインをチューニング。

Bracketsのメニューから ヘルプ→拡張機能のフォルダー でプラグインのフォルダを開き、
その中のuserの中にあるcamden.jsjintフォルダにあるmain.jsをエディタで開きます。

先頭17行目付近のdefaultConfigオプションにmaxerr: 500(※)を追加します。

defaultConfig = {
    "options": {"undef": true, maxerr: 500},
    "globals": {}
};


※例の500は500件表示。
いろいろ試して、500〜600件くらいですべてのエラーが表示される感じです。
その他のオプションはmain.jsのヘッダに書かれています。


JSLintやHintについては、
JSLint/JSHint
などを参照してください。


ちなみに、JSLintの無効化は他力ちゃん

Brackets で jslint無効化したい。



■minファイルを作る
いざリリース版を上げる際、最近では携帯端末向けに容量を軽くするため、minファイルを作ったりしますが、
minify-moreというプラグインを入れるとコンパイルしてくれて便利です。

■brackets-file-tree-exclude
バージョン3か4くらいからでしょうか、やたら起動が重くなったと思ったら
どうやらファイルをまたいで関数とかを関連付けする機能が付けられたようで、
そのために、すべてのファイルを開きまくって重くなっていることが分かった。
(30000以上のファイルを開くとエラーを起こす)

 

このプロジェクトには30000個以上のファイルが含まれています。


自分の場合は、ただ大量にあるデータファイルを置いていただけなのだが、
その中身も見ているので(ようなので)結果的に(なかなか)立ち上がらない状態となってしまったようだ。

ということで、いい方法はないかと探したら、
brackets-file-tree-exclude というプラグインがあった。

これを追加して、検索対象にしないフォルダを指定してあげるとその下を読まなくなるという感じである。

■プロキシ
プロキシサーバーを返さないと行けない場合は次の設定を brackets.json に追加してあげる。
例:プロキシーサーバーのIPが 192.168.0.1、ポートが8080の場合
 

'"proxy": "http://192.168.0.1:8080/",


■brackets.jsonの場所
上の設定を例えば入れたとして、最後にカンマを忘れてしまうと

brackets 設定ファイル

立ち上がらなくなる。
ということで、直接 brackets.json ファイルの修正が必要となる。
このファイルがどこにあるかというと、
 

C:¥Users¥[yourID]¥AppData¥Roaming¥Brackets


になる。
※¥は半角、yourIDは自分のID


■JSLint/JSHint関連

■W086エラー

switch case文で、複数の条件を持つ場合や、breakしないで次の条件に飛ばしたい場合、
 

case 1
case 2
...


といった感じにcaseを並べて書いたりするが、
このように書くと、次のような警告が出る。
 

Expected a 'break' statement before 'case'. (W086)


要するに、case 1 と case 2の間にbreakが書かれていないよというものである。

なので、
 

case 1
/* falls through */
case 2
...


という感じで、 /* falls through */ (次のcaseに流すよというコメント)を挿入してあげると良いようです。


■W117エラー(JSHintのみ)
例えば、単純に、
 

alert("test");


と書いてみると、
HTML内であれば警告はないとは思うが、jsファイル内で書くと
 

'alert' is not defined.(W117)


といった警告が出る

これは、読んでそのまま、alertという関数が宣言されていませんよといった内容である。
予約されている関数であれば無視しても良いとは思うが、自作の関数を別のjsで作ったりした場合でも出てしまうので、

jsファイル先頭に、
 

/* global alert */


を追加してあげることで、警告を回避できる。
自作の関数であれば、alertの部分(赤字の部分)を、例えば test関数なら、
 

/* global test */


としてあげればよい


■W041エラー
たぶん一番多く出るであろうエラー

if文での等号は普通に書くと == などで表現する
というかそう教えられてきたと思う。
例えばこんなソースをjavascriptで書いてみると、
 

if(arg == false){
     alert("arg");
}


こんな警告が出る。
 

Use '===' to compare with 'false'. (W041)


=(イコール)は2つではなく、3つ、つまり、=== で書きなさいと。

これはC言語やC#言語では変数はあらかじめ型をもって宣言されるが、
javascriptのようなscript言語では型を持たずに宣言されるため、

==と書くと、例えば、数字の1と文字の'1'はtrue(一致)と判断されてしまうことがある。

===とイコールを3つ書くと、さらに型まで厳密に検査してくれ、数字の1と文字の'1'は違うよと判断してくれるようになる。

自分で書いたソースは型を意識しながら書くと思うが、
汎用的に作ったりすると、どういう風に扱われるか分からないし、Nullやundefinedなどもあるので、
まぁ厳密に処理した方がよろしいということで、できれば仕様に合わせて変更をかけたほうが良さそうである。

なお、何も考えずに警告にしたがって一気に変更をかけると、計算結果が返ってこないなど不具合を起こすので、
(厳密に処理することで、いままでtrueだったところがfalseになってしまうことがある)
実際にデバッグしながら等式の変更をしたいところである。


詳しくは他力ちゃん
JavaScript の比較演算子 == と === の違い


この記事は追記されることがあります。


JSLint
JSLintについて調べてみた

関連投稿
画像の存在を確認する
JavascriptでVBのByRefっぽくする方法
IEでJSON読んだら・・・

Brackets おすすめエクステンション集

 

コメント
コメントする








    
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>

search this site.

よく使う、検索される投稿

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


※当ブログはリンクフリーですが、 取材や雑誌等で掲載される場合は、事前にお知らせください

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM