モダンJavaScript

うまい言い方が見つからず、こういうタイトルになりました。ES2015以降のJS開発に関するページです

→JavaScript

→Vue.js関連

→Node.js関連

→TypeScript関連

→Webアプリ開発

→Web技術関連

React †

• 知ってると得をするReactコンポーネントのイケてる書き方 - Qiita 2021.12

• React から Vue への出戻りを検討する 3 つの理由 - Qiita 2021.12
  • そのまま CSS を書くことができる
  • ライブラリ選定で悩まない
  • CompositionAPI + script setup による開発体験の改善

• 公式チュートリアルでNext.jsに入門してみた | DevelopersIO 2022.1
• 【2021年】Next.jsとReactの違い・メリット・デメリットを比較 2021.6

• ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO 2021.11

• フロントエンドエンジニア(React)の技術質問 - Qiita 2021.11

• 【2021年最新】フロントエンジニア向けのアプリ開発4選(無料で学べる) - 渋谷で働く現役エンジニアが徹底解説 2021.8

• react-hooks 基礎 - Qiita 2021.11

• React初心者の私が開発演習でつまづいたこと5選！ - Qiita 2021.11
  • React Hooks useEffect()
  • Promise
  • async, await
  • childrenって何 -使い方
  • JSX内での条件式

• ReactにCognitoでサインイン機能をつける | DevelopersIO 2021.11

• Next.js+TypeScriptでシンプルなニュースサイトを作ってみた。 - Qiita 2021.2

• #01 新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 - YouTube 2021.5

• 何故くそややこしいReactを勉強しないといけないのか？ - Qiita 2021.10
  • アプリの高度化にあわせて登場したのが、React, Angular, Vueといったフレームワークなのである。
  • Ajax

• CodeSandboxでReact学習用の開発環境をサクっと作ろう 2020.1

• ReactはウェブやHTMLとは特に関係のないライブラリです 2020.3

• React入門 -なぜReactを使うのか- 2019.10

• Reactで実現するUniversal JavaScript - Qiita 2019

• React.jsチートシート 2017.5.13

• 5分で理解する React.js 2016.2

• The shapes of React Native 2017.5.18

• https://facebook.github.io/react/
• https://github.com/enaqx/awesome-react

ES6/ESM/ES2015 一般 †

• モダン JavaScript チートシート | Modern JS Cheatsheet 2021.12

• 全ての道はRomeへ続くのか - これからのJavascript開発を考える 2021.11

• 【実録】フロントエンジニアとして実務現場で働くまで(2021年最新版) 2021.11

• JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD 2021.11
  • 最初の決定的な変化は、すべての主要なブラウザでES6がサポートされるようになったことです。Chrome、Edge、Safari、FirefoxはいずれもES6を完全にサポートしています。最後に残ったのはIE11でしたが、Microsoftは今年、ありがたいことにサポート終了を宣言しました。
  • 第二の決定的な変化はHTTP2が普及したことです。HTTP2では、1つの大規模なファイルを送信する代わりに、多くの小さなファイルをさほどのデメリットもなく送信できるようになりました。1回の接続で、必要なレスポンスをすべて多重送信できるのです。
  • トランスパイラとバンドラーが不要であるのに加え、インポートマップを生成できれば、Node.jsをローカル環境にインストールすることもなく、最新で素晴らしいWebアプリの開発環境を整えることができます。

• あなたの知っているJavaScriptはもう古い(概要編) - Qiita 2021.10

• 2016年から2019年までのJavaScriptの全て 2020.2

• JavaScript ベスト・オブ・ザ・イヤー 2019 2020.2

• 仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 2020.2

• なぜ仮想DOMという概念が俺達の魂を震えさせるのか 2020

• 2019年版 最先端のフロントエンド開発者になるために学ぶべきこと 2019.7

• ReactとVueを改善したSvelteというライブラリーについて 2019.5

• JavaScriptが辿った変遷 2019.1

• 2019年前半の「JavaScriptをちゃんとやるための地図」 2019.6

• 2019年5月時点　JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ 2019.5
  • JavaScript Primer
  • https://ja.javascript.info/

• Modern JavaScript Explained For Dinosaurs 2018.9

• JavaScript おじさんが教える本当の Modern JavaScript 入門 1 2018.8

• フロントエンド開発の基本知識（2017年夏） 2017.7.11

• 10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう 2017.6

• 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について 2016.4.10

• 10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在） 2016.4.3
  • 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』

• npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう 2015.10

文法Tips †

• ECMAScript® 2020 Language Specification

• ES2015(ES6) 入門 2019.9

• JSおくのほそ道 #000 [IndexPage] 2018.1
• ECMAScript6にシンボルができた理由 2019.11

モジュールシステム †

• JavaScriptのimportとexportを理解する - Qiita 2021.11
• JavaScriptのモジュールは変数をエクスポートする 2020.3
• ES6のexportについて詳しく調べた 2019.1
• ES6の import / export 2017.12

class †

• ES6 class 構文のパフォーマンスについて 2019.8
• JavaScriptのclass

カリー化 †

• 高階関数、カリー化、部分適用 2020.1
• サルでもわかるカリー化とそのメリット 2019.10

アロー関数 †

• 【JavaScript】アロー関数式を学ぶついでにthisも復習する話 2019.7
• ES2015(ES6)新構文：アロー関数(Arrow function) 2016.2

SPA(Single Page Architecture) †

• 2021年の密かなトレンド？　“型安全ルーティング”の概観 2021.11

• レガシーおじさん、SPAを始めてみた。そして限界を知る 2020.10

• SPAはじめてガイドブック

• やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち 2017.7

• Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） 2017.6
  • 後編

Angular †

• SSR の知識ゼロから始める Angular Universal - Qiita 2018

• フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由 2019.12

• Vue・React・Angularのパフォーマンス比較検証 2019.7

  Reactが性能面で総合的に有利
  Angularは起動に不利だが、実行性能（フレームレート）は良好
  Vueは大量にコンポーネントを配置するような場面においては不利

Electron †

• https://github.com/sindresorhus/awesome-electron

• Electronとは？ アーキテクチャ／API／インストール方法／初期設定 2017.1

• ゼロから始めるElectron 2017.5.12

• ElectronのIPCをまとめる 2017.5.26

• Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) >Electronプログラミング入門 2016.9

• Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) 2017.5.21

• http://electron.atom.io/ 2016.5.11
  • Build cross platform desktop apps with JavaScript, HTML, and CSS
  • Electron API demos

Webpack、バンドラ †

• https://github.com/webpack/webpack

• Webpackの入門書 2020

• Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る 2020.6

• How to setup Webpack +2.0 from scratch in 2017 2017.6

• 最新版で学ぶwebpack 4入門 2019.4

• 面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 2019.6

• Webpackをシンプルに理解しよう 2019.7

• webpack入門 2017.8.14

• webpackチートシート 2017.5.24

Babel、トランスパイラ †

• トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え 2021.5

• Babelで始める！モダンJavaScript開発 2017.5

Flux(Redux) †

• Flux
• 今度こそ Redux を完全に理解する（初心者向け） - Qiita 2021.12
• Redux入門【ダイジェスト版】10分で理解するReduxの基礎
  • Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク