この記事は、Sencha Advent Calendar 2015 の16日目の記事です。
技術系のブログを書くのは１年ぶりくらいです。今回、Advent Calendarに初めて参加しました。普段は、業務用のクラウドサービスの開発・運用をしています。
Senchaは、わんくま同盟 のおそらく2012/02/25 の勉強会で知りました。それまでは、jQuery+HTMLテンプレートでAjaxをガリガリ書いていたのですが、なかなかしんどいものがありました。ExtJSのGridが動いているのをみて、そういうものを自作している時代ではないと悟りました。
それ以降は、フロントエンドは、PC、スマホ、タブレットむけにSenchaを使っています。ちなみに、バックエンドはC#で書いています。
Advent Calendarでも開発環境の話はいくつか出でますね。 JSで問題になるのはインテリセンスですが、みなさん、いろいろ工夫されているようです。
ところで、Chrome DevToolsでデバッグしているときに、最強のインテリセンスツールがここにあるじゃないか、と常日頃から思っています。
よくtypoしてしまう、Ext.ComponentQuery.queryだって、一瞬です。Chromeのコンソールで書いて動かしてコピペなんてことはよくやっています。
この記事では、以下で試した結果を書きます。
まずテスト用に、generate app したページに単純にボタンをつけました。
この文章をリロードなしに変更してみます。
Chrome Dev Toolsのsourceタブを開きます。
ここを編集したあと、consoleのファイル中にカーソルがあるまま、ctrl+sで保存できます。
背景が赤になってます。「この変更はローカルファイルで保存されてませんよ」っていう警告です。この時点で、メッセージをいったん閉じて再度開くと、変更されたように動きます。
ローカルファイルには反映されていないので、このままリロードすると変更は消えてしまいます。
該当するファイルを右クリックして、Map to file system resourceをクリックして、エクスプローラから該当するファイルと対応付けます。
いきなりすると、すべてのフォルダのファイルを検索してくるので、Main.jsなどよく使われるファイル名だと探すのに苦労します。
そういう時は、先にフォルダでも同じように対応づけられるので、先にフォルダ対応付けておくと検索で上の方に出てくるようになります。
さて、これで紐づいたはず。しかし、まだ警告が出ています。
これはExtJS側で、デフォルトでは、キャッシュをリフレッシュさせるためにファイルを呼び出す際に毎回新しいクエリ ?_dc=xxxを発行しているためです。
クエリまで含めて対応させているので、このままだと、次の?_dc=yyyになった時のファイルと対応しなくなってしまいます。
これは、app.jsファイルで、LoaderにdisableCachingをfalseを設定することで回避できます。
Ext.Loader.setConfig({
disableCaching: false
});
Ext.application({
name: 'test',
extend: 'test.Application',
autoCreateViewport: true
});
これでクエリは出なくなりました。なお、Chrome Dev Toolsでは以下のようにDisable cache という設定がありますので、こちらでキャッシュが残ってしまうことを回避できます。
これで、Dev Toolsで編集してもエラーは表示されずに、ローカルファイルに変更が反映されるようになりました。
今回改めて確認しただけで、まだこの方法で開発したことはないのですが、デバッグと修正には便利だと思います。
最近は、HTML+JS+CSSでデスクトップアプリをかける、Electron なんてのも出てきました。Chromium内臓です。であれば、Chrome Dev Toolsのようなインテリセンスを出すIDEは原理的には可能な気がします。
Electronはエディタによく使われているそうなので、もしかしたら、JSインテリセンス付きのアプリは既にあるかもしれません。そのあたりの情報をご存知の方がいましたら、教えてください。
※参考
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG
LIGさんはネタ記事がバズって有名ですが、技術系のブログもしっかり更新されているという話もよく聞きますね。