オススメJavaScript入門書!2週間の短期学習を可能にする2冊!

ブログやウェブサイトを作成していると、「この部分でちょっと動き(アニメーション)をつけたいな」とか、「閲覧者からの入力に応じて表示を変えたいな」とかって思うこと、ありますよね。いわば、自分のサイトに色気をつけたいな…と思う瞬間です。

簡単なアニメーションや、ユーザーのインプットに応じた表示といった動的な挙動は、JavaScriptというプログラミング言語で実現されていることが多いです。あるいは、その発展版としてjQueryが使われていることもよくあります。

「でもプログラミングとかやったことないし…」「文系じゃないから無理だし、、、」なんて消極的になる必要は全くありません。なぜか?

JavaScript は習得が非常にカンタンで、しかも学んでいて楽しい言語だからです!

あなたもこの記事を読んで、JavaScript 学習のメリットと学習の前提条件を理解し、入門書を使って順序良く勉強すれば、2週間で JavaScript を自分のモノにできますよ。是非参考にしてみてください!

ちなみに、私が JavaScript や jQuery を使って実装した簡単なプログラムにこんなのがあります。

きっかけは鈴木こあらさんの下記のつぶやき。【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装し...

あと、WordPress の AmazonJS というJavaScript ベースのプラグインをカスタマイズしたという次のような記事もあります。

このブログでは WordPress のプラグイン AmazonJS を使わせてもらっている。AmazonJS を使うと、次の画像のよ...

以下の学習法とテキストで習得してもらえれば、上記のようなことも自分で考えながら実施できるようになります!

スポンサーリンク

JavaScriptはなぜ簡単か?

JavaScript はプログラミングの中でも非常に学習しやすい言語です。なぜそう言えるか? その最大の理由は、あなたがPCを持ってさえいれば、プログラミングするための準備は他に何も要らないということです。

JavaScript を試しに書いて見ましょう。たとえば、あなたのデスクトップに次のような test.html というファイルがあったとします。

上記に、JavaScript のプログラムである次の3行書き加えます。

書き加えられる場所は何か所かありますが、ここでは body の閉じタグの直前に挿入してみます。

上記 test.html を保存して、ブラウザで開くと、、、

「Take it easy!」というアラートが表示されると思います。一度やってみてください。誰にでもできる JavaScript プログラムの第一歩です。

こんな風に、テキストエディタとブラウザがあれば、他に何かを用意することなく、実際に書いてみて実行することができるというのが、JavaScript が学習しやすい最大の理由なんです。

他のプログラミング言語だと、こんなに簡単ではありません。開発環境や実行環境を整備しないといけないことが多いので、プログラミングを開始するまでの道のりが長かったりするんですよね。

JavaScript だと、思い立ったその日からすぐにプログラムして、すぐに結果を確かめられるというとっつきやすさがあります。

そして、プログラムの内容自体も、仮にJavaScriptを知らなかったとしても、見て分かるような内容であることが多いです。

上記の alert(‘Take it easy’) というのは、もうそのまんまですよね。アラートとして「Take it easy」を出してね、という意味のプログラムであることは、一度眺めれば分かると思います。

ほら、自分にもできそうだって思えてきたでしょ?

やってみると分かりますが、実際カンタンですし、その割に色々なことができるので、プログラミングの最初の言語として中学校で教えたら良いのに、って私は思っているくらいです。

学習の前提条件

さて JavaScript がいくら習得しやすいといっても、ある程度の予備知識は必要です。それは、HTML と CSS の基本知識ですね。

JavaScript というのは、HTML や CSS をリアルタイムで書きかえるのが主な機能です。なので、HTML・CSS を理解していないと、JavaScript の学習を始めたところで、訳が分からない状態になってしまいます。

といっても、HTML と CSS はホームページを作る際の基礎事項なので、JavaScript をやりたいな!って思うくらいの人は、既に身に付いていることがほとんどだと思います。

イマイチ自信ないかも・・・という人だけ、HTML・CSS の復習をしておいてください。

私自身は、HTML や CSS を勉強したのは10年以上前なので、最近の良い入門書は詳しくは知りません。でも、次のものとか良さそうですよね。

目次を見るとしっかりとした構成になっていますし、レビューの評価も高いです。

ちなみに、私が最近購入したHTML関係の書籍は次のものです。

こちらは私のようにかつて HTML や CSS を学習した経験のある人が、HTML・CSS の最新の規格である HTML5・CSS3 を学ぶのに適した本だと思います。中級者向けっていう感じです。

JavaScript を学ぶにあたっては、先に挙げた『HTML5&CSS3デザインきちんと入門』レベルの内容が押さえられていれば全く問題無しです。

時間に余裕がある人で、HTML や CSS の細かいところまで知っておきたいなという人は、『HTML5&CSS3標準デザイン講座』をおさえておく、というくらいで良いと思います。

JavaScript 学習のコツ

話を JavaScript に戻しましょう。JavaScript を学ぶにあたり、学習のコツを1つ知っておいていただきたいと思います。

それは、自分で手を動かしてプログラムしながら学習を進めていくということです。これをするのとしないのとでは、理解度・習熟度に大きな差が出ます。

もちろん、最初はテキストに書いてあるサンプルのプログラムコードを自分のPCのテキストファイルに写し書きすることになるでしょう。というか、学習の大半の時間をそのような作業に費やすことになるかもしれません。

でも、それで良いのです。

もし自分の手を動かさずに、字面だけを追って学習を進めようとすると、どうしてもプログラムの細かい点に考えが及ばなくなってしまいます。

サンプルコードを真似て書いてみて、「ここはこの順序・作法で書く必要がある」「目的の結果を得るには、このようなロジックを組み立てる必要がある」といったことを意識せざるを得なくなります。そのために、実際に書いていくことが重要なんです。

また、テキストのサンプルプログラムを完璧に真似たはずなのに、実際に動かしてみると予想通りの挙動をしないことがあったりします。

これはプログラミング学習のあるあるですが、こういう場合、テキストが間違っているのではなく、学習者のケアレスミスが原因となっていることが多いです。

たとえば、ひとつの命令の終了を意味する行末の「;」(セミコロン)を入れ忘れていたり、といったことです。

どんな人でもプログラムを書く際にミスをしますが、「どのような点で自分はミスをしやすいか」ということを学習初期の段階から知っておくと、その後自分でプログラミングをしていく上でも役立ちます。

出来るだけ早くミスの傾向をつかむためにも、サンプルプログラムを自分でテキストファイルに打ち込んでいく作業は大事なんです。

2段階に分けて学習する

今回の記事では、2週間で2冊の入門書に取り組み、JavaScriptを自分のモノにするという学習スケジュールを紹介します。「えっ、2冊も読むのダルいよ!」と思うかもしれませんが、2冊やることには意味があります。

プログラミングは、多くの人が習得を夢見て学習を開始するのですが、途中でつまづいて苦手意識を持ってしまい、結局あきらめてしまう人もまた多いんです。(私も何度習得に失敗したことか…)

でも、そんなのもったいないですよね。プログラミングって本来楽しいものですし、できるようになるとPC・ITの世界でできることが全く変わります。

だから、挫折することなく続けるために、初級者としての学習を2段階に分けて考えましょう。

  • 第一段階:「超」入門書で浅く狭く、JavaScriptの楽しいところだけを学ぶ
  • 第二段階:しっかりめの入門書でもう1度学び直し、同時に実践力を高める

第一段階では、「超」入門書を使います。「超」入門なので、JavaScript でできることの全体像を知ることは目指しません。

それでも、「変数」や「配列」などの基本中の基本の概念については知ることになります。また、少し自分でプログラムを書いてみることで、JavaScript の雰囲気を感じ取っていきます。それが、「超」入門書を使う目的です。

第二段階では、「超」入門書でつかんだ感覚をもとに、真の入門書を使ってもう1度基礎概念から学び直します。

既に「変数」や「配列」の概念が頭の中でイメージできている状態ですので、全体の3分の1くらいは復習のような気持ちで学習が進められることでしょう。

しかし今回はカッチリした入門書ですので、新規事項もたくさん出てきますし、プログラムも少し複雑になります。でも、第一段階で地ならしをしていますので、学習は問題無く進むことでしょう。

このように、初級者の学習は2段階に分けて考えると、「難しい」「分からない」という状態に陥ることを極力抑えることができます。そうするために、2冊の本を使うのです。

たとえて言うなら、小さい子どもに水泳を教えるとします。でも、いきなり25メートルプールに突き落したら、あっという間に溺れて、水に対して苦手意識を持ってしまいますよね。

そこで、第一段階としては家庭用プールに入れて遊ばせてやったらどうでしょう。水に入って動き回ることが好きになり、もっと水遊びがしたいと思うようになるはずです。

そのあと、第二段階として25メートルプールに連れていけば、スムースに水泳の練習を始められると思います。学習を2段階に分けるのは、そういうことです。

おすすめ本と学習スケジュール

前置きが長くなりましたが、いよいよ私のおすすめの本と、具体的な学習のスケジュールについてご紹介します。

第一段階の学習書としては、『確かな力が身につくJavaScript「超」入門』を使用します。

第二段階の学習書としては、『10日でおぼえるJavaScript入門教室』を使用します。

1日あたりの学習量としては、2~4時間程度をとってもらえればいいかと思います。

その時間を確保するという前提で、1冊目の『確かな力が身につくJavaScript「超」入門』に4日かけます。次に、2冊目の『10日でおぼえるJavaScript入門教室』に10日かけます。

全部で14日、合計で2週間です。

以下、それぞれの本の特徴などを書いていきますので参考にしてください。

『確かな力が身につくJavaScript「超」入門』

まずはこちらの『確かな力が身につくJavaScript「超」入門』

JavaScriptプログラミングが、これ以上にない!っていうくらいやさしく解説されています。著者の狩野氏は、セミナーや研修講師を数多く手掛けているからなのだと思いますが、初学者の気落ちを本当によく理解されているようです。

本書ではまず JavaScript(あるいは、プログラミング全般)の機能を、「データをインプットすること」「そのデータを処理すること」「処理したデータをアウトプットすること」に分けます。

そして JavaScript の学習を具体的に勧めていくにあたり、今やっているのは「インプットの部分」なのか、「データ処理」なのか、「アウトプット」なのか、というところを明確にしながら学習していきます。これが非常に分かりやすい。

本書のさらなる良い点として、「サンプルプログラムの楽しさ」を重視しているところが挙げられます。

カウントダウンタイマーや、税込み価格を自動計算するプログラム、プルダウンメニューを選択すると自動的に画面遷移するプログラム、スライドショーなど、どれも「ネットで見たことある!自分でもできることならやってみたい!」と思えるものばかりです。

なお、後半の2つの章では、jQuery や Ajax、外部 API を使用した応用的な話が出ています。

この部分は、やや背伸びしすぎな感もあるので、さっと眺める程度で良いと私は思いますし、思い切ってとばしてしまっても良いと思います。

とにかく4日という短い日数で本書を読み切り、JavaScript がどんなものか、どんなことができるのかを体感することができれば、本書での学習はゴールです。

『10日でおぼえるJavaScript入門教室』

次は『10日でおぼえるJavaScript入門教室』に取り組みます。

先の「超入門書」で、JavaScript を学ぶ下地はあなたの頭の中にしっかりと出来上がっています。

そこで本書ではもう少し踏み込んで、専門的な解説に触れながら、さらに実践力を深めていくためのプログラミング練習をしていきます。

この本の最大の特徴は、各章が「実習」→「講義」という順番で書かれていることです。

つまり、各章の先頭では JavaScript のサンプルコードが紹介されていますので、それを本書に書いてある通りに自分のPCに打ち込みます。そして実際に動作させてみて、そのプログラムがどのような挙動になるのかを確認します。その後、サンプルコードの詳細な解説に入る、という構成になっているんです。

人によっては、そんな構成は不合理だと思うかもしれません。実際にコードを打つ前に、まずは解説をしてもらい、理解を深めた後に実践すれば良いではないかと思うかもしれません。

確かにその意見は一理ありますし、私もかつてはそう思っていたくらいなので、どうしても受け入れられない人は、そのような学習順序で本書を利用しても良いと思います。

しかし、「実習」→「解説」という順序で取り組むことにはもっと大きなメリットがあるんです。

それは、「実習」を先にやるので、飽きないということです。

内容がよく分かっていなくても、自分で打ち込んだプログラムを実行すると動作するので、なんだか楽しい。楽しさを感じたところで、その仕組みはどうなっているの?という疑問が湧いてきますので、解説に進みます。解説を読むと謎だった部分が氷解し、満足感が得られます。

この構成は、興味・好奇心を刺激するので、眠くなりません。熱い気持ちで学習を続けられます。もし、解説が先だったら、私は眠ってしまうことでしょう、、、

初学者の段階では、理論や理屈よりも楽しむことが大事であり、楽しむためには実践しやすい学習順序になっていることが大切なのではないかと思います。

本書の章ごとの内容としては、JavaScript を使った演算から始まり、その後は「商品の価格表(テーブル)を生成するプログラム」「注文フォームの作成」「ヘルプページの作成」といった具体的な題材に基づいて、JavaScript の様々な機能を試していく、という流れになります。

後半では、Ajax を用いた通信の話も出てきます。ここまで来れば JavaScript にもだいぶ馴染んでいると思いますので、Ajax の学習に取り組むのも良いと思います。

さらに jQuery の話も出てきます。そちらは取り組んでも良いんですが、この後紹介するプラスアルファの1冊で学習を深めるほうがもっと良いかなと思います。

なお、この『10日でおぼえるJavaScript入門教室』、アマゾンのレビューで結構酷評されています。

評価を下げているポイントは、「誤植が多い」「何度読んでも分からないところがある(解説が難解)」という2点のようです。そこについて私から補足をしておきます。

ひとつめの「誤植が多い」に関しては、私は個人的には気になるレベルではありませんでした。というか、この手の学習書は、ソースコード上の誤記はよくあることだと思っています。HTML と CSS の基本的なところが理解できていれば、誤植は誤植として気が付くことができますので、問題にならないと思います。

気になる人は、出版元の翔泳社が正誤表を出していますので、合わせて参照すれば十分でしょう。

今こそしっかり身につけたい HTML5 時代のJavaScript JavaScriptは「早く簡単に作る、早く簡単に変更する」というコンセプトで設計されており、サービスをすばやく立ち上げて、利用者の要求に応えることができる、学習しやすいプログラミング言語です。最近では、HTML5との連携や、手軽なライブラリであるj...

もう1つの「解説が難解」という意見についてですが、そのように感じてしまうのはおそらく、学習1冊目でいきなりこの本に取り組んでしまったからだと思います。

本書は実践を重視している本です。実際、各章が「まずプログラムを書くこと」ありきで書かれています。

要するに、JavaScript について全くの無知な人向けに書かれていた入門書ではないんです。むしろ、初心者から一歩足を踏み出そうとしている人向けの本だと思います。

なので、いきなりこの本を使えば「???」となるに決まっています。こちらの本を最初の1冊に選んでしまう前に、「完全な初心者向け」の本に取り組んでおくべきでしょう。

この記事をここまで読み進めていただいたあなたなら既にお分かりのように、「完全な初心者向け」の本としては、先に紹介した『確かな力が身につくJavaScript「超」入門』を読んでもらえればOKです。それで、十分な基礎的理解が得られます。

その上でこの『10日でおぼえる』を読めば、解説に難しいところは無いですし、実践力(自分でプログラムを読み書きする力)の高まりをしっかりと感じられる良書だと思えるはずです。

最後に、お金の面で得するかもしれない情報を。

こちらの本、第3版が出たのが2012年なんですよね。少し前の本なので、古本でも構わないという人は、Amazonのマーケットプレイスを見てみると、すごく安く売られていることが多いですよ!

プラスアルファの2冊

上記の2冊を終え、もう少し力をつけたいという人向けのプラスアルファな2冊をご紹介します。

『10日でおぼえる jQuery入門教室』

一つ目はこちらの『10日でおぼえる jQuery入門教室』です。こちらも10日でおぼえるシリーズですね。

本書はjQuery の入門書となっています。

jQuery ってよく聞くけど、一体何だろう?と思っている人は多いんじゃないでしょうか(私もつい最近までそうでした)。

jQuery というのは、簡単に言うと JavaScript の進化形で、JavaScript だと記述に何行もかかるものを、ずっと短い行でサラッと楽に書けるようにしたものです。

変なたとえかもしれませんが、jQuery の「楽さ」をたとえていうと、こんな感じです。ちょっと前までは皆、電車に乗る際には券売機の前で路線図を見て目的地までの料金を確認し、お金を入れて切符を買っていましたよね。

でも最近ではそれをやめて、交通系ICカードでピッ♪で終わるようになりました。この「ICカード」くらいの「楽さ」っぷりが、jQuery の「楽さ」です。伝わりますか?笑

それなら、JavaScript を学ぶより jQuery を学べばいいじゃん!と思う人もいるかもしれませんが、そうではないんです。

jQuery も JavaScript を土台にして作られていますので、jQuery を本格的に使おうと思ったら、JavaScript の理解は必要不可欠です(JavaScript の理解無しに jQuery の学習を始めても、消化できずに終わってしまうと思います)。それに、jQuery と JavaScript を組み合わせて使うこともよくあります。

これもたとえですが、日本中どこへ行っても交通系ICカードでピッ♪ができるわけではないですよね。今でも、券売機の前に並んで、路線図を見て切符を買う必要がある駅も存在しています。なので、ピッ♪に行く前の「基本の理解」は欠かせないわけです。

さて、jQuery が身に付くと、サイト作成で使えるアニメーションや機能の幅が、いっそうグンと広がります。JavaScriptで実装するとすればなかなか骨が折れるなと感じていた部分を、jQuery 導入でスパッと書けるようになるからです。

今どき、本格的なサイトで jQuery を使っていないところはほとんどないくらいよく使われていますので、JavaScript をマスターした後の発展事項として是非おさえておきましょう。

本書『10日でおぼえる jQuery入門教室』は、先に紹介した『10日でおぼえるJavaScript入門教室』と同じように、実践を重視したスタイルで学習を進めていきます。

動的なCSSの切り替えやテキストの取得・書き換え、フォトギャラリー、開閉するパネルの実装など、すぐにでも自分のサイトで使えるような題材が豊富に盛り込まれています。オススメです。

『JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで』

プラスアルファの最後の1冊としては、次のものです。

この記事では実践重視の本ばかりを紹介していきましたが、もうちょっと JavaScript の理論・理屈の部分について知りたいという人はこの本じゃないでしょうか。

といっても、実は私も本書については未読の状態です。でも、書店で何冊もの JavaScript の学習書をめくってみるたび、いつも読みたいなと感じるのがこの本なんですね。

実践を少し離れ、JavaScriptという言語の仕様を理解し、開発をしていく上でどんな広がりがありうるか、といった点で重要な知識を得られる1冊なんじゃないかなと思っています。

著者の山田祥寛氏の他のプログラミング関連本も何冊か読んだことがあるのですが、どれも良い!と感じているので、この本にもとても期待をしています。

私はなかなか読む時間が取れていないのですが、JavaScript の中級・上級者を目指すぞ!という人は、是非一度手にとってみてください。

おわりに

以上、私が考えるなりの「2週間で終わるJavaScript学習方法」と、オススメの参考書をご紹介してきました。

あなたの学習がスムースに進み、充実したものになることを祈っています!