最近はもっぱらポケモンつかまえています。こんばんは、soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第7回です。

今日は前回に引き続き、JavaScript導入の話をしようと思います。

これまでに、HTMLやCSSの書き方を簡単に見てきました。一般的に、特定の内容を表示するだけであれば HTMLとCSSで十分なのですが、例えばユーザの操作によって動的にコンテンツを追加したり、あるいは削除したり、APIを経由してサーバから新たな情報を取得してきたり、3Dコンテンツを表示したりとページを読み込んだ後に様々な動作をさせるにはJavaScriptと呼ばれるプログラム言語を使用します。

「簡単にページを思う通りにつくる」ことを目的とするため、この記事ではjQueryと呼ばれる JavaScriptのライブラリも使用します。詳細は各節にて！

JavaScriptとjQuery

JavaScriptは、ブラウザが実行することのできるスクリプト言語のひとつです。Javaと名前が似ていますが、全く関係ありません（wikipediaにも載ってました）。最近では、Unityというゲームエンジンでも採用されていたり、やnode.jsという形でサーバサイドでも利用されるようになってきていて、活用の場が広い言語です。jQueryはJavaScriptの有名なライブラリで、HTMLを操作するためのインターフェース（DOMといいます）へのアクセスや、ネットワークに関する処理、非同期処理など、よく使う処理をより簡単に記述できるようになります。

初心者がいきなりライブラリとかどうなの…というところもあるかもしれませんが、何はともあれ早く動くものをつくるぞ！！ということで習うより慣れろ作戦です。最初のうちはどこまでが生JSでどこがjQueryなのかはあまり意識しなくても書けると思います。

プログラムを書く準備

では早速準備をしていきます。HTMLの中に次のようにタグを書いて直接JavaScriptを書いていくこともできますが、CSSと同様、違う言語が混ざったコードはどこか読みにくいですし、できれば分けてしまいたいものです。

<script type="text/javascript">
    // ここにJavaScriptのコードを書く
</script>

そこで、CSSと同様に以下の画像のようにJavaScript専用のファイルを作成して、コードはこちらに書いていきます。ここでは js というフォルダの下に script.js というファイルをつくりました。

f:id:moshisora:20160806213725p:plain

このファイルをHTMLから参照するには、さきほどの script タグを使って、

<script src="js/script.js" charset="utf-8"></script>

のように記述します。CSSの場合は link タグでしたが、中身は似ていますね。ただし、CSSと違って、JavaScriptは通常 body タグの最後に書くのが習わしです。これは、ほとんどのブラウザの仕様で、JavaScriptを読み込んでいる間、HTMLのレンダリングを中断することがあるためです。JavaScriptからHTMLの要素にアクセスしようとしたとき、まだレンダリングされていないと要素が見つからずうまく動かないかもしれないので、最後に読み込むようにします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/main.css"charset="utf-8">
    </head>
    <body>
        <h1></h1>
        <div class=""></div>

        <!-- ここで読み込む！！ -->
        <script src="js/script.js"></script>
    </body>
</html>

jQueryを読み込む

jQueryもJavaScriptで書かれたプログラムなので、同じように script タグで読み込みます。注意点は自分が書くファイルよりも先に読み込んでおいてください。jQueryはこちらから入手できます。または、Googleがホスティングしているものを使うこともできます（こちらのほうが楽かも）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
<script src="js/main.js" charset="utf-8"></script>

JavaScriptを書いてみる

ではさっそく書いてみます！編集するのはHTMLではなく、読み込むように設定した srcipt.js のほうです。プログラミングといえばHello,World。とりあえず Hello, World!と出力するだけのプログラムを書いてみます。

$(document).ready(function() {
    console.log("Hello, World!");
})

たった3行ですが、見覚えのないものがいくつかあると思うので、順番に見ていきます。

一番最初に出てくる $(document.ready(funtction(){})) は、DOMが操作可能になったときに引数の関数（function)を実行するjQueryの関数です。コード内では、jQueryは$で省略して利用できる仕組みになっているので、今後$を見かけたときは、「なるほどここjQueryだな」と思いながら見てみてください。同じように、window.onload関数等を使えば、ページを読み込んだ時に該当のjavascriptを実行することはできますが、こちらの関数ではHTMLの解析のみならず、ブラウザによっては画像の表示を待ってから実行される場合もあるようなので、体感速度が大きく遅くなってしまうケースがあるようです（自分もそこまで気になったことはないのですが…）。

続いてのconsole.log()関数は、想像はつくとは思うのですが、ブラウザのコンソールに出力する関数です。コンソールの確認方法については、以前の記事をご覧ください。

では動作を確認してみます。ブラウザでindex.htmlを開いてみます。

f:id:moshisora:20160806213735p:plain

動いたでしょうか！ここまでで一旦準備編は終わりにします。jQueryを使ってページのコンテンツをごにょごにょする方法について簡単に書いてみたいと思います。

では！

まとめ

JavaScriptを使うとさらにリッチなサイトを作ることができる！
jQueryという有名なJavaScriptライブラリがある。便利。

blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

簡単なWebページをつくってみる #4

関連ブログ

目次

JavaScriptとjQuery

プログラムを書く準備

jQueryを読み込む

JavaScriptを書いてみる

まとめ