モダンJavaScript

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

→JavaScript

→Webアプリ開発

→Web技術関連

サブトピック†

• TypeScript関連
• React関連
• Node.js関連
• Vue.js関連
• モダンJSフレームワーク一般

ES6/ESM/ES2015 一般†

• JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査 − Publickey 2024.3

• 【JavaScript】JavaScript ライジングスター 2023 #JavaScript - Qiita 2024.1
  • 2023年１位は Shadcn/ui

• JavaScriptビルドツールの整理 各ツールの機能と依存関係 2023.10

• ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita 2023.7

• オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita 2023.4

• Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか 2023.3

• 【React VS Vue.js】Todoアプリを通じて見えてきたReactとVue.jsの違いとは？ - Qiita 2023.3

• Node.jsを過去の物にする最速の肉まん - Qiita 2022.7

• JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA 2022.6

• pzuraq | blog | Four Eras of JavaScript Frameworks 2022.4
  • The Before Times
  • The First Frameworks
  • Component-Centric View Layers
  • Full-stack Frameworks (← We’re here)

• Webフロントエンドパフォーマンスチューニング55選 - Qiita 2022.2

• モダン 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

• 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†

→JavaScript言語仕様系Tips

• モダンフロント開発に必須の知識(ES2015~ES2022まとめ + 高階関数) - Qiita 2022.2

• ECMAScript® 2020 Language Specification

• ES2015(ES6) 入門 2019.9

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

モジュールシステム†

• import * as 構文とパフォーマンス最適化 - Qiita 2022.5
• 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

カリー化†

• 【TypeScript】カリー化・部分適用は便利だよ！ - Qiita 2023.6
• 【JavaScript】美味しそうな技🍛 - Qiita 2022.11
• 食べられないほうのカリー化入門 - Qiita 2022.10
• カリー化 | 中上級者になるためのJavaScript 2022.10
• 高階関数、カリー化、部分適用 2020.1
• サルでもわかるカリー化とそのメリット 2019.10

アロー関数†

• 従来の関数宣言（function）とアロー関数（()=>{}）、どちらを使うべきか？ - Qiita 2023.2
• 【JavaScript】アロー関数式を学ぶついでにthisも復習する話 2019.7
• ES2015(ES6)新構文：アロー関数(Arrow function) 2016.2

SPA(Single Page Architecture)†

• SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix - Speaker Deck 2024.1

• SPAセキュリティ超入門 | ドクセル 2022.9

• SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog 2022.4

• なぜ僕が「SPAはコストが高い」と考えているのか 2022.3
  • 以下の4つの項目に関しては 「比べ物にならないくらいMPAの方が楽」 だと思っており、上の全メリットを捨ててでも選ぶ価値のあるポイントだと個人的には思っています

    web標準の挙動の実現のしやすさ
    セキュアなデータを流出する可能性の高低
    バグがあった時の気づきやすさ / 対応のしやすさ
    ドキュメントの多さ

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

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

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

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

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

Webpack、バンドラ†

• Webpackの詳細なビルドログを出力する - WHITEPLUS TechBlog 2023.9

• 人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る − Publickey 2023.1
  • webpackは10年前のニーズを念頭に開発されたものだった
  • webpackの後方互換性を維持しながら、webpackを進化させていくのは困難だった
  • webpackの性能面での限界,JavaScriptベースのアプリケーションはCPUインテンシブな処理においてマルチプロセッサ搭載マシンの能力を十分に引き出すことは困難
  • 後継となるTurbopackで採用された大きな2つの要素が、Rust言語の採用と、最初からインクリメンタルビルドの仕組みを基盤とした開発が行われたこと

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

• IEが終了したので、webpackやbabelは不要？ - Qiita 2022.6

     IE死んだのでそろそろバンドラー使う意味がないかも
     だからといって既存プロジェクトからいきなりバンドラーを剥がすのは難しいと思う
     小さいプロジェクトからESM使っていきたい

• 歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita 2022.5
  • JavaScriptの歴史、Node.js、Bower、Browserify、webpack、ES module、Babel

• 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

Vite†

• 15分でわかった気になるVite / Explain Vite in 15 minutes - Speaker Deck 2023.3
• ReactをGitHub Pagesにデプロイしよう〜Vite編〜 - Qiita 2023.2
• Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ 2023.2
• Vite入門 (従来のビルドツールとの違いとViteの挙動) - Qiita 2022.6

Babel、トランスパイラ†

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

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

Flux(Redux)†

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

最新の50件