Javascript on hdknr blog

Vercelを使えばインフラエンジニア不要？ Framework-defined Infrastructureが変えるWebアプリ開発

Thu, 12 Mar 2026 00:00:00 +0000

「Vercelを使えばそこそこ大規模なアプリケーションまでインフラエンジニア要らずにいけるのよな」——元Yahoo!エンジニアで YouTuber のしまぶー氏（@shimabu_it）のポストが話題になった。Vercel CEO の Guillermo Rauch 氏の投稿に対するコメントで、「しかも大抵の場合インフラエンジニアがAWSやGCPで構築したものより高機能、高可用性、高パフォーマンス」と踏み込んだ発言をしている。

Vercelが実現する「インフラレス」開発

Vercelは Next.js の開発元として知られるが、プラットフォームとしての本質は開発者からインフラの複雑さを隠蔽することにある。

Framework-defined Infrastructure（FdI）

Vercelが推進する Framework-defined Infrastructure は、Infrastructure as Code（IaC）の進化形だ。

従来のIaCでは、開発者がTerraformやCloudFormationでインフラを明示的に定義する必要があった。FdIでは、フレームワークのコードからインフラ構成が自動的に導出される。

ビルド時にソースコードを解析し、開発者の意図を理解
必要なインフラ構成（Edge Functions、Serverless Functions、Static Assets、ISR設定など）を自動生成
開発者は「何を作るか」に集中し、「どこにデプロイするか」を考える必要がない

Self-driving Infrastructure

Vercelは Self-driving Infrastructure というコンセプトも掲げている。本番環境の運用を自律的に管理し、実世界のインサイトを基にアプリケーションコードの改善まで行うというビジョンだ。

6人のエンジニアで年間360億トークンを処理

Vercelの「インフラ不要」の主張を裏付ける事例として、Durable社のケースが象徴的だ。

6名のエンジニアチームで300万ビジネスをサポート
年間360億トークン（日次1.1億トークン）を処理
新しいAIエージェントを1日で本番環境に展開可能
自社ホスティング比で3〜4倍のコスト削減

創業者は「インフラ構築ではなくエージェント開発に注力できるようになった」と評価している。

インフラエンジニアは本当に不要になるのか？

しまぶー氏は以前から「インフラエンジニアは二極化する」と指摘している:

高待遇化: クラウドサービスの基盤自体を作れるエンジニア
活躍の場が減少: アプリケーションのインフラを構築する程度のエンジニア

「基盤自体を作れるエンジニア」とは、VercelやAWSのサービスそのものを開発・運用する側のスキルセットを指す。具体的には以下のような領域だ:

分散システム設計: AWS LambdaやVercel Edge Functionsの実行基盤を設計・構築するスキル
コンテナランタイム/オーケストレーション: Kubernetesを「使う」のではなく「作る・拡張する」レベル
ネットワーク基盤: CDN、ロードバランサ、DNSを大規模に設計・運用するスキル
ストレージエンジン: 分散データベースやオブジェクトストレージの内部実装
コンパイラ/ランタイム: サーバーレスプラットフォームのビルドパイプラインや実行環境の開発

つまり「AWS上にアプリをデプロイする」のではなく「AWSのようなサービスを作る」側の人材であり、このレベルのエンジニアはプラットフォームの進化によってむしろ需要が高まっている。

Vercelの基盤は何で動いているのか

「基盤を作る」とは具体的にどのレベルなのか。Vercel自身の技術スタックを見ると、その深さがわかる。

Vercelは当初 AWS Fargate でビルド処理を実行していたが、プロビジョニングに90秒かかる問題があった。そこで2023年に独自のコンピュート基盤「Hive」を構築し、起動時間を5秒に短縮した。

Hiveの技術スタックは以下の通りだ:

レイヤー	技術
物理基盤	ベアメタルサーバー（“Boxes”）
VM隔離	Firecracker microVM + KVM
ビルド基盤	Hive（独自コントロールプレーン）
関数実行	AWS Lambda、Edge Functions
オーケストレーション	Amazon EKS（一部）+ 独自制御
ストレージ/キュー	Amazon S3、SQS
ネットワーク	Amazon Global Accelerator

注目すべきは、OpenShiftのような既存のKubernetesディストリビューションは使われていない点だ。Firecracker はAWSがLambdaとFargateのために開発したオープンソースのmicroVMで、約300ミリ秒でVMを起動できる。Vercelはこの Firecracker + KVM の上に独自のオーケストレーション層を構築している。

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ

Wed, 04 Mar 2026 00:00:00 +0000

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ

しば（@shiba_program）氏のポストが、GUI でWebアニメーションを作成できる JavaScript ライブラリ「Theatre.js」を紹介しています。

GUIで直感的にWebアニメーションが作れる「theatre.js」すごいな。編集した内容が即座に反映されるので、これは微調整捗る。GUIで編集できるから、デザイナーに調整任せることもできそう。デモにある高度なものだけでなく、Webサイトで使うシンプルなアニメーションの作成もかなり楽にしてくれるはず — しば（@shiba_program）

投稿が注目している「デザイナーに調整を任せられる」という点は、Theatre.js の設計思想の核心です。コードでアニメーション対象を定義し、ブラウザ上の GUI エディタで動きを調整する。このワークフローにより、エンジニアとデザイナーの協業が自然に成立します。

Theatre.js とは何か

Theatre.js はフィンランド・ヘルシンキの Theatre.js Oy が開発するオープンソースの Web モーションデザインライブラリです。GitHub Stars 12.2k、1,600以上のプロジェクトが依存しており、Web アニメーション領域で確固たる地位を築いています。

基本情報

項目	内容
開発元	Theatre.js Oy（ヘルシンキ）
ライセンス	Apache 2.0（@theatre/core）/ AGPL 3.0（@theatre/studio）
言語	TypeScript 82.6%
GitHub Stars	12.2k
現バージョン	0.5（1.0 開発中）
対応技術	Three.js、React Three Fiber、HTML/SVG、任意のJSライブラリ

2つのパッケージ構成

Theatre.js は2つの独立したパッケージで構成されます。

パッケージ	役割	使用場面
@theatre/core	アニメーション再生エンジン	開発・本番の両方
@theatre/studio	GUI エディタ（シーケンスエディタ、グラフエディタ、プロパティパネル）	開発時のみ

この分離設計が重要です。Studio は開発時にのみ使い、本番ビルドには core だけを含めます。エディタのコードが本番バンドルに入らないため、パフォーマンスへの影響はありません。

4つの基本概念

Theatre.js には、理解すべき4つの概念があります。

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由

Mon, 02 Mar 2026 00:00:00 +0000

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由

sigumataityouda 氏のポストが、リクルートの新卒研修資料を「React を語る上で欠かせないもの」「完成度が非常に高い」と紹介しています。リクルートは 2017 年から毎年、新卒エンジニア向け研修資料を無料公開しており、React 研修資料は特に業界で高く評価されています。

React語る上で欠かせないものとしてリクルートの新卒研修資料というのもがある。完成度が非常に高い。

リクルートの React 研修資料とは

React 研修 (2024) は、リクルートのエンジニアコース新卒研修「BootCamp」で使われている講義資料です。約 170 スライド以上で構成され、Speaker Deck で無料公開されています。

研修の位置づけ

リクルートの新卒エンジニアは配属前に約 3 ヶ月間の BootCamp を受講します。2024 年度は 24 講座以上が開講されており、React 研修はフロントエンド技術スタックの中核として位置づけられています。

研修カテゴリ	主な講座
フロントエンド	JavaScript、TypeScript、React、Next.js
バックエンド	データベース設計、API 設計
品質・テスト	テスト駆動開発（講師: t_wada 氏）
セキュリティ	セキュリティ演習
AI	テキスト生成 AI 活用
マインドセット	ソフトウェアエンジニアとしての姿勢と心構え

最初の講座「ソフトウェアエンジニアとしての姿勢と心構え」は、技術顧問の t_wada 氏が担当し、「技術の学び方を学ぶ」ことに重点を置いています。

資料の構成

React 研修資料は 5 つのセクションで構成されています。

1. Web アプリ開発の変遷

React を学ぶ前に、Web アプリケーション開発がどう進化してきたかを整理します。

世代	アーキテクチャ	特徴
第 1 世代	MPA（クラシック SSR）	サーバーが HTML を生成、ページ遷移ごとにリロード
第 2 世代	MPA + jQuery	DOM 操作で部分的な動的 UI を実現
第 3 世代	SPA（CSR のみ）	クライアントで描画、リッチな UX
第 4 世代	SPA（CSR + 事前レンダリング）	SSR / SSG で初期表示を高速化

この変遷を理解することで、「なぜ React が必要になったのか」という文脈が掴めます。jQuery 時代の命令的 UI と React の宣言的 UI の違いを、歴史的な流れの中で説明しているのが特徴です。

javascript: ページのURLを取得

Mon, 14 Oct 2024 00:00:00 +0000

Javascript ページ内のアンカーの取得

ブラウザの「検証」でコンソールからプログラムを実行

1
2
3
4
5
6


// ページ内のすべてのアンカー要素を取得
const anchors = document.querySelectorAll('a');
// アンカーのhref属性を配列に格納
const urls = Array.from(anchors).map(anchor => anchor.href);
// 結果をコンソールに表示
console.log(urls);

Gatsby レイアウト

Wed, 04 Sep 2024 00:00:00 +0000

Gastby レイアウト

`wrapper.js`

Gatsbyのwrapper.jsファイルは、ページ全体をラップするために使用されるファイルです。このファイルを使用することで、特定のHTML要素やReactプロバイダーでページをラップすることができます。これにより、ページ全体に共通のレイアウトや機能を簡単に適用できます。

例えば、以下のようにwrapper.jsファイルを作成し、ページを特定のコンポーネントでラップすることができます。

1
2
3
4
5
6


import React from 'react';
import Layout from './src/components/Layout';

export const wrapPageElement = ({ element, props }) => {
 return <Layout {...props}>{element}</Layout>;
};

この例では、Layoutコンポーネントでページ全体をラップしています。これにより、すべてのページに共通のレイアウトが適用されます。

さらに詳しい情報や具体的な使用例については、Gatsbyの公式ドキュメントを参考にすると良いでしょう¹。

他に知りたいことがあれば教えてくださいね！

ソース: Copilot との会話、 2024/9/4 (1) gatsby-plugin-wrap-pages | Gatsby. https://www.gatsbyjs.com/plugins/gatsby-plugin-wrap-pages/. (2) Gatsby公式チュートリアルやったよ #JavaScript - Qiita. https://qiita.com/irico/items/cf87eb29ecaf7e135fcd. (3) Gatsby.js 入門 - Zenn. https://zenn.dev/dev8/articles/gatsby_tutorial. (5) en.wikipedia.org. https://en.wikipedia.org/wiki/Gatsby_(software).

wrapper.js:

1
2
3
4
5
6
7
8
9


import React from "react";
import Layout from "./layout";
export const wrapPageElement = ({ element }) => {
 return (
 <>
 <Layout>{element}</Layout>
 </>
 );
};

layout.js:

React

Wed, 04 Sep 2024 00:00:00 +0000

React

`ReactDOM.render`

React 18以降では、ReactDOM.renderは非推奨となり、代わりにcreateRootを使用することが推奨されています。以下に新しい方法の例を示します。

まず、react-dom/clientからcreateRootをインポートします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

このコードでは、createRootを使用してルートを作成し、そのルートに対してrenderメソッドを呼び出しています。これにより、React 18の新しいレンダリングAPIを利用することができます¹²。

サイトセキュリティチェック

Mon, 22 Jul 2024 00:00:00 +0000

サイトセキュリティチェック

Mozilla: https://observatory.mozilla.org/
トレンドマイクロ: https://global.sitesafety.trendmicro.com/?cc=jp
Google: https://www.virustotal.com/gui/home/upload

OWASP Zap

Docker 版 OWASP ZAP を M1 Mac で動かす。

問題:

: Cookie No HttpOnly Flag [10010]
: Re-examine Cache-control Directives [10015]
: Cross-Domain JavaScript Source File Inclusion [10017]
: Missing Anti-clickjacking Header [10020]
: X-Content-Type-Options Header Missing [10021]
: [Information Disclosure - Suspicious Comments]https://www.zaproxy.org/docs/alerts/10027/
: [Cookie Poisoning]https://www.zaproxy.org/docs/alerts/10029/
: User Controllable HTML Element Attribute (Potential XSS) [10031]
: Strict-Transport-Security Header Not Set [10035]
: Content Security Policy (CSP) Header Not Set [10038]
: Secure Pages Include Mixed Content [10040]
: Storable and Cacheable Content [10049]
: Cookie without SameSite Attribute [10054]
: Permissions Policy Header Not Set [10063]
: Timestamp Disclosure - Unix [10096]
: Modern Web Application [10109] (対応しなくてもよい)
: Dangerous JS Functions [10110]
: Session Management Response Identified [10112]
: Absence of Anti-CSRF Tokens [10202]
: Sub Resource Integrity Attribute Missing [90003]
: Charset Mismatch [90011]

VIRUSTOTAL

https://www.virustotal.com/gui/home/upload

SUURI

https://sitecheck.sucuri.net/

Flutter

Tue, 14 May 2024 00:00:00 +0000

Android インストール

% flutter build apk

% flutter devices
Found 4 connected devices:
Pixel 7a (mobile) • 38211JEHN05972 • android-arm64 • Android 14 (API 34)
sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator)
macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64
Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.203
Found 1 wirelessly connected device:
iPhone13Pro (mobile) • 00008110-000150C21440401E • ios • iOS 17.4.1 21E236
Run "flutter emulators" to list and start any available device emulators.

% flutter install -d 38211JEHN05972
Installing app-release.apk to Pixel 7a...
Uninstalling old version...
Installing build/app/outputs/flutter-apk/app-release.apk... 6.1s

ios

[Flutter]iOS のビルドで失敗したらまず試すこと 10 選

ijavascript

Wed, 07 Jun 2023 00:00:00 +0000

ijavascript

https://n-riesco.github.io/ijavascript/index.html

Puppeteer

Tue, 23 May 2023 00:00:00 +0000

Puppeteer

Puppeteer とヘッドレス Chrome を使って React の SPA サイトをクロールするためのスクリプトを記述するには、以下のようなコードを記述することができます ¹。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const puppeteer = require("puppeteer");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://example.com");
 // SPA のページ遷移を待つ
 await page.waitForNavigation({ waitUntil: "networkidle0" });
 // スクリーンショットを撮る
 await page.screenshot({ path: "example.png" });
 await browser.close();
})();

上記のコードでは、Puppeteer を使ってブラウザを起動し、指定した URL にアクセスしています。その後、SPA のページ遷移が完了するまで待機し、スクリーンショットを撮影しています。必要に応じて、このコードを改良していただければと思います。

半角カナ文字

Tue, 18 Apr 2023 00:00:00 +0000

半角カナ文字

Pythonで半角カナ文字かどうかを判定するには、正規表現を使う方法があります。⁴⁶

例えば、次のような関数を定義して、文字列が半角カナだけで構成されているかどうかをチェックできます。

1
2
3
4


import re

def is_hankaku_kana(s):
 return re.match(r"^[ｦ-ﾟ]+$", s) is not None

この関数は、文字列sが半角カナの範囲（ｦからﾟ）にマッチするかどうかを判定します。⁶

他の言語（JavaScriptやC#など）でも同様の方法が使えます。¹²

ソース: Bing との会話 2023/4/18

(1) python 正規表現を使った文字列チェック【ひらがな・カタカナ …. https://qiita.com/mocha_xx/items/00c5a968f7069d8e092c アクセス日時 2023/4/18.
(2) Pythonで正規表現を使って数値/英字チェックを実装する (コピペ …. https://www.sukerou.com/2018/12/python.html アクセス日時 2023/4/18.
(3) [JavaScript] 全角カナ、半角カナの判定を行う方法 - YoheiM .NET. https://www.yoheim.net/blog.php?q=20191105 アクセス日時 2023/4/18.
(4) [C#共通関数] 半角カナチェックFunction - C#ちょこっとリファレンス. https://csharp.programmer-reference.com/function-check-han-kana/ アクセス日時 2023/4/18.
(5) 文字がひらがなか、カタカナか、漢字か、英数字か調べる - .NET …. https://dobon.net/vb/dotnet/string/ishiragana.html アクセス日時 2023/4/18.
(6) python - 半角数字・文字のチェック方法 - スタック・オーバーフロー. https://ja.stackoverflow.com/questions/90953/%E5%8D%8A%E8%A7%92%E6%95%B0%E5%AD%97-%E6%96%87%E5%AD%97%E3%81%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E6%96%B9%E6%B3%95 アクセス日時 2023/4/18.

半角カナ文字を判定するPYPIパッケージはありますか？

半角カナ文字を判定する専用のPYPIパッケージは見つかりませんでしたが、標準ライブラリのunicodedataモジュールを使うことができます。¹

サバクラ両方で動く JavaScript の大規模開発を行うために

Sun, 25 Dec 2011 00:00:00 +0000

サバクラ両方で動く JavaScript の大規模開発を行うために

原文：Scaling Isomorphic Javascript Code (This is just for study, please contact me at tily05 atmark gmail.com if any problem.)

考えてみれば Model-View-Controller とか MVC ってよく聞くよね。実際どんなものか知ってる？抽象的に言うなら「オブジェクト情報の保持されるグラフィック・システム (つまり、ラスターではないグラフィック。ゲームとか) 上に構築された、表示系を中心としたアプリケーションにおいて、主要な機能どうしの関わりをうまく分離すること」とでも言おうか。もう少し深く考えを押し進めてみれば、これは当然、他のさまざまなアプリケーションにもあてはまる言葉 (bucket term ?) だ。

過去に多くの開発コミュニティが MVC による解決案を提供し、それによってよくあるユースケースにうまく対処し、地位を築くことができた。例をあげるなら、Ruby や Python コミュニティは Rails や Django を作り、MVC アーキテクチャを実現した。

こうした手法は Java, Ruby, Python といった他の言語では容易に受け入れらてきたが、Node.js について十分ではない。理由は単純で、それはただ、JavaScript が今や isomorphic な言語であるからだ。isomorphic というのは「ソースコードのどの行 (もちろん注目すべき例外もあるが) をとってみても、クライアント・サーバーの両方で実行できる」ということを意味している。表面的には無害に見えるが、この特徴のせいで現状の MVC ベースのパターンでは解決できない課題がたくさんある。

この記事では、まず現存するパターンをいくつか取り上げ、いかにそのようなパターンに関する実装や心配事が言語や環境に関わらず普遍的なものとなり得たか、そのようなパターンがどうして真に “isomorphic” な Javascript のソースコードにはあまり適していないのかを述べる。そして結論として、新しいパターン “Resource-View-Presenter” について述べる。

デザインパターンは、アプリケーションの開発にとってなくてはならないオマンマのような存在である。アプリケーションやその環境についてのさまざまの心配事をカプセル化し、うまくまとめてくれる。ブラウザとサーバの間でこんなにもさまざまの心配事があるからね：

View を作るとして、(たとえばサーバ側で) 一時的にしか存在しないのか、(たとえばブラウザ側で) 永続するべきものなのか？
View を作るとして、複数のユースケースやシナリオの間で再利用可能なものか？
View を作るとして、アプリケーション特有のタグやマークアップが使われているか？
ビジネスロジックをどこに記述すべきか？ (Model なのか Controller なのか)
アプリケーションの持つ状態はどのように保持されアクセスされるのか？

現存するパターンを取り上げ、上記の問題がどのように解決されているのか見てみよう：

Javascript on hdknr blog

Vercelを使えばインフラエンジニア不要？ Framework-defined Infrastructureが変えるWebアプリ開発

Vercelが実現する「インフラレス」開発

Framework-defined Infrastructure（FdI）

Self-driving Infrastructure

6人のエンジニアで年間360億トークンを処理

インフラエンジニアは本当に不要になるのか？

Vercelの基盤は何で動いているのか

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ

Theatre.js とは何か

基本情報

2つのパッケージ構成

4つの基本概念

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由

リクルートの React 研修資料とは

研修の位置づけ

資料の構成

1. Web アプリ開発の変遷

javascript: ページのURLを取得

Javascript ページ内のアンカーの取得

ブラウザの「検証」でコンソールからプログラムを実行

Gatsby レイアウト

Gastby レイアウト

wrapper.js

React

React

ReactDOM.render

サイトセキュリティチェック

サイトセキュリティチェック

OWASP Zap

VIRUSTOTAL

SUURI

Flutter

Android インストール

ios

ijavascript

ijavascript

Puppeteer

Puppeteer

半角カナ文字

半角カナ文字

半角カナ文字を判定するPYPIパッケージはありますか？

サバクラ両方で動く JavaScript の大規模開発を行うために

サバクラ両方で動く JavaScript の大規模開発を行うために

目次

`wrapper.js`

`ReactDOM.render`