CodePenを使わずJavaScriptを動かす方法

CodePenを使わずに自分でHTMLファイルを作ってブラウザ上で表示したり動かしたりする方法を紹介します。この方法を知ることで、作ったウェブサイトやウェブアプリを作りネット上に公開することもできるようになります。

この記事の概要

CodePenが無いと何もできないんじゃ困る

このサイトではできるだけ手軽にJavaScriptの動作確認をしていただくために各所でCodePenを利用しています。(CodePenについて詳しくは【レッスン#1】 「JavaScriptの学習環境」を学ぶプログラミング教材をご覧ください。)しかし、CodePenはあくまで誰かが作って運営してくれているウェブサイト。それを借りているときしか自分のコードを動かせないのでは、プログラミングを使えるとは言えません。

この記事では【レッスン#1】 「JavaScriptの学習環境」を学ぶプログラミング教材の最後のパートで扱ったとてもシンプルなサンプルコードを「CodePenを使わずにブラウザ上で動作させる方法」を解説します。

普通のブラウザをオフラインで使います

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

ちなみにウェブ上に公開するには?

尚、ウェブ上に公開するためにはサーバの用意が必要になり、通常はレンタルサーバなどを使いますがこれはさすがに無料というわけにはいきません。サーバさえ用意できれば、今回紹介する方法で作ったファイルをサーバにアップロードすることで自分の書いたコードをウェブ上への公開することもできるようになります。詳しくはまた別の機会に。

はじめにブラウザの確認

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,CSS,JS)

いよいよコードを書いてみます

はじめに今回題材に使う【レッスン#1】 「JavaScriptの学習環境」を学ぶプログラミング教材で書いたサンプルコードをCodePenで再掲載しておきます。

(参考)CodePen上でのサンプルコード

See the Pen 教材「導入CSS追加」 by programmingbird (@programmingbird) on CodePen.

HTML,CSS,JSを左上のボタンで切り替えて確認してください。

CodePenを使わずにブラウザに表示するためのコード

今回の主役となるコードは次の通りです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLサンプル</title>
        <style>
            body{
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <button id="btn">ボタン</button>
    </body>
    <script>
        var btn = document.querySelector("#btn");
        btn.addEventListener("click", sayHello);
        function sayHello() {
            alert("Hello world!");
        }
    </script>
</html>

サンプルコードの解説

<html>タグで全体が囲まれていることからもわかるようにこのコードはHTMLです。CodePenのHTML,CSS,JSの各コードとよく見比べてみてください。CodePen上のHTMLはサンプルコードの<body>タグの中に差し込まれています。同様にCSSは<head>の中の<style>タグの中に。JSは一番最後の方に<script>タグの中に書き込まれています。

CodePenに書かれているコードを自分でブラウザ上に表示し実行するためには、上記のサンプルコードをテンプレートとして、HTML,CSS,JSそれぞれのコードを所定の部分に差し込み、全体を一つのhtmlファイルとすればよいのです。

テキストエディタに書いてindex.htmlとして保存

さっそくやってみましょう。テキストエディタ(Brackets)を起動し、メニューの「ファイル」>「新規作成」。上のコードをそのままコピペしてください。 もちろん一文字ずつ入力してもよいです。できあがったら「ファイル」>「名前をつけて保存」でファイル名を”index.html”として保存。保存先はデスクトップでもどこでもOK。
拡張子を「.html」にしたことでBrackets上でこのファイルがHTMLファイルだと認識され、コードが次図のように「色付き」になったと思います。

テキストエディタBracketsの画面 – 名前をつけて保存したところ

index.htmlをブラウザで開く

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

Chromeの画面 – ローカルのindex.htmlを指定して開いたところ
Chromeの画面 – ボタンを押したとき

以上で成功です。CodePen上のコードを1つのHTMLファイルにまとめて、ローカル環境(PCの中)に保存し、それをブラウザ上で表示させることができました。ブラウザで表示するというのは、テキストエディタのようにコードをそのまま表示するのではなくコードをブラウザが解釈して適切な形でウェブページとして画面上に描く(レンダリングといいます)ということです。 尚、Chromeでは画面にHTMLファイルを直接ドラッグ&ドロップするだけでも簡単にファイルを開くことができます。