«« プロジェクトの情報共有にExcelは正直扱いづらい・・・そこで例えばCandyCane | さくら咲きワクワクしますね! »»

LiveweaveとJSHintでサクっとJavaScriptコーディング

2014年3月21日

このエントリーをはてなブックマークに追加
どこでもサクッとしかもバグが少ないJavascriptを構築するのにお勧めのWebサービスとしてLiveweaveとJSHintを紹介します。


自分の環境でない時に軽くコードを書いてみたい場合や、作ってみたコードが本当に動くかどうか不安なのでさくっとコードを試してみたいときなどに便利なのがWebアプリの紹介です。

私はHTML/CSS/JavaScriptをどんな環境でもすぐにテストできるLiveweaveと、軽くエラーチェックできるJSHintを便利に使わせてもらっています。

Liveweave は見ての通りHTML/CSS/Javascriptの入力欄とその結果枠で構成されています。

liveweaveの利用例

入力欄ではコードアシストと文法チェックが行われ、名前の通りライブ=リアルタイムで結果枠に反映されるのがいいですね。
Javascriptこんな書き方で通るのかな?と疑問を持った時に手軽にテスト出来るのが面白いです。
ただ注意して欲しいのが、for文のテストをしようとfor(;;)とか打ち込むと、ご想像の通りとんでもない事になるので注意。
for文が絡むコードをテストするときは、事前にエディタで組んでおいてコピペするか、もしくは(上のスクリーンショットでは隠れてしまっていますが)Live Modeスイッチをオフにしておくのが良いでしょう。


さて、コレで取りあえずは動くかどうかのJavaScript検証は出来るのですがー動けばいいと言うのではなく、簡単に分かる無駄な処理(関数内で同じ変数を再宣言する)とかバグの温床になりそうな箇所(例えば一致しているかの判定に===ではなく==を使う)などを洗い出してくれるのがJSHintです。

問題になってそうなところをズラッと一覧でだしてくれると、確かにここは言われる通りかも、と言うかエラー文を検索してみるとこんなスマートな書き方もあるのか!とハッとさせられました(自分の腕がアレだと言う話でもありますが)。

ということで、どこでもサクッとしかもバグが少ないJavascriptを構築するのにLiveweaveJSHintを押します。


投稿者 kuze : 2014年3月21日 23:16


■このエントリーに関連した記事

■「実用ソフト&サイト」カテゴリの最新記事

«« プロジェクトの情報共有にExcelは正直扱いづらい・・・そこで例えばCandyCane | さくら咲きワクワクしますね! »»


自己紹介
PHPやVBによるコーディングやシステムエンジニアを仕事にしています。
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、アニメやゲームなどのサブカルな話題を取り扱っています。

[PR]

instagram

カテゴリ

最近のエントリー

最近掲載した画像
  • 『閉鎖病棟~それぞれの朝~』見たけどセキュリティ緩すぎ(ネタバレ)
  • RSSリーダーInoreaderで知りたいニュースを効率的にチェック
  • RSSリーダーInoreaderで知りたいニュースを効率的にチェック
  • 任天堂の新フィットネスゲーム『リングフィットアドベンチャー』は今回も筋肉に効きます!
  • 任天堂の新フィットネスゲーム『リングフィットアドベンチャー』は今回も筋肉に効きます!
  • 映画JOKER見てきたけど気持ち悪い・出来いいけど(ネタバレ)
  • 「ウィンドウ位置記憶プログラム」で、ブラウザを付箋のように並べてサーバー監視環境を改善してみた
  • ラーメンを食べきるには(天下一品祭り編)
  • ラーメンを食べきるには(天下一品祭り編)
  • ラーメンを食べきるには(天下一品祭り編)
  • 仕様図作成にMarkdownやAdobe XDなどを活用してみる

RSS
更新情報はRSSをご利用下さい