jsFiddleを使えば、開発者はWeb開発の3つのコア要素を自由に操作できます。迅速なプロトタイピングとテストにこの強力なアプリケーションをぜひお試しください。
開発者なら誰でも、コードやデザインをすぐにテストし、場合によっては他の人と共有する必要がある状況に陥ったことがあるでしょう。jsFiddle はまさにその完璧なソリューションです。ユーザーの選択に基づいてカスタマイズされた環境を提供し、ブラウザ内で JavaScript、HTML、CSS コードをテスト（またはいじくり回す）できます。jsFiddle の簡単なツアーに参加すれば、jsFiddle の機能と使用すべき理由をより深く理解できるでしょう。
jsFiddle環境
jsFiddle を使い始めるのは、ブラウザにアドレスを入力するだけです。サイトが読み込まれると、様々なセクションに分かれたページが表示されます。ページの左側は、jsFiddle 環境を設定するためのメニューエリアです。サイトのメインセクション（右側）は、以下の4つのエリアに分かれています。
- CSS:テストで使用するHTMLに適用するCSSを入力します。ページのヘッダー部分の<style>要素の間に配置します。
- HTML:このエリアでは、テストで使用するHTMLを入力できます。デフォルトでは、左側のペインでオプションを指定しない限り、ページの<body>要素の間に表示されます。それぞれのエリアに入力されたCSSとJavaScriptと直接連携します。<script>要素内に入力されたJavaScriptも、このエリアに入力できます。
- JavaScript:この領域にJavaScriptソースを入力します。ページのヘッダー部分の<script type=”JavaScript”>タグ内に表示されます。左側のオプションで、使用するライブラリ/フレームワークを選択できます。そのため、このセクションのコードにそれらを含める必要はありません。
- 出力:ページのセクションに入力された CSS、HTML、および JavaScript の実行結果。
図Aは、 Internet Explorer 9で読み込まれたjsFiddleと空のコードペインを示しています。
図A
jsFiddle サイトのデフォルト インターフェース (画像をクリックすると拡大します。)
jsFiddleインターフェースの操作
jsFiddleの使い方は、サイトを読み込んでページの適切な場所にコードを入力するだけです。jsFiddleのインターフェースには、開発を支援する豊富な機能が用意されています。ページ上部には、これらの機能の一部を使用するためのボタンが並んでいます。これらのボタンには以下が含まれます。
- 実行:ページ上の領域に入力されたコードを実行し、結果を出力領域に表示します。
- フォーク:現在のコードをベースとして新しい例を作成します。
- リセット: jsFiddle インターフェースのすべての領域をクリアします。
- TidyUp:コード ブロックをインデントして JavaScript コードをクリーンアップします。
- JSLint: JSLint ツールを使用して、ページの JavaScript 領域のコードに対して静的コード分析を実行します。
- 共有： jsFiddleページのコードを他のユーザーと共有できます。FacebookやTwitterなどの共有オプションがあり、ウェブサイト（例えばブログ）に埋め込むためのリンクとコードも提供されます。
jsFiddleインターフェースの左側のペインでは、開発環境を設定できます。利用可能な機能の例を以下に示します。
- JavaScriptの配置：最初のドロップダウンでは、JavaScriptコードの配置場所と実行場所を指定します。デフォルトはonLoadで、ウェブページのonLoadイベントを介して実行されます。その他のオプションとして、ページのヘッダーや本文に配置することもできます。
- JavaScriptライブラリ： 2つ目のドロップダウンでは、MooTools、jQuery、Prototype、YUIなど、様々なJavaScriptフレームワークから選択できます。また、これらのツールの様々なバージョンをサポートしているため、テストの選択肢は無限大です。ダウンロードや環境構築をすることなく、これらのライブラリを自由に試せるため、非常に便利です。
- パネル： jsFiddleインターフェースには3つのコード領域がありますが、CSSとJavaScript領域にはオプションがあります。CSSの代わりにSCSS、JavaScriptの代わりにCoffeeScriptを使用することもできます。
- 情報:保存/共有時に重要となるタイトルと説明を入力します。また、使用するbodyタグとDTDを指定することもできます。
- 例:これを選択すると、ツールを簡単に起動して実行できるため、ツールの機能や使用方法を把握できます。
jsFiddleインターフェースが提供する多くの機能は、ほぼすべてのWebアプリケーション開発者にとって有益です。図Bは、Processing.jsライブラリを使用した例の一つである遅延マウストラッキングを示しています。HTMLとCSSが追加されています。
図B
jsFiddle で利用可能な例の 1 つを使用します (画像をクリックすると拡大します)。
ウェブ遊び場
jsFiddle サイトではこれを Web プレイグラウンドとしてブランド化していますが、これより良いキャッチフレーズは思いつきません。その理由は次のとおりです。
- 開発者は、Web 開発の 3 つのコア要素 (CSS、JavaScript、HTML) を操作できるようになります。
- 共有を容易にすることで、Webのソーシャル要素を取り入れています。
- 開発に関する厄介な質問に答え、結果をすぐに共有するのに最適な場所のように思えます。スクラップ プロジェクトやファイルを作成する必要はありません。
これはホスト型アプリケーションであるため、ピーク時にはパフォーマンスが低下する可能性があります。私の環境では今のところ問題はありませんが、jsFiddleの利用が増えるにつれて、より多くのバックエンドリソース（つまりサーバー）が利用可能になることを期待しています。jsFiddleブログでは、これらの問題に関する最新情報を入手できます。
今すぐ jsFiddle をチェックすれば、迅速なプロトタイピングとテストにその威力を発揮することがすぐにわかるでしょう。
毎週火曜日に配信される TechRepublic の無料ソフトウェア エンジニア ニュースレターにサインアップして、エンジニアリング スキルを最新の状態に保ってください。
トニー・パットン
トニー・パットンはWeb開発コラムを執筆しています。また、日々の仕事では開発者チームのマネジメントを務め、様々な開発プロジェクトに取り組んでいます。ルイビル大学を卒業し、.NET、Java、Lotus Notes/Domino、A+などの技術認定資格を取得しています。
