目次


JavaScript 言語入門, 第 1 回

基礎

Comments

コンテンツシリーズ

このコンテンツは全7シリーズのパート#です: JavaScript 言語入門, 第 1 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:JavaScript 言語入門, 第 1 回

このシリーズの続きに乞うご期待。

Interactive code: When you see Run at the top of a code sample, you can run the code, check the results, make changes, and run it again.

編集者による注記: このシリーズは、対話式コーディング機能を追加して更新されています。コード・リストに「実行」ボタンがある場合、そのコードを実行して結果を確認し、コードを変更してから再度実行して、その成果を確認できることを意味します。

JavaScript を学びたいと思っているとしたら、今まさに、うってつけのページにアクセスしています。このインタラクティブなチュートリアル・シリーズには、皆さんのスキルを HTML の実用的知識から JavaScript の理解力に広げるための情報が満載されています。全 7 回からなるシリーズを始めから終わりまで完了するには約 2 時間かかりますが、遠慮なく、興味のあるチュートリアルを選んで、そこでの演習に取り組んでください。

セクションごとに、学習した内容を実践できるよう、演習とクイズが用意されています。このチュートリアルの最大の魅力は、セットアップする必要がないところです。皆さんがアクセスしている Web ページで、直接コードを操作できます。別のタブやウィンドウを開く必要さえありません。以下に示すようなサンドボックス内に直接コードを入力することができます。

実際にコードを変更してみてください!

Try icon 出発点として最適なのはいつでも Hello World です。「実行」をクリックして、console.log 関数がこのページに書き込むメッセージを確認してください。その後、メッセージを変えてコードを変更してから、もう一度「実行」をクリックして、結果を確認します。

Show result

JavaScript 言語は、ますます盛んに使われるようになっており、今やインターネット上で使われる言語として最も知れ渡った言語の 1 つと言えるほどになっています。さまざまなプラットフォームとブラウザーで使用できる JavaScript 言語は、バックエンドの言語を選り好みしません。また、開発を支援する多種多様なライブラリー (非常に優れたライブラリーもあります) が揃っているため、開発時間などの短縮につながります。その一方で問題となるのは、これらのライブラリーは本来の JavaScript 言語から逸脱している場合があるため、駆け出しの開発者が言語の基礎を理解できないことです。このチュートリアルでは、初心者が基本知識を身につけられるように、JavaScript 言語の基本となる概念を取り上げて、この言語の基礎を説明します。さらに、それぞれの概念を実際に使用したサンプル・コードもこの記事には満載されています。

JavaScript 言語の概要

JavaScript 言語は、HTLM (Hypertext Markup Language) ページに双方向性を追加できるようにする、無料のクライアント・サイド・スクリプト言語です。クライアント・サイドであるということは、JavaScript 言語はブラウザー内で実行され、サーバー・サイドでは使用されないことを意味します。クライアント・サイド・スクリプトは、サーバーから提供された Web ページがブラウザーによってロードされた後、その Web ページをユーザーが操作できるようにします。例えば Google マップでは、JavaScript 言語を使用して、ユーザーが地図を上下左右に動かしたり、ズームイン/ズームアウトしたりするなどの操作を実行できるようにしています。JavaScript 言語を使用しないとすると、ユーザーが操作をするたびに、いちいち Web ページをリフレッシュしなければなりません。もちろん、Web ページが Adobe Flash や Microsoft Silverlight などのプラグインを使用している場合はその限りではありませんが、JavaScript 言語を使用する場合、プラグインは必要ありません。

JavaScript 言語を使用すると、Web ページのロード後にユーザーがその Web ページを操作できるようになるため、開発者は一般に以下の目的で JavaScript 言語を使用します。

  • HTML 要素とその値を動的に追加、編集、削除する
  • Web フォームを送信する前に検証する
  • 今後のアクセスに備え、cookie を作成してユーザーのコンピューターにデータを保存したり、保存したデータを取得したりする

JavaScript 構文

本題に入る前に、以下の基本だけを押さえておいてください。

  • JavaScript コードを HTML ファイルに含めるには、コードを script タグで囲み、その script タグに type 属性 text/javascript を指定します。
  • JavaScript の文は必ずセミコロンで終わります。
  • 大/小文字の区別があります。
  • すべての変数名は、文字または下線で始めなければなりません。
  • コメントを使用して、スクリプトの特定の行を識別できます。コメントを書くには、二重スラッシュ (//) の後にコメントを続けます。
  • コメントは、スクリプトをコメント・アウトして実行されないようにするためにも使用できます。スクリプトの複数の行をコメント・アウトするのに役立つ方法は、/**/ を使用することです。/**/ で囲まれたスクリプトは実行されません。
JavaScript コードを HTML ファイルに含めるために必要な script タグと type 属性
<script type="text/javascript"></script>

JavaScript をサポートしないブラウザー、またはユーザーが JavaScript を無効にしているブラウザーから JavaScript コードを隠すには、単に JavaScript の文の前後でコメント・タグを使用します。

JavaScript をサポートしないブラウザーに対しては、コメントを使用して JavaScript コードを隠す
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

外部 JavaScript ファイル

JavaScript コードを Web ページに含める際に最もよく使われる方法は、script タグ内に src 属性を追加し、この属性を使用して外部 JavaScript ファイルからコードをロードするという方法です。この場合、以下のように入力します。:

HTML ファイルの中で外部 JavaScript ファイルを読み込む
<script type="text/javascript" src="path/to/javascript.js"></script>

外部 JavaScript ファイルは、以下に挙げる実用的な理由から、JavaScript コードを含める手段として最も一般的に使用されています。

  • HTML ページに含まれるコードが少なければ少ないほど、検索エンジンが Web サイトをクロールして索引を付ける時間が短縮されます。
  • JavaScript コードを HTML から分離しておけば、コードが簡潔になり、管理も極めて容易になります。
  • HTML コードの中では、複数の JavaScript ファイルを読み込むことができます。そのため、JavaScript ファイルを画像と同じように Web サーバー上の別のフォルダー構造内に分離しておけば、コードを管理しやすくなります。簡潔で整理されたコードは常に、Web サイトの管理を容易にする鍵となります。

まとめと次のステップ

このチュートリアルでは、JavaScript の基礎を紹介し、JavaScript の使い方と、この言語で陥りやすい過ちをいくつか取り上げて説明しました。次の第 2 回では、変数について学びます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=651198
ArticleTitle=JavaScript 言語入門, 第 1 回: 基礎
publish-date=09072017