読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第1回 jsdo.itってなんだろう?

この記事を読むのに必要な時間:およそ 3 分

はじめに

はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では,マークアップエンジニアやデザイナを対象に,『jsdo.it -Share JavaScript,HTML5 and CSS-』(以下,jsdo.it)というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので,jsdo.itというサイトの概要や連載に向けての事前準備を解説します。

jsdo.itとは

jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで,Web上でHTML5,CSS,JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ,トップページに並んでいる人気のコードを見るだけでも楽しむことができます。

また,単にコードを書いたり人が書いたコードを見たりするだけでなく,他にもたくさんの機能がありJavaScriptやCSSを学ぶ上でも非常に有効に活用することができるサービスです。jsdo.itの基本的な使い方や,様々な機能についてこれから解説していきます。

jsdo.itでコードを書いてみよう

まずはjsdo.itでユーザ登録を済ませたら「コードを書きはじめる」ボタンで押してコードを書いてみましょう。

コード書きはじめる

コード書きはじめる

ボタンを押すと以下のような画面になると思います。

jsdo.itの基本画面

jsdo.itの基本画面

この画面の左側がコードの部分で右側が実際に結果が表示される画面です。さらに左側のコードの部分は3つに分かれており,上からJavaScript,HTML5,CSSのコードが書かれています。ここで編集したコードが右側に反映されるという仕組みにになっています。左側のコードの部分を編集すると右側の表示が変わるのをぜひ確認してみてください。

多彩なライブラリが使用可能

jsdo.itではjQueryやPrototype.jsといった有名どころのライブラリは最初から用意されており,簡単に使うことができます。JavaScriptのコード部分の右上にある「Add Library」というとこを押すと以下のような画面になります。ここでMajor Librariesということで好きなライブラリを選択してAddを押すと選択したライブラリを読み込んで使うことができます。

ライブラリの選択

ライブラリの選択

また,あらかじめ用意されているライブラリだけでなく,自分で書いたコードや他人が書いたコードでもjsdo.itに上がっているコードであれば,上記画面の「Your Recent Code」「Input URL」のところから使用することができます。つまりあらかじめ用意されていないライブラリでも自分でjsdo.it上に上げていけばどんなライブラリでも使用することができるようになるのです。

forkして広がるコード

jsdo.itの重要な機能の1つにforkがあります。forkとは他人が書いたコードを自分のところにコピーして編集できるようにすることができる機能です。それだけでなく,自分のコードが誰にforkされたのかを確認できたり,元のコードからどこがどのように変更されているかのdiffを確認できるというところも非常に便利です。

このfork機能があるおかげで,自分が書いたコードが思いもよらないような方向に進化したり,うまく書けなかったところをforkして直してもらったりとさまざまなコミュニケーションが生まれます。この仕組みが単にコードをブラウザ上で書くことができることができるだけのサービスにとどまらず,コードを介したコミュニティが生まれるようになっているjsdo.itの強みといえるでしょう。

気になったコードがあったら以下の図のforkボタンを押して編集してみましょう。

forkで編集している様子

forkで編集している様子

困ったときのquestion

jsdo.itではquestionというタグをつけるとQ&Aのページに掲載されるという仕組みがあります。わからないことがあればquestionというタグをつけて,どこがわからないかをコメントに書いて投稿しておけば誰かがforkやコメントで解決策を教えてくれるかもしれません。

questionタグを付けることで外のユーザに教えてもらえる機会が増える

questionタグを付けることで外のユーザに教えてもらえる機会が増える

質問のしかたや答え方などの詳しい使い方はQ&Aのトップに載ってますのでそちらを参照してみてください。

連載の概要

今回の連載ではこのようなjsdo.itの機能を使ってJavaScriptやCSS3を楽しみながら学ぶことができるようなコンテンツを予定しています。具体的にはこちらで何かお題をだし,そのお題のコンテンツを途中まで作ってあるコードをforkして完成してもらいます。そして本連載でそのお題を解決する上でのポイントや手法などを解説し,お題をこなしていけば自然と実用的な知識を身につけられるようになり,ちょっとしたエフェクトから始めて本格的なWebアプリケーションをつくれるようになることを目指します。

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha

コメント

コメントの記入