Chapter 04

実行環境

ほげさん
ほげさん
2021.12.19に更新
このチャプターの目次
  1. Web ブラウザ
    1. Google Chrome
    2. Edge
    3. Safari
    4. Mozilla Firefox
    5. ちょっとまとめ
  2. HTML レンダリングエンジン
    1. Webkit
    2. Blink
    3. Gecko
    4. ちょっとまとめ
  3. ベンダープレフィックス
    1. -webkit-
    2. -moz-
    3. -ms-
    4. ちょっとまとめ
  4. JavaScript エンジン
    1. V8
    2. JavaScriptCore
    3. SpiderMonkey
    4. ちょっとまとめ
  5. そのほかの JavaScript / TypsScript 実行環境
    1. Node.js
    2. ts-node
    3. Deno
    4. ちょっとまとめ
  6. まとめ

Web ブラウザ

改めて、軽く、数件に抜粋して

Google Chrome

🤔 使ってます

  • Google が主導している Chromium がベースになっている
  • Chromium はフリーかつオープンソースのコードベースのこと
  • Google Chrome は Chromium にコードを追加して作られている

😗 たまに聞く Chromium との関係が整理できてよかった

Edge

🤔 触ったことないな

  • Microsoft が開発している
  • Windows 10 以降で標準ブラウザとなっている
  • 2020 年に Chromium ベースに刷新された
  • マルチプラットフォームなので macOS、Android、iOS、Linux などでも使える

😗 近年刷新されたのがポイント、あと macOS で使えたの知らなかった...

Safari

🤔 Google Chrome を入れるやつ...

  • Apple が開発している
  • macOS や iOS で標準ブラウザとなっている

😗 特に言うことなし

Mozilla Firefox

🤔 数年インストールしてないな

  • Mozilla Foundation / Mozilla Corporation が開発している

😗 特に言うことなし

ちょっとまとめ

まずはブラウザを
これから下に加筆していきます

image

HTML レンダリングエンジン

HTML などで書かれたデータを解釈し、画面に表示する文字や画像の配置を計算するプログラム

Webkit

🤔 なんか聞いたことある

  • 主に Apple が開発している
  • KHTML というレンダリングエンジンをフォークして開発された
  • Safari で使われている
  • iOS では Webkit しか使うことができないので、少しほかと違うことになっているはず
    • e.g. Google Chrome だけど Webkit
    • e.g. Mozilla Firefox だけど Webkit

😗 なんとなく Google Chrome のイメージだったけど Apple なのか、あと iOS の魔境感...

🤔 聞いたことない、FF の白魔法？

  • 主に Google が開発している
  • Webkit をさらにフォークして開発された
  • Chromium で使われている

😗 Webkit のフォークだとは知らなかった

Gecko

🤔 これは一時よく聞いたな、あと MGS4 を思い出す

  • 主に Mozilla Foundation / Mozilla Corporation が開発している
  • これは特にフォーク関係はない
  • Mozilla Firefox で使われている

😗 意味 ( ヤモリ ) と語感が印象的でこれは知ってた

ちょっとまとめ

Webkit と Blink の関係がポイント

image

ベンダープレフィックス

各レンダリングエンジン固有の機能を指定するためのもの

-webkit-

🤔 border-radius とかするときにやたら書かされるやつ 1

  • Safari で有効
  • Webkit をフォークした Chromium でも有効
  • 対応する Web ブラウザの数もシェアも、これが一番多い

😗 Webkit が Google Chrome のイメージだったのはこのせいか、関係がわかればすっきりわかる

-moz-

🤔 border-radius とかするときにやたら書かされるやつ 2

  • Mozilla Firefox で有効

😗 これの違いが挙動の違いか

-ms-

🤔 border-radius とかするときにやたら書かされるやつ 3

  • Internet Explorer で有効
  • 旧 Edge でも有効だったが、今は Webkit になったので違う

😗 Internet Explorer をサポートしないなら、見ることはなさそう

ちょっとまとめ

ここまで流れで調べていれば自然と理解できる

image

JavaScript エンジン

JavaScript を実行するためのプログラム

エンジンが ECMAScript のどの Edition に準拠しているかで挙動が決まる

V8

🤔 聞いたことないね

  • Google が開発する JIT VM 型の JavaScript エンジン
  • Chromium ベースの Web ブラウザで使われる
  • Node.js でも採用されている

😗 Google Chrome と Node.js ってエンジン同じなんだ

JavaScriptCore

🤔 聞いたことないね

  • Apple が開発するエンジン
  • Safari で使われている

😗 仕様とかライブラリ名っぽいけど、ツール名なのか

SpiderMonkey

🤔 聞いたことないね

  • Mozilla Foundation が保守しているエンジン
  • Mozilla Firefox で使われている

😗 狐の中はヤモリとクモと猿だったのか

ちょっとまとめ

これで最後
Web ブラウザの違いが何の違いによるものか、理解するための基礎知識がついた

image

こういうことがわかっていればテストする Web ブラウザの選定もスムーズにできるだろう

そのほかの JavaScript / TypsScript 実行環境

Web ブラウザ以外のもの

Node.js

🤔 さすがに聞いたことある

  • JavaScript の実行環境の 1 つ
  • 実際のエンジンは V8
  • Web ブラウザの中ではなく、サーバサイド JavaScript の一種
  • いくつかの CommonJS の仕様を実装している

image

😗 File I/O ができるのは CommonJS の仕様を実装しているから、理解した

ts-node

🤔 Node.js の T なやつ？

  • Node.js 環境で TypsScript を実行するライブラリ
  • tsc でトランスパイルする、生成された JavaScript を実行する、というプロセスを省略する
  • シンプルで速く、1 操作で実行できる
  • が、生成される JavaScript を確認できなかったり、毎回トランスパイルが走ったりする

image

😗 Node.js の T なやつ、お手軽だけどできないこともあるっぽいので使い分けなのかな

Deno

🤔 聞いたこと、あるよーな、ないよーな

  • V8 と Rust に基づいた JavaScript / TypeScript のランタイム環境
  • Node.js の作者に開発され 2018 年に発表された、Node.js を改良したもの
    • e.g. デフォルトで TypeScript が動く
    • e.g. モジュールシステムが CJS から ESM になってる
  • ランタイムもパッケージ管理も行うので、別途 npm などを必要としない
    • package.json と node_modules ではなく、import from url という形で依存させる
import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

image

😗 次世代の Node.js って理解で良さそう

ちょっとまとめ

Web ブラウザの外でも JavaScript を動かしたくなって Node.js ができて、それが拡張されることで増えていったのかな

まとめ

Web ブラウザの中も外も、準拠している仕様やエンジンに注目すると理解がしやすいと感じた

今はこれくらいで十分かな