JavaScript の基本。 第2部 初級から上級までのJavaScript講座

これは、初心者から上級者までを対象とした JavaScript ブログ投稿シリーズの第 2 部です。 このシリーズの終わりまでに、JavaScript でコーディングを開始するために知っておく必要があるすべての基本を理解できます。 それでは、2 番目のチュートリアルを始めましょう。

JavaScript の基本 – 目次:

1. JavaScript の基本
2. 行ごとの実行
3. 命令を終了する 2 つの方法
4. コメント

このブログ投稿では、最初のブログ投稿から離れたところから続けます。 この段階で、Google Chrome ブラウザーを開いて、具体的には JavaScript コンソールを開いてください。 何らかの理由でそれらを閉じた場合は、それらを元に戻す良い機会です。 JavaScripの基本を学びましょう

Mac を使用している場合、コンソールを開くためのキーボード ショートカットは、Chrome を開いた後に「option + command + J」を押すことです。 Windows デバイスを使用している場合は、Chrome を開いた後、「Control + Shift + J」のキーボード ショートカットを使用して JavaScript コンソールを開くことができます。 または、上部のメニューに移動して、[表示] -> [開発者] -> [JavaScript コンソール] に移動することもできます。

JavaScript の基本

JavaScript は、他のすべてのプログラミング言語と同様に、コンピューターと通信するために使用する言語です。 自然言語に適切な文を形成するための文法と既知の単語があるように、プログラミング言語にも、コンピューターと効果的に通信するために従うべき特定の規則があります。

たとえば、特定の単語は、コードを実行する JavaScript エンジンにとって特定のことを意味します。たとえば、前のチュートリアルで使用した「alert」キーワードは、ユーザーが括弧の直後に入れる特定の単語を使用して、ユーザーにアラートを表示する意味がありました。 . 私たちの場合、「Hello, World!」と書きました。 「Hello, World!」というアラートが表示されました。

JavaScript には、正しい単語と文法を使用してコンピューターと効果的に通信できるように注意する必要がある予約済みのキーワードが他にもあります。 また、自然言語の文法と同様に、プログラミング言語にも文法があります。 この文法は、プログラミング言語では一般に「構文」と呼ばれ、JavaScript も例外ではありません。 そのため、JavaScript の基本を学び始めるときに、JavaScript の主なキーワードと文法を理解することをお勧めします。 JavaScript について知っておくべき主な事柄をいくつか見てみましょう。

行ごとの実行

JavaScript の基本に関して、最初に知っておくべきことの 1 つは、記述したコードが行ごとに上から下に実行されるということです。 このスタイルのコード実行は、「解釈されたプログラミング言語」である JavaScript とも呼ばれます。

それどころか、一部のプログラミング言語は「コンパイル済みプログラミング言語」です。 コンパイル済み言語の例としては、C、C++、C#、Swift、Java などがあります。 主な違いは、コンパイル済みプログラミング言語では、記述したすべてのコードが「コンパイル」され、コンピューターによって 1 つの部分として実行されることです。 また、プログラムのどこでエラーが発生したかを見つけるのが難しいため、コンパイルされたプログラミング言語の学習を開始するのが難しい場合もあります.

インタープリター型プログラミング言語の例としては、JavaScript、Python、Bash、Matlab などがあります。 インタープリター型プログラミング言語を使用すると、コード内でセミコロンを忘れたり、括弧が一致しないなど、エラーを起こした行を確認できるという固有の利点があります。 この特性は、特定のアプリケーションでは大きな違いを生む可能性がありますが、インターネット接続が遅い Web サイトを読み込もうとしている場合、JavaScript のすべての行をできるだけ速く実行することを好みます。

命令を終了する 2 つの方法

結局のところ、コンピュータ プログラムは、コンピュータに対する一連の命令です。 しかし、あるプログラムはどこで終わり、次の命令はどこで始まるのでしょうか? この問題にはさまざまなアプローチがあります。 JavaScript は、セミコロンとブラケットという 2 つの主要なものを使用します。

作成する命令の種類に応じて、通常、命令のセットを終了またはパッケージ化するためにいずれかを使用します。 さまざまな機能とデータ型にさまざまな種類の括弧を使用します。 たとえば、alert(“Hello, World”); 先ほど実行したコードでは、hello world の書き込みを囲む括弧は、アラートの内容をコンピューターに伝えます。また、命令の最後のセミコロンは、この命令がここで終了し、次の命令に進むことができることをコンピューターに伝えます。 これは、ピリオド「.」の使い方とよく似ています。 英語で文を終わらせる。

コメント

コードにコメントを追加することは、プログラミングの重要な部分です。 書いているコードを理解するのは簡単かもしれませんが、コードの複雑さによっては、6 か月後にコードに戻ったときにほとんどわからない場合があります。

コメントを追加すると、後でコードを理解しやすくなるだけでなく、一緒に作業する人もコードを理解しやすくなります。 通常、問題をより小さな一口サイズのチャンクに分割することで問題を解決する方がはるかに簡単であるため、取り組んでいる問題についての理解を深めるのにも役立ちます。 コードのコメント部分はインタープリターによって無視され、実行されません。

コメントを追加する方法は 2 つあります。JavaScipt です。 最初の 1 つは、次のように 2 つのスラッシュを含む単純な「1 行」コメントを追加することです。

// this is a comment

このようにして、2 つのスラッシュの後に何を書いても、スラッシュを置いた特定の行では無視されます。 これを何度でも繰り返して、次のようなコメントで複数の行をカバーできます。

// this is a comment.
// this is another comment.
// you can keep commenting like this.

コメントを使用するもう 1 つの理由は、コードを実験するためにコードの一部をコメント アウトすることです。 たとえば、同じ機能を複数の方法で記述することができ、同じコードの 1 つのバージョンにコメントを付けて、個々のパフォーマンスや結果を比較することができます。 これも例で見てみましょう。

次のコードをコピーして、Chrome で開いた JavaScript コンソールに貼り付けます。

// greet user
alert("Hello, User!");
alert("Hi, User!");

コード全体を自分で書く練習が必要な場合は、それもできます。 コンソールで複数行のコードを記述する場合に知っておくべきことの 1 つは、実行せずに次の行に移動するには、「Shift + Enter」を押して実行できることです。 それ以外の場合は、1 行のコードを記述した後、Enter キーを押すと、そのコード行が実行されます。 この例では、これは大きな問題ではなく、実際には行ごとに実行しても問題ありません。そのスタイルでも機能する単純な例があるからです。

コピーして貼り付けるか、自分でコードを記述したら、「Enter」キーを押してコードを実行します。 その結果、2 つの別個のアラートが表示されるはずです。 また、アラートを閉じるには、[OK] をクリックします。この場合、これは単純なアラートであり、表示したいメッセージを表示した後に何もトリガーしないため、アラートは何もしません。

このようなコードを実行すると、同じ機能が 2 回実行されます。 しかし、一度に 1 つの実装だけを見たい場合はどうすればよいでしょうか? この場合、すでに説明したので、何をすべきかは正確にわかります。 「Hi, User!」の 2 番目の実装のみが表示されるように、コードを貼り付けたり書き込んだりした後、行の 1 つをコメント アウトします。 実行されます。

チャレンジを完了するか、チャレンジ中に行き詰まった場合は、以下のチャレンジのソリューション コードを確認できます。 ソリューションを見る前に、自分で試してみることを強くお勧めします。 チャレンジを正常に完了すると、次のような画面が表示されます。

コード行をコメントアウトすると、前のコメント行と同じ色に変わることに注意してください。 ここにあるこの色の違いは、実際にはコンピューターに違いをもたらすわけではありませんが、コードを書くときにかなり役立つ機能です。 このようにすると、誤ってコード行をコメント アウトした場合に、色で明らかになるため、はるかに簡単になります。

コードにコメントを付けるもう 1 つの方法は、スラッシュとアスタリスク文字を使用することです。 このようにして、コード内に単一行または複数行のコメントを作成できます。

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

これで、JavaScript の基本が理解できました。 次のチュートリアルでは、「変数」と呼ばれるプログラミングの非常に一般的な概念と、JavaScript の基本的なデータ型について説明します。

著者: ロバート・ホイットニー

JavaScript のエキスパートであり、IT 部門を指導するインストラクター。 彼の主な目標は、コーディング中に効果的に協力する方法を他の人に教えることで、チームの生産性を向上させることです。

すべての投稿を表示

10 のブログ投稿で初心者から上級者までの JavaScript コース:

1. JavaScript でコーディングを開始するには?
2. JavaScript の基本
3. JavaScript の変数とさまざまなデータ型
4. スニペットと制御構造
5. while ループと for ループ
6. Java 配列
7. JavaScript 関数
8. JavaScript オブジェクト
9. JavaScript メソッドなど
10. JavaScriptコースのまとめ