Mikoto Studio

モダン JavaScript まとめ

Mikotostudio's photo
Mikotostudio
·

2 min read

モダン JavaScript まとめ

Photo by Joshua Reddekopp on Unsplash

Table of contents

概要

しまぶーさんのIT大学を基にまとめました

  • 歴史と変遷
  • 重要な３つの概念
  • 変数宣言
  • モジュールのImport/Export
  • パッケージ管理
  • バージョン管理

歴史と変遷

JavaScriptは、昔シェアを占めていたブラウザーのNetScapeの社員が開発したブラウザでの表示・振る舞いを拡張させるための言語です。 Javaとは別の言語ですが、当時のJava人気をあやかってJavaScriptと名付けられたそうです。（これが混同される元に…） その後、Internet Explorerがリリースされ、IE用にもJavaScriptが開発されました。

エンジニアは双方のブラウザ用に開発していましたが、統一させるために中核となる言語としてECMAScriptが誕生しました。 Nodejsなどブラウザのみならずサーバー側とも共通の動作のみが定義されており、ES2015(ES6)リリース以降、毎年されています。

重要な３つの概念

  1. モジュール 主に依存関係を解決させる目的で使用されるコードの影響範囲の単位 ES modulesのみでなくNodejsなどバージョンによってはCommonJSしか動かないものなどもあるため両方の形式を把握することが必要

  2. パッケージ管理 そのプログラム全体を動かすために使用するために必要なすべてのソフトのバージョンなどをまとめた仕様書やレシピのようなものにまとめて管理すること jsonファイルに保存されており、npmやyarnで取り込むことで

  3. ビルド 異なる環境下でも同じコードを動かせるようするための事前準備がビルド 例）webpackやVite

変数宣言

  • const :　重複、上書き不可
  • let :　上書き不可
  • var :　重複、上書き可　基本使わない

モジュール　Import/Export

./words.js

// 直接Named import --- (1)
const greeting = "Hello";

// コンソールで受け取った値を出力
export function log(value){
 console.log(value);
}

// まとめてNamed exportする場合 --- (2)
export { greeting };

./bridge.js

// まとめて再エクスポート
export * from "words.js";

./index.js

// 直接words.jsから(1)(2)をNamed import
import { greeting, log } from "./bridge.js";
// 間接的にbridgeファイルからインポート
// import * from "bridge.js";

// コンソルに出力するログを指定（ブラウザ影響なし）
log(greeting);

// ブラウザのボディに出力するテキストを指定
document.body.textContent = greeting;

パッケージ管理

.json　このファイルで依存関係のあるインストール必須なパッケージを管理

ライブラリをClone先でインストールさせるための準備

node_modules

npx　自分の環境にインストールせず一度限りアプリを実行する yarn dlxで同じように実行できるが、Yarnの次期バージョンの使用はまだ普及されていない ※　打ち間違いなどを狙った類似コマンドによるウイルスインストールに注意 例　npx create-next-app

バージョン管理

yarn update [Pakcage]でlockfileをアップデート

チルダ表記 ~ コンパレータでマイナーバージョンが指定されている場合、パッチレベルの変更を許可します。 そうでない場合は、マイナーレベルの変更を許可します。 ~1.1.2 = 1.1.2 <= version < 1.2.0 [^1] ~1.1 = 1.1.x ~1 = 1.x

キャレット表記 ^ X.Y.Z = [メジャー、マイナー、パッチ] タプルの左端のゼロ以外の数字を変更しない変更を許可する。 "^1.2.3" = 1.2.3 <= version < 2.0.0 "^0.2.3" = 0.2.3 <= version < 0.3.0 "^0.0.3" = 0.0.3 <= version < 0.0.4

Lockファイルでバージョン管理 ./.lock

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  , "lat" : "latest"
  , "dyl" : "file:../dyl"
  }
}
JavaScriptjavascript modulespackageFrontend Development