誰もが受けたい!アクセス解析5分クリニック
「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください(後編)

JavaScriptでも“基本ルール”がわかっていれば、読解が楽になる。「プログラムの要点をおさえるための、読み解き方法」の“基本ルール”を紹介したい
誰もが受けたい!アクセス解析5分クリニック
丸山先生
医者:丸山先生(35歳・男)
当クリニックの代表。
来栖あきら
研修医:来栖あきら(25歳・男)
イケメンの研修医。
綾瀬ゆい
研修医:綾瀬ゆい(25歳・女)
優しい天然ボケの研修医。

ここ「アクセス解析5分クリニック」には、Webサイトについてさまざまな悩みを抱えた患者が、毎日のようにやってくる。研修医の来栖と綾瀬はデコボココンビだが、院長の丸山先生がとにかく名医。たった5分ですべての悩みを解決する!というのだ……。(登場人物紹介を詳しく見る

今回のお悩み
「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください【後編】

“読み解き”に注力するのが、“言語”習得のはじめの一歩

前編ではJavaScriptに対する苦手意識をなくしたいという人のために、プログラミング用語である「変数」「関数」「制御構文」について解説した。

今回は、さらに苦手意識をなくすため、JavaScriptの“読み解き”にフォーカスして説明したいと思う。

前編で、変数などは、なんとなくわかった気がしますが、やっぱり難しかったです。

私も同じでした。それに、基礎がわかっても、ふだん見かけるJavaScriptのプログラムが理解できるわけではないし……。いつになったら理解できるのか、不安になっちゃいます。

やっぱりJavaScriptはプログラミング言語だからね。「言語」というだけあって、単語や文法があるわけだから、「5分で全部習得する!」なんてことは、さすがに不可能だ。普通の言語学習と同じように、「単語を覚えて、文法を覚えて、慣用句を覚えて……」というステップが必要だ。

そうすると「日々学習」しかないですよね。でも、英語なら「習得に数百時間かかる」って言う人とかいるじゃないですか。業務なのにそんなに時間はかけられません。

僕は「5分で全部習得するのは不可能」といったんだよ。逆に言えば、目的に応じてある程度の時間をかけることと、覚える範囲を見極めることが必要なんだよ。だから今回は、「プログラムの書き方」ではなく、「プログラムの要点をおさえるための、読み解き方法」を教えようと思う。

要点をおさえるための読み解き方法

英語なら、「主語が来て、述語が来て、その後、目的語や補語が来る」といった“基本ルール”があるね(もちろん例外はあるのだけど)。このような“基本ルール”を知っていれば、英語の読解は、ずいぶん楽になる。

そうですね。

なら同じように、JavaScriptでも“基本ルール”がわかっていれば、読解が楽になるはずだ。以下のルールが、JavaScriptにおける“基本ルール”だ。まずは、これを覚えておくんだ。

  • 処理は上から下に実行される。上から下に読んでいけばよい。

  • JavaScriptのプログラムは、「ブラウザに何か処理をさせる」という目的がある。たとえば「ブラウザからデータをサーバーに送る」「文字を出力する」「CSSを制御する」といった目的で使われている。

  • こうした複数の作業・目的が積み重なり、プログラムとなっている。そして最終目的は、下のほうのブロックに書いてあることが多い。

上記の“基本ルール”を覚えたうえで、前編で例示したスクリプトを、あらためて見てほしい。

<script>

//1.
// ・数字「2」
// ・数字「8」
// ・答えを格納する場所
// を、それぞれメモリ上に用意する(変数を作る)
var twobox;   // twoboxという名前で場所(変数)を作る
var eightbox; // eightboxという名前で場所(変数)を作る
var answer;   // answerという名前で場所(変数)を作る

//2.1つ目の変数(twobox変数)に値を入れる
twobox = 2;

//3.2つ目の変数(eightbox変数)に値を入れる
eightbox = 8;

//4.CPUに渡して計算させ、その結果を3つ目の変数(answer変数)に格納する
answer = twobox + eightbox;

//5.answer変数の内容を画面上に表示する
alert(answer);

</script>

綾瀬さんは、このプログラムの最終目的は何だと思う?

最後に書いてある「alert(answer);」。つまり「変数の内容を画面上に表示する」ことですかね?

正解だ。このように、プログラムはある目的に向かって上から下に進んでいく。そのなかで、変数を作って、何か処理をさせ、さまざまな目的の作業を積み重ね、最後に最終目的の行動をさせているんだ。

だから、プログラム内容がわからないときは、「結局何をするプログラムなのか?」ということを意識し、下のブロックから先に見て、各個所の目的を考えてみると、理解できることも多い。

プログラムを読み解けない時

先生、最後のほうに目的の処理があるのですよね? でも、前編で出てきた下記のスクリプトは、最後の行は「}」1文字だけの文になっています。

<scirpt>

var aaa = 99;

//制御構文のifとelse

//bbbが99だったら
if (bbb == 99) {
    document.write("bbbは99です");
}
//そうじゃなかったら
else{
    document.write("bbbは99ではありません");
}
</script>

この場合、最後の「}」は、「if」という制御構文を締めくくるための「}」だ。このプログラムの目的は、その前のブロックにある「document.write(~);」と、条件に応じてHTMLに文章を表示する部分だ。

こういった「}」に惑わされないためにも、前編で話した「制御構文」も覚えておいてほしい。

これは、文法がわかってないと、英語がわからないのと似ているかもしれない。

なんか、結局、読めそうで完全には読めない感じがもどかしいです。

まあ、贅沢を言ってはいけない。もともと5分で全部習得できるようなものではないのだから。でも今回は最小限、大意をつかむ読み方のコツを説明したから、とっかかりはつかめたんじゃないかな?

興味がわいたら、いろんなプログラムを読んでみるといいよ。ぐっと理解が深まるはずだから。

プログラムの“パーツ集”「jQuery」

ところで先生、「jQuery」というのもJavaScriptのプログラムですよね? でも、いつも見かけるプログラムとは、似ても似つかない内容で、理解できないのですが……。

「jQuery」って、私はまったく使ったことがありません。なんですか?

「jQuery」は、サイト制作時にとても便利なJavaScriptプログラムの“パーツ集”だよ。中身を見ると、JavaScriptプログラムで書かれているのがわかるんだけど、こういう専用パーツを集めたプログラムを「ライブラリ」というんだ。

「ライブラリ」は、今まで説明してきたプログラムとは違う形に見えると思う。これは、jQueryなどのライブラリは、JavaScriptの達人の手によって作られているから、基本の技だけでなく、さまざまなノウハウを凝縮して作られているんだよ。

ということは、かなり深くJavaScriptを学ばないと、理解できないということでしょうか?

正確に言うとそうだ。ただ「jQueryを理解すること」ではなく、「jQueryを使うこと」に限れば、そんなに難しくないよ。

jQueryを使うのは、すでに出来上がったパーツを組み合わせることに近い。むりやりたとえれば、「組み立て家具用の部品集」とかに似ているかもしれない。組み立て家具って、同じような部品が用意されていて、説明書を読めば誰でも組み立てられるだろ? それに部品同士の組み合わせで、本棚になったり机になったりする。

jQueryも、達人が作った組み立て家具の部品のようなものだから、説明書を読んで組み合わせれば、何とか形になる。

なるほど。ライブラリは、細かい部品が集まったものだから、必要に応じて、そのまま必要な部品だけを使えばいいわけですね。

まとめ

今回は、前編と後編にわたってJavaScriptについて解説した。「JavaScriptに対する苦手意識を解消する」のが目的だったけど、少しでも興味をもってもらえると嬉しい。現在のWebサイト制作では、JavaScriptは必須だからね。

余談の雑学だけど、JavaScript自体はもともと、インターネット初期にネットスケープ社がブラウザを動かす目的で作った、非常に柔軟性の高いプログラミング言語だったんだ。ただ、その設計思想がすばらしかったため、基本仕様を踏襲して、さまざまな“方言”も作成された。たとえばマイクロソフト社のInternet Explorerで動作するのは、「JavaScript」ではなく、「Jscript」と呼ばれている。

それからもJavaScriptは、今日まで拡張発展しながら、ブラウザの枠すら超えて、さまざまなシーンで使用されるようになってきている。

シンプルだけどとても奥深い言語なので、ぜひ勉強して、JavaScriptプログラムの楽しさを味わってほしい。

今日の処方箋

お悩み「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください(後編)

アドバイス前編に出てきた、以下のHTML中のJavaScriptプログラムを読んで、大意の読み解きができるか試してみよう。

<html>
  <head>
    <meta name="http-equiv" content="text/html; charset=utf-8">
    <title>動作確認</title>
  </head>
  <body>
    <script>
    function tasuzoB(tasu,tasareru) {
      var kekka;
      kekka = tasu + tasareru;
      return kekka;
    }
    var answer;
    answer = tasuzoB(2, 8);
    alert(answer);
    </script>

    ダイアログボックスに「10」が表示されたはずです
  </body>
</html>
  1. 12 【2分】このスクリプトの目的は何でしょうか?

    目的がどの行に記載されているか、考えてみてください。

  2. 34 【2分】 どこが関数かわかりますか?

    どの行からどの行までが関数か、指摘してみましょう

  3. 5 【1分】 カスタマイズしてみましょう

    このプログラムは2+8を実行しているプログラムです。これを11+9に変更してみましょう

筆者からお知らせ

企業のウェブ担当者・ディレクター向け通信講座の「ウェブ担当者通信」は、セミナー講座「はじめてでも3時間でわかる!明日からできるWebマーケティングはじめの一歩」を大阪で4月24日、東京で5月29日に開催します。両日とも内容は同じです。

本講座は、「はじめて でも、できる(はじでき)」をコンセプトとしたウェブ担当者通信の講座シリーズ。Webマーケティングの入門書『沈黙のWebマーケティング』を教材として、著者である松尾茂起氏(ウェブライダー)監修のもと、同社の平野順也氏と齋藤功氏が講師となって、Webマーケティングを始める上で、押さえておくべき本質的な考え方を解説します。セミナーは講義だけではなく、明日からすぐに使える実践テクニックとして、SWOTシートなどを使ったワークショップも行います。

  • 日時:
    【大阪】4月24日(金)14:50-18:30(開場:14:30-)
    【東京】5月29日(金)14:50-18:30(開場:14:30-)
  • 会場:
    【大阪】メビック扇町 交流スペース1(大阪市北区扇町2-1-7 関テレ扇町スクエア3F)
    【東京】KDDIウェブコミュニケーションズ セミナールーム(東京都千代田区麹町三丁目6番地 住友不動産麹町ビル3号館6階)
  • 参加費:ウェブ担当者通信プレミアムメンバーは講座のみだと無料、教材込みで2,376円。一般は講座+教材費1万,776円、教材持参割引で8,400円
  • 定員:30名
  • 詳細・申し込み:http://webtan-tsushin.com/kouza/marketing_basic.html

※キャラクターイラスト(来栖、綾瀬):「コミPo!」にて制作

この記事が役に立ったらシェア!
tweet40このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

グローバルナビゲーション
サイト全体で共通して表示されるナビゲーション。 多くの場合、第1階層(大カ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore