@bigakubu アートとプログラミングがあればいい。

jsfiddleはweb上でjavascript・HTML・CSSの実行テストができる便利ツール

ネットすら不要!身近なブラウザでjavascriptを動かしてみる方法 でブラウザでjavascriptを動かす方法を説明しましたが、今回はjsfiddleという無料でユーザー登録も不要なサービスを使ってweb上でjavascriptのコードを書いたり実行したりする方法を紹介します。jsはもちろんjavascriptの略称。fiddleは「いじくる」のような意味。まさにjavascriptを気軽にいじって楽しみながらスキルアップできる最良のツールです。



jsfiddleって何ができるの?

  • HTML,CSS,javascriptを書ける(使いやすいテキストエディタになっている)
  • 即実行できる(各種アプリのインストールや環境設定不要、ブラウザ上ですべて完結)
  • 保存できる(なんと、登録なしでも!)
  • 変更履歴が残せる(保存したすべての古いバージョンに戻ることができる)
  • フォークできる(自分や他人の書いたコードを元に「別名で保存」的なイメージで別のコードを作れる)
  • 無料で使えて、よくあるメールアドレス登録すらも一切不要



jsfiddleを使ってみる

さっそく https://jsfiddle.net/ にアクセスしてみてください。スマホやタブレットでも見られないことはないですが、現状ではやはりPC推奨です。とりあえずはユーザー登録もしなくてOK。早速エディット画面になっています。最初に出てくる上部の情報バーは左上の[×Close]ボタンで消してしまってOKです。

初期画面はこんなかんじ


HTMLを書く

HTML サンプル


jsfiddleの4分割された画面の左上にある「HTMLフィールド」に上のコードを入力してみましょう。入力が終わったら早速左上のメニューの[Run]を押してください。

HTMLは「bodyタグ内」だけ書けばOK


右下の「結果フィールド」にHTMLで書いたとおりの内容が表示されます。ここで重要なポイントですが、jsfiddleの場合、HTMLは「bodyタグ内」だけを書けばOKです。headとかそういうのは不要。書いても特に問題は無さそうですが。ちなみに、現状では「ボタン1」は押しても何も起きません。


CSSを入力する

CSS サンプル


同様に、右上の「CSSフィールド」に上記CSSを入力して、改めて左上の[Run]を押してみましょう。

CSSが適用されてスタイルが変わった


右下の結果フィールドに、CSSが適用されて、背景色やボタンの大きさなどが変わりました。現状ではまだ「ボタン1」は押しても何も起きません。


javascriptを入力する

javascriptサンプル


最後に左下の「javascriptフィールド」に上のjavascriptを入力して、また[Run]を押してみてください。

画像ではわかりませんが、結果フィールドの「ボタン1」が機能するようになっています


実行結果はぱっと見では先ほどと同じですが、いよいよ「ボタン1」が機能するようになっています。以下の実行結果で試してみましょう。

サンプルの実行結果


「ボタン1」を押すと「HTMLサンプルです。」のテキストが「HELLO WORLD!」に変わったと思います。あまり楽しいサンプルではありませんが、jsfiddleでHTML、CSS、javascriptが気持ちよく入力でき、即座に実行できることが確認できたと思います。ちょっとした動作チェックや表示チェックにストレスなく取り組めるすばらしいサービスだと思いませんか。

tidy機能を使ってみる

tidyというのは「整頓」みたいな意味です。コードの中のスペースの使い方やインデント(行頭を位置調整)などが自動的に整形されます。綺麗好きの人にはたまりません。無駄に何回もtidyボタンを押してしまったりします。気持ちがいいですね。


save(保存)する

一般的なWebサービスでは「保存」のようなサーバなどのリソースを必要とする機能は「ユーザー登録(メールアドレスなど)必須」とか「有料オプション」であることが多いように思うのですが、jsfiddleでは保存も無料、ユーザー登録も一切不要でできてしまいます。

ただし、ユーザー登録をしていない状態だと当然ですがいわゆる「マイページ」的なものが無いため、保存したプログラムを一覧化してくれるような機能はありません。つまり、URLを別途メモしたりブックマークしておくことが必要になります。(そうしないと保存したファイルに二度とたどり着けない…)

また、ユーザー登録していない状態では、作成したファイルの「削除」はできません。jsfiddle側で作者かどうかの判断ができないのですから当然ですね。いたずらのつもりでも、jsfiddleに個人情報などを保存することはやめましょう。※saveするときにこの内容のアラートが表示されることがあります。


saveしても前に保存したバージョンがすべて残っている

jsfiddleの便利な点の一つです。saveをしても前のバージョンを上書きしてしまうわけではありません。URLの末尾をよく見てください。saveするごとに1ずつ番号が増えていくのがわかります。それぞれのバージョンは独立して保存されているので、以前のバージョンを見たいときは、URL末尾の数字を直接変更することで、過去にsaveしたすべてのバージョンを表示することができます。


forkしてみる

一見何も変わっていないようですが、よく見るとURLが新しくなっています。先ほど書いたように、saveでも過去のバージョンを残すことができますが、forkは元のファイルのコピーを「新規の別ファイル(URL)」として作り出すことができる機能です。エクセルとかパワーポイントとかの「別名で保存」に近いイメージですね。

よく使うパターンをfテンプレとして作って、forkでバリエーションを量産したり、人が作ったコードをforkして自分のファイルにしてから好きなように改造するとか、結構使い勝手の良い機能です。言葉ではわかりづらいかもしれませんので、ぜひ実際に体験してみてください。



Google Ad

Google Ad

Recommend

ネットすら不要!身近なブラウザでjavascriptを動かしてみる方法

概要 ChromeやSafariなどのいわゆるブラウザは、「インターネット上のウェブサイトを閲覧するアプリ」と思われていますが、実はローカル環境(ネット上ではなく自分のPC内で完結する環境)でも「HT …

プログラミング&デザインTips