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
830
次世代フロントエンドツールVite入門会
https://connpass.com/event/227990/
meijin
October 30, 2021
Tweet
Share
More Decks by meijin
See All by meijin
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.1k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
210
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
960
個人開発がおすすめな理由
texmeijin
3
880
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
330
初めてESLintプラグインにコントリビュートした話
texmeijin
0
100
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
21
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.1k
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
1.4k
Other Decks in Programming
See All in Programming
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
Some more adventure of Happy Eyeballs
coe401_
2
150
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
330
iOSDC 2024
auramagi
3
590
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
全力の跳躍を捉える計測アプリを作る
ogijun2018
0
1k
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
3
580
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
250
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
Designing for humans not robots
tammielis
248
25k
Clear Off the Table
cherdarchuk
90
320k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Six Lessons from altMBA
skipperchong
26
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
How to train your dragon (web standard)
notwaldorf
85
5.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Building Adaptive Systems
keathley
36
2.1k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
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 、プラグイン探しなどなど