JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
JavaScript Package Manager 2019
Node学園で発表した JavaScript Package Manager の話です。
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
JavaScript でオセロを実装する(遅延評価編) | Webシステム開発／教育ソリューションのタイムインターメディア
これまでのあらすじ 新人の力量を測るための課題としてオセロの作成を指示したが、 指示した当人が作れないようでは話にならないので実際に作り始めた。 一先ず盤面が4×4で黒も白も人間が指す一人二役の寂しいオセロは実装できたのだが、 快適に遊ぶには大きな問題が潜んでいたのであった。 実は4×4で既に重い問題 実際に前回作成したオセロを実行すると、 ゲームが遊べるようになるまでに割りと待たされます。 それもそのはずで、あの実装は ゲーム中で取り得る局面を予め全て列挙 していたからです。 しかも4×4という最小限の盤面のオセロですらゲーム中に出現し得る局面 = ゲーム木に含まれるノード数は 284,881個 あります(※回転すると同じになる盤面等は個別に数えて、同一盤面でも手番のプレイヤーが異なるなら別と数えて、パスした場合も1個と数えています)。 そりゃあ待たされるに決まってますし、無闇矢鱈にメモ
2011年のJavaScript ─ウェブアプリ全盛の時代へ | gihyo.jp
あけましておめでとうございます。昨年に引き続き、今年もJavaScriptの近い未来についてちょっとだけお話させて頂きます。 最初に昨年の予想を見返しておきましょう。昨年は次の3つを2010年の鍵として取り上げました。 ウェブ標準 ブラウザ拡張 サーバーサイドJavaScript この3つを軸に2010年を振り返ってみます。 2010年のJavaScript界隈でのニュース ウェブ標準 2010年最初のビッグニュースはなんといってもIE 9のPlatform Preview版の登場でした。これまでの独自実装路線から一転して（正確にはIE 8の時点でJSONやWeb Storageのサポートなど、その徴候はあったのですが）、HTML5などのウェブ標準のサポートを進めることを表明しました。そして実際に8週おきにPlatform Preview版をアップデートして、ECMAScript5・S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのレベル別書籍のまとめ
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita