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

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

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

JavaScriptとCSS3を学ぼう

jsdo.itというサイトと連載の概要についての概要は把握できたと思いますので,HTML5やJavaScript,CSS3といったことを勉強することのメリットや必要性について解説したいと思います。

CSS3について

本連載ではJavaScriptだけでなくCSS3も取り扱う予定です。CSS3ではこれまでと比べて表現できることがとても多くなります。これまで画像をつかわないと実現できなかったことや,JavaScriptを使わないとできなかったこともCSSだけでカバーできることも多くなります。例えばグラデーションや角丸,テキストやボックスに影をつけたり,簡単なアニメーションや3Dの変形などもCSSで可能になります。

また,jsdo.itにはCSS3だけのコンテンツも多くあがっています。たとえば以下のようなものはCSSだけできています(現時点で以下のコードの対象ブラウザはGoogleChromeとSafariのみです⁠⁠。

forked from: CSS3でサルをカク - jsdo.it - share JavaScript, HTML5 and CSS

現状ではCSS3に対応していない古いブラウザも対応しないといけないケースも多いのでPCサイトで使う機会はあまりないかもしれませんが,iPhoneなどのスマートフォンではほとんどフルに使うことができますし,これからブラウザの対応も進んでPCサイトで使えることが多くなってくると思うので,今のうちにCSS3を覚えておくといいのではないでしょうか。

なぜJavaScriptが必要なのか

最近HTML5とその周辺技術を中心とした新しい技術の仕様策定が進み,ブラウザのほうも実装が着々と進んでいます。これらの技術はJavaScript絡みの仕様がとても多いものになっています。これまで文章を扱うことを主目的としていたWebサイトがアプリケーションを扱うコンテンツにシフトしてきて,JavaScriptの重要性がさらに増してきました。そういった理由からも動的なWebサイトをつくるうえではほぼJavaScriptが必須になってきています。

複雑なWebアプリケーションをつくらない場合でも,ちょっとしたエフェクトや動きをWebサイトに加えようと思ったらJavaScriptが必須です。プログラマだけでなくデザイナやマークアップエンジニアなどの職種でも覚えておくと様々な場面で役に立つことになります。

今回の連載では触れませんが,iPhoneやAndroidなどはJavaScriptでネイティブアプリを書くことができるライブラリもでてきていますし,サーバーサイドのJavaScriptという技術も最近注目され始めています。もしかしたら将来,JavaScriptだけ書ければWebアプリケーションやOSのネイティブアプリケーションをつくることができるようになるかもしれません。

また,業務で使うことがなくてもJavaScriptを覚えておくと便利なことがあります。それはブラウザの拡張やブックマークレットを書くことができるようになることです。ブラウザの拡張などはとても敷居が高いように思うかもしれませんが,JavaScriptが少し書ければすごく便利になることもあります。

たとえばPCで見ているサイトを携帯電話などのモバイル端末で見たいときにQRコードをその場で生成するブックマークレットがあると便利です。そのブックマークレットはGoogle CodeのAPIを使うと以下のようになります。

javascript:location.href='http://chart.apis.google.com/chart?chs=200x200&cht=qr&chl='+encodeURIComponent(location.href);

これをブラウザのアドレスバーに打ち込めば今見ているサイトのQRコードがブラウザに出ると思います。

このようにJavaScriptを覚えておくとさまざまな場面で役に立ちますし,これからもっとJavaScriptの需要が増えることは間違えないでしょう。

ライブラリやツールの充実

一昔前はJavaScriptを書くにはクロスブラウザの対応やデバッグのしにくさなどの問題でとても面倒でした。しかし最近ではjQueryなどのクロスブラウザの問題や面倒な処理をすべてやってくれる便利なライブラリや,FirebugやChrome Developer Toolなどのデバッグツールが揃ってきたおかげで以前と比べてJavaScriptの敷居が大きく下がっています。プログラムをまったく書いたことがないデザイナやマークアップエンジニアの人でも少し勉強すればちょっとした動きのあるサイトをつくれるようになります。そういった理由でもJavaScriptを勉強するのに今はとてもいい時期なのではないかと思います。

試しにjsdo.itを使ってみよう

それでは最後に次回から記事に向けて簡単なJavaScriptをjsdo.itで書いてみましょう。今回つくるものはボタンがクリックされたらアラートのダイアログを出すという簡単なものです。jQueryを使って書いていきます。

まず以下のコードをforkしてください。

今の時点ではボタンをクリックしても何も起こりません。これにJavaScriptのコードを書いて動くようにしましょう。

まずalertを出す関数をつくります。

function doAlert() {
  alert('clicked!');
}

試しにこの関数を呼び出してみます。以下のコードをつけたしてください。

doAlert();

jsdo.itでは編集するとすぐに反映されるので編集後すぐにダイアログがでれば大丈夫です。次にこの関数の呼び出しをボタンがクリックされたときに行うようにしましょう。そこで上記の関数呼び出しのコードを以下のコードに置き換えます。

$('#btn').click(doAlert);

これでボタンをクリックしたときにダイアログが出るようになったはずです。この$()やclick()ということろがjQueryの記述方法です。jQueryでは$(セレクタ)という記述でHTMLの要素を取得できます。ここでは取得してきたbutton要素に対してclickしたときにdoAlertを実行せよという記述をしています。

もう少し簡潔に書くこともできますが,今回はjsdo.itでコードを書く流れを体験してもらうだけなのでこれ以上詳しくは説明しません。

今回は以上になります。次回から本格的にjsdo.itを使ってJavaScriptとCSS3を学んでいきましょう。

著者プロフィール

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

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

Twitter: @hokaccha