ローカル環境のjQueryでHello World！

2016年10月2日カテゴリー : JavaScript コメント : 0

　超簡単な jQuery の動作テストをしようとしたのですが、ローカル環境に XAMPP を用意したり、レンタルサーバーにアップロードするのも面倒臭いので、簡単にテストできる方法がないのか考えました。デバッグなどにご利用下さい。

jQueryをダウンロード

　まずは公式サイトから jQuery の JavaScript ファイルをダウンロードします。いくつかのバージョンを確認できますが、今回は WordPress に読み込まれているバージョンが1.x系だったので、1.12.3で動作確認を行いました。公式サイトで必要なバージョンをお選びください。

　公式サイトのどこからダウンロードすればよいのかが微妙にわかりにくいですが、トップページに「jQuery 3.1.1 release notes」というリンクがあると思うので、そこからたどれば古いバージョンにもたどり着けるはずです。

Download jQuery | jQuery

ソースコード

　次のソースコードを拡張子を .html にして保存します。文字コードを utf-8 に指定していますので、utf-8 を扱えるテキストエディタで作業してください。.html ファイルは基本的に BOM なしで保存すべきですが、PHP の関数を使うわけではないのでどちらでも問題はないと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デモ</title>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<style type="text/css">
<!--

#test {
    margin: 100px;
}

-->
</STYLE>
</HEAD> 
<BODY>
    <p id="test"></p>
    <script>
        jQuery(function(){
            jQuery('#test').text('Hello World!');
        });
    </script>
</BODY>
</HTML>

<!DOCTYPE html>

<head>

<!--

#test {

margin: 100px;

}

-->

</STYLE>

</HEAD>

<BODY>

jQuery(function(){

jQuery('#test').text('Hello World!');

});

</script>

</BODY>

</HTML>

保存

　フォルダを作成して先ほどの HTML ファイルとダウンロードした jQuery を移動します。今回はデスクトップを例にしていますが、もちろんお好きな場所で構いません。

動作確認

　HTML ファイルをダブルクリックすれば標準に設定されているブラウザに表示されるので、こちらで動作を確認できます。当たり前なんですが、ブラウザの JavaScript をオフにしているときちんと表示されませんので注意してください。私はこれにハマった。

20161002_3_3

ブラウザのコンソールで動作確認する

　ブラウザにはコンソールと呼ばれる入出力ウィンドウが用意されています。jQuery で見た目をカスタマイズするようなデバッグを行わず、文字列を出力するだけならこちらのほうが手軽です。各ブラウザでのコンソールの表示方法は次の通りです。

Google Chrome

いずれかの方法で開発者ツールを起動します。

F12キー
Ctrl ＋ Shift ＋ J
右クリックで「検証」を選択

「Console」タブで確認できます。

Firefox

いずれかの方法で開発者ツールを起動します。

F12キー
Ctrl ＋ Shift ＋ K
右クリックで「要素を調査」を選択

「コンソール」タブで確認できます。

Internet Explorer

いずれかの方法で開発者ツールを起動します。

F12キー
右クリックで「要素を検査」を選択

「コンソール」タブで確認できます。

ソースコード

ブラウザのコンソールに文字列を出力するには console.log を使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デモ</title>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
</HEAD> 
<BODY>
    <script>
        jQuery(function(){
            console.log('Hello World!');
        });
    </script>
</BODY>
</HTML>

<!DOCTYPE html>

<head>

</HEAD>

<BODY>

jQuery(function(){

console.log('Hello World!');

});

</script>

</BODY>

</HTML>

文字列が出力されていることを確認してください。

20161002_3_7

おまけ

　蛇足ですが、今回なぜこのようなことをやろうと考えたのかを少しばかり語りたい。

　2014年に W3C が HTML5 を勧告したことで、ブロック・インラインという要素の分類の仕方が廃止されました。以前、当ブログでも記事にしました。

HTML5でブロック要素・インライン要素による分類が廃止された件 | Naokix.net

　実際にはデザインにおいて display プロパティに block や inline を指定するように、今でもブロック要素やインライン要素に関する知識が必要になる場面があります。

　先日、WordPress のサイドバーにあるアーカイブをドロップダウン表示にしようといろいろいじっていたところ、インライン要素であるはずの select 要素に幅を設定することができてしまいました。

　インライン要素の特徴として、前後に改行が挿入されず、幅や高さを設定できないというものがあります。身に覚えがありませんか？span タグに幅や高さを設定できずに苦しんだことを。display:block; を指定してやるだけなのですが、初心者の頃に私はこれに大いに苦しめられた記憶があります。

　調べてみると、select のほかに input と textarea もインライン要素でありながらブロック要素と同様の指定ができるようです。

　さらに調べてみると、input と textarea は display プロパティの初期値が inline-block となっているようです。inline-block とはブロック要素をインライン要素のように横並びに表示し、さらにそれぞれの要素の高さや幅を指定することが出来る指定方法です。

主要なHTMLタグのdisplayプロパティを調べてみた – コンパイラかく語りき

　こちらのページでは、ソースコード付きでとてもわかりやすく解説されているのですが、私が知りたい肝心の select 要素が抜けてしまっています。そこで自分で調べようとして書いたのが今回のソースコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デモ</title>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
</HEAD> 
<BODY>
    <select id="test">
        <option>選択肢1</option>
        <option>選択肢2</option>
        <option>選択肢3</option>
    </select>
    <script>
        jQuery(function(){
            console.log($('select').css('display'));
        });
    </script>
</BODY>
</HTML>