JavaScriptのお勉強をするときの話（環境構築編）

この記事は、JavaScriptを勉強して可能なら使えるようになりたいけど、どこからやっていいかよくわからない、という昔の僕みたいな人のためのガイドです。ちなみにいささかCUI寄りです。

初めに断っておきたいのは、僕が多少なりとも真面目にJavaScriptを勉強し始めたのは10ヶ月ほど前のことなので、いわゆるマスター的なヨーダでも何でもなく、未だ途上の何たらだということです。

開発環境を用意する

JavaScript入門、みたいな紙媒体やWeb上の記事には、「JavaScriptは基本的にはブラウザ上で動く言語なので、特別な実行環境を用意する必要はありません！楽勝ですね！」みたいなことがよく書いてあるのですが、アホか、という話です。

ブラウザ上で動かす（場合が多い）言語であるからこそ、むしろ実行はめんどくさいです。

「ワイはとにかくDOMが操作できればええんや！言語仕様とかどうでもええわ！」という人は有名なライブラリの公式ページへGo! 言語→応用、というステップを踏みたい、あるいは「言語→ちょっとした応用」という細かいローテーションを回して学習したい、という人はコマンドラインから実行できる対話環境兼インタプリタと、ブラウザで簡単に書いたコードを試す環境の2つを用意しておくことをお勧めします。

対話環境兼インタプリタを用意する

というわけで対話環境兼インタプリタですが、要は、hogeコマンドを実行するとREPLが立ち上がって、hoge を実行するとで指定したJSファイルの中身が実行される、というhogeコマンドがあると勉強には便利なわけです。REPLは主に、他の言語を既に理解している人が「この言語でのこういう機能はどういう挙動なのかなー」と試すのに適しています。ファイルを直接食わせて実行できる環境は、ブラウザに依存しない部分の動作を確かめたい時に役立ちます。

コマンドラインから使えるJSの実行環境はRhino, SpiderMonkey, Nodeなど色々あるのですが、最近の流行によって導入が簡単になっていると思われるNodeをここではおすすめしておきます。ぶっちゃけコマンドラインから起動できれば何でもよいです。

ブラウザで実行するための環境

サーバサイドJSが流行っている昨今とは云えどもやはりJavaScriptで最終的にやりたいことの多くはDOMの操作です。DOMを触るコードを実行するには、DOMをブラウザに構築してもらうためのhtml, およびそれに予め飾りをつけておくためのcss, そして実行したいプログラムであるところのjsなどのファイルを、何らかの形でどこかに置いて、ブラウザに読み込んでもらう必要があります。

htmlをサーブする、その最も（？）古典的な方法はapacheなどのサーバを立ててブギウギすることだと思いますが、はっきり言ってちょっとしたJSのコードで少しDOMをいじるだけのためにapache立てるのはめんどくさいです。

ここから話は分かれます。

既に何らかの言語のたしなみがある場合

既にサーバサイドで使われる何らかの言語をある程度やっている場合、ちょっと時間をかければワンライナー、あるいは短いコードでローカルのファイルをstaticに配信するだけのhttpdを立ち上げる方法を見つけられるはずです。

Perlだと有名ですが

plackup -e 'use Plack::App::Directory; Plack::App::Directory->new( { root => "./" })->to_app'

とかです。

見つけられないとすればそれはあなたがイケてないか、あなたの使っている言語がイケてないかのどちらかです（大半の場合は前者でしょう）。「それ以外の場合」に進んでください。

ちなみに、僕が「あーあのDOM APIってどう動くんだっけ、試すか」となった時は、「cd ~/tmp」→「vim hoge.html」→「html:5C-y,と打鍵」→「必要なコードを書く」→「http（先程のワンライナーのalias）」→「ブラウザで開く」という流れでやることが多いです。

html:5C-y,の部分が意味不明ですが、これはzencoding-vimでHTMLの雛形を作っています。空のhtmlファイルを開いたときのskeletonを用意しておくか、あるいはコピーするための雛形を用意しておくのでも構いませんが、毎回同じようなhtmlを書くのはダルいので何らかの形でショートカットを作っておくのがオススメです。

それ以外の場合

サーバサイドとかよくわからんわ、という場合はDropboxを使うのがおすすめです。DropboxディレクトリのPublicにファイルを置くと、それを http://dl.dropbox.com/u/[userid?] とかそんなURLでアクセスできるようになります。例えば~/Dropbox/Public/index.htmlというファイルを作ったとすると、そのURLはhttp://dl.dropbox.com/u/[userid?]/index.htmlなるURLでアクセスできます。（このURLはDropboxのWeb UIからファイル名を右クリックで調べることができます。）

同様にcssやjsファイルを置いて、それをindex.htmlの中から参照して簡易Webサーバ（staticなファイルの配信のみ）としてDropboxを使います。今回はモノがJSなので、この機能で十分に役を果たします。

DropboxのPublic以下は基本的に誰からでも見えるので、イヤンウフンアハンな画像などを置くのはやめましょう。というかDropboxにそういうものや大事なものを置くのはやめましょう。

HTMLやCSS, JavaScriptなどをWeb上で編集してそのままレンダリング & 実行してくれるサービスは今ならいくらでもあると思うので、それらを使ってもいいと思います。僕がここでDropboxをおすすめしているのは、自分のいつも使っているエディタ以外でプログラムを書こうとすると発狂してしまうからに過ぎません。