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

そういえば

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

サイト

• CodePen
  • https://codepen.io/
• JSFiddle
  • https://jsfiddle.net/
• MDNドキュメント
  • https://developer.mozilla.org/ja/
• Can I use...
  • https://caniuse.com/
• ECMAScript 2015 Language Specification
  • http://www.ecma-international.org/ecma-262/6.0/

ES6 (ES 2015) と ES5

• 原則として ES6 で書いていく
  • ES5 は読めるようにする
• ES6 ならではの書き方
  • let
  • アロー関数
    • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
  • class
  • 'use strict'
  • fetch
    • superagent
    • axios
  • などなど

JavaScript の基礎（用語）

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

トランスパイラ

• Babel
  • https://babeljs.io/

バンドラ

• webpack
  • https://webpack.js.org/
• Gulp
• Grant

AltJS

• TypeScript
  • http://www.typescriptlang.org/
• CoffeeScript

XHR (XMLHttpRequest)

• 同一生成元ポリシー（同一オリジンポリシー）
  • https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
• CORS（Cross-Origin Resource Sharing、オリジン間リソース共有）
  • https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control
• JSONP（JSON with padding）
  • scriptタグを使用してクロスドメインなデータを取得する仕組み
• プロキシ（サーバサイド）
  • 自分の管理下にあるプロキシサーバにリクエストしてもらうことで別ドメインへのアクセスを可能にする

JavaScript のライブラリ

• CDNで読み込むと楽
  • プロダクションでは Node からビルドする
• jQuery
  • https://jquery.com/
• jQuery プラグイン
  • https://plugins.jquery.com/
• Underscore.js
  • http://underscorejs.org/

フレームワーク

• React
  • https://reactjs.org/
• Vue.js
  • https://vuejs.org/
• Angular
  • https://angular-ja.firebaseapp.com/
• Knockout.js
  • http://knockoutjs.com/
• Stimulus
  • https://stimulusjs.org/
  • Basecamp による新しいフレームワーク
    • Rails 6 に乗る？
  • 軽量、部分的
• Node.js のフレームワークのまとめ
  • http://nodeframework.com/
    • Express
      • http://expressjs.com/
    • Sails
      • https://sailsjs.com/

アーキテクチャ

• SPA
• SSR

CSS

• Sass
  • SCSS
• CSS3
• Bootstrap
  • https://getbootstrap.com/
• Material
  • http://materializecss.com/
  • https://material-ui-next.com/

グラフライブラリ

• Chart.js
  • https://www.chartjs.org/
• Highcharts
  • https://www.highcharts.com/
• Google Charts
  • https://developers.google.com/chart/
• Echarts
  • https://ecomfe.github.io/echarts-doc/public/en/index.html

デザインツール

• Sketch
• Figma
• Adobe XD
• STUDIO
• Phase - Digital design Reinvented
• Digital Product Design, Workflow & Collaboration | InVision

発展

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

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

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

本

• 改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで：書籍案内｜技術評論社

ウェブリソース

• JavaScript in 14 minutes
• ドットインストール