Cloudflare PagesにNext.jsをデプロイするとSSRが動作するようになったのでどうやって実現されたのかを調べた
これまでの問題 Next.jsのEdge RuntimeはAPI RoutesやMiddlewaresのような単純なリクエスト/レスポンス変換を行う用途で提供されていてReact Componentをレンダリングする(SSR)にはNode.jsランタイム(主にNodeのStreams API)が必要だった[1]。 その上でCloudflare Workersの実行環境でSSRを実現するにはFastly Compute@EdgeのコンポーネントのようにNode.js APIの互換性問題を解決しプラットフォームに適合したグルーコードを生成することが要求された(fastly/next-compute-jsの内部アーキテクチャを調べるを参照)。 なのでCloudflare WorkersにAPI単体をデプロイ+Cloudflare Pagesにエクスポート済みの静的サイトをデプロイしてSPAで動か
TypeScript 4.7 と Native Node.js ESM
TypeScript 4.7 がリリースされたので、Node.js ESM 対応の現状をまとめておく。 @teppeis さんの TypeScript 4.5 以降で ESM 対応はどうなるのか？ を先に読んでおくと、以降の話も読み進めやすいかも。 このエントリの中でも、teppeis さんの定義した用語をそのまま用いさせてもらう。 * CommonJS (CJS): 従来式の Node.js CommonJS で書かれたファイルまたはパッケージ * ES Modules (ESM): ES2015 で定義されたモジュール仕様。Node.js では v12 以降でネイティブにサポートされている。 * Native ESM: ESM 形式で記述されたファイルを、Node.js またはブラウザで直接 ESM として実行する方式またはそのファイル。擬似 ESM と区別するために Native と
React Architecture: How to Structure and Organize a React Application
There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. Often the case is that whoever sets up the application in the beginning throws almost everything in a components folder, or maybe components and containers if they used Redux, but I propose there's a better wa
Node.js の import.meta.resolve について
先日 import.meta について調査して人に話す機会があり HTML(Web) と Node.js の各ホストの import.meta がどのようなオブジェクトを返すのかを調査していた。そのときは、「HTML でも Node.js でも import.meta.url だけが生えていて〜〜」という話をしてしまった。 後になって知ったのだが、Node.js には import.meta.url 以外にも import.meta.resolve というプロパティが実装されている。 この記事では Node.js に実装されている import.meta.resolve について解説する。 なお、import.meta.url はまだ Stability 1 の API なので、今後仕様が変わる可能性があることに注意してほしい。 import.meta について まず import.met
ゼロからはじめるJavaScript(6) v10が公開 - ElectronでJS製デスクトップアプリを作ろう
JavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるElectronをご存じでしょうか。Electronを使うと手軽にWindowsやmacOS、Linuxで動くデスクトップアプリを作ることができます。つい先日、9月1日にElectronのバージョン10.1.1が公開されました。本稿では最新バージョン10を使って簡単にアプリを作ってみましょう。 Electronとは？代表アプリは？ 『Electron』とは、HTML/CSS/JavaScriptといったWebの技術を利用して、デスクトップアプリを作ることができるフレームワークです。Windows/macOS/Linux上で動くデスクトップアプリを開発できます。 ElectronのWebサイト Electronを使って作られた代表的なアプリには、GitHubが開発しているテキストエディタの「Atom」や、マイクロソ
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
Relayで見るNext.jsとSSGの未来
現在自分が取り組んでいるプロジェクトでは、Next.jsとRelay Modernを採用して開発を進めています。 RelayはFacebookが開発しているGraphQLクライアントライブラリです。 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい、ということを説明します。 Example公式のexampleがすでにあるので見てください。 https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern 以下が典型的なpagesの構成です。 pages/index.js
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - おじんブログ
動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最終的に、React + TypeScript の環境を作れるようにする。 リポジトリ 各ステップごとにコミットしているので逐次さかのぼってください。 github.com 前提 最低限の yarn または npm コマンドの使い方がわかること。 npx create-react-app で React プロジェクトを作成した事があること。 ※VSCode 使用を前提としています。 Config なしで実行する 最低限の構成で Webpack が何をするのか理解する。 準備 # run at project
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita
これはなに？ SPAのキャッシュコントロールは難しい問題だけど、ちゃんと仕組みを理解してただしい戦略を使えばそんなに難しくないよという話。 Disclaimer この記事は2019年10月くらいにおける筆者の経験と見解に基づくものです。だいたい間違ってないとは思いますが内容の正確性は保証しませんし、2ヶ月くらいするとFirebaseないしNuxt.jsの進歩によりココに書かれていることが嘘になる可能性はあります。また、特定の記事や個人を中傷する意図はありません。筆者の所属する組織やその類とは関係がありません。 なんで難しい(と思われている)の？ そもそもの前提としてちゃんとやらないとアプリケーションのリリースがままならないというプレッシャーがあります。 そのうえで... (1) SPAの構成ファイルをキャッシュしようとする輩がたくさんいる Hostingサービス（ブラウザキャッシュ） CD
Vue と Jest で Unit test を始めよう | DevelopersIO
Vue と Jest で Unit test を始めよう 保守性の高いコードが書けていますか？ VueのComponent構成 ~ Unit test までの流れを書いています。 Unit testがあると、保守しながら長くメンテナンスしていけるコードになるので、 開発の助力になればと思います。 本題の前に Vue とは オープンソースのJavaScriptフレームワークであり、 フロント系では、3大フレームワークと言われ、わかりやすい構文の為人気があります。 Jest とは JavaScriptのUnit testのためのツールです。 わかる事 Atomic Component のディレクトリ構成 (atoms) atomsのComponentのUnit test 触れないこと Vue, Jest の基本的な構文 Atomic Component のディレクトリ構成 Unit testす
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
webpackの仕組みを簡潔に説明する - hiroppy's site
この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。 モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo
Announcing TypeScript 3.0 RC - TypeScript
TypeScript 3.0, our next release of the type system, compiler, and language service, is fast-approaching! Today we’re excited to announce the Release Candidate of TypeScript 3.0! We’re looking to get any and all feedback from this RC to successfully ship TypeScript 3.0 proper, so if you’d like to give it a shot now, you can get the RC through NuGet, or use npm with the following command: You can a
GAS＋Vue.jsでサーバレスなWebアプリ② - Qiita
はじめに GASのHtmlServiceを使ってSPAライクなWEBアプリケーションを書くことになったのでその時のメモです。 こちらの記事の続きとなります。 今回のアウトライン CSSファイルとJavascriptファイルを作成する。 index.htmlからCSSとJavascriptファイルを読み込む。 終わりに それではさっそく書いてみるよ。 1. CSSファイルとJavascriptファイルを作成する。 前回の記事で作成したGASプロジェクトに以下のファイルを作成していきます。 プロジェクト内には.gsファイルか.htmlファイルのどちらかしか作成できないので、どちらも.htmlファイルとして作成します。
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js から Prisma ORM を利用する