#author("2023-03-06T13:10:44+09:00","default:irrp","irrp")
#author("2024-03-13T14:10:58+09:00","default:irrp","irrp")
うまい言い方が見つからず、こういうタイトルになりました。ES2015以降のJS開発に関するページです

→JavaScript

→Webアプリ開発

→Web技術関連


#contents


*サブトピック [#i096a812]
-TypeScript関連
-React関連
-Node.js関連
-Vue.js関連
-モダンJSフレームワーク一般


*ES6/ESM/ES2015 一般 [#g53567fb]
-[[JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査 − Publickey>https://www.publickey1.jp/blog/24/javascripttypescriptidevscode32jetbrains.html]] 2024.3

-[[【JavaScript】JavaScript ライジングスター 2023 #JavaScript - Qiita>https://qiita.com/rana_kualu/items/ce708e90c77456944840#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF]] 2024.1
--2023年1位は Shadcn/ui

-[[JavaScriptビルドツールの整理 各ツールの機能と依存関係>https://zenn.dev/nakaakist/articles/86457bf2908379]] 2023.10

-[[ファビコンを環境ごとに変えると分かりやすい(Next.js, Vue3, SvelteKit, Astro) - Qiita>https://qiita.com/sorami/items/4928ddf2b17ceaba2501]] 2023.7

-[[オブジェクトのクローンにJSON化を使う時代は終わった!【JavaScript】 - Qiita>https://qiita.com/silane1001/items/ae2e491abd64c01c7f3e]] 2023.4

-[[Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか>https://zenn.dev/mizchi/articles/todays-javascript]] 2023.3

-[[【React VS Vue.js】Todoアプリを通じて見えてきたReactとVue.jsの違いとは? - Qiita>https://qiita.com/nafunafu/items/1192e7d513addbafca50]] 2023.3

-[[Node.jsを過去の物にする最速の肉まん - Qiita>https://qiita.com/shadowTanaka/items/5fb99819629dcaab3e05]] 2022.7

-[[JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA>https://ics.media/entry/220610/]] 2022.6

-[[pzuraq | blog | Four Eras of JavaScript Frameworks>https://www.pzuraq.com/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>https://qiita.com/nuko-suke/items/50ba4e35289e98d95753]] 2022.2

-[[モダン JavaScript チートシート | Modern JS Cheatsheet>https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html]] 2021.12

-[[全ての道はRomeへ続くのか - これからのJavascript開発を考える>https://zenn.dev/akfm/articles/6d62560e1273c6]] 2021.11

-[[【実録】フロントエンジニアとして実務現場で働くまで(2021年最新版)>https://sbucks-blog.com/program/study/front-engineer/]] 2021.11

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

-[[あなたの知っているJavaScriptはもう古い(概要編) - Qiita>https://qiita.com/k-tetsuhiro/items/fd50feeee323e08e8349]] 2021.10

-[[2016年から2019年までのJavaScriptの全て>https://qiita.com/rana_kualu/items/6bcc99226be741348c34]] 2020.2

-[[JavaScript ベスト・オブ・ザ・イヤー 2019>https://qiita.com/rana_kualu/items/4727a0d64657aa837ce3]] 2020.2

-[[仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう>https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000]] 2020.2

-[[なぜ仮想DOMという概念が俺達の魂を震えさせるのか>http://qiita.com/mizchi/items/4d25bc26def1719d52e6]] 2020

-[[2019年版 最先端のフロントエンド開発者になるために学ぶべきこと>https://qiita.com/baby-degu/items/da30fa71b8f48fffc568]] 2019.7

-[[JavaScriptが辿った変遷>https://zenn.dev/naoki_mochizuki/articles/46928ccb420ee733f78f]] 2019.1

-[[2019年前半の「JavaScriptをちゃんとやるための地図」>https://techracho.bpsinc.jp/hachi8833/2019_06_28/75994]] 2019.6

-[[2019年5月時点 JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ>https://qiita.com/fujineyuri/items/7dc05612345122b9072e]] 2019.5
--[[JavaScript Primer>https://jsprimer.net/]]
--https://ja.javascript.info/

-[[Modern JavaScript Explained For Dinosaurs>https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70]] 2018.9

-[[JavaScript おじさんが教える本当の Modern JavaScript 入門 1>https://qiita.com/superyusuke/items/948d2a084f87eaa3f9c2]] 2018.8


-[[フロントエンド開発の基本知識(2017年夏)>http://qiita.com/norioxkimura/items/1dc1cea1c0a8ea7adf31]] 2017.7.11

-[[10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう >https://www.webprofessional.jp/anatomy-of-a-modern-javascript-application/]] 2017.6


-[[日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について>http://d.hatena.ne.jp/tomoya/20160410/1460274822]] 2016.4.10

-[[10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)>http://d.hatena.ne.jp/tomoya/20160403/1459665374]] 2016.4.3
--『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』

-[[npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう>http://qiita.com/megane42/items/2ab6ffd866c3f2fda066]] 2015.10





*文法Tips [#m302b386]
→JavaScript言語仕様系Tips


-[[モダンフロント開発に必須の知識(ES2015~ES2022まとめ + 高階関数) - Qiita>https://qiita.com/c-shiraga/items/33812799e4dc17d89b44]] 2022.2

-[[ECMAScript® 2020 Language Specification>https://tc39.es/ecma262/]]

-[[ES2015(ES6) 入門>https://qiita.com/soarflat/items/b251caf9cb59b72beb9b]] 2019.9

-[[JSおくのほそ道 #000 [IndexPage]>https://qiita.com/hosomichi/items/ad9a9c99a4fda041a563]] 2018.1
-[[ECMAScript6にシンボルができた理由>https://qiita.com/naruto/items/312adeb6145eb6221be7]] 2019.11


** モジュールシステム [#pb44598f]
-[[import * as 構文とパフォーマンス最適化 - Qiita>https://qiita.com/uhyo/items/842e51e0d8cc46856d04]] 2022.5
-[[JavaScriptのimportとexportを理解する - Qiita>https://qiita.com/cotton11aq/items/e9f81073050fb746d2c5]] 2021.11
-[[JavaScriptのモジュールは変数をエクスポートする>https://qiita.com/uhyo/items/6b111815ef5495f4e490]] 2020.3
-[[ES6のexportについて詳しく調べた>https://qiita.com/senou/items/a2f7a0f717d8aadabbf7]] 2019.1
-[[ES6の import / export>https://qiita.com/kiyodori/items/01d07d5c0659e539ecb9]] 2017.12

** class [#a89d49fe]
-[[ES6 class 構文のパフォーマンスについて>https://qiita.com/yuki153/items/120422ae5bdd309f777a]] 2019.8
-[[JavaScriptのclass>https://qiita.com/jooex/items/981824f9fb494b448a08]]


** カリー化 [#j0c3f31f]
-[[【TypeScript】カリー化・部分適用は便利だよ! - Qiita>https://qiita.com/rokumura7/items/033a930354b2733e097a]] 2023.6
-[[【JavaScript】美味しそうな技🍛 - Qiita>https://qiita.com/scythercas/items/4fdb672f6e4ebb13da1a]] 2022.11
-[[食べられないほうのカリー化入門 - Qiita>https://qiita.com/KDKTN/items/6a27c0e8efa66b1f7799]] 2022.10
-[[カリー化 | 中上級者になるためのJavaScript>https://kenju.gitbooks.io/js_step-up-to-intermediate/content/content/part03/currying.html]] 2022.10
-[[高階関数、カリー化、部分適用>https://qiita.com/nouka/items/d9f29db7b6a69baa650a]] 2020.1
-[[サルでもわかるカリー化とそのメリット>https://qiita.com/KtheS/items/1a93ba0a6d722a534439]] 2019.10


** アロー関数 [#ieafd39a]
-[[従来の関数宣言(function)とアロー関数(()=>{})、どちらを使うべきか? - Qiita>https://qiita.com/kurumaebi65/items/03e83160299bdb8ced2f]] 2023.2
-[[【JavaScript】アロー関数式を学ぶついでにthisも復習する話>https://qiita.com/mejileben/items/69e5facdb60781927929]] 2019.7
-[[ES2015(ES6)新構文:アロー関数(Arrow function)>http://analogic.jp/arrow-function/]] 2016.2


*SPA(Single Page Architecture) [#u21ced50]
-[[SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix - Speaker Deck>https://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix]] 2024.1

-[[SPAセキュリティ超入門 | ドクセル>https://www.docswell.com/s/ockeghem/K2PPNK-phpconf2022]] 2022.9

-[[SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog>https://blog.flatt.tech/entry/spa_injection]] 2022.4

-[[なぜ僕が「SPAはコストが高い」と考えているのか>https://zenn.dev/sesere/articles/c3917db32777af]] 2022.3
--以下の4つの項目に関しては 「比べ物にならないくらいMPAの方が楽」 だと思っており、上の全メリットを捨ててでも選ぶ価値のあるポイントだと個人的には思っています
 web標準の挙動の実現のしやすさ
 セキュアなデータを流出する可能性の高低
 バグがあった時の気づきやすさ / 対応のしやすさ
 ドキュメントの多さ

-[[2021年の密かなトレンド? “型安全ルーティング”の概観>https://zenn.dev/uhyo/articles/type-safe-routing-2021]] 2021.11

-[[レガシーおじさん、SPAを始めてみた。そして限界を知る>https://zenn.dev/koduki/articles/0fe6cc5ada58e5600f75]] 2020.10


-[[SPAはじめてガイドブック>https://greative.jp/page/guidebook-spa/]] 

-[[やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち>https://lealog.hateblo.jp/entry/2017/07/10/073926]] 2017.7

-[[Server Side Renderingについて知るべきこと。Server Side Renderingとは何か? それによって何が改善されるのか?(前編)>https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html]] 2017.6
--[[後編>https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017_1.html]]


*Svelte [#e2e292a4]
-[[Here's why I Recommend Svelte To Every New Web Developer In 2022 - DEV Community>https://dev.to/hr21don/heres-why-i-recommend-svelte-to-every-new-web-developer-in-2022-9ii]] 2022.7
-[[ReactとVueを改善したSvelteというライブラリーについて>https://qiita.com/so99ynoodles/items/a8144ced1a21467c6300]] 2019.5


*SolidJS [#k33e51a5]
-[[SolidJSに入門してみた2:ForとIndexの違い | DevelopersIO>https://dev.classmethod.jp/articles/solidjs-tutorial-for-index-difference/]] 2022.6
-[[SolidJSに入門してみた | DevelopersIO>https://dev.classmethod.jp/articles/solidjs-tutorial/]] 2022.6

-[[SolidJS「分割代入しないでクレメンス」ワイ「Why」 - Qiita>https://qiita.com/shadowTanaka/items/57764d62850bf14bc5f1]] 2022.6

-[[React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita>https://qiita.com/shadowTanaka/items/b6d00863a8d6bff37de6]] 2022.5


*Angular [#d5b98d4c]
-[[SSR の知識ゼロから始める Angular Universal - Qiita>https://qiita.com/MasanobuAkiba/items/7adcfd5050150ac9ba36]] 2018

-[[フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由>https://qiita.com/luncheon/items/9dde71269335d0057844]] 2019.12

-[[Vue・React・Angularのパフォーマンス比較検証>https://ics.media/entry/190731/]] 2019.7
 Reactが性能面で総合的に有利
 Angularは起動に不利だが、実行性能(フレームレート)は良好
 Vueは大量にコンポーネントを配置するような場面においては不利


*Electron [#ub573846]
-[[Electron + TypeScript + React + Webpackのプロジェクト作成から基本操作まで - Qiita>https://qiita.com/uta-member/items/0590bb3832cac9fd41ec]] 2023.2

-[[たぶん入門者が本当に知りたいことだけをまとめたElectron入門 - Qiita>https://qiita.com/tomomoss/items/2b4112d6e22065c8615b]] 2020

-[[Electronとは? アーキテクチャ/API/インストール方法/初期設定>http://www.buildinsider.net/enterprise/electron/01]] 2017.1

-[[ゼロから始めるElectron>http://qiita.com/tashxii/items/3195157e5e82d3790afd]] 2017.5.12

-[[ElectronのIPCをまとめる>http://qiita.com/gcmae/items/cb6eb18be2f4ffae60b5]] 2017.5.26

-[[Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) >Electronプログラミング入門>https://html5experts.jp/yosuke_furukawa/20841/]] 2016.9

-[[Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) >http://qiita.com/tashxii/items/290a3421d520bdae0c36]] 2017.5.21

-http://electron.atom.io/ 2016.5.11
--Build cross platform desktop apps with JavaScript, HTML, and CSS
--[[Electron API demos>https://github.com/electron/electron-api-demos]]

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


*Webpack、バンドラ [#xb8b3aa4]
-[[Webpackの詳細なビルドログを出力する - WHITEPLUS TechBlog>https://blog.wh-plus.co.jp/entry/2023/09/22/152542]] 2023.9

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

-https://github.com/webpack/webpack

-[[IEが終了したので、webpackやbabelは不要? - Qiita>https://qiita.com/access3151fq/items/42b38635d81aad786e60]] 2022.6
    IE死んだのでそろそろバンドラー使う意味がないかも
    だからといって既存プロジェクトからいきなりバンドラーを剥がすのは難しいと思う
    小さいプロジェクトからESM使っていきたい

-[[歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita>https://qiita.com/hiroki-yama-1118/items/382f38054a9e7d31e455]] 2022.5
--JavaScriptの歴史、Node.js、Bower、Browserify、webpack、ES module、Babel

-[[Webpackの入門書>https://zenn.dev/yuri/books/4391b9280f823061932c]] 2020

-[[Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る>https://qiita.com/Mr_ozin/items/b6749e60b185a26b97f0]] 2020.6

-[[How to setup Webpack +2.0 from scratch in 2017>https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e]] 2017.6

-[[最新版で学ぶwebpack 4入門>https://ics.media/entry/12140/#webpack-watch]] 2019.4

-[[面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門>https://knowledge.sakura.ad.jp/21623/]] 2019.6

-[[Webpackをシンプルに理解しよう>https://qiita.com/yusuke_ten/items/a40ec089c55599ce1b3e]] 2019.7

-[[webpack入門>http://qiita.com/hika7719/items/76e87b6ecf308516c514]] 2017.8.14

-[[webpackチートシート>http://qiita.com/morrr/items/0f35adc38b59f5a67141]] 2017.5.24


**Vite [#jb1e7760]
-[[15分でわかった気になるVite / Explain Vite in 15 minutes - Speaker Deck>https://speakerdeck.com/line_developers/explain-vite-in-15-minutes]] 2023.3
-[[ReactをGitHub Pagesにデプロイしよう〜Vite編〜 - Qiita>https://qiita.com/tat_mae084/items/4051c61926dc8165e80b]] 2023.2
-[[Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ>https://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/]] 2023.2
-[[Vite入門 (従来のビルドツールとの違いとViteの挙動) - Qiita>https://qiita.com/yoshii0110/items/6277626b0f558818da08]] 2022.6




*Babel、トランスパイラ [#t231b25c]
-[[トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか?」。資金難により寄付を訴え>https://www.publickey1.jp/blog/21/babel.html]] 2021.5

-[[Babelで始める!モダンJavaScript開発>https://html5experts.jp/kyo_ago/16979/]] 2017.5


*Flux(Redux) [#d64a441a]
-[[Flux>https://github.com/facebook/flux]]
-[[今度こそ Redux を完全に理解する(初心者向け) - Qiita>https://qiita.com/FarStep131/items/ad834facc57a443a9dc3]] 2021.12
-[[Redux入門【ダイジェスト版】10分で理解するReduxの基礎>http://qiita.com/kiita312/items/49a1f03445b19cf407b7]]
--Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS