| CARVIEW |
Select Language
HTTP/2 200
cache-control: max-age=3600
content-encoding: gzip
content-type: text/html; charset=utf-8
etag: "428482cb087815bff35c511ca3d483b5427d783734f0719da08284f5ca5ae306"
last-modified: Fri, 03 Oct 2025 06:28:45 GMT
strict-transport-security: max-age=31556926
accept-ranges: bytes
date: Sun, 12 Oct 2025 03:52:03 GMT
x-served-by: cache-bom-vanm7210026-BOM
x-cache: MISS
x-cache-hits: 0
x-timer: S1760241123.172483,VS0,VE350
vary: x-fh-requested-host, accept-encoding
alt-svc: h3=":443";ma=86400,h3-29=":443";ma=86400,h3-27=":443";ma=86400
content-length: 51604
Qwikスターターの紹介 – 今すぐQwikを起動・実行してみよう | POSTD
ニジボックスが運営する
エンジニアに向けた
キュレーションメディア
ニジボックスが運営する
エンジニアに向けた
キュレーションメディア
2023年3月3日
Qwikスターターの紹介 – 今すぐQwikを起動・実行してみよう
本記事は、原著者の許諾のもとに翻訳・掲載しております。
コードを書いて新たな発見をするほど楽しいことはありません。
ついにnpm init qwikの登場です。
どんなサイズでもリーンで高パフォーマンスなWebアプリを開発するための新たな方法をお試しください。
builder.ioのサイトも同じ技術で開発されており、PageSpeed Insightsで100点中100点を獲得しています。
QwikスターターCLIは、Qwikを試しに直接体験してみて、他のフレームワークとの違いを深く理解するためのシンプルなスターターです。
このCLIに含まれている例は次の4つで、近い将来に拡張される予定です。
starter：基本的なHello Worldプログラム。starter-builder：基本的なHello Worldプログラムをbuilder.ioのQwik APIと統合したもの。starter-partytown：基本的なHello Worldプログラム。Partytownを利用して、Web Workerで重いタスクを実行できることを明らかにします。todo：古典的なTodoMVCアプリケーション。
## 基本的なスターター
> npm init qwik
💫 Let's create a Qwik project 💫
✔ Project name … qwik-starter
✔ Select a starter › Starter
✔ Select a server › Express
⭐️ Success! Project saved in qwik-starter directory
📟 Next steps:
cd qwik-starter
npm install
npm start
> (cd qwik-starter; npm install; npm start)
StackBlitzで試す
Builder Qwik APIを利用するスターター
> npm init qwik
💫 Let's create a Qwik project 💫
✔ Project name … qwik-builder
✔ Select a starter › Starter Builder
✔ Select a server › Express
⭐️ Success! Project saved in qwik-builder directory
📟 Next steps:
cd qwik-builder
npm install
npm start
> (cd qwik-builder; npm install; npm start)
StackBlitzで試す
Partytownを利用するスターター
> npm init qwik
💫 Let's create a Qwik project 💫
✔ Project name … qwik-partytown
✔ Select a starter › Starter Partytown
✔ Select a server › Express
⭐️ Success! Project saved in qwik-partytown directory
📟 Next steps:
cd qwik-partytown
npm install
npm start
> (cd qwik-partytown; npm install; npm start) 
古典的なTodoMVC
> npm init qwik
💫 Let's create a Qwik project 💫
✔ Project name … qwik-todo
✔ Select a starter › Todo
✔ Select a server › Express
⭐️ Success! Project saved in qwik-todo directory
📟 Next steps:
cd qwik-todo
npm install
npm start
> (cd qwik-todo; npm install; npm start)
StackBlitzで試す
プロファイラで解析
開発ツールを開き、上記の例をすべてプロファイラで解析してみてください。 メインスレッドでほとんど時間がかかっていないのが分かるでしょう。
皆さんのコーディングが楽しくなることを願っています。ぜひフィードバックをお寄せください。
- github.com/builderio/qwikでスターを送る
- @QwikDev と@builderioをフォロー
- Discordでチャット
- builder.ioの採用情報
シリーズ記事一覧
info
シリーズ記事一覧はこちらから参照できます。
監修者
古川陽介
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
複合機メーカー、ゲーム会社を経て、2016年に株式会社リクルートテクノロジーズ(現リクルート)入社。
現在はAPソリューショングループのマネジャーとしてアプリ基盤の改善や運用、各種開発支援ツールの開発、またテックリードとしてエンジニアチームの支援や育成までを担う。
2019年より株式会社ニジボックスを兼務し、室長としてエンジニア育成基盤の設計、技術指南も遂行。
Node.js 日本ユーザーグループの代表を務め、Node学園祭などを主宰。
- X: @yosuke_furukawa
- Github: yosuke-furukawa
