██████████ のブログ

なんか技術的なメモ & ブクマ (no affiliate ads)

[草稿]初めてのフロントエンド沼を歩き回ろう!! 1秒で完全に理解する 現代JavaScript概論 (2017年)

なにこれ?

プログラミング初心者 (赤ちゃん) がフロントエンドに初陣を飾るにあたってのメモ

 

目次

 

これまでのあらすじ

 

 

全体図

こんな感じっぽい (2016年9月という太古の情報なので2017年11月現在の情報に置き換える必要がある)
引用元 https://qiita.com/kmszk/items/45fb4690ace32216ca25

https://camo.qiitausercontent.com/3dacc1d70f3e3223763853934e8a6292fafde7a4/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f37333434362f34316565366532342d383832352d353466372d646134362d3262613861623731396531332e6a706567

 

 

構文チェック, コードフォーマッタ, 型チェック

ESLint,prettier,flow

prettier時代のESLintの設定

flowの始め方

 

 

テストフレームワーク

 

テスト事始め

 

 

フロントエンドのテストは困難

 

No tests lead you all to death

 

型なら書ける

 

不完全ながらも少しずつテストを導入していく

 

最近は jest が主流のよう

 

 

トランスパイラ

Babel

ES2015 => ES5 とか ES2017 => ES5 とか Turn JSX into React function calls とか

 

 

ビルド

[草稿]JavaScript をビルドする (2018年 春) - ██████████ のブログ

 

 

 

 

 

ライブラリ

 

 

  • jQuery:
    太古に DOM などの API をメソッドとして提供していた,ES2015 や React らの登場によって死んだ
  • Angular:
    にゃ~ん,データバインディング方式
  • Vue:
    わぉ~ん,データバインディング方式
  • React:
    MVW の View に位置する,仮想DOM方式,2014年後半頃から日本でも流行り始める

AngularJS vs. ReactJS vs. VueJS — Comparison – codeburst

 

jQuery (死)

速習 jQuery:

 

現代 jQuery:

もうjQueryには頼らない!素のJavaScriptでDOMを操作するための基礎知識 - WPJ

 

可読性・保守性のなさ:

 

jQuery の死:

 

jQuery 残党:

 

Vue

 

 

React

 

 

ポスト React?

 

React は難しいか?

 

 

速習 JavaScript

2017年11月現在の情報に置き換える必要あり