故あって、2014年以来、ほぼ毎月2回ずつ、すべて自前で、初心者向けのJavaScript講座を開催してきました*1。受講いただいた方は、延べ2,000人以上。作成したオリジナルの練習問題は、約100個(+そのバリエーション)。
[*1] どんな「故」かは「あとがき」に書きましたので、よろしかったらお読みください。
皆さんのフィードバックをもとに少しずつ改良を重ね、「決定版」と思えるものができあがったので、書籍の形にしたいと思い、ご相談したところ、運よく「OK」をいただき、この本になりました。筆者自身のプログラミングとプロジェクト管理の経験をベースに、これまでに翻訳した20冊ほどのプログラミング関連書から様々なアイデアを拝借、講座受講生の皆さんや編集者の方々のご意見も参考に、かなりの出来に仕上げられたのではないかと自負しています。
目指したのは、すぐに古くなってしまうような知識ではなく、長期間役に立つ*2、重要なポイントがしっかり身につく入門書です。楽しくてわかりやすい、それでいて本格的な1冊。
[*2] 本当は「10年は役に立つ」としたいところなのですが、ここのところのAI(人工知能)の動向を見ると「ちょっと厳しいかも」とも思えるのでこう書いておきます。なお、この本でも第8章などで「生成AI」の活用法の一例を紹介しています。いずれにしろ、AIを最大限に活用できる開発者になるためには、「枝葉」だけでなく、プログラミングの「幹」となる考え方への理解が欠かせません。それを楽しみながら身に着けていただくのがこの本の狙いです。
プログラミングを身につけるのは、(多くの人にとっては)簡単ではありません。図にするとこんな感じでしょうか。最初の1、2台目のハードルはちょ〜っと高いと思います。
それを、こんな感じにしたいと思って、対面の講座を開催し、そしてこの本を書きました。
この本でプログラミングを始めていただくと、最初のほうのハードルは低くなり、3台目以降と同程度になります。とはいっても、相変わらずハードルはあります。それは皆さんご自身で越えてください。そのための練習問題を100問以上用意しました。
自分で試行錯誤して問題を解いているうちに、「そうか、こんな感じでやればいいんだ」と「わかる」とき(見えてくるとき、と言ってもよいかもしれません)がやってくるはずです。
ただし、人によってわかるまでの時間はかなり違います。これまた図にしてみると、こんな感じでしょうか。
パターンは人それぞれです。朱の実線①のように最初はかなり苦労するが、あるところから急に実力がアップする人もいますし、出だしはまずまず順調に進み途中で伸び悩む黒い実線②のような人もいます。最初にくる「我慢の時」を乗り越えられるかどうかが、プログラミングを(ほぼ)不自由なくできるようになるか、楽しめようになるかどうかの分かれ目です。稀にですが、朱の破線③のように、ほとんど苦労せずに、見えるようになってしまう、「前世でもプログラミングをやっていたのではないか」と思わせるような方もいらっしゃいます*3。
[*3] もっとも、「我慢の時」を過ごすうちに、「こんなこと、もうやりたくない!」と思ってしまう人もいるでしょう。何事にも、向き不向きはあります。仕事でやらなければならない人を除けば、無理してプログラミングをする必要はないでしょう。この本は、自分の向き不向きを見極めたり、プログラマーの心理を理解するのにもお役に立てるかもしれません。
「むずかしい」と感じたら、まず、細かいところにあまりこだわらずに、「感じ」を掴むようにしてみてください。細かい点は本文を読んで練習問題の解答のプログラムを作っていくうちに自然に覚えられます。重要な概念は繰り返し登場するので、強制的に復習させられることになります。ですから、意識的に覚える必要は(あまり)ありません。実習をすることで、徐々に「納得」できるようになります。
筆者は、大学5年生のときに始めたプログラミングの虜になって、大学院での志望専攻を数学からコンピュータ・サイエンスに変えてしまいました。この本がきっかけになって、多くの方がプログラミングに夢中に(とまではいかなくても「好きに」)なってくださったら、と思っています。
それでは、プログラミングの世界に入っていきましょう。
この本は、次の問題の答えがわかる方なら、どなたでも読み進んでいただけるように書きました。
関数 f(x) = x2+1 の、f(3)の値はいくつか*4。
答えがわからなくても、答え*4をみて、「そういえば、そうだったな」と思い出していただけるようなら大丈夫です。これ以上難しい数学の知識は必要ありません。
[*4] x
に3が入るので、「32+1」ですから、答えは10です。
プログラミングとはどのようなものなのかを知るために、本文を読んで例題や練習問題の解答例を試していただくだけなら、スマホだけでも大丈夫です。
この本でプログラミング技術を身に付けるためには、パソコンが必要です。また、ウェブブラウザを使ってページの閲覧やデータのダウンロードができ、「マイクロソフト・ワード」などのワープロアプリが使える程度のパソコンの知識を前提に説明していきます。
パソコンとしては、WindowsあるいはmacOSが動作するものを想定して説明します*5。2017年以降に発売されたパソコンなら問題ないでしょう(これより古くても、メーカーがサポートしているOSが動作するならば、動作は多少遅くなるかもしれませんが多分大丈夫です)。
ChromeBookやiPadなどの情報端末(もっと言えばスマホ)でも不可能ではありませんが、操作が複雑になるため初心者にはおすすめしません。そのため、説明の対象外とさせていただきます。
[*5] Linuxが動作するものでも大丈夫ですが、Linux用の説明は省かせていただきます。
先にお話した対面の講座を始めて3年ぐらいたった頃だったと思いますが、JavaScript(などのプログラミング言語)の学習を、英語(などの外国語)の学習と比較することからその日の話を始めることにしました。英語と比べることで、大まかな「イメージ」がつかみやすくなるのではないかと考えてのことです。この本でも、両者の比較から始めましょう。
JavaScript(の学習)と英語(の学習)には次のような共通点があります。
それぞれについてもう少し詳しく説明しましょう。
英語は人間同士のやり取りに、JavaScriptなどのプログラミング言語は人間とコンピュータとのやり取りに使われます。このように、やり取りの相手は異なるものの、いずれも人間が相手に意図を伝えるために使えるという点は共通です。
英語は長い歴史をもった自然発生的な言語(コンピュータ業界では「自然言語」と呼ばれます)ですが、JavaScriptは30年ほど前に最初は一人で作られた人工的な言語(「人工言語」)です。
自然言語は世界のすべてについて記述しなければならないため、構文も複雑で単語数も膨大です。
これに対してプログラミング言語を使った記述は、現在のコンピュータにできることに限定され、自然言語に比べればかなり範囲が狭くなります。
このため、構文は単純で、しかも使われる単語の数も限られています。
たくさんある英語の構文の(ごく)一部だけを形式化して、コンピュータに可能なことを、人間が依頼できるようにしたのがプログラミング言語です。
英語を使えるようになるためには、単語やイディオム、それに文法を覚える必要がありますが、覚えただけでは使い物になりません。繰り返し練習をして、すぐに口から出てくるようにしなければ会話はできませんし、スラスラ書けるようになっていなければ時間がかかって実用になりません。
この点はJavaScriptについても同じです。覚えるべき文法は英語に比べればはるかに単純です。しかし、文法を覚えただけでは役に立つプログラムは作れません。英語で言えば「イディオム」のようなものを覚え、さまざまな場面で応用できるように練習しておかないと、使えるようにはなりません。
英語もJavaScriptも、文法を覚えないと使えませんが、文法を覚えただけでは役に立たないのです。
英語はあくまで道具であり、通常は何かをするために英語を使います。銀行に就職した英語が得意な人が英国に派遣されたとしましょう。英語がわかっても、銀行業務に関する知識がなければ、使い者になりません。
プログラミングでも対象分野の知識が必要です。たとえば、一世を風靡した「ポケモンGO」などの位置情報ゲームについて考えてみましょう。「ジム」をどこに配置するのか。北緯何度何分、東経何度何分の位置に配置するのか。そもそも、どうやって位置情報を扱うのか、知らない人にはポケモンGOのゲームは作れません。
銀行向けのシステムを作るならば、銀行内部の処理の仕組みや流れを把握しない限り使えるシステムはできません。
このように、対象とする領域の知識も、どうしても必要になります。
自分やプロジェクトのメンバーが必要とする知識は、開発するアプリやシステムによって、毎回変わることも珍しくありません。
個人でアプリ等を作る場合も同様です。どんなアプリを作るかによって、必要な知識は大きく異なります。ですから、「これを読めばどんなシステムでも作れるようになる」といった本を書くことは不可能で、何をするかによって必要な知識は変わってしまいます。
このため、すべての皆さんの用途に合致するような課題解決の方法を提示することは不可能なのです。「たとえば、こんな時にはこんなふうにすればよい」という例を(できるだけたくさん)示し、皆さん自身が応用できるようになっていただくしかありません。
この本では、ウェブブラウザで比較的簡単に扱え(それでいて結構見栄えのする)画像や動画を使った例や、筆者が得意とする語学関連の例を多く使って説明しています。
「プログラミングは理系の人がやるもの」と思っていませんか。筆者が思うに、理系、文系はあまり関係がありません。文系の人でもプログラミングが得意になる人は少なくありません。
たしかに、大学などでプログラミング言語の授業を担当するのは理工系の学科の先生がほとんどですし、英語(などの外国語)は文系の学科の先生が担当する場合が多いでしょう。
そのせいもあるかと思いますが、英語の授業のテキストとしては小説など文系の文章を読まされることが多いように思います。筆者は小説は嫌いではありませんが、時々しか読みませんし、「英語で」となるとかなりハードルが高くなります。大学の授業で、テキストにスポーツ関連の話題が登場したことがあって、そのときはとても読むのが楽しく、友達に「今日はスポーツの話題だったら、簡単に読めた」と話したことを今でも覚えています。
英語嫌いの人は、自分が好きでない内容を英語で学ばされて、英語嫌いになったのかもしれません。ですから、プログラミングに関する知識を英語で仕入れるのは、(それほど)嫌ではない可能性もあります。
一方、プログラミングの本には、「フィボナッチ数列を表示するプログラムを作れ」といったような数学関連の話題が登場するケースが少なくないように思います。「理系の読者が多い」と、(無意識のうちに)仮定している著者が多いのかもしれません。
語学やプログラミングの好き嫌い、向き不向きの判定には、理系、文系とは別の基準が必要なようです。どんな人がプログラミングに向いているのか。筆者は講座でお目にかかった時「この人、プログラミングに向いてそう」などと思うことが時々あるのですが、自分で何を根拠にそう思うのかはよくわかりません*6。
いずれにしろ、「文系だからプログラミングには向いていない」と決めつける必要はありません。
[*6] といったような、対面でないと伝わらない情報もあるようですので、対面の講座へのご参加もお待ちしています。本やリモート講座では得られない効果があります。お申し込みはこの後ろに示すサポートページからどうで。
「はじめに」で紹介した「ある日突然わかる」という現象は、語学学習についてもあてはまるようです*7。「浸る」時間が必要なこと、人によって習得するスピードが異なることも同様です。
[*7] 「英語がある日突然わかる」でウェブ検索してみてください。
ここまでは英語(外国語学習)とJavaScript(プログラミング言語の学習)の共通点について書きましたが、今度は両者の関係を別の角度から見てみましょう。
「英語ができたほうがJavaScriptの習得には有利」なのです。
プログラミング言語はいわば「形式的な英語」です。形式的な英語を使ってコンピュータに命令をして、いろいろな処理をしてもらいます。ですから、「ホボホボ英語」であるプログラム(「コード」とも呼ばれます)をていねいに「読む」ことができれば、何をやっているか意味がわかるのです。
命令(動詞)は(基本)すべて英語の表現で書かれますし、操作対象(名詞)も英語で書かれることが多いのです。そして、そうした命令や操作対象を表す英語表現の綴りを一箇所でも間違ってしまうと、そこでプログラムは動かなくなります。x
と小文字で入力すべきだったものを、X
と大文字にしてしまっただけでも動かなくなります。
さらには、誤りを伝えてくれる「エラーメッセージ」などもすべて英語です(これは「形式的な英語」ではなく「普通の英語」で書かれます)し、「ドキュメント」(資料)も英語で書かれることが圧倒的に多いのです。ですから、英語の読解力があったほうが情報の入手がはるかに簡単になります。
さらに、キーボードを見ずに文字を入力できる「タッチタイピング」ができたほうが、右手の人差し指だけを使って入力するよりも効率が上がります。
したがって、英語が得意な人のほうが、英語が苦手だった人よりも有利なのです。
でも、安心してください。そんなに難しい英語は使われません。プログラムの基本要素(構文要素)で使われる英単語の数は全部で百個にもなりません。それだけ英語の表現を覚えれば、プログラム自体は書けるのです。
ただ、プログラムで処理する対象は限定されないので、説明のための文書に登場する単語には、どのようなものが出てくるかわかりません。たとえば、原子力発電を制御するシステムなら、物理の専門用語が使われる可能性が高いでしょう。
しかし安心してください。一般的な小説などに比べれば、かなり平易な単語や表現が使われます。ネイティブスピーカー以外の人も読むことを知っているので、多くの人は平易な表現を使ってドキュメントを書いてくれます。そして、平易な表現で書かれた文書は、最近の翻訳アプリを使えば、かなりの精度で日本語に翻訳してもらえます。
逆に考えれば、「授業以外、英語で会話をしたことがないので、英語はまったく役に立ったことがない」という人にとっては、役に立つ英語を学ぶチャンスなのです。そう考えて、積極的に英語のドキュメントの読解にも(翻訳アプリの助けを借りて)挑戦してみてください。
そして「英語が前から好きだった、得意だ」という人にとっては、それを活かす絶好のチャンスです。
プログラムを構成する「キーワード」などに使われる単語数は、ごく限られており、100個も覚えれば十分です。そこで主なものをここに一覧にしてしまいました。ここにあげた単語を覚えていただけば、基礎的なJavaScriptのプログラムを書くのには(だいたい)十分なのです。
英語を学ぶ時はいつでもですが、単語そのものの「感じ」というか、「雰囲気」を覚えるようにしてください。「単語が発するものを全身で受け止める」感覚をもっていただくとよいと思います。
新しい人に出会った時に、その人の印象をなんとなく記憶すると思いますが、単語のもつ雰囲気を心に刻むようにするのが語学上達の(ひとつの)コツだと思います。
では、この本の必須英単語の一覧です。朱字になっているのは要注意の綴や発音、それにコンピュータ用語です。ここにあげた単語だけは、この本を読み終わるまでに絶対に覚えてください*8。
alert [ələ́rt] or [ələ́ːt] ── 注意(せよ) prompt ── 促進する、(入力を)促す、催促、入力促進を促す記号、プロンプト function ── 機能、関数 for ── 〜に対して、〜の間、〜のために loop ── 繰り返し、ループ variable(var) ── 変化する、変数[vary + able ── 変わる+〜ができる] constant(const) ── 変化しない、定数 let ── 〜にする、〜させる。「let x = 3」 ←xの値を3にする if ── もし...ならば、...のとき、...の場合 else ── そうでなければ、ほかの(時) true ── 真、正しい false ── 偽、正しくない、間違い warning [wɔ́ːrniŋ] ── 警告(エラーの可能性大) error ── 間違い、エラー math ── 数学(←mathematics) modulo(mod) ── (割り算の)余り(剰余) random ── ランダムな、無作為の floor ── 床、切り下げる operator ── 演算子、オペレータ operand ── 何かをされる人(物)、被演算子、演算(計算)の対象 division ── 部分、〜部、分割 ← <div>タグ span ── 及ぶ、期間、範囲、間の距離 ←<span>タグ object ── もの、物体、オブジェクト property ── 性質、属性、プロパティ method ── 方法、やりかた、手段、メソッド document ── 文書、ドキュメント、書類 element ── 要素、構成要素、成分 ID (←identificationの省略形) ── 識別、識別用の番号、身分証明(書) inner ── 内側の、内部の height [hait](ハイト) ── 高さ width [widθ](ウィドゥス) ── 幅 margin ── 余白、余裕、へり、利幅、マージン pad(padding) ── クッション、詰め物(をする)、パッド、少し膨らませる、パッディング integer(int) ── 整数 (0, 1, 2, ..., -1, -2,...) float、floating number ── 小数(小数点付きの数字) string ── 文字の並び、文字列、糸、一連のもの location ── 場所、ロケーション、位置 reference ── 参照(する) strict ── 厳格な、厳密な parse ── 単語に分け品詞などを特定する、構文解析する
[*8] とはいっても、繰り返し登場しますので、多分絶対覚えられます。ご安心ください。
なぜ筆者がプログラミングの虜になったか。
楽しかったからです。
それから◯十年以上、基本的にはずっと楽しんでプログラミングをしてきました。もちろん、締め切り間近なのにうまく行かず、(ほぼ)徹夜続きで胃が痛くなる思いをしたこともありましたが。
ものを作るのは楽しいのです。日曜大工とか、手芸とか、実際に物を作るのは、楽しいですし、完成すると嬉しくなります。
プログラミングは、こういった「物理的な物」を作る作業よりは、小説を書いたり、作曲したりといったほうに近いと言えます。コンピュータの画面上に表示される「仮想的なもの」を作る作業です。
よくできたゲームをするのは楽しいですが、楽しいゲームを作るほうがもっと楽しい。「俺ならもっと楽しいゲームを作れる(かもしれない)」からなのかもしれません。
英語が話せれば、新しい友達(や恋人!)ができたり、外国旅行が(それほどの)不自由なくできるようになり、新しい世界が広がります。そうすると、英語(を学ぶことが)がより楽しいものになるでしょう。
就職に有利だから、お金が稼げるから、というのも十分な動機にはなるでしょうが、楽しめれば、プログラミングも英語も、楽に(苦労せずに)身に付けられます。
「楽しい」「楽しくない」は個人的な感情なので、「楽しく思え」というわけにもいきませんが、この本を読み進めてみて何の楽しさも感じられないようならば、プログラマーになるのは厳しい(向いていない)のかもしれません。
この本で紹介するJavaScript(略して「JS」)と、Javaは、名前の由来に関係はありますが、まったく別のプログラミング言語です。
まちがって、Javaの本だと思われた方、「Java」の後ろに「Script」が付いていない本をご購入ください。
もっとも、Javaを学ぶ前に、この本でプログラミングの基礎を学んでいただくのも効果的ですから、よろしかったら、まずこの本をお読みください。
ちなみに、付録Cには、Java(を含む他のプログラミング言語)の紹介があります。
この本の本文は、大きく次の4つの部分から構成されています。
第1章から第7章は、プログラミングの基本概念の紹介です。計算をするための「+
」や「-
」などの「演算子」や、「制御構造」と呼ばれる処理の順番を制御する機構(関数、分岐、繰り返し、タイマー)、それに処理の際にデータを記憶するための「データ構造」(変数、定数、配列)について説明します。
いずれの章でも、その章で紹介する概念を端的に表す「章の課題」を最初に提示し、それを解いていくという形式で進めます。各章の最後には、数個から十数個の練習問題が付いています。
第8章はプログラムがうまく動作しないときに、その原因となる「バグ」を取り除いて問題を解決する「デバッグ」に関する説明です。ChatGPTなどの生成AIを使う方法も含め、筆者の講座の受講生の方々が遭遇したバグを題材に、それを解決するための方法を紹介します。また、そもそも「デバッグを(できるだけ)しなくて済むようにする方法」についても説明します。
第9章から第12章は、ブラウザに付随するJavaScriptが得意とする、画像や動画などの動的な処理を中心に、「オブジェクト指向」や「イベント処理」について解説します。この4つの章で、合計約40問の練習問題が用意されています。
第13章と第14章は、全体の「まとめ」です。第13章でプログラミングに登場する概念を分類、整理し、第14章でこれまでの知識を総動員して、小規模ながら完結したウェブサイトを構築します。
このほか、付録Bと付録Cに付加的な情報があります。付録Bには、本文に書ききれなかったJavaScriptの機能等で、初心者のレベルを卒業する前に知っておきたい事柄をまとめました。付録Cでは、これから先に進みたい方のために、参考文献や(ブラウザ付属の)JavaScript以外の言語(Node.js、Go、Javaなど)を紹介しています。
この本には「サポートページ」があり、追加情報の閲覧や本文で使う例題や問題の解答例のダウンロードなどができます ── https://musha.com/scjs
例題や解答例のダウンロード方法は第1章で紹介しますので、その指示に従ってください。
また、この本と(ほぼ)同じ内容を解説した動画も公開しています。上記サポートページからご覧ください。