Top▲

JavaScriptで学ぶ 文系の人にもわかるプログラミング入門

このコラムでは, プログラミングについて説明します。 次の章から具体的な方法を説明しますが, まず準備をかねて, そもそも「プログラミング」とは何かを考えてみましょう。

メモ

まったくプログラミングを知らない, 文系の方でも大丈夫なように, ごくごく基本的な所からはじめますので, 先をお急ぎの方は下のリンクをたどって先に進まれても結構です。

  • プログラムを作るための準備 —— HTMLもプログラミングもまったく初めてで, どんなものか皆目検討が付かない方はこちらから。 後で時間ができたときに, 前半部分をお読みください。 プログラミングをする上で背景となる事柄を説明していますので, 本格的なプロ グラムを書く際には役に立つことでしょう。
  • JavaScriptの第1歩 —— HTMLは知っているという方はこちらから。

プログラミングはプログラムを作ること

「プログラミング」は英語から来た言葉で, 英語で綴ればprogrammingあるいはprogramingとなります。 programmingは「プログラムを作る」という意味の動詞programのing形です。 前にbe動詞を伴わずに使われているので, このing形は「動名詞」となり, programmingで「プログラムを作ること」という意味になります。 ちなみに, プログラムを作る人のことは「プログラマ(programmerあるいはprogramer)」と呼びます。

programには「プログラムを作る」という動詞のほかに名詞の意味もあります。 普通の世界で「プログラム」と言うと, たとえば, コンサートの「プログラム」などが思い浮かびます。 コンサートの「プログラム」は, コンサートでどんな曲を演奏するか, その曲名と順番, 演奏者などを書いたもの。 プログラムに従って, 演奏が進行していきます。

コンピュータの「プログラム」もこれと似ていて, 「(演奏者ではなく)コンピュータが何をどんな順序で行うかを書いたもの」です。 見方を少し変えると「(何らかの仕事をするために)コンピュータにやってもらう操作をやって欲しい順番に記述した文書」と言えます。

プログラミング言語と自然言語

コンサートのプログラムは, 普通の言葉 ── 「日本語」とか「韓国語」とか「英語」とか, 人間が人間とコミュニケーションを取るための言葉 ── を使って書かれます。 これに対して, コンピュータの「プログラム」を書くときには, それ専用の言語である「プログラミング言語」を使います。

プログラミング言語は, 人間がコンピュータとやり取りをするために(ひとりあるいは何人かの人が集まって決めて作った)人工的な言語「人工言語」です。 これに対して, 「日本語」や「英語」などは, 遠い昔に源を発し, 徐々に徐々に変化してきて, 今も少しずつ変化しているもので, 使われているうちに自然に広まった「自然言語」です。

日本語や英語などの自然言語を使ってコンピュータ用のプログラムを書くことができれば, 新しい言葉をあらためて覚える必要がなくて便利です。 しかし, 残念ながら「自然言語」を, そのままプログラムを書くこと(つまり, プログラミング)に使うのには少なくとも今のところは不可能です。

なぜ, 自然言語をそのままプログラミング言語として使えないのでしょうか? それを考えるために, コンピュータが具体的にどのような作業をしているのか, いくつか例をあげて見てみましょう。

コンピュータによる「世界」の表現 ── 色の表現

自然言語をそのままプログラミング言語として使えない理由として, コンピュータで扱えることが, 人間が扱うこと(考えること)のごく一部でしかないということがあげられます。 コンピュータが扱えるのは, 「数」だけで, これを使った加減乗除などの「演算」しかできません。 「文」や「絵」や「音」を扱うこともできますが, じつはコンピュータの中では文字や数字や音を, それぞれ数字に対応させて, これを並べたり, 入れ替えたりしているにすぎないのです。

コンピュータがそのままに扱えるのは, 「数」だけ, 突き詰めれば0と1だけです。 たとえてみれば, 何億個とか何十億個とかの, 電球がずらーっと並んでいて, 電球がついたり消えたりしているだけの話なのです。 この電球の役目をするのが「メモリ」と呼ばれるものです。 電球の数が多ければ多いほど, つまりメモリの量が多ければ多いほど, 一度にたくさんのものを覚えられるのです。

画面上に色を出す場合を考えてみましょう。 コンピュータの内部にある何百億(?)個かの電球のうち何個か(1千万個とかそれくらい)は, 画面の表示を担当するものです。 たとえば, 1千万個の電球全部が消えれば真っ黒な画面が表示されるし, 全部がつけば真っ白な画面になるような仕組みになっているわけです。

ご存じの方も多いでしょうが, パソコンの画面(モニター)は, それぞれが独立に色を表示できる小さな点がたくさん集まってできています。 虫眼鏡を使って画面を拡大して, 画面上の1点に注目してみましょう。 この1点のことを「ピクセル(pixel)」とか「ドット(dot)」と呼びます。

この1点を多くのパソコンでは24個の電球を使って表します。 色の表現方法にはいろいろあるのですが, RGBという表現方法では24個全部の電球がつくと白い点になり, 全部が消えると黒い点に対応させて色を表現します。 この24個の電球を, 8個ずつ3つのグループに分けて, そのうちの第1のグループだけが点灯して, 他の2グループが全部消えた場合は, 点の色が「赤」になるようになっています。 また, 第2グループだけが点灯すると「緑」, 第3グループだけが点灯した場合には「青」になります。

電球がついている状態(オンの状態)と消えている状態(オフの状態)を1と0に対応させれば, 数で表すことができます。 たとえば, 赤い色は第1グループが全部オンで, 第2, 第3グループが全部オフなので, 次のような1または0の並びで表現できます。

  11111111 00000000 00000000 →赤

同様に緑や青は次のようになります。

  00000000 11111111 00000000 →緑
  00000000 00000000 11111111 →青

この手法で他の色も表すことができて, 下のように第2グループの8個と第3グループの8個がオンになった場合は「水色」になります。

  0000000 11111111 11111111 →水色

さて, 赤を表す第1グループの電球のオン, オフのパターンは全部でいくつあるでしょうか? 1個の電球でオンとオフの2つ, 2個の電球で(オン, オン), (オン, オフ), (オフ, オン), (オフ, オフ)の合計4つ, 3個の電球で(オン, オン, オン), (オン, オン, オフ), ..., (オフ, オフ, オフ)と8つのパターンがあります。 同じようにして考えると, 8個の電球がそれぞれ独立に(ほかとは関係なく)オンになったりオフになったりするわけですから, 2×2×2×2×2×2×2×2=28=256通りのパターンができます。 ですから, 8個の電球のグループを使えば, 256個のものに対応させることができる, つまり8個の電球で256の状態を表現できるわけです。

コンピュータでは, この256個を1からではなく, 0から始めて, 1, 2, 3, ...といって, 255までの数字に対応させることに決まっています。 こうすると, コンピュータが使われる前から, 数学者が研究していた2進数という数の表し方と同じになるのです(逆に言うと, 2進数の考え方に基づいてコンピュータが考え出されたとも言えると思います)。

この考え方を使うと, 電球のオン, オフではなく, 0から255の数字3つを使って色を表すこともできるようになります。 (255, 0, 0)で赤, (0,255,0)で緑, (0,0,255)で青, そして(00, 255, 255)で「水色」といった具合になります(図1-1)。

図1-1 RGBという方式の色の指定法(赤丸部分)。 0, 255, 255で「水色」を表す

8+8+8=24個ある電球のある特定の8個の電球がついているにすぎないのですが, この状態に意味を付与してこれを「赤」と呼び, そのような状態のときには, 画面上の対応する1点(ピクセル)が赤くなるように, コンピュータは作られているわけです。

ここまでは画面上の1点(1ピクセル)について見ましたが, 今度は画面全体を考えてみましょう。 少し前のパソコンの画面としては一般的によく使われていた, 横に1,024個, 縦に768個の点がある画面だとすると, 全部で1,024×768=786,432個の点があり, それぞれの点に24個の電球が用意されています。 つまり, この大きさの1画面分を表現するのに, 1,024×768×24=18,874,368個(約1900万個)の電球が用意されていると考えることができるわけです。 なお, 縦横の点の数はパソコン(モニター)によって色々です。 以前は640×480(横に640個, 縦に480個)という大きさが標準的でしたが, その後だんだん大きな画面が増えてきて, 1024×768程度のものが普通になり, そして現在はこれを超える大きさが一般的になってきています。 また逆に, 携帯電話など今まではあまり使われることのなかった小さな画面をもった「コンピュータ」も登場しています。

メモ

1個の電球が表す情報のことを「ビット(bit)」と呼びます。 bitはbinary digit(「2進の数字」の意)の最初のbと最後のitを合わせたものです。 つまり, 1024×768の大きさの画面では, 約1900万ビットを使って, 画面の状態を表現しているわけです

メモ

色の表し方には図1-1に赤丸で示したRGB(Red, Green, Blueの頭文字)という方式の他にもいくつかあります。 図1-1にある「色合い」「鮮やかさ」「明るさ」の3つの数字で表す方法はHSB方式(Hue, Saturation, Brightnessの頭文字)と呼ばれます。 このほか, CYMK, HLSなどの方式があります。

同じ水色を表すのに, RGBでは(0, 255. 255)の3つの数字の組を使うのに対して, HSBでは(120, 240, 240)という3つの数字の組を対応させています。 したがって, 色を表す数字を見たときには, その数字がどの方式を使ったものかがわからないと, 実際の色も決まらないことになります。

コンピュータによる「世界」の表現 ── 文字の表現

上ではコンピュータの内部で色がどのように表現(対応付け)されているかを見ました。 今度は文字について考えてみましょう。 じつは, 文字の表し方も色の表し方と本質的には同じなのです。 つまり, 数字に対して文字を対応させて表現するのです。

コンピュータが使われ出した頃, ひとつの文字は8個の電球, つまり8ビットで表されることがほとんどでした。 この「8ビット」は1文字を表現できる単位ということで, 特別に扱われて, 「バイト(byte)」という単位で呼ばれるようになりました。 つまり「8ビット=1バイト」というわけです。

これだと28=256なので, 1バイト(8個の電球)を使って表現できるのは256の文字だけです。 小文字と大文字のAからZと, 数字の0から9, それに@, &, %などいくつかの記号, そしてフランス語やスペイン語などで使われるçやñなどいくつかの特別な文字だけならばこれで十分なのですが, 漢字やハングル, アラビア文字などをすべて同時に扱うことはできません。

そこで, 最近では16個(16ビット=2バイト), あるいはそれ以上の「電球」を使ってひとつの文字を表現しています。 16個の電球を使えば, 216=65,536字の文字を表現することができます。 これだけあれば日本語に使われる文字を表現するのには, まずまず十分です。 これ以上の文字を一度に扱うには1文字につき3バイトとか4バイトとかを使って表すことになります。

どの数字にどの文字を対応させるかの方法 ── これを「コード系」と言います ── には, いくつかの種類があります。 これまで, 一般のパソコンでよく使われてきたコード系は「シフトJIS」と呼ばれているものです。 シフトJISでは, 33440で「あ」, 33441で(小さい)「ぃ」, 33442で(普通の)「い」, 33478で「と」, 36434で「山」, 37100で「川」, 35827で「空」を表すといった具合に, 数値と漢字が対応づけられています。 したがって, 「山と川」という文字の並び(文字列)は, コンピュータの内部では, シフトJISを使う場合「36434, 33478, 37100」という数字の列で表されているのです。

メモ

色の表現に, RGB方式, HSB方式などいくつかあったように, 文字の表現(文字コード)にも, ここで見た「シフトJIS」のほかにもいくつかの方式(コード系)があります。 主なものとしては, JISコード, EUCコード, Unicode(ユニコード)などがあります。 また, これらのコードの中にも, いくつか「変種」があります。

このように日本語を扱うときは, 1文字を表すのに16ビット, つまり2バイト(あるいはこれ以上)を使います。 コンピュータは欧米を中心に発達し, また当初は記憶できるデータの量がとても小さかったので, 1バイトで1文字を表す体系になっていました。 その後日本語などを扱うようになったわけですが, こうなると2バイトで1文字を表現しなければならなくなったので, 1バイトで表せる文字と, 2バイト表せる文字を混在して扱わなくてはならなくなってしまいました。 この処理はかなりややこしくて, 昔から多くのプログラマーを悩ませてきました。

最近のプログラミング言語, たとえばやこのコラムで学ぶJavaScript(ジャバスクリプト)などでは, アジアなどで使われている文字数の多い言語のことも考えて, 最初から, 文字は2バイト(あるいはそれ以上)で扱うようになっています。

メモ

参考までに, 先ほど「ビット」を単位にして考えたRGB方式による色の表現を「バイト」を単位として考えてみると, 赤青緑の3つのグループに分けたそれぞれを1バイト(8ビット)で表現できるわけです。 画面上の1点の色を扱うのに, 最近の多くのパソコンでは3バイト使っているというわけです。 画面上のすべての点の色を表現するのには, 一般的なものでは(1024×768×24)÷8=2,359,296バイト必要となります。

メモ

1024バイトのことを1キロバイト(kilobyte, 略してKバイトあるいはKB)といい, 1キロバイトが1024集まった1024Kバイトのことを1メガバイト(megabyte, 略してMバイトあるいはMB)と呼びます。 元々kiloは1,000, megaは1,000,000(百万)を表す言葉ですが, 210が1024で2進数が基本のコンピュータの世界には都合がよいので, 1024倍(つまり210倍)をキロ, 1024倍の1024倍(つまり220倍)をメガと呼んでいます。 一般的な大きさの画面にあるすべての点の色を表現するには, 2Mバイト強のメモリが必要になります。

ちなみに, 1024メガバイトのことを1ギガバイト(giga byte, 略してGバイトあるいはGB)と呼びます。 さらに, 1024ギガバイトは1テラバイト(tera byte)となります。 「Tバイト」とか「TB」などと表記されます。

整数と小数

電球のオンオフで整数や色や文字を表すこと(整数, 色, 文字とビットのオンオフの並びを対応させること)ができるのはおわかりいただけたでしょうか? 簡単に言ってしまうと, コンピュータの中には, 巨大な対応表が入っていて, それを使って色や文字を表しているというわけなのです。

整数の場合は, それぞれの電球ごとに, 1を表すもの, 2を表すもの, 4を表すもの, 8を, 16を, 32を, 64を, 128を, ...と役割を割り振っておいて, オンになっている電球が表す数を足すことで, (電球の数さえ増やせば)いくらでも大きな数を表せます。

色の場合は, (たとえばRGBという表し方を用いるとすれば)色を赤, 緑, 青の3つの要素に分解して, それぞれの度合いを整数で表し, この整数を電球のオンオフで表せます。

文字は1文字ずつ整数を対応させて, この整数をビットのオンオフで表現します。

ところで, 3.14とか, 1.3333などといった小数は, どう扱うのでしょうか。 これは, 整数の場合とよく似た論法を逆方向に使います。 つまり, 1/2, 1/4, 1/8, 1/16, ...を表す電球を用意します。 数学で習ったように(忘れてしまった人がいるかもしれませんが), 1/2は2-1 1/4は2-2 1/8は2-3 ...となります。 0.5ならば, 1/2を表す電球を1個だけオンにし, 1.25ならば, 1を表す電球と1/4を表す電球をオンにします。

しかし問題があります。 たとえば, 3.14を考えてみましょう。 3の方は1と2の電球を付ければよいので, 残りは0.14です。 0.14は1/8より大きいのでまず1/8の電球をオンにします。 残りが0.015になります。 ここまでを式に表すと次のようになります。

  3.14 = 1×21 + 1×20 + 0×2-1 + 0×2-2 + 1×2-3 + 0.015

ここで, 0のところと「1×」を省略するとすると次のように書けます。

  3.14 = 21 + 20 + 2-3 + 0.015

以下, 同様にやってみると

3.14 = 21 + 20 + 2-3+ 2-7 + 0.00718750
3.14 = 21 + 20 + 2-3+ 2-7 + 2-8 + 0.00328125
3.14 = 21 + 20 + 2-3+ 2-7 + 2-8 + 2-9 + .001328125
3.14 = 21 + 20 + 2-3+ 2-7 + 2-8 + 2-9 + 2-10 + 0.00035156250
3.14 = 21 + 20 + 2-3+ 2-7 + 2-8 + 2-9 + 2-10 + 2-12 + 0.000107421875
3.14 = 21 + 20 + 2-3+ 2-7 + 2-8 + 2-9 + 2-10 + 2-12 + 2-14 + 0.00004638671875
...

となって, いつまでたっても終わりません。 したがって, 10進数で表した小数をコンピュータで表現するときは, 多くの場合(0.5とか, 0.125とかで終わるのでなければ), ピッタリ表すことはできないのです。 コンピュータの中で, 小数は「近似値」として扱われているのです。

16進数による表記

上で見たように, コンピュータでは多くの場合, 8ビット, つまり1バイトを単位として色々な情報を扱います。 このため, 日常生活で使う10進数ではなく「16進数」を用いて, 数値を表すと便利なことがあります。

16進数では, 0, 1, 2, ..., 9までの10個の数字に加えて, A, B, C, D, E, Fの6文字を使います。 Aが10進数の10, Bが10進数の11, Cが12, Dが13, Eが14, そしてFが10進数の15を表します。

1バイトで表現できる状態(数, 色, 文字など)は28=256個です。 28=24×24=16×16なので, 1バイト(つまり8ビット)を4ビットずつ2つのグループに分けると, それぞれのグループで24=16個の状態を持つことができます。 つまり, 16進数1桁でひとつの4ビットグループを表すことができます。 1桁でひとつの4ビットグループを表せるので, 2桁で2つの4ビットグループ, つまり8ビット(=1バイト)の値を表せるというわけです。

日常生活で用いている10進数で, 1バイト(256の状態)を表現しようとすると, どうしても3桁必要になります。 しかも残りの1000-256=746個の数字は使わずに余ってしまいます。 ところが, 16進数を使うとちょうど2桁で1バイトが表現できるわけです。

メモ

シフトJISコードで文字を表すと, ひとつの文字を表すのに10進数で5桁の数字が必要になります。 たとえば「山」は「36434」という数字の列になります。 16進数を使うと「8E52」4個の「数字」ですむことになります。

練数問題として16進の8E52が10進の36434になるか確認してみましょう(16進数の「E」は10進数の「14」を表すことに注意)。

  8E52 => 8×163 + 14×162 + 5×161 + 2×160
        = 8×16×16×16 + 14×16×16 + 5×16 + 2×1
        = 32768 + 3584 + 80 + 2 = 36434

図1-2のような「漢字コード」を見たことがある人も多いでしょう。 漢字のコードはこの図のように16進数で表示されることが多いのです。

図1-2 「山」という字の漢字のコード

また, 色の指定にも16進数が使われることがあります。 上で見たように, RGBという方式では赤, 緑, 青のそれぞれの成分を1バイト(0から255)で表現するので, それぞれの成分を16進数2文字, 合計で2×3=6文字で表せます(図1-3)

図1-3 16進数による色の指定

アナログの世界を写す自然言語

さて, この章の冒頭で何を議論していたのか思い出してください。 プログラミング言語として自然言語を使うことはできるかどうかを考えていたのでした。

上で見たように, コンピュータではすべてのものを数字に置き換えて扱います。 ワープロで入力する文字も数字の羅列として記憶されていますし, 「絵」はひとつひとつが24ビット(3バイト)の色をもつ点の集まりですし, 「音」もそれを表す波(音波)を数値の羅列として表現しています。 つまりすべてが「デジタル」なのです。

これに対して, 人間の世界はすべてをデジタルな形式, 数字には置き換えて扱うことのできない世界です。 数字に置き換えられるものは, 人間が関わる世界の一部にすぎないのです。 かなり遠い将来, コンピュータがずっとずっと発達し, 記憶容量も爆発的に増大して, 処理も爆発的に速くなったとき, ひょっとすると, 世界のすべてをデジタルに表現できてしまうかもしれないしれませんが......。

文学作品, たとえば小説そのものを文字としてコンピュータに記憶することはできますが, その小説の良さはどこにあるとか, どのような印象を読者に与えるとかいったことは, まだコンピュータには扱えません。 良い小説とは何かが, 数字で表せるようになっていないのです(良い小説とはどのような小説をいうのかが人間に分かっていないので, コンピュータがよい小説かどうかを判断するための指示を出すことができません)。

「もうちょっと紫っぽい色」などという表現は, 人間には感覚的に理解できます。 しかし, コンピュータで扱おうとすると, たとえば「RGBのRの要素を2, Bの要素を1だけ増やす」などといったようにすべてを数字で置き換えなければなりません。 これとても, コンピュータが「もうちょっと紫っぽい色」を理解したわけではなく, 「もうちょっと紫っぽい色」と指定された場合には「RGBのRの要素を2, Bの要素を1だけ増やす」という操作を対応させるように, 人間がプログラムの中に指定するのです。

「翻訳ソフト」と称するプログラム, 英語を日本語(らしい文字列の並び)に置き換えてくれるプログラムは開発されてはいますが, 満足できる訳が出てくることは多くはなく, その能力は優秀な翻訳者の訳に比べれば, はるかに劣っています。 優秀な翻訳者が原文の表現する「意味」を考えて, それと等価な意味を持つ訳文に置き換えようとしているのに対して, 翻訳ソフトは基本的に文字列のマッチング(検索)を繰り返しているだけなのです。

コンピュータが扱う世界, (現在)扱える世界は, 我々の扱う世界に比べてはるかに狭いのです。 すべてをビットの列, 電球のオンオフで表現できる世界だけです。 コンピュータが「意味」を理解しているわけではなく, 単にビットのオンオフを繰り返しているにすぎません。 それに意味を付けているのは人間の解釈(対応付け)なのです。

自然言語を使ってプログラムを書けるようになるためには, コンピュータが自然言語の意味を理解できるようになっていなければなりません。 そのためには, まず, コンピュータを使って, つまり電球のオンオフを使って, 人間世界を「理解」する方法を人間が考え出さなければなりません。 それは, 実現されるとしても遠い遠い将来の話なのです。

コンピュータの世界を記述するための言葉 ── プログラミング言語

そこで, このコラムで勉強するプログラミング言語が登場します。 プログラミング言語は, ビット列, つまり電球のオンオフを使って表現できることがわかっている世界を記述するために(あるいは, まだ電球のオンオフで表現できていないことを, この仕組みで表現できるようにならないかを実験するために), 人間が作り出した言語です。

ビット列だけを扱うからといって, ビット列ばかりが並んでいるのでは, わけがわからないので, できるだけ人間がよく知っている世界に近づけようと, 色々な人が色々なプログラミング言語を作ってきました。 人間がよく知っている世界に近づけるためには, プログラミング言語を自然言語に近づけるのがひとつの方法です。 そこで, 「文(sentence)」とか「式(expression)」といった概念がプログラミング言語にも持ち込まれました。

コンピュータは数字を扱うのだから, 数学の世界を記述するためにこれまで使われてきた数式などが使えると便利そうです。 そういうわけで, 加減乗除などの演算ができるようになっています。 これは, かなり初期の頃のプログラミング言語から取り入れられました。

さらに, コンピュータの用途が広がるにつれて, (自然言語や人工言語の)文字の並び ── 文字列 ── をそのまま扱えるようにしたいということで, 文字列に関して色々な操作が, しかも簡単にできるような機能をもったのような言語も登場しました。

1990年代に入り, インターネットが一般的になってきて登場したのがJavaScriptやJava(ジャバ)などの言語です。 JavaScriptは, ウェブページ(ホームページ)を見るためのブラウザと密接に結びついて, ホームページ上でいろいろな機能を実現することができます。 Javaは当初ホームページ上の長方形の枠内に「アプレット(applet)」という特別なプログラムを表示するものとして登場しましたが, 現在ではウェブ関連をはじめ様々な用途に使われています。 Perl(パール)はウェブページが登場する前から存在していた言語ですが, ブラウザとやり取りをして文字列の処理をするのに, とても便利だということで(それまでかなり広く使われていたのですが)一時期, とても多くの人に使われるようになりました。

インターネットに関係して使われるプログラミング言語としてはこのほかにも色々な言語があります。 たとえば, PHP(ピーエイチピー)は「データベース」を使って色々な情報を記録しておいて, それとウェブページとを関連づけて処理をするような場合に便利な機能がたくさん用意されている言語ですし, さらにはRubyという言語や, それを基にしてウェブサイトの作成(サーバ側のプログラム)に便利な機能を提供してくれるRuby on Rails(RoR)といったシステムも登場しました。

そして最近では, Python, Go, Rustなど, 多くの言語で「ウェブサーバ」が簡単につくれるようにまでなっています。

ウェブ用に限らず, 特定の分野に関して「狭く, 深く」を狙った言語もたくさんあります。 たとえば, 統計用の言語とか, シミュレーション用の言語といたものもあります。 なお, 「プログラミング言語」という言葉を狭い意味で使う場合, このような特定用途向けの言語は含めない場合もあります。

インターネットはプログラミング言語にも大きな影響を与えましたが, インターネットが広まる以前から広く使われており, 今でも使われている言語としては, Fortran(フォートラン), COBOL(コボル), Lisp(リスプ), C言語とその後継であるC++(シー・プラス・プラス)やObjective-C(オブジェクティブC)などがあります。

いずれにしろ, ほとんどすべてのプログラミング言語に共通する手法や概念は, このコラムで学ぶことができるので, 将来どのような言語を学ぶときにも, まごつかずにすむはずです。 ただ, ここで学ぶJavaScriptはかなり新しい部類の言語なので, すぐ上にあげたようなやや古い言語を使うときは, 機能的に劣っていることで苦労することがあるかもしれません。

ウェブページを記述する言語 ── HTML

ウェブページ用の「言語」として一番大事なものが残っています。 それはHTML(HyperText Markup Language, ハイパーテキスト用マークアップ言語)です。

HTMLは, ウェブページそのものを記述するのに使われるもので, 「プログラミング言語」としては扱われません。 ウェブページに表示する内容を記述するための言語で, ページに表示する文字や画像などのデータや, ある文字列がそのページでどのような役目をするものか(たとえば「タイトル(表題)」だとか「リンク」だとか)を表します。 コンピュータへの命令を並べてそれを実行することにより何らかの操作を行うために使う「プログラミング言語」ではありません。

メモ

HTMLの中にプログラムを「埋め込む」ことができます。 このコラムで学ぶJavaScriptはHTMLに埋め込まれる形で実行できる言語です。 Javaのプログラムも少し形式は異なりますが, HTMLの文書に埋め込んで実行することができます。 JavaScriptについてこの後の各章で説明していきます。

このコラムでは, ウェブで非常によく使われるプログラミング言語であるJavaScriptについて学びますが, この言語をウェブで使う場合はHTMLで書かれた文字列を色々な形で利用して, ウェブページを変化させます。 このため, ウェブページを記述するための言語であるHTMLに関する知識も必要になります。 次の章でHTMLの概要をひと通り説明し, 以降必要に応じてHTMLに関して必要な知識を追加していきます。

プログラムを作るための準備 ── 心の準備

最後に, プログラミングを学ぶに際して準備しておいていただきたいことをあげておきましょう。 まずは, 心の準備です。

まず, プログラミングではいろいろなことが, 1ではなく, 0から始まります。 たとえば, これから学ぶJavaScriptでは, 1年の最初の月を表す数字は1ではなく0になっています(「0月」から始まるわけです)。 これがよいか悪いかは別問題として, ともかくそう決まってしまっているので, そういうのに慣れていただくしかありません。

コンピュータは融通が利きません。 これはもう, ワープロソフトなどを使う場合でも, かなり経験しているのではないかと思いますが, プログラムを作るとそう思う度合いがかなり増すはずです。 1000行に渡るプログラムを書いたとき, たったひとつ「"」(引用符)を書くのを忘れても, そのプログラムは動きません。 人間なら, 1ページに2つや3つの誤字脱字があっても, 文書の内容を問題なく理解できますが, プログラムを書くときは, とにかくひとつでも間違いがあれば, それで動かなかったり, 自分の意図とは違う動作をしたりします。 昔々, 「,」と書くべきところで「.」と書いてしまったがために, ロケットの打ち上げに失敗したことがあったというのは, プログラミングの世界では有名な話です。

最初はこの融通のなさに「ほとほと参る(頭に来る)」ことと思います。 しかし, 逆に見れば, コンピュータはまことに忠実な僕(しもべ)でもあるのです。 どんなに単純な作業を, どんなに長い間するように命令しても, 文句はまったく言わずに実行してくれます。 この長所をこそ生かすべきなのです。

プログラムを作るための準備 ── ものの準備

このコラムの受講するには, さしあたって(このテキスト以外は)何もいりません。 書いてあることを読むだけで, プログラミングの世界を仮想的に体験できるでしょう。 実行した場合の様子は, 図があるのでだいたい想像ができるはずです。

しかし, プログラミングの技術を身につけようとするには, 実際にプログラム(やHTMLの文書)を作ってみて実際に動かしてみなければなりません。 スポーツやもの作りと同様, ただ見ているのと, 実際にやるのとは大違いなのです。

実際にプログラムを作るためには, さしあたってインターネットのホームページ(ウェブページ)が見られるパソコンがありさえすればそれで十分です(既にこのページをご覧になっている皆さんはこの条件は満たされています)。 JavaScriptのプログラムを作るのにも, インターネットが見られて, JavaScriptが実行できるなどのブラウザと, 「テキストエディタ(エディタ)」と呼ばれるアプリがあれば大丈夫です。 そして, ほとんどすべてのパソコンにはどちらも標準で付属しています。

プログラムを書くためには, 「エディタ」か「ワープロソフト」がいりますが, どちらかというとエディタの方が, プログラムの作成には向いています。 Windows(ウィンドウズ)ならば「メモ帳」, Macintosh(マッキントッシュ)ならば「テキストエディット」, Linux(リナックス)などUnix(ユニックス)系のOSならば, vi(ブイアイ)やemacs(イーマックス)などのエディタが, 特に何もしなくても使えるようになっているはずです(MacintoshもUnix系のOSなので, viやemacsなどが使えます)。

メモ

Windowsの「メモ帳」やMacintoshの「テキストエディット」でもプログラムを書くことはできるのですが, どちらもプログラムを書くには使いにくい面をもっています。 このため, ほかのプログラムのほうがおすすめです。

筆者は, エディタをお使いになったことがない方には, 下記のエディタをおすすめしています。 操作が単純で, わかりやすいというのがその理由です。 下記のエディタに慣れたら, もう少し機能豊富なものに手を伸ばすとよいでしょう。

  • Windowsの場合 ── サクラエディタ 「V2(Unicode版)」の下にある「最新版ダウンロード」の右のリンクをクリックしてダウンロードして実行し, インストールしてください(なお, ファイルを保存する際には, 文字コードとして「UTF-8」を指定してご利用ください)。
    [設定]→[フォント設定]で文字の大きさを変更できます。
    Windows標準の「メモ帳」は, HTMLファイルを扱うのが簡単ではないので, このエディタをおすすめします。
  • Macの場合 ── CotEditor 「Mac App Sotre」のボタンをクリックしてAppStoreからダウンロードしてください。
    [CotEditor]→[環境設定]→[表示]でフォントを選択すると文字の大きさを変更できます。 画面上部の「シンタックス」から[HTML]を選択するとタグなどが別の色で表示されて便利です。
    Mac(macOS)標準の「TextEdit(テキストエディット)」は, HTMLファイルを扱うのが簡単ではないので, このエディタをおすすめします。
    なお, CotEditorがうまくダウンロードできない場合, miエディタでも結構です。 「最新版のダウンロード」の下のほうにある「mi バージョン 2.1.12r5 のダウンロード 」をダウンロードして, ダブルクリックして表示されるウィンドウの指示に従って「アプリケーション」(あるいはApplications)のフォルダにコピーしてください。
    [mi]→[モード設定]でモードを[HTML]に設定して, [サイズ]欄に大きな数字を入れると, HTMLファイルの文字の大きさを変更できます。

ワープロソフトでは, いろいろな書体の文字を使ったり, その大きさを変えたり, 画像を配置したりといったことができますが, エディタでは(基本的には)同じ書体の同じ大きさの文字だけを入力・編集するようになっています。 プログラムを作る際には, このような文字の情報だけを使います。 このような文字の情報だけを記憶したファイルのことを「テキストファイル」あるいは「シンプルテキストファイル(simple text file)」「単純テキストファイル」などと呼びます。 プログラミングをする際には(通常は)テキストファイルだけしか扱いません。

フォルダを使った整理

プログラムを書いたら, コンピュータにある「ディスク」にファイルとして保存しておく必要があります。 これは, ワープロや表計算ソフトなどの場合と同じです。 Windowsならば「ドキュメント」(あるいは「マイ ドキュメント」)の下に保存しておけばよいでしょう(もちろん, 自分の好みで適当な場所においてもかまいません)。

できれば, 「ドキュメント」などの直下ではなく, このコラム専用の「フォルダを作っておくとよいでしょう。 たとえば「プログラミング」などとしてもよいでしょう。 ただし, 先々のことを考えると「programming」などと英語にしておいた方が好都合です。 キーの入力が少なくてすみますし, 他のコンピュータにコピーするときに, 「文字化け」の危険がなくなります。

フォルダを作るには, たとえばエディタなどで「名前を付けて保存」あるいは「別名で保存」「保存...」などのメニューで表示される「ダイアログボックス」(図1-4)で, 「新しいフォルダ」あるいは「新規フォルダ」のメニュー項目(アイコン)をクリックするのが簡単です。 すると「新しいフォルダ」などといった名前の新しいフォルダができるので「programming」などと入力すればよいのです。

図1-4a ファイルの保存時にフォルダを作る(Windowsのサクラエディタ)。
図1-4b ファイルの保存時にフォルダを作る(macOSのCotEditor)

もっときちんと整理したい人は, 第1章, 第2章, ...に対応して, ch01, ch02, とprogrammingフォルダの下に, 「サブフォルダ」を作っていく方法もあります。 01, 02と頭に0を付けるのは桁をそろえるためです。 また, こうしておくと, 一覧したときに順番にch01から並んでくれます。

次章の最初の例題を保存する際に, 「ドキュメント」(あるいは「マイ ドキュメント」)の下で「programming」というフォルダを作り, 続いてprogrammingをダブルクリックしてその下に行き「ch01」というフォルダを作って, その下にファイルを保存すればよいでしょう。

まとめ

プログラミング言語とは何か, コンピュータ内で数や色, 文字などを表現する方法を紹介しながら説明しました。

JavaScriptで学ぶ 文系の人にもわかるプログラミング入門
第1章 次の章へ