JavaScriptとは

docs.scrimba.com

ウェブページを開いてボタンをクリックしてメニューを開く、検索ボックスに入力して結果が即座に提案される、またはスクロール時にフィードがさらに多くの投稿を読み込む。これらのどれもHTMLではなく、CSSでもありません。これはJavaScript、ブラウザ内で実行され、ページがあなたの操作に応答するようにする言語です。この章では、その言語が何であるか、どこで実行されるか、そしてあなたがすでに知っているHTMLとCSSにどのように適合するかについて説明します。

ページを動作させるための言語

JavaScriptは**プログラミング言語**です。コンピューターがステップバイステップで実行する命令を書く方法です。HTMLがページに何があるかを説明し、CSSがそれがどのように見えるかを説明する一方で、JavaScriptは何が起こるかを説明します。それは反応する部分です。

ウェブページを家と考えてください。HTMLは構造、壁と部屋です。CSSは塗料と家具です。JavaScriptは電気と配管です。スイッチが光をつけるようにする、または蛇口が水を出すようにする配線です。それはユーザーがページと対話するときにページが何かをするようにするものです。

JavaScriptはウェブページの**動作**レイヤーです。HTMLは構造を提供し、CSSは表示を提供します。JavaScriptはロジックと対話性を追加します。ページが読み込まれた後にページを読み込んで変更し、クリックやキー入力などのイベントに応答し、状態を追跡し、サーバーと通信して新しいデータを読み込むことができます。

HTMLとCSSは結果を説明するのに対し、JavaScriptは完全なプログラミング言語です。変数、条件、ループ、関数があります。あなたは欲しいものを宣言しているだけではなく、ブラウザが実行するステップを書いています。これがこのハンドブックが扱っているシフト、ページを説明することからページをプログラミングすることです。

JavaScriptは高レベルの**動的型付けプログラミング言語です（値には型がありますが、変数は1つの型に限定されないため、名前は現在は数値を保持し、後で文字列を保持できます）。ブラウザではそれは動作レイヤーです。イベントに応答してDOM**（Document Object Model、ブラウザがHTMLから構築するメモリ内のライブツリー）を操作し、状態を管理し、ネットワーク要求を実行します。

重要なフレーミングは、HTMLとCSSは宣言的ですが、JavaScriptは命令的でチューリング完全であるということです。計算を表現し、単なる望ましい結果ではありません。その力が理由で、HTMLとCSSがほぼ必要としないという規律、命名、構造、エラー処理は、ロジックがページに入った瞬間にあなたの責任になります。このハンドブックの大部分は、あなたしか読めないコードを作成せずにその力を発揮することについてです。

// HTMLはボタンを提供します。JavaScriptがそれに何かをさせます。
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

その後の章でそのすべての部分に出会うでしょう。今のところ、形に注意してください。JavaScriptはページに到達し（document.querySelector）、ユーザーが何かをするのに応答します（addEventListener）。到達と応答はブラウザJavaScriptが行うことのほとんどです。

Junoページを動作させるための言語 HTMLは構造、CSSはスタイル、JavaScriptは動作、ページを使用するときに反応する部分です。それは実際のプログラミング言語なので、ブラウザが従うステップバイステップの命令を書きます。これがあなたが始めているシフトです。ページを説明することからページに何をするかを伝えることです。

Junoページを動作させるための言語 JavaScriptは動作レイヤーです。ページを読み込んで変更し、イベントに応答し、サーバーと通信します。HTMLとCSSとは異なり、それはロジックと状態を持つ完全な言語なので、ページを宣言するのではなくプログラムします。その仕事を頭に入れておくことで、他の2つを配置しやすくなります。

Junoページを動作させるための言語 JavaScriptは命令的でチューリング完全です。これが理由で、全ウェブの対話性を担い、ロジックが表示される瞬間に構造があなたの仕事になります。それは動的型付けされているため、名前は任意の型を保持でき、型チェックは実行時に発生します。ここの工芸の大部分は、あなたしか読めないコードを書かずにその力を発揮することです。

JavaScriptが実行される場所

JavaScriptはブラウザ内で実行されます。Chrome、Safari、Firefoxなどすべてのブラウザには、JavaScriptを読んで実行する組み込み**エンジン**があります。つまり、始めるためにインストールするものはありません。ウェブページを開くことができれば、JavaScriptを実行できます。

ページにJavaScriptを追加するには<script>タグを使用します。通常は閉じる</body>タグの直前です。コードを独自のファイルに保つには、src属性でタグがそれを指すようにします。これは画像タグが画像を指すのと同じ方法です。

コードの行を試すための最速の場所は、ブラウザのコンソールです。開発者ツール内のパネルで、JavaScriptを入力して結果をすぐに見ることができます。

JavaScriptは**ランタイム**で実行されます。コードを実行するエンジンとそのコードが使用できる追加機能を提供する環境です。ブラウザでは、ランタイムはページのdocument、ブラウザタブのwindow、ネットワーク要求のfetchなどを提供します。言語自体は小さいです。ブラウザで使用するほとんどはその周囲のランタイムから来ます。<script>タグとそのsrc属性で外部スクリプトを読み込み、deferを追加して、ブラウザがスクリプトを実行する前にページの構築を完了するようにします。これにより、「要素が見つかりません」のバグのクラスが防ぎます。開発者ツールのコンソールはあなたが入力できるライブランタイムであり、アイデアをテストするのが最速の場所です。

JavaScriptは言語仕様（ECMAScript）で定義され、V8（Chrome、Node）やJavaScriptCore（Safari）などのエンジンで実行されます。エンジンは話の半分に過ぎません。有用な機能は**ホスト環境**、エンジンを埋め込んでAPI を公開するランタイムから来ます。ブラウザではそのホストはページであり、DOM、タイマー、fetch、ストレージ、およびイベントを提供します。Nodeなどのサーバーランタイムでは、ファイルとソケットを代わりに提供するオペレーティングシステムです。

2つの実践的な結果です。最初に、同じ言語は非常に異なる場所で実行されるため、「これはJavaScriptですかブラウザ機能ですか」は実在する区別です。ArrayとPromiseは言語ですが、documentとlocalStorageはブラウザです。次に、スクリプトがロードされる方法は動作に影響を与えます。古い<script>はパースをブロックし、deferはDOMが順序で構築された後にそれを実行し、type="module"はデフォルトで遅延し、import/exportとその独自のスコープを提供します。どちらを使用しているかを知ることで、「なぜこれはページが存在する前に実行されたのか」という混乱の多くが説明されます。

JunoJavaScriptが実行される場所 JavaScriptはブラウザで実行されます。ブラウザには既にそれを実行するエンジンがあるため、インストールすることはありません。あなたは<script>タグでページに追加し、行を試すための最速の場所はブラウザの開発者ツールのコンソールです。それを開いて何か入力してください。何も壊すことはできません。

JunoJavaScriptが実行される場所 ブラウザはランタイムを提供します。エンジンとdocumentとfetchのような追加です。<script src>でコードを読み込み、deferを追加して、ページの構築後に実行するようにします。コンソールはアイデアをテストするためのライブランタイムであり、あなたが得られる最速のフィードバックです。

JunoJavaScriptが実行される場所 エンジンは言語を実行します（ECMAScript）。ホスト環境はAPI を提供します。これがArrayがJavaScriptですがdocumentがブラウザである理由です。スクリプトがロードされる方法も重要です。古いスクリプトはパースをブロック、deferは順序でDOMの後に実行、type="module"は遅延し、インポートスコープを追加します。その区別はほとんどの「ページが存在する前に実行された」バグを説明します。

JavaScriptの最初の見方

ここは小さなプログラムです。まだすべての部分を理解する必要はありません。次の章がそれぞれを覆いますが、あなたはすでにそれの形を読むことができます。

let name = "太郎";
console.log("こんにちは " + name); // こんにちは 太郎

最初の行はテキスト"太郎"を名前nameの下に保存します。次の行はメッセージをコンソールに印刷し、"こんにちは "と保存された名前を一緒に結合します。console.logは、学習中に値をJavaScriptに表示するよう求める方法であり、あなたは絶えず使用します。

最初のプログラム、小さいが完全：

let name = "太郎";
let greeting = "こんにちは " + name;
console.log(greeting); // こんにちは 太郎

3つのアイデアは既にここにあります。値を保持する変数、値を組み合わせる式（"こんにちは " + name）、結果で何かをするステートメント（console.log）。ほぼすべてのJavaScriptはそれら3つのもの積み重ねられています。値に名前をつけ、それらで計算し、結果に対して行動します。console.logはコンソールに印刷し、コードが実際に何をしているかを見るのに最適なツールです。

最も小さな有用なプログラムは、言語のコアループをまだ示しています。

const name = "太郎";
const greeting = `こんにちは ${name}`;
console.log(greeting); // こんにちは 太郎

反射的な働く開発者ここで作られた選択肢に注意してください。letではなくconst、バインディングが変わることはないため（意図を信号し、偶発的な再割り当てを防ぐ）、そして**テンプレートリテラル**（${...}を使用したバックティック文字列）は+連結ではなく、より読みやすく、タイプをより予測可能に処理するためです。これのどれが行を実行させるのに必須ではありません。これはまさにその点です。JavaScriptはゆるいバージョンを喜んで受け入れるため、コードの品質は言語が強制しない決定から来ます。このハンドブックはその決定の大部分に時間を費やし、次に変数で始まります。

JunoJavaScriptの最初の見方 プログラムはほぼこれです。いくつかの値を保存し、それらを組み合わせ、結果で何かをする。console.logは値を印刷して見ることができるため、それはあなたの親友です。まだ詳細について心配しないでください。あなたは次の章で各部分に適切に出会うでしょう。

JunoJavaScriptの最初の見方 ほとんどのJavaScriptは3つのもの積み重ねられています。値を保持する変数、それらを組み合わせる式、結果に対して行動するステートメント。任意のスニペットでそれら3つを認識することで、見慣れないコードは遥かに恐ろしくなくなります。console.logを近くに保ってください。それはあなたのコードが本当に何をしているかを確認する方法です。

JunoJavaScriptの最初の見方 言語は緩いバージョンと慎重なバージョンを同等に実行するため、品質はそれが強制しない選択から来ます。バインディングが固定されているときのlet上のconst、可読性のための+上のテンプレートリテラル。その自由はJavaScriptの祝福とそのトラップです。次の章は主にそれらの呼び出しをよくすることについてであり、変数で始まります。

「モダンJavaScript」が意味するもの

人々が**モダンJavaScript**について話すのを聞くでしょう。JavaScriptは1995年以来存在し、毎年新機能を取得しますが、古いコードは動作し続けるため、言語は年間を通じて同じことを行うためのいくつかの異なる方法を拾いました。

良いニュース。歴史を知る必要はありません。このハンドブックは、各ものを書く現在の推奨方法を教えています。古いチュートリアルが変数を作るためにvarを使用しているのを見たら、それが古いスタイルです。代わりに、開発者が今日使用するletとconstを学びます。

「モダンJavaScript」は通常、大きな2015年の更新（ES2015、またはES6と呼ばれる）以来の言語とそれ以来の毎年の追加を意味します。その更新はletとconst、矢印関数、テンプレートリテラル、その他を追加し、すべての現在のブラウザがサポートするベースラインです。

それが重要な理由は、あなたは2つの時代のコードに遭遇するでしょう。古い資料はvar、function式すべて、文字列連結を使用します。現在のコードはconst/let、矢印関数、テンプレートリテラルを使用します。このハンドブックは全体を通じてモダンなスタイルを教え、古い形式を野生で認識できるようにするために命名するだけです。あなたはこれを使用するためにビルドツールまたは設定を必要としません。それはそのままブラウザで実行されます。

JavaScriptはECMAScriptとして標準化されており、ES2015以来仕様は毎年出荷されます（ES2016、ES2017など）。各追加は小さく、後方互換性のある機能セットを追加します。「モダンJavaScript」は、2015年前のイディオムではなく、その進化した言語であるconst/let、矢印関数、テンプレートリテラル、分割代入、モジュール、async/awaitに対して書くことの速記です。

これが実践で単純のままである理由は、JavaScriptのほぼ絶対的なコミットメント**後方互換性**です。新しい構文が追加され、古い構文はほぼ破綻することはありません。そのため、10年前のスクリプトはまだ実行されます。これが理由で、あなたはモダンな形式だけを学び、古いコードを保持するためにvarとその時代を読み取り専用知識として安全に扱うことができます。過去が侵入する唯一の場所は、他の人の古いコードベースを読むときであり、このハンドブックは、それらが来てきたときにそれら古い形式にフラグを立てるため、彼らはあなたをつまずかせることはありません。次の章、変数は、モダンなまさにそこから始まり、値を命名して保存する方法です。

Juno「モダンJavaScript」が意味するもの JavaScriptは古く、古いコードを機能させ続けるため、いくつかのことをする少数の方法があります。歴史を知る必要はありません。このハンドブックは毎回現在の推奨方法を教えています。チュートリアルがvarを使用する場合、それが古いスタイルであり、代わりにletとconstを学びます。

Juno「モダンJavaScript」が意味するもの モダンJavaScriptは2015年の更新以来の言語を意味します。constとlet、矢印関数、テンプレートリテラル。あなたはvarと連結を使用する古いコードに出会うでしょう。そのため、このハンドブックはモダンなスタイルを教え、古い形式を認識できるように命名するだけです。ビルドステップなしですべてがブラウザで実行されます。

Juno「モダンJavaScript」が意味するもの ECMAScriptは毎年出荷され、後方互換性を保ちます。そのため、新しい構文が追加され、古い構文はほぼ破綻することはありません。これが、あなたはモダンな形式だけを学び、varとその時代を古いコードベースの読み取り専用知識として扱うことができる理由です。進化した言語に対して書き、出現する古い形式にハンドブックフラグを立てます。

JavaScriptがここから行く場所

JavaScriptは大きな言語ですが、小さく始まります。値、それらの名前、それらを組み合わせて行動する方法です。それらがクリックしたら、このハンドブックの残りは外に向かって構築されます。判定を下し、仕事を繰り返し、コードを関数に整理し、配列とオブジェクトの集合を保持し、DOMでページ自体に到達してユーザーが実際に使用できるものを構築します。

次の章、変数は、実際の仕事が始まる場所です。値を保存する方法、letとconstの違い、そして言語の残り全体が構築されている小さなルールセット。