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

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

概要

ChromeやSafariなどのいわゆるブラウザは、「インターネット上のウェブサイトを閲覧するアプリ」と思われていますが、実はローカル環境(ネット上ではなく自分のPC内で完結する環境)でも「HTML等を解釈して表示する(レンダリングする)アプリ」として使えるのです。HTML等と言ったのはHTMLの他に、CSS、画像、そしてjavascriptも扱えるからです。というより、そもそもjavascirptはブラウザが解釈して実行するプログラミング言語です。つまり、javascriptを自分で書いて動かしてみるためには、特別な環境設定やサーバの用意などが不要なだけでなく、ネット環境すら不要なのです。


ブラウザはGoogle Chromeを前提に説明します

まずはブラウザ(Google Chrome)の準備です。もともとChrome使ってるよという人はとばしてOKです。 基本的にjavascriptはOS(WindowsかMacかなど)やブラウザの種類に依存しないので、ブラウザでも動くプログラムが作れるのですが、ブラウザによって動きや表示が若干の違いが生じることがあります。 このサイトではプログラミング入門者にスムーズに学習してもらうためにブラウザはGoogle Chromeを使っているという前提で話をすすめたいと思います。


ちなみにChromeは世界シェア1位。さらにプログラミング向けの拡張機能も充実しているので使っておいて損はないはずです。 もちろん無料です。尚、PCとタブレットやスマホの違いがどんどん無くなってきているので近い将来にはスマホでプログラミングも余裕でできるようになりそうですが、現段階ではPCを使うことを想定します。

さっそくGoogle Chromeの公式ページからデータをダウンロードして、自分のPCにインストールしてください。 インストール方法がわからない人はGoogleのサポートページに詳しい説明があるので参考にしてください。


おすすめテキストエディタBracketsをインストール

次はテキストエディタのインストールです。javaScriptに限らずプログラミング言語は基本的にはテキスト(文字)で書きます。 PCで文字を書くというとワードなどを思い浮かべるかもしれませんがそういうのアプリは文字の大きさや色など様々な「装飾」の要素(プログラミングには不要というか邪魔なもの)を大量に含んだデータになっていて、プレーンなテキストデータを扱うプログラミングには不向きなのです。 プログラミング向きのテキストエディタは数多くあるので自分の好みのものを使っていただいてよいのですが、ここではブラウザと同じくMacでもWindowsでも同じ説明ができるようにするためにどちらでも使えて無料でシンプルかつ高機能なBracketsというテキストエディタを使っていただきたいと思います。


Bracketsの公式ページからデータをダウンロードして、自分のPCにインストールしてください。 インストール方法がわからない人はMacでBracketsを使ってみる〜インストール編〜 – Qiita やWindowsの人はBrackets初心者のメモ – Qiitaなどのわかりやすい記事がたくさんあるので参考に。


HTMLを書いてブラウザに表示する

まずはここから!javaScriptを動かすベースになるHTMLを書いてブラウザに表示してみます。HTML(HyperText Markup Language)はウェブページを記述するのに使われる言語ですが、プログラミング言語ではなくマークアップ言語と呼ばれます。基本的にはプログラムではなく文書を書くための言語で「ここはタイトル」「ここは重要な語句」という感じで言葉に意味づけをする(マークアップという)ために使います。 javaScriptはHTMLで書かれたウェブページの上で動かすことがほとんどなのでまずはHTMLでプログラミングのステージを作るわけです。ではさっそく次のコードで試してみましょう。

HTML(index.html)


まずBracketsを起動し、メニューの「ファイル」>「新規作成」。上のHTMLをそのままコピペ。 「ファイル」>「名前をつけて保存」でファイル名を”index.html”として保存。保存先はデスクトップでもどこでもよいのですがここでは「test」という名前のフォルダを用意してその中に保存してください。


拡張子を「.html」にしたことでこのファイルがHTMLファイルだと認識され、コードが次図のように「色付き」になったと思います。 HTMLファイルの準備についてはひとまず完了です。



HTMLをブラウザで開く

次にブラウザ(Chrome)を起動します。Chromeのメニューの「ファイル」>「ファイルを開く…」を使います。(普通にウェブブラウザとして使うときはめったに使わないメニューですね…) 先ほど保存した”index.html”を開くと、次のような表示になるはずです。


きわめてシンプルですが「HTMLを書いてブラウザに表示する」ことができました。ブラウザで表示するというのは、テキストエディタのようにコードをそのまま表示するのではなくコードをブラウザが解釈して適切な形で文書(ウェブページ)として表示する、ということです。 ちなみにChromeでは画面にHTMLファイルを直接ドラッグ&ドロップするだけでも簡単にファイルを開くことができます。

尚、「ボタン1」というボタンが表示されていますが、今の段階では押してみても何も起こらないはずです。後ほどjavascriptを追加してこのボタンに機能をもたせるように修正します。


HTMLについての補足

このサイトはjavascriptがテーマなので詳細は説明しませんがポイントを少しだけ。 HTMLは先ほど書いたように文章に「意味付け」をする役割を持ちます。例えば<title>〜</title>で囲まれた部分(上の例では「HTMLサンプル」という部分)に「ここはタイトルですよ」という意味付けをしています。 この<title></title>のようなものを「タグ」と呼び、これは「titleタグ」というふうにいいます。ブラウザはHTMLの意味付けを解釈しそれに見合った表示をします。titleは・・・タブの部分に表示されていますね。 同様に「bodyタグ」は本文全体(いわゆるブラウザに表示されるページ部分全体)を意味し、「pタグ」は段落(Paragraph)を意味します。 HTMLについてはネット上にいくらでも解説サイトがあるのでわからないタグが出てきたら「HTML bodyタグ」のように検索してどんどん吸収しましょう。


CSSを書いてHTMLから読み込みブラウザに反映する

CSS(Cascading Style Sheets)は、HTMLの各要素に対して色や書体や文字のサイズなどのスタイルを指定するものです。 ブラウザはHTMLだけでもタグによる意味付けに合わせてそれなりのスタイルを自動的に反映しますが、CSSを追加することでより自由で魅力的なデザインが表現できるのです。では、次のCSSを前回と同様にBracketsを使ってテキストファイルとして保存してください。ファイル名は”style.css”にします。 保存先は前回作った「test」フォルダです。

css(style.css)


次に前回作ったHTMLファイル(index.html)を開いて、以下のように1行だけ追加をして上書き保存してください。全部コピペし直してもOKです。

HTML(index.html)

追加している1行は、以下の1行です。この1行が、先ほどのCSSファイルを読み込みスタイルをHTMLに適用してくれます。

<link rel="stylesheet" href="style.css" media="screen">

さて、前回と同じようにブラウザでHTMLファイル(index.html)を開いてみましょう。 ブラウザ上で前回のタブがそのまま開いているようならリロードするだけでもOKです(Macなら⌘+R、WindowsならF5キーのショートカットが便利です。)


文字の色、サイズ、背景の色が変わりましたね。 CSSについてはこのサイトでは説明しませんが、HTMLと同じくネット上にたくさんのわかりやすい解説サイトがあるので検索してみてください。


「パス」について補足

さきほどHTMLに追記した<link rel="stylesheet" href="style.css" media="screen">の「href=”style.css”」の部分がこのHTMLに適用するCSSファイルを指定しているのですが、 このように必要な外部ファイルのファイル名や場所を指定する記述をパス(Path、小道みたいな意味)と呼びます。 http://〜のようなURLで指定することもありますがここでは「自分(index.html)から見た相対的な位置関係」で表現する方法 (相対パスといいます)を学びます。 「style.css」のようにただファイル名だけを書くと、HTMLファイルと同じフォルダ(階層)にある「style.css」を指定したことになります。 例えば「css」という同じ階層にある別のフォルダ内にある場合は、「css/style.css」と書きます。 1階層上がる(index.html自体が入っているフォルダを指す)場合は「../」という記号を使います。次の図で確認してみてください。

2階層上がる場合は「../../」、3階層なら「../../../」という風になります。ちなみに同じ階層は「./」と書くのですがこれは省略可能なのであまり使いません。 HTMLやCSS、これから学ぶJavaScriptを正しく書いたはずなのにうまく反映されない、というときはこのパスが間違っているのが原因ということもあります。 とても重要なポイントなので覚えておいてください。


javascriptを書いてHTMLから読み込みブラウザに反映する

いよいよ本題であるjavascriptを書いてみましょう。次のjavascriptをcssのときと同様にBracketsを使ってテキストファイルとして保存してください。ファイル名は”test.js”にします。 保存先は前回作った「test」フォルダです。

javascript(test.js)

次に例のHTMLファイル(index.html)を開いて、以下のようにさらに1行追加をして上書き保存してください。

HTML(index.html)


今回追加した1行は<script type="text/javascript" src="test.js"></script>の部分です。この1行で先ほどのjavascriptファイルを読み込んでいます。

今回もブラウザでHTMLファイル(index.html)を開いてみましょう。表示されたページは前回と全く変わっていないと思います。変わったのは先ほどまで全く機能しなかった「ボタン1」です。押してみましょう。

「ボタン1」を押すとHELLO WORLD!にテキストが変わった


今まで「HTMLサンプルです。」と表示されていた部分が「HELLO WORLD!」に切り替わったと思います。ユーザーがボタンを押すという行為に対してテキストを変更するという動作をjavascriptが行っているためです。これはマークアップ言語であるHTMLだけでは実現できないことです。


まとめ

身近にあるブラウザを使って、自分で書いたHTML、CSS、そしてjavascriptを組み合わせ表示させることができるようになりました。今回はプログラムの内容自体については詳しく解説していませんが、まずはjavascriptを学習するフィールドを手に入れたことになります。javascriptはブラウザで実行できるプログラミング言語なので、学習するために高価なアプリやサーバ環境は一切不要、さらにはネット接続すらなくても学習ができることを実感していただけたでしょうか。



Google Ad

Google Ad

Recommend

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

ネットすら不要!身近なブラウザでjavascriptを動かしてみる方法 でブラウザでjavascriptを動かす方法を説明しましたが、今回はjsfiddleという無料でユーザー登録も不要なサービスを使 …

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