VIDEO LESSON

JavaScript入門：ブラウザーとNode.jsで実行する方法と基本文法の解説動画

再生時間 8:09動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01ジャバスクリプト入門、実践連載の第一回です。
0:04今回のテーマは、実行する方法と基本文法です。
0:08ジャバスクリプトには、ブラウザーで動かす方法と、ノードジェーエスで動かす方法の二つがあります。
0:17同じ言語でも、起動の仕方、結果を見る場所、使える機能が異なります。
0:23この動画では、二つの環境を並べて体験しながら、変数、型、条件分岐、繰り返しといった文法の土台を学びます。
0:32まずは、文法は共通で、周りの機能が違う、という全体像をつかんでください。
0:38どちらか一方だけでも学べますが、両方を比べることで、言語そのものと道具の役割がはっきり分かれて見えてきます。
0:48最初はブラウザーです。
0:49クロームなどのブラウザーには、ジャバスクリプトを実行する仕組みが最初から入っています。
0:55新しいタブを開き、開発者ツールのコンソールを表示してください。
0:59ウィンドウズではコントロールとシフトとジェイ、マックではコマンドとオプションとジェイが近道です。
1:06コンソールに、コンソール・ログと書いた一行を入力してエンターを押すと、メッセージがその場で表示されます。
1:13下にアンディファインドと出ることがありますが、これは戻り値で、エラーではありません。
1:19短いコードをその場で試せる手軽さが、ブラウザーで学ぶ最初の強みです。
1:23失敗してもページを再読み込みすればやり直せます。
1:26繰り返し実行するコードは、ファイルに保存します。
1:30練習用フォルダーに、エイチティーエムエルのファイルと、ベーシックス・ジェーエスというジャバスクリプトファイルを同じ場所に置きます。
1:39エイチティーエムエル側では、スクリプトタグのエスアールシーでそのファイルを指定します。
1:44ディファーを付けると、エイチティーエムエルの読み込みが終わったあとに実行されるため、
1:49要素が見つからないといった事故を防ぎやすくなります。
1:54ファイルを開いて再読み込みし、コンソールにメッセージが出れば成功です。
1:58ファイルに分ける習慣は、この先コードが長くなるほど大切になります。
2:03名前と保存場所をそろえることも忘れないでください。
2:06次はノードジェーエスです。
2:08これは、ブラウザーの外、パソコンやサーバーの上でジャバスクリプトを動かすための実行環境で、
2:13別の言語ではありません。
2:17公式サイトからサポート期間の長いエルティーエス版を入れ、ターミナルでノード・バージョンと打って番号が表示されれば準備完了です。
2:28あとは、ノード、スペース、ファイル名、と実行するだけで、先ほどと同じファイルがターミナルで動きます。
2:36引数なしでノードと打てば、短い式を対話的に試せるレプルにも入れます。
2:41コードを変えたら、保存してからもう一度実行する、この繰り返しがノードジェーエスでの基本動作になります。
2:49ここからは文法です。
2:51変数は、再代入しないものはコンスト、後から変えるものはレットで宣言するのが基本です。
2:58コンストは再代入を禁止しますが、オブジェクトの中身の変更まで止めるものではありません。
3:06次に型です。
3:07引用符で囲んだ文字の百と、数値の百は別物です。
3:11プラスは文字列をつなぐ働きもするため、そのまま足すと百二十ではなく、文字がつながった結果になります。
3:19計算したいときは、ナンバーで数値に変換してから足してください。
3:24比較は、型を自動変換しない厳密な比較を基本にします。
3:29型を意識する習慣は、計算がおかしい、文字がつながってしまった、といった初期のトラブルの多くを防いでくれます。
3:38記事の中心となる例を見ます。
3:40三科目の点数を配列に入れ、合格点を七十点として、一つずつ取り出しながら判定します。
3:47八十点と九十二点が合格、六十五点は復習となり、合格数は二つです。
3:53さらに三つの点数を合計して科目数で割ると、平均点は七十九点になります。
3:59この一つのファイルは、ブラウザーでもノードジェーエスでも、変更なしに同じ順序で同じ結果を表示します。
4:07文法が共通であることを、自分の手で確かめてみてください。
4:12表示用の文字列と、計算に使う数値を分けて考えることも大切です。
4:17合格点を九十点に変えると結果がどう変わるか、予想してから実行する練習もおすすめです。
4:24コードの読み方を確認します。
4:27イフは、条件が正しいときと、そうでないときで、実行する処理を分ける仕組みです。
4:34点数が合格点以上なら合格側、それ以外は復習側が動きます。
4:39ここで注意したいのが、イコール一つは値を入れる代入、イコール三つは比べる比較だという違いです。
4:47条件式の中でうっかり代入してしまう間違いはとても多いので、書いたあとに見直してください。
4:55フォー・オブは、配列の要素を先頭から順に取り出す繰り返しです。
5:01一つ取り出して判定する、という流れを、最後の要素まで自動で続けます。
5:07プラスイコールは、今の値に加えて保存し直す省略記法です。
5:12繰り返しの中で数える場面によく登場します。
5:15初心者がつまずきやすい、空の値と変換です。
5:19ナルは、値がないことを自分で明示するときに使います。
5:23アンディファインドは、まだ値が設定されていないときに現れます。
5:29ナンは、数値として計算できなかった結果で、自分自身とも等しくならない特殊な値です。
5:36また、空の文字列をナンバーに変換するとゼロになってしまうため、未入力をゼロ点と誤解する危険があります。
5:44記事の例では、まず空かどうかを確認し、変換後に範囲内かどうかを確かめ、問題があればエラーを投げて、
5:50トライとキャッチで受け止めています。
5:56入力をそのまま信じず、変換の前後で確かめる。
5:59この考え方は、フォームや外部データなど扱う場面でもそのまま役立ちます。
6:05環境ごとの違いも体験しましょう。
6:07ブラウザー専用の例は、ボタンを押すと画面の文章が変わる仕組みです。
6:12ドキュメントのクエリーセレクターでボタンと文章の要素を選び、アドイベントリスナーで、
6:17クリックされたときに文章を書き換える処理を登録します。
6:22画面を直接扱えるのがブラウザーの強みです。
6:25ただし、このコードをノードジェーエスで実行すると、ドキュメントがないというエラーになります。
6:32文法の問題ではなく、実行環境が違うことが原因です。
6:35詳しいイベントの扱いは、後のドムとイベントの回で改めて学びます。
6:40ここでは体験できれば十分です。
6:42反対に、ノードジェーエス専用の例です。
6:45ターミナルでファイル名の後ろに名前を付けて実行すると、その値をプログラムの中で受け取れます。
6:51これがコマンドライン引数です。
6:54名前を省略した場合は、値が未設定のときに予備の言葉へ置き換える書き方を使い、
6:57ゲストと表示させます。
7:01このプロセスという仕組みはノードジェーエスの機能なので、通常のブラウザーでは使えません。
7:07先ほどのドキュメントと合わせて、共通の文法と、環境固有の機能を分けて覚えることが、
7:11混乱しないコツです。
7:15引数は、プログラムを書き換えずに動きを変えられる便利な仕組みです。
7:20自動処理などでもよく使われます。
7:22最後に、動かないときの確認です。
7:25ノードが見つからないと言われたら、インストールと、ターミナルを開き直したかを確認します。
7:32ファイルが見つからないと言われたら、今いるフォルダーとファイル名、保存済みかどうかを見ます。
7:39結果が出ないときは、コンソール・ログの行き先が、ページ本文ではなくコンソールやターミナルであることを思い出してください。
7:49まとめです。
7:50文法は共通、機能は環境ごとに違う。
7:53この一文を土台に、次回は関数とスコープで、処理を再利用する方法を学びます。
7:59これで第一回を終わります。
8:01エラー文は怖がらず、どの環境で、何が定義されていないのかを一行ずつ読むことが上達への近道です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

JavaScript入門。ブラウザーとNode.jsの2つの実行方法を、準備・操作手順・結果の確認場所から解説。同じコードで変数・型・条件分岐・繰り返しを学び、DOM操作とコマンドライン引数の違い、実行時のエラー対策まで体験します。

解説記事・サンプルコードを読む：JavaScript入門：ブラウザーとNode.jsで実行する方法と基本文法 →