1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScript MikotoStudio 保存版 2022

Last updated at Posted at 2022-04-13

概要

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

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

歴史と変遷

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

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

重要な3つの概念

  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先でインストールさせるための準備

.gitignore
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.json
{ "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"
  }
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?