Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
次世代フロントエンドツールVite入門会
Search
meijin
October 30, 2021
Programming
0
850
次世代フロントエンドツールVite入門会
https://connpass.com/event/227990/
meijin
October 30, 2021
Tweet
Share
More Decks by meijin
See All by meijin
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
0
1.2k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.4k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
260
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1k
個人開発がおすすめな理由
texmeijin
3
900
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
340
初めてESLintプラグインにコントリビュートした話
texmeijin
0
110
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
30
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.2k
Other Decks in Programming
See All in Programming
テスト駆動開発✅️
akitoshiga
1
200
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
570
EventSourcingの理想と現実
wenas
5
1.9k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
400
Identifying User Idenity
moro
4
5.1k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.6k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
510
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
13
3.6k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
210
役立つログに取り組もう
irof
18
5.3k
Tuning GraphQL on Rails
pyama86
2
670
Honoの来た道とこれから
yusukebe
18
2.9k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Statistics for Hackers
jakevdp
796
220k
Agile that works and the tools we love
rasmusluckow
327
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Visualization
eitanlees
143
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Happy Clients
brianwarren
97
6.7k
The Cult of Friendly URLs
andyhume
78
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Transcript
次世代フロントエンドツール Vite 入門会 https://connpass.com/event/227990/ 2021/10/30(Sat) 10:00 〜 / 主催: @Meijin_garden
イベント概要 環境構築 - Vite の公式ガイドに則って、環境構築から一通りの 機能を使うところまで進めます プラスアルファ - 終わったらStorybook を入れたり、プラグイ
ンを入れたり、Vercel にホスティングしたり各自興味のある 活動をします ※ なんとなくイベント立ち上げたらめっちゃ登録数があっておののい ています ※ なので、チャットや会話で盛り上げていただけると助かりますw
予定 自己紹介 主催 話す枠の方々 画面共有して環境構築開始 HMR, pre-bundle, plugin, CSS Modules,
env variables and mode… など あくまで入門会なので、公式ドキュメントを順になぞります 感想など雑談 この場で皆に質問したいことがあればチャット等で募集とか 時間に余裕があればプラスアルファなにかやる 解散
自己紹介 「名人」というニックネームで活動 Twitter: @Meijin_garden Web エンジニア6 年目 好きな分野はWeb フロントエンド 好きなエディタのテーマはPanda
趣味は将棋(初段くらい) 株式会社NoSchool CTO オンライン家庭教師マナリンク -> https://manalink.jp
話す枠の方々の自己紹介 お名前 好きな技術 Vite との関わり
Vite に入門 しよう!
create vite app https://vitejs.dev/guide/#scaffolding-your-first-vite- project React & TypeScript で書きたい場合 yarn
create vite react-application --template react-ts
use templates (optional) degit を使えばtemplate から簡単に開始できます。 npx degit TeXmeijin/vite-react-ts-tailwind-firebase-starter vite-hoge
以下は自作のテンプレです
yarn dev yarn yarn dev
〜ファイル更新時の反映の速さを 体感する時間〜
vite dev は型チェックしません https://vitejs.dev/guide/features.html#typescript Vite only performs transpilation on .ts
files and does NOT perform type checking. tsc はCI やIDE が別途実行してくれるよねっていう考え npx esbuild src/App.tsx 爆速でJavaScript への変換が終わる むしろ型情報(+JSX) を落とすことだけをesbuild がやっている https://github.com/evanw/esbuild/blob/master/internal/js_lexer/js_lexer.go ` `
index.html SPA なのでHTML はindex.html のみ 基本的にはドキュメントルートにindex.html があります <html> のlang="ja" とかはここで変える
` `
pre-bundle https://vitejs.dev/guide/features.html#npm- dependency-resolving-and-pre-bundling esbuild が依存をバンドルして node_modules/.vite 以下に 配置してくれる Pre-bundling dependencies:
react react-dom react/jsx-dev-runtime (this will be run only when your dependencies or config have changed) ` `
pre-bundle (2) 起動中にライブラリを追加し、新しいimport を追加すると再 度Prebundle が走るっぽい yarn add @chakra-ui/react @emotion/react
@emotion/styled framer-motion import { Button, ButtonGroup } from "@chakra-ui/react" // 本当はProvider とか要るけど雑に追加 <Button> hoge </Button> 18:26:01 [vite] ✨ dependencies updated, reloading page...
pre-bundle (3) TSX コンポーネントを作ったり、Hook を切ってimport する と、それらも別個のファイルでリクエストされる 手元の実運用中のVite アプリケーションでは1 画面で300
以上の リクエストが飛んでる 手元のNuxt アプリケーションでは170 程度なので多いほうと思われる 依存しているファイル数だけリクエストが増えるので当然といえば当 然
plugin vite 本体はシンプルな機能で、プラグインを足していく React の場合のデフォルトは: import { defineConfig } from
'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()] })
plugin (2) import viteSentry from 'vite-plugin-sentry'; export default defineConfig(({ mode
}) => { return { plugins: [react(), viteSentry(getSentryConfig(mode))], mode( 後述) を受け取れる関数として定義するとmode ごとに 違うSentry 設定を反映できる たとえばSentry の場合
plugin (3) 本番ビルドのVisualize 方法気になりますよね? 設定は以下の記事がおすすめ(手前味噌 https://zenn.dev/meijin/articles/vite-bundle-analyzer
CSS Modules デフォルトでCSS Modules に対応してます( すごい) https://vitejs.dev/guide/features.html#css-modules .scss ももちろん対応できます yarn
add -D sass たとえば↓ import { ReactNode } from 'react'; import styles from './ErrorText.module.scss'; export const ErrorText = ({ children }: { children: ReactNode }) => <span ` `
env variables みんな気になる環境変数 https://vitejs.dev/guide/env-and-mode.html VITE_FIREBASE_APIKEY=hogehogehogehogehogehoge VITE_ から始まる変数だけクライアント側に放出される 環境変数へのアクセスはデフォでは型安全でないが、 env.d.ts といったファイルを定義してstring
にしておくと よい ` ` ` `
modes vite build でProduction Build ができるけど、検証環境と 本番環境で環境変数などを切り分けたいケースはある vite build --mode
staging といった mode 引数が指定で きる。便利。CI もこれで組める .env.[mode] のファイル名の環境変数を読み込んでくれる vite.config.ts で指定するconfig を関数にできるのでその 引数にmode が含まれる // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { return { ` ` ` ` ` ` ` ` ` `
まとめ だいたいこれで実装するときに必要な知識は網羅できた… ? 個人的に良いなと思っているところ とにかくHMR の反映が速い シンプルかつ拡張可能な仕組み 本番ビルドはrollup なので安定してる https://vitejs.dev/guide/why.html#why-bundle-for-
production
自由時間に入る前に… 告知
マナリンクではエンジニアを採用中です! オンライン家庭教師マナリンク(https://manalink.jp) は以下の課題を解決しています。 先生を直接指名できない 多くの家庭教師サービスは、先生ではなく「運 営会社に資料請求」するので体験指導と本指導 の先生が違うこともあるなど、先生にこだわり たいご家庭にとって不満が残ります。 マナリンクではすべての先生のプロフィールを 作成し、
YouTube 上に自己紹介動画も公開し ています。もちろん直接指名できます。 保護者から指導が見えない 教育サービスの大きな課題は価値を受ける人 (生徒)と対価を支払う人(親)が別人なこと です。 マナリンクでは専用のReact Native 製アプリ で先生- 生徒間の指導を実施していただき、保 護者さんに閲覧権限を与えることで指導内容を 可視化、解約を防ぎます。 職業自体の認知度が低い オンライン家庭教師自体はここ数年でZoom 等 の普及によって生まれた新しい職業です。 そのため、オンライン家庭教師という仕事を普 及しより多くの方のキャリアの選択肢に入れて もらうため、マナリンクTeachers というメデ ィアを公開・運営しています。 Next.js × microCMS 製です。
カジュアル面談を随時受付中 https://meety.net/matches?q=%23 マナリンク テックブログも公開中 https://zenn.dev/manalink 詳しく訊きたいと思っていただいた方はMeety でぜひご連絡を! 採用技術はTypeScript(React, React Native,
Vue, AWS CDK, Vite, Firebase), PHP(Laravel), AWS などです。
個人的な告知 Twitter フォローしてね @Meijin_garden Zenn でVite の記事なども書いているので、本日の内容が勉強 になったという方がいらっしゃったらサポートください💰 https://zenn.dev/meijin
自由時間 ・感想など雑談 ・プラスアルファ デプロイ、Storybook 、プラグイン探しなどなど