ちゃんv(º﹃º)vメモ

VB6.0とExcel方眼紙の呪縛から解き放たれるべく日々奮闘中

関東Firefox OS勉強会 6th #FxOS で学んだ、エディタ選定のポイントとFxOSデバッグ入門

2014/02/16に開催された 関東Firefox OS勉強会 6th にチューターとして参加させていただきました!

Firefox OS(以下、FxOS)でアプリ開発初心者を対象としたねらい通り、
0からスタートでアプリ公開まで一気に学べる、素晴らしい勉強会でした。

全体の流れは

とても詳しくまとめてくださっています。ありがとうございます!

今回初めてチューターを経験させていただいた感想は、
一緒に悩んだ後、問題なく動いた瞬間がめちゃくちゃ嬉しいということでした。
やっぱり開発ってすっごく楽しい!

でもできるだけ悩むのは少なくしたい…。
という訳で、チューターとして一緒に悩んだ問題と、簡単な対応を残します。
一緒に問題にぶつかった参加者の方々は参考にしてみてください。

ぜんぶjsのせいだ(った)。

ハンズオンがはじまり数回出番があったのですが、
その全てが、JavaScriptが上手く動作していないという問題でした。

根本原因は何だったのかというと、
資料のコードをコピペして進行していった際のコピペミスでした。
(ところで、かっしーさん(@kassy_kz)の、このハンズオン資料のクオリティはすごく、これだけでかなりの勉強ができます。この量をあの時間でやりきるなんて…)

コピペして値をいじってみて何かを掴むことは大事なことですし、
コピペから学べることは非常に多くあります。

しかし、今後もコピペミスで時間を割き続けるのは少しもったいないですよね。
どういうポイントで起こりやすいか考えてみて、避けていきたいところです。

そこで、どういうポイントで起こっていたのかまとめてみました。

エラーが起こったパターン

  1. Tabとスペースが混在してよくわからなくなっていた
  2. コードの途中に改行が入っていてよくわからなくなっていた
  3. コピペを重ねるうちに意図しない場所にペーストしてしまっていた

以上の3パターンからJavaScriptの読み込みエラーが発生していました。

全て同じ場所でエラーが起こっていたわけではなく、
私自身も対応した問題と別の箇所で2,3度コピペミスのエラーを起こしたことから、
各々の環境(エディタ、画面・ブラウザのサイズなど)に依存した問題だと思います。

これからもいつどこで起こるかわかりません。
エラーが起こったそのときに素早く突き止めることを目指してみましょう。

エディタ選定のポイント

好きな環境で開発できるのはFxOSの魅力だと思っています。
私は、コードが読みやすいと感じるエディタを好んで使う傾向にあります。
今使ってるエディタやIDEはすべて好きです。今日も最高に使いやすい!

でも、好きなものなんて人それぞれ、強制なんてできません。
強制できるならEmaなんちゃらとかVなんちゃらで揉めたりしませんよね。

なので、もし今使っているエディタに不満を感じていたり、何も感じていなかったり、
読みやすい・便利なエディタが好きになれそうなら、以下に重点を置いて選び直してみましょう。

  • 半角スペース、全角スペース、Tabスペースが一目で分かる
  • コードフォーマット(自動整形)機能がある
  • シンタックスハイライト(色付け・色分け)ができる

例えば当日オススメされていた Sublime Text 2 はこの機能が全て使えます(追加できます)。

この機能を使うだけで、JavaScriptファイル編集時に起こるエラー数はグンと減らせます。

試しに、当日のファイルapp.jsをちょっとダメにしてみて(かっしーさんごめんなさい)
Sublime Text 2を使って見てみます。

101行目にコメントアウトミス的なものを、
107行目(影響が出てるのは108行目)にコメント中の改行を、
110行目に全角スペースと半角スペースとTabの混在を、
入れてみました。

f:id:chan_gami:20140217233415p:plain

Sublime Text 2で見ると、何か変なものが混ざっていることが一目でわかります。
こういったものに気づくチャンスが増えると、ミスも減っていきます。

ツールを上手に使って余計な労力は使わないようにしましょう。

アプリマネージャのデバッガを使ってみたけど…

先ほど改変したjsファイルをそのまま使ってFxOSシミュレータで動かしてみましょう。
タイムラインを表示する部分を潰してしまったので、こんな画面が表示されると思います。

f:id:chan_gami:20140218054942p:plain

「どこかでエラーでも起きているのかな?」と思い、デバッグしてみることにします。
デバッガはアプリマネージャから起動します。

f:id:chan_gami:20140218053226p:plain

f:id:chan_gami:20140218053023p:plain

1を押してデバッガ画面を開いて…あれ、2の部分にapp.jsが表示されていない……
読み込まれているJavaScriptは全て表示されるはずですが、少し様子がおかしいです。
コンソールに何かエラーなどが表示されていないか見てみましょう。

f:id:chan_gami:20140218053422p:plain

はい、コンソールに何もでていないんです。

デバッグFirefox(ブラウザ)を使う

当日のデバッグはここから目grepに切り替えて対応したのですが、
よく考えたらFxOSアプリはWebアプリと同じ構成だし、
Firefoxブラウザは昔からデバッグに定評あるし、
シミュレータではなく、Firefoxブラウザでindex.html(問題とするhtmlファイル)を読み込ませてみましょう。

f:id:chan_gami:20140218053545p:plain

サイズをFxOSシミュレータに寄せたらホントにWebアプリが動いてるっていう実感がわいてきますね。

さて、Firefoxブラウザのデバッガを開きます。
Macの場合は、 + + S
Windowsの場合は、Ctrl + Shift + S

そして、コンソールを見てみると…

f:id:chan_gami:20140218053933p:plain

ちゃんと表示されていますね!
このメッセージから、app.jsの101行目でsyntax errorが起こっていることがわかります。
101行目はコメントアウトミス的なものを仕掛けた行です。
確かにJavaScriptがちゃんと読み込めてないことが原因で上手く動作していなかったのでした。

その他にも、上手くスタイルが適用されていない場合や、
どのスタイルが適用されているか知りたい部品がある場合など、
FxOSアプリに限らず、Firefoxブラウザのこの機能は強い味方になってくれます。
これを機に使い方を覚えてみてください。

FxOSアプリ開発を行っていく上ではFirefoxブラウザは必須なので、
この機能を使うと各々の環境に依存せず問題を共有、解決できると思います。

まとめ