書いてみよう

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第3話:書いてみよう

目次



マンガ
















マンガ台詞

【1Page】
先生:では 実際に プログラムを 書いてみよう
    用意するのは ブラウザとメモ帳
    使うプログラム言語は JavaScriptだ
遊:プログラム言語?
    JavaScript?
先生:プログラム言語は コンピュータに 命令するための言葉だ
    まあ 英語や中国語 みたいなものだな
遊:げげっ!
    英語だけでも駄目なのに その上 新しい言葉も!
【2Page】
先生:まあ そんなに 心配しなくてもいいぞ
    単語の数は少ないし 表などを見てもよい
遊:つまり カンニングし放題 ということ?
先生:そうだ
遊:ひゃっほう〜!
先生:というわけで
    ゼロからプログラムを 書くのは難しいから
    テンプレートを 用意してきた
        <html>
            <head>
            </head>
            <body>
            </body>
        </html>
    『HTMLファイル』はWebページのこと。
    拡張子が『.html』や『.htm』の
    テキストファイルです。
    『メモ帳』で開くと
    右のような中身を見られます。
【3Page】
先生:このテンプレートを メモ帳で開き
    『<head>〜</head>』の間か 『<body>〜</body>』の間に
    スクリプト領域を加える
        <html>
            <head>
                <script type="text/javascript">
                <!--
                /*(A:ここにプログラムを書く)*/
                // -->
                </script>
            </head>
            <body>
                <script type="text/javascript">
                <!--
                /*(B:ここにプログラムを書く)*/
                // -->
                </script>
            </body>
        </html>
    試しに『A』に 『alert("test");』と 書いてみる
        <html>
            <head>
                <script type="text/javascript">
                <!--
                alert("test");
                // -->
                </script>
            </head>
            <body>
            </body>
        </html>
    ブラウザで開いてみろ
    全て半角で書く必要があります。
    「"」はダブルクオーテーション
    行末の「;」はセミコロンです。
【4Page】
    (ダイアログの図)
    『alert("文字列")』は
    ダイアログを表示する命令。
遊:あっ ダイアログが 現れた!
先生:プログラムは ファイルの上から下へ そして左から右へと 処理が行われいく
        (処理順番を矢印で図解)
        <html>
            <head>
                <script type="text/javascript">
                <!--
                alert("test1"); alert("test2");
                alert("test3"); alert("test4");
                // -->
                </script>
            </head>
            <body>
                <script type="text/javascript">
                <!--
                alert("test5"); alert("test6");
                alert("test7"); alert("test8");
                // -->
                </script>
            </body>
        </html>
【5Page】
先生:処理させたくない場所は 『コメントアウト』を行う
    行の途中に『//』と書くと 『//』の右側が無視される
    プログラム中に 『/*〜*/』と書くと 『〜』の部分が無視される
        (無視される場所をグレーアウト)
        <html>
            <head>
                <script type="text/javascript">
                <!--
                alert("test1"); //alert("test2");
                alert("test3"); //alert("test4");
                // -->
                </script>
            </head>
            <body>
                <script type="text/javascript">
                <!--
                alert("test5"); /*alert("test6");
                alert("test7");*/ alert("test8");
                // -->
                </script>
            </body>
        </html>
【6Page】
遊:よし やってみるわ!
    (ダイアログ)「麗はジャンケンが弱い」「麗は運が悪い」
    あははは
麗:(ムカッ:怒り記号:怒っている)
守:ところで先生 ダイアログばかり 表示していますが
    意味があるんですか?
【7Page】
先生:特にない
    意味のあることは まだやっていない
遊:うわっ 無駄なことを させられた!
先生:といわけで 次は勉強を楽にするための プログラムを書いていくぞ



説明

この講座では、『JavaScript』というプログラム言語を学んでいきます。プログラム言語は、コンピュータに命令するための言葉です。英語圏の人には英語で、中国語圏の人には中国語で話しかけるように、コンピュータにはプログラム言語で話しかけます。

JavaScriptは、主にWebページで利用されるプログラム言語です。多くの場合、Webページの本体であるHTMLファイル内に、文章として書き込みます。

HTMLファイルは、拡張子(ファイルの名前の『.』以降)が『.html』や『.htm』の、テキストファイルです。ローカルにあるこのファイルをメモ帳で開けば、中身を見ることができます。ブラウザ(Internet Explorer)で見ている場合は、メニューの[表示]から[ソース]を選択することで、中身を見ることができます(注意:Web上にあるファイルは編集することはできません)。

それでは以下、プログラムの基礎的な知識を説明していきます。



プログラムの基礎知識

プログラムを書く場所

ここではまず、HTMLファイルのヘッダー部分にプログラムを書いてみます。HTMLファイルのヘッダー部分は、HTMLファイルの『<head>〜</head>』で囲まれた領域です。

<html>
    <head>
        【ヘッダー】
        <script type="text/javascript">
        <!--
        /*(A:ここにプログラムを書く)*/
        // -->
        </script>
    </head>
    <body>
        【ボディー】
        <script type="text/javascript">
        <!--
        /*(B:ここにプログラムを書く)*/
        // -->
        </script>
    </body>
</html>

それでは以下に、ダイアログを表示する簡単なプログラムを書いてみます。

<html>
    <head>
        【ヘッダー部分にプログラムを書いてみた】
        <script type="text/javascript">
        <!--
        alert("test");
        // -->
        </script>
    </head>
    <body>
    </body>
</html>

上記プログラムは、全て半角で書く必要があります。「"」はダブルクオーテーション、行末の「;」はセミコロンです。作成したHTMLファイルをブラウザで表示すれば、ダイアログが現れます。

プログラムの順番

プログラムは、通常の横書きの文章と同じように、上から下に、そして左から右へと読み取られて実行されていきます。そのため、命令を書く位置を変更すれば、処理される順番も変わります。

プログラムの『コメントアウト』

プログラムの中には、メモや注意書きなどを書きたい場合があると思います。また、プログラムのテストの際に、処理の一部を無視させたい場合があるかもしれません。そういった際は、『コメントアウト』という機能を使います。

行の途中に『//』と書くと 『//』の右側が無視されます。また、プログラム中に 『/*〜*/』と書くと 『〜』の部分が無視されます。『コメントアウト』については、あとで少し詳しく解説します。

プログラムの呼び方

今回の説明では『プログラム』と表記していますが、プログラムの文章部分は様々な呼び方で呼ばれます。

その代表的なものを以下に挙げておきます。

  • プログラム
  • ソースコード
  • ソース
  • コード
  • スクリプト

本講座では、これらを全て同じ意味として使います。



『HTMLファイル』

Webページは、『HTMLファイル』と呼ばれるファイルでできています。

『HTMLファイル』は、拡張子(ファイルの名前の『.』以降)が『.html』や『.htm』の、テキストファイルです。

拡張子について、少し詳しく説明しておきます。Windowsでは、ファイルの名前は『.(ドット)』で区切られており、『ファイル名.拡張子』の形式になっています。

この拡張子は、Windowsの設定によっては非表示になっている場合があります。ファイルの拡張子を確認したい場合は、ファイルを選択して、右クリックをして、メニューから[プロパティ]を選んでください。「プロパティ」ダイアログに、拡張子を省略していないファイル名が表示されます。

また、テキストファイルは、ファイルの中に、文章が直接書いてあるファイルのことです。このテキストファイルを『メモ帳』で開くと、文章が表示されます。ちなみに『テキスト』(text)は、文章という意味になります。

『Internet Explorer』などのブラウザは、このファイル内の文章を読んで、ウィンドウに文章や画像を表示します。その際、『タグ』と呼ばれる『<〜>』で囲まれた部分を見て、画面のレイアウトを決めていきます。

<html> ← HTMLファイル開始
    <head> ← ヘッダー部分開始
        ヘッダー部分 ← 画面には直接表示されない部分
                        ファイルの情報を記入したり、ファイル表示前の準備を行う
    </head> ← ヘッダー部分終了
    <body> ← ボディー部分開始
        ボディー部分 ← 画面に直接表示される本体部分
    </body> ← ボディー部分終了
</html> ← HTMLファイル終了

『<html>〜</html>』は、この範囲がHTML(HyperText Markup Language)ですという意味です。

『<head>〜</head>』は、この範囲が文章のヘッダー(画面には直接表示されない先頭部分)ですという意味です。

『<body>〜</body>』は、この範囲が文章のボディー(画面に直接表示される本体部分)ですという意味です。

また、本講座では、以下のタグも登場します。

『<pre>〜</pre>』は、この範囲を、テキストファイルのまま、改行して表示するという意味です。

『<br>』は、このタグの登場場所で、文章を改行するという意味です。

『<script>〜</script>』は、プログラムを書く領域を指定するタグです。それでは以下、『<script>』タグについて、詳しく説明していきます。



『<script>』タグ

『<script>〜</script>』は、この範囲がプログラムという意味です。

<script type="text/javascript">
<!--
alert("test");
// -->
</script>

HTMLのタグには、『type』のような『属性』が付くことがあります。

この『<script>』タグには、『type(種類)』という属性が付いており、値が『text/javascript』となっています。これは、テキスト形式で、JavaScriptのプログラムが書いてあるという意味です。

『<script>』タグの間にある『<!--』『// -->』は、おまじないのようなものです。初心者の人は気にせず、こう書くものと覚えておけばよいです。

(この『おまじない』の書き方は、ブラウザの世代が変わったり、ファイルの宣言の仕方を変えることにより変わります。そこらへんは今回の本筋から外れるので、この講座では全て上記の書き方で進めていきます)



『JavaScript』とは?

『JavaScript』は、『ジャバスクリプト』と読みます。ブラウザ上で利用されることの多いプログラム言語で、ブラウザの歴史とともに発展してきました。現在では主に、Webページの中身を書き換えたり、動かしたりするために利用されます。Webブラウザ上で動くWebアプリケーションなどの多くが、このJavaScriptで作られています。

なお、『Java』(ジャバ)というプログラム言語もありますが、『JavaScript』と『Java』は違うものです。これはよく混同されますので、よく覚えておいてください。

『JavaScript』の歴史についても少し触れておきます。『JavaScript』が最初に登場したのは1995年。当時存在していた『Netscape Navigator』というブラウザに、JavaScriptは初めて搭載されました。このプログラム言語元々の名前は『LiveScript』でした。しかし、その当時、『Java』というプログラミング言語が発表されて注目されていたことと、『Java』と『Netscape Navigator』の開発元が業務提携していたために、『JavaScript』という名前になりました。


参考:Wikipedia - JavaScript



『コメントアウト』

『コメントアウト』について、少し詳しく触れておきます。

プログラムは、上から下へ、左から右へ読み取られて、処理されていきます。

プログラムが短いうちはよいですが、長くなってくると、文章中に説明を加えたいことが出てきます。そういった際に役立つのが『コメントアウト』です。『コメントアウト』された部分は、プログラムとして処理されずに無視されます。

書き方は以下の2種類です。

書き方動作
行の途中に『//』と書く『//』の右側が無視される。
本文中に『/*〜*/』と書く『〜』の部分が無視される。
// コメントアウト
alert("test");    // コメントアウト

/*
コメントアウト
alert("test");
alert("test");
*/

『コメントアウト』を利用したプログラムの説明は、こまめに書き込んだ方がよいです。プログラムを書いた直後は、どういったことを書いたのか覚えていても、しばらく経つと、何を書いたか忘れるからです。

分かりやすさを心掛けて、コメントを残しながらプログラムを書いていってください。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

template1.html』を表示

template2.html』を表示

sample1.html』(アラート)を表示

sample2.html』(処理順番)を表示

sample3.html』(コメントアウト)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。