sksk000

Tags

less than 1 minute read

学んだこと

Javascript とは？

  • 元々は Web ブラウザ上で複雑な動きを実装するもの
  • 現在は、サーバサイド・アプリ・AR・VR など様々な場面で使われる。

Javascript の利点

  • 圧倒的にコスパが良い
    • 環境構築が不要(ブラウザ上で動くため)
  • モダン JS は技術の移り変わりが早い
    • 習得者が少ないのでポジションを取りやすい
  • JavaScript を使わない Web システムはない
  • バックエンドも開発できる。

モダン JavaScript とは

  • React や Vue、Angular 等の仮想 DOM を用いるフレームワークを使用
  • パッケージマネージャー(npm/yarn)を使用
  • ES6 以降の書き方をしている
  • Webpack、Vite 等のモジュールバンドラーを使用
  • Babel,SWC

DOM とは？

  • Docment Object Model の略
  • HTML などを解釈し、ツリー構造で考えること

従来の DOM 操作のデメリット

  • レンダリングのコストがかかり、コードが複雑化してしまう。
    • DOM 自体再構築するため。

仮想 DOM

  • JavaScript のオブジェクトで仮想的に作られた DOM
  • JS 上で仮想 DOM を操作し、差分だけ変更する。

パッケージマネージャー

従来だと・・

  • 1 つの JS ファイルにすべての処理を記述していたため、コードが再利用できない。
  • 他の JS ファイルを読み込んで使えたが、読み込み順は意識されてない。

現在

  • npm/yarn 等のパッケージマネージャーを使用。
    • 依存関係を勝手に解決
    • import 先を明確化
    • 公開されているパッケージをコマンド 1 つで利用
    • チーム内の共有が簡単に

パッケージの基本

  • package-lock.json or yarn.lock
    • 自動で生成されるファイル。依存関係やバージョンの解決を行う
  • package.json
    • 設計書的な役割
  • NPM
    • パッケージのレジストリ
  • node_modules
    • 各モジュールのデータが格納されている。
    • サイズが膨大なため、バージョン管理システム等で管理しないようにする。

ES(ECMAScript)とは？

  • JavaScript の標準仕様を定めた規格のこと
  • ES2015 に大きな変更があった。

ES2015 の変更

  • let,const
  • アローファンクション
  • Class 構文
  • etc…

モジュールバンドラー

  • 複数の JS や CSS・Image ファイルを 1 つにバンドルする機能

トランスパイラ

  • ソースコードを別の言語等に変換するプログラム
    • 対応していないブラウザ等があった場合、新しい記法を古い記法に直し実行する。

SPA

  • SinglePageApplication
    • モダン JS は SPA が基本

従来だと

  • リクエストに応じたページを探して都度ユーザに返却する。

SPA

  • 空に近いページを返却し、JS で書き換えて表示する。
  • リクエストする際は、表示するために必要なデータのみ要求する。

メリット

  • ページ遷移毎のチラツキがない
  • 表示速度アップ
  • コンポーネント分割が容易になり、開発効率アップ

You May Also Enjoy