JavaScriptの3大要素

admin
2020年9月21日 523 reads

Manik Hacker Noon profile picture

@manikManik

アウト・オブ・ザ・ボックスのシンカー（Out Of The Box Thinker） 。 JavascriptとPythonを書くのが好き。 “🍺 🍻 gulp watch”

LinkedIn social iconfacebook social iconTwitter social icongithub social icon

確かに JavaScript はそのシンプルな文法から数時間以内に始めることができるプログラム言語の一つです、でもおそらくそれをマスターするには数年はかかりますでしょう。

JavaScript をマスターするには、エコシステム全体がどのように動作するかについて、深い理解が必要です。 JavaScriptのコアとなるエコシステムは、ECMAScript、JavaScriptエンジン、そしてJavaScriptランタイムの3つの主要コンポーネントから構成されています。

まず、ECMAScript とは何か、そして JavaScript とどう違うのかを理解し、次に JavaScript エンジンと JavaScript ランタイムを理解することから始めます。 NodeJS と Google Chrome が同じ JavaScript エンジンを使用しながら、開発者向けの JavaScript の実装がまったく異なるのは、この JavaScript ランタイムのおかげです。

What is a JavaScript Runtime Or A JavaScript Host?

A JavaScript ランタイム（または JavaScript Host）は、ソフトウェア開発者が JavaScript で作成できるアプリケーションに使用可能な API を作成し、 JavaScript エンジンを使用している容器と理解することができます。 ブラウザの JavaScript ランタイムを例にとると、それは通常、ブラウザに特化した JavsScript の実装を含んでいることでしょう。 一方、NodeJs のようなもののためのランタイムは、JavaScript を使用してサーバー側アプリケーションを実行および構築するためのより具体的な実装を持つでしょう。

JavaScript Runtime In Your Browser For Web Development

The JavaScript runtime in the browser has the implementation of JavaScript that allows the developers to develop applications for the web. Web ブラウザのランタイムには、次の 3 つの重要なコンポーネントがあります。

  • The Core Based On ECMAScript – 開発者が使用できるすべての入出力関数を備えた JavaScript の基本実装。
  • Document Object Model (DOM) – XML および HTML ではクライアントまたはユーザーに表示する、ブラウザによるノードの階層的表示内容。 BOM を使用すると、開発者はブラウザ機能にアクセスし、DOM またはレンダリングされているページのコンテキスト外でそれらを操作することができます。 ECMAScript は、欧州コンピュータ工業会 (ECMA) の ECMA-262 で定義された標準の上に構築された、汎用スクリプト言語です。 これは 1997 年から JavaScript の標準化を目的として行われました。

    JavaScript は ECMAScript の実装であり、すべての Web ブラウザは JavaScript エンジンと実行環境を作成する際に ECMAScript に従わなければなりません。 ECMAScript は IO 関数を含んでおらず、代わりに JavaScript が ECMAScript によって設定されたガイドラインを使用して様々な関数を実装しています。 ECMAScriptとJavaScriptは別物です。 ECMAScript は ECMA-262 で定義された標準に基づくスクリプト言語であり、Web ブラウザに縛られることはありません。 3686>

    Document Object Model or the DOM

    Document Object Model は HTML と同様に XML のための言語中立なインターフェースで、文書全体をツリー状の表現をするノードの階層としてマッピングします。 下記の HTML コードは、ノードの階層の完全な例です。

    <!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>

    Why Was The Document Object Model (DOM) Needed? どちらのブラウザーも Dynamic HTML (DHTML) の異なるバージョンに従っていたため、異なるブラウザー上で同じ HTML コードを実行することが困難であることを証明しています。 ウェブがクロスプラットフォームでなくなることへの懸念が高まり、World Wide Web Consortium（W3C）という新しい独立機関が設立されました。 W3Cは、Webコミュニケーションの標準を維持することを責務とし、DOMの開発に着手したのです。 DOM のおかげで、JavaScript は動的な HTML を作成する能力を獲得し、開発者はドキュメントのさまざまなノードを操作することができます。 以下は、DOM API の機能の例です。

    • ID やクラスに基づいて Web ページ上の要素を見つける機能。
    • タグ間のスタイルまたはコンテンツを変更する機能。
    • ページ上のさまざまなイベントを追跡し、イベント リスナーを追加する機能。
    • HTML ノードを追加または削除する機能。 以下は、JavaScript を使用して、ブラウザの 
      document

      オブジェクトの助けにより 

      id="demo

      を持つ要素にアクセスする簡単な例です。

      ブラウザのドキュメント オブジェクトのすべてのプロパティとメソッドの公式リストはこちらです。 BOM は、それを管理する標準がない JavaScript の唯一の部分であるため、かなり問題であると考えられていました。 しかし、HTML5 の登場により、BOM に関連する機能のほとんどが HTML5 の公式標準の一部となり、BOM を取り巻く混乱が大幅に減少しました。 ブラウザでは、すべてのグローバル変数がウィンドウ オブジェクトの一部となっています。 window オブジェクトとそのプロパティにアクセスする方法を見てみましょう。

      <!DOCTYPE html><html><body><p></p><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>

      BOM API が提供する機能の例をいくつか挙げます：

      • ウィンドウを開いたり閉じたりする。
      • ウィンドウを移動またはサイズ変更する。
      • ウィンドウの寸法を取得する。
      • ユーザーの所在地を要求する。
      • ブラウザの履歴を取得する。
      • Cookie にアクセスする。

      ここに、Browser Object Model のすべてのプロパティとメソッドの公式リストがあります。

      これら 3 つのコンポーネントがブラウザで JavaScript ランタイムを形成し、ユーザーが JavaScript エンジンとやりとりする API を提供します。 この記事が気に入ったら、親指を立てて愛を伝え、私のモチベーションを維持してください。 次回の記事については、このページをご覧いただくか、私のニュースレターを購読していただければ、次の記事が公開されるとすぐにお知らせします。 もし、この記事が役に立ったら、「いいね！」や「シェア」をお願いします。

      前回の記事 https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

      Tags

      Join Hacker Noon

      無料アカウントを作成してカスタム読書体験をロック解除する。

コメントを残す

メールアドレスが公開されることはありません。