約束の地

キャロの想い出

フロントエンドの基礎について情報をまとめた

そういえば

以前に似たようなのを書いた覚えがありますが、まあ書くことで記憶を定着させるという意味合いもあるので重複覚悟で書きます。

サイト

ES6 (ES 2015) と ES5

JavaScript の基礎(用語)

  • 無名関数(匿名関数)
  • 即時関数
  • コールバック関数
  • DOM
  • 非同期
    • Ajax
  • 主要メソッド
    • addEventListner
    • getElementById
    • getElementsByClassName
    • setInterval
    • setTimeout

トランスパイラ

バンドラ

AltJS

XHR (XMLHttpRequest)

JavaScript のライブラリ

フレームワーク

アーキテクチャ

  • SPA
  • SSR

CSS

グラフライブラリ

デザインツール

発展

  • オブジェクトとは
  • クロージャ
  • Storage
  • Promise
  • Jasmine
  • Puppeteer
  • Web Worker
  • ESLint
  • 仮想DOM
  • コンポーネント
  • ライフサイクル
  • Polyfill

環境構築から開発への流れ

  • ndenv をインストール
  • node をインストール
    • npm もいっしょに入る
  • npmyarn をインストール
  • yarnbabel をインストール
    • es2015 パッケージも忘れずに
  • yarnwebpack をインストール
    • loader を忘れずに
  • フレームワークを入れる場合はここで入れる
    • React
    • Vue.js
  • webpack.config.js を書く
  • コードを書く
    • ES6 は TypeScript を用いるのもよい
    • スタイルは SCSS
    • HTML5 は Rails ならば Slim
  • webpack でバンドルする
    • トランスパイルも
  • デプロイする
    • CI で回すのが好ましい

ウェブリソース

Powered by はてなブログ