Skip to main content

JavaScriptとは何ですか?

デイモン・M・ガーン

本サイト上のコンテンツは、参照目的だけのために、英語の原本から翻訳されたものです。また、本サイト上のコンテンツの一部は機械翻訳されたものです。日本語版と英語版の間に何らかの齟齬がある場合には、英語版が優先されます。
当社は改善のためのあらゆる努力を行いますが、翻訳の正確性及び信頼性は保証せず、当社に故意または重大な過失がある場合を除き、不正確性又は遺漏により生じる損失又は損害に責任を負わないものとします。

JavaScriptは、現代のウェブ開発において不可欠なスクリプト言語です。訪れるほぼすべてのウェブサイトは何らかの形でJavaScriptを使用しています。サイトをインタラクティブで動的なものにするのはJavaScriptであり、これは今日のウェブユーザーが期待するようになったものです。

ウェブページは3つの基本的なツールを用いて作成されます。

  • ハイパーテキストマークアップ言語(HTML): ヘッダー、リスト、画像位置、テキストブロックなどを含むウェブページのフォーマットをする言語。
  • カスケーディングスタイルシート(CSS): HTML情報が画面上でどのように表示されるかを説明する言語
  • JavaScript: ウェブページに動的なコンテンツを提供するためのスクリプト言語

JavaScriptは、現代のウェブサイトに期待される動的でインタラクティブなコンテンツを提供します。情報にアクセスするためにボタンを押したいですか?それがJavaScriptです。異なる通貨を2つ換算する必要があるか、あるいは摂氏と華氏の間で換算する必要があるですか?それがJavaScriptです。

この記事では、JavaScriptを始めるための基本的な概念とアイデアを提供します。JavaScriptを学びたいなら、HTMLやCSSについても必ず勉強してください。この三つは密接に関連しています。

JavaScriptの主な特徴

構文やプロジェクトの詳細に入る前に、JavaScriptのいくつかの重要な特徴を特定します。

まず、JavaScriptとJavaの間でよくある誤解を解きましょう。これらは同じ言語ではなく、似ている程度です。Javaは、ほぼすべてのプラットフォームで動作するアプリケーションを構築するために使われるオブジェクト指向プログラミング言語です。その使い方や構造はJavaScriptとは大きく異なります。JavaScriptはインタプリタ言語(つまり事前コンパイルされていない)であり、そのコードは比較的読みやすく理解しやすいです。Javaコードは通常、Java仮想マシン(JVM)上で動作しますが、JavaScriptは通常ウェブブラウザ経由で実行されます。

JavaScriptはほぼ常にリモートのウェブサーバーではなくクライアントシステム上で実行されます。JavaScriptコードを含むウェブサイトにアクセスすると、システムはスクリプトをダウンロードし、コンピュータの処理能力を使ってローカルで実行します。同じことが、ウェブサイトの他の部分を構成するHTMLやCSSコードにも当てはまります。

これを読んでいるなら、おそらくプログラミング言語を学びたいと思っているでしょう。どれを選ぶべきか迷うかもしれません。選択肢は本当にたくさんありますから!JavaScriptやPythonはよく使われます。本当の決断は機能に帰着します。なぜ言語を学びたいのか?その理由は、問題を解決したり、キャリア開発のためのスキルを持つことにあります。JavaScriptは主にウェブ開発で使われ、Pythonは一般的に多才な役割を担っています。ウェブ開発に興味があるなら、JavaScriptが最適です。

JavaScriptの正式名称は ECMAScriptで、現在のバージョンはES14です。各バージョンには機能的な改善が含まれています。

JavaScript統合開発環境

開発者はほぼすべてのテキストエディタを使ってJavaScriptコードを書くことができます。実際、多くの開発者はVim、Notepad++、Sublimeに大きく依存しています。これらのツールは非常に拡張性が高くカスタマイズ可能ですが、主に基本的なテキスト生成に使われます。

より機能豊富な統合開発環境(IDE)は、以下のような追加機能を提供します:

  • 1つ以上の言語に特化した構文チェック
  • ビルドツール
  • デバッグ機能
  • ソースおよびバージョン管理機能

JavaScriptの旅をIDEで始めたいなら、以下にいくつか良い選択肢があります:

AWS Cloud9

JavaScript開発の一つのソリューションがAmazonの AWS Cloud9です。このクラウドベースのIDEは、ローカルにアプリケーションをインストールする必要はありません。すべてはクラウド上で行われます。大きな成果の一つは統合されたコラボレーションであり、開発とデバッグの両方が容易になります。AWS Cloud9は直感的で簡単です。インターネット接続が良好であればどこでも利用可能です。AWS Cloud9は無料ではなく、AWSアカウントが必要です。

ウェブストーム

主要なJavaScriptエディタの一つがJetBrainsの Webstorm です。WebstormはLinux、macOS、Windowsに対応しており、JetBrainsは30日間の無料トライアルを提供しています。WebstormはJavaScriptおよび関連技術向けに特別に開発されました。構文チェック、自動補完、提案、コラボレーション機能などが含まれています。Webstormのサブスクリプションは安くはありません(初年度は1ユーザー159ドル)が、機能が豊富です。

他にも多くのフル機能の例がありますが、これらは十分に入門の手助けとなります。 VimNotepad++のようなツールで必要なことはすべてできます。

Vim Hello World JS

JavaScriptプロジェクトの例

JavaScriptに興味があるなら、小さく基本的なタスクやプロジェクトを見つけて取り組むのが良い方法です。非常にシンプルなアイデアから始めて、より複雑なものへと進んでいきましょう。言語を学ぶのは難しく、時間がかかります。プログラミングのチュートリアルでは、よくゲームを例に挙げます。

以下は注目すべきプロジェクトの例です:

  • 数字当てゲーム
  • 数値増分ゲーム
  • 日々のタスクリスト
  • カウントダウンタイマー

一般的な概念

ほとんどのプログラミング言語は同様の問題を解決しなければなりません。後で使うための情報を保存したり、基本的な数学式を解いたり、ユーザー入力を受け付けたり、特定のリソースをリクエストしたりする必要があるかもしれません。このため、多くの概念は言語間で類似しています。

ステートメントとは何か?

アプリケーションは、コンピュータが実行するための1つ以上の命令セットで構成されています。これらの命令は文と呼ばれ、使用される言語によって異なる方法で構築されます。

JavaScriptはセミコロン文字(;)で文を区切っています。例えば:

アラート(「こんにちは、世界!」);

これらの文はJavaScriptコードの基本構造と考えてください。値、演算子、キーワードなどの特定のコンポーネントを使って、プログラムに必要な機能を構築します。

コードブロック

非常に短い声明もあります。他のものはもっと長いです。複数の文をまとめてコードブロックにまとめることができます。ブロックはカール括弧({})で囲まれています。関数はコードブロックの一例です。

スペース

YAML(Yet Another Markup Language)のような一部の命令セットは、文やその他のセクションを定義するためにスペースを使用します。JavaScriptはスペースや空白を区切り符として認識しません。代わりに、開発者はコメントと空白を組み合わせてコードを読みやすくしています。

以下の例には改行がなく、読みづらいことに注意してください:

No Spaces JS

以下のコードには、一部の行番号の間に改行が設けられており、コードセクションの識別を容易にしています。

Spaces JS

コメント

他のスクリプトやプログラミング言語と同様に、JavaScriptはコメントをサポートしています。コメントは、開発者が命令や例、説明、その他人間にとって有益な情報をコード本文に挿入することを可能にします。コメントは、コード内でなぜ何かがそうなっているのかを他者に説明したり(自分に思い出させる)重要な方法です。多くの言語がコメントにハッシュ文字(#)を使うのに対し、JavaScriptは2つのスラッシュ(//)を使用します。

コメント例

このスクリーンショットは上に掲載されましたが、特に1行目のコメントに触れたいと思います。

Vim Hello World JS

コメントにはアラート (; )の機能が説明されていることに注意してください。コメントが複数行にまたがる場合は、形式が若干異なります:

/*
多線例
1号線
2号線
3号線
*/

以下の画像では、コメントは2行にわたっています:

Multiline Comment JS

どんなコーディングプロジェクトでもコメントを使う習慣をつけるのは良いアイデアです。設定ファイルを使うことでも有効な練習になります。

価値

値はリテラルや変数内に格納されたエンティティのことです。これらの値はテキスト、数字、またはその他のデータである場合があります。

リテラル

JavaScriptはリテラルを使って、静的または変化しない情報を認識します。これらはリード情報なしで設定されています。下の最初の例は固定された数値を示し、2つ目は固定されたテキスト値を示しています:

42
「こんにちは、ワールド!」

変数

JavaScriptは後で処理に利用するために情報を変数に保存します。変数には、数字、名前、製品IDコード、その他の情報などの価値が含まれることがあります。

JavaScriptは変数の割り当て方法を4つ認識しています:

  • ヴァー
  • させる
  • 定数
  • 自動(初回使用時)

varキーワードを使った基本的な数学の例を紹介します:

var x = 22
変量 y = 20
var z = x + y

変数は文字列(テキスト情報)、例えば名前やその他の単語を格納することがあります。これらのデータ型は二重引用符(「)」で囲まれています。

演算子

他の言語と同様に、JavaScriptはデータに対して加算、減算、掛け算、割り算などの数学的処理を行うことができます。また、比較や論理演算など、より複雑な操作も行います。

演算子 操作
+ 加算を行う
- 減算を行う
* 乗算を行う
/ ディフェルド・ディビジョン
++ 値を増やす
-- 値の減少

キーワード

JavaScriptは特定の機能に対して63語の特定の単語の使用を保留しています。例としては、var、const、for、whileなど多くの例があります。

スクリプトの保存

JavaScript文はHTMLドキュメントに直接埋め込むには大きすぎる場合があります。代わりに、.js拡張子を含むテキストファイルにコードを保存し、そのコード内でファイルを呼び出します。例を挙げます:

<script src=/path/to/script.js></script>

JavaScriptを始めましょう

さあ、始める時です!JavaScriptは基本的なプログラミングの概念を学ぶのにとても良い方法です。多くのインストールは必要ありません。おそらくシステムには基本的なテキストエディタとウェブブラウザがすでにインストールされているでしょう。テキストエディタでコードを書き、ウェブブラウザで結果を観察します。

一般的なテキストエディタ:

  • macOS: テキスト編集
  • Linux: Gedit、Vim、またはNano
  • ウィンドウズ: Notepad(ただし Notepad++のダウンロードをおすすめします)

注意:Microsoft WordやLibreOffice Writerのようなワードプロセッサソフトは使わないでください。これらのプログラムは非常に高度で、追加の書式設定やコーディングの妨げとなる指示を文書に追加します。

こちらはMacでJavaScriptとHTMLのためにVimを使っている例です。以下の内容をテキストドキュメントに書き、スクリプトとして保存し、ウェブページを通じてスクリプトを呼び出します。

Vim Hello World JS HTML

JavaScriptと他のプログラミング言語の比較

2023年のStack Overflow開発者調査では、JavaScriptが最も人気のある言語としてランク付けされています。HTMLやCSSが2番目に位置していることに注目してください。この3つは普通一緒に使うものです。Pythonは3位にランクされ、人気はますます高まっています。

2023 Stack Exchange Developer Survey

プログラミング言語を学んだばかりの多くの人は、どこから始めればいいのか迷っています。一般的な選択肢の一つがPythonで、多くの企業環境、特に科学や機械学習で見られる強力なインタプリタ型プログラミング言語です。JavaScriptも素晴らしい出発点です。Pythonと同様に、比較的簡単に習得できます。どちらも非常に一般的であるため、どちらも使い道(または雇用)を見つける可能性が高いという利点があります。しかし、同じ問題を解決するために使われるわけではありません。JavaScriptは主にウェブ開発で見られます。

JavaScriptは、JavaやC++のようなより複雑なコンパイル言語とも異なります。構文が異なるだけでなく、それらの言語は習得が難しく、目的も異なる場合もあります(主に大きなアプリケーションの開発)。JavaScriptは主にウェブデザイン業界で見られます。

人気よりも、職業上の目標に基づいて言語を選ぶことをお勧めします。より具体的には、ウェブサイト開発をしているなら、ほぼ間違いなくJavaScriptのスキル(HTMLやCSSも含む)が必要です。

JavaScriptの利点と欠点

JavaScriptの利点と欠点を考慮してください。

利点:

  • 大規模な支援コミュニティ
  • 多数のオンラインリソース
  • 今後もしばらく高い需要が続くでしょう
  • 学びやすく、コーディングも簡単です
  • 解釈とデバッグのためのコードの可読性
  • クロスプラットフォーム(Linux、macOS、Windows)

欠点:

  • ウェブ開発に特化した(例外はありますが)
  • おそらくHTMLとCSSの実務的な知識が必要です
  • コンパイルされたアプリケーションほど強力ではありません

ウェブサイト開発のためのJavaScript

JavaScriptはウェブサイトという仕事において重要なツールであることを忘れてはなりません。JavaScript文はサイトにデプロイしなくても実行できますが、動的なウェブページの表示こそがJavaScriptの本質です。JavaScriptスクリプトの実行は通常、クライアントシステム上で行われます。ウェブサイト開発に関連した特定の専門的なニーズのためにこの言語を学びたい場合は、HTMLやCSSにも慣れておくべきです。

これでJavaScriptの基本的な理解ができ、パソコンも必要なものはすべて揃っているはずです。楽しくて簡単な最初のプロジェクトを探して、始める時です。

ITスキルをアップグレードする準備はできていますか?素晴らしいニュースがあります!今すぐCompTIAの認定やトレーニング で大幅に節約できます 。