Skip to content

Latest commit

 

History

History
474 lines (350 loc) · 14.8 KB

slides.md

File metadata and controls

474 lines (350 loc) · 14.8 KB
Raw
theme colorSchema fonts layout image
light-icons
light
sans serif
Lato, Noto Sans JP
Lato, Noto Sans JP
image-right
<style> body { font-size: 20px; } h1 { line-height: 1.4 !important; font-weight: bold !important; } body ul { padding-left: 24px; } ul ul { font-size: .9rem; } li { list-style-type: initial; } li + li { margin-top: .8rem; } </style>

次世代フロントエンドツールVite入門会

2021/10/30(Sat) 10:00〜 / 主催: @Meijin_garden

https://connpass.com/event/227990/

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-cover.svg

イベント概要

  • 環境構築 - Viteの公式ガイドに則って、環境構築から一通りの機能を使うところまで進めます
  • プラスアルファ - 終わったらStorybookを入れたり、プラグインを入れたり、Vercelにホスティングしたり各自興味のある活動をします

※なんとなくイベント立ち上げたらめっちゃ登録数があっておののいています

※なので、チャットや会話で盛り上げていただけると助かりますｗ

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-cover.svg

予定

  • 自己紹介
    • 主催
    • 話す枠の方々
  • 画面共有して環境構築開始
    • HMR, pre-bundle, plugin, CSS Modules, env variables and mode...など
    • あくまで入門会なので、公式ドキュメントを順になぞります
  • 感想など雑談
    • この場で皆に質問したいことがあればチャット等で募集とか
  • 時間に余裕があればプラスアルファなにかやる
  • 解散

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-cover.svg

自己紹介

  • 「名人」というニックネームで活動
  • Twitter: @Meijin_garden
  • Webエンジニア6年目
  • 好きな分野はWebフロントエンド
  • 好きなエディタのテーマはPanda
  • 趣味は将棋（初段くらい）
  • 株式会社NoSchool CTO

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-cover.svg

話す枠の方々の自己紹介

  • お名前
  • 好きな技術
  • Viteとの関わり

layout: image-header-intro

Viteに入門しよう！

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

create vite app


React & TypeScriptで書きたい場合

yarn create vite react-application --template react-ts

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

use templates (optional)

  • degitを使えばtemplateから簡単に開始できます。
npx degit TeXmeijin/vite-react-ts-tailwind-firebase-starter vite-hoge
  • 以下は自作のテンプレです

スクリーンショット 2021-10-28 17 42 51

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

yarn dev

yarn
yarn dev

スクリーンショット 2021-10-28 17 55 24

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

〜ファイル更新時の反映の速さを体感する時間〜

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

vite devは型チェックしません

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

index.html

  • SPAなのでHTMLはindex.htmlのみ
  • 基本的にはドキュメントルートにindex.htmlがあります
  • <html>のlang="ja"とかはここで変える

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

pre-bundle

Pre-bundling dependencies:
  react
  react-dom
  react/jsx-dev-runtime
(this will be run only when your dependencies or config have changed)

スクリーンショット 2021-10-28 18 22 10

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

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...

スクリーンショット 2021-10-28 18 29 24

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

pre-bundle (3)

  • TSXコンポーネントを作ったり、Hookを切ってimportすると、それらも別個のファイルでリクエストされる
  • 手元の実運用中のViteアプリケーションでは1画面で300以上のリクエストが飛んでる
    • 手元のNuxtアプリケーションでは170程度なので多いほうと思われる
    • 依存しているファイル数だけリクエストが増えるので当然といえば当然

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

plugin

  • vite本体はシンプルな機能で、プラグインを足していく

Reactの場合のデフォルトは:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

plugin (2)

たとえばSentryの場合

import viteSentry from 'vite-plugin-sentry';

export default defineConfig(({ mode }) => {
  return {
    plugins: [react(), viteSentry(getSentryConfig(mode))],
  • mode(後述)を受け取れる関数として定義するとmodeごとに違うSentry設定を反映できる

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

plugin (3)

  • 本番ビルドのVisualize方法気になりますよね？
  • 設定は以下の記事がおすすめ（手前味噌

https://zenn.dev/meijin/articles/vite-bundle-analyzer

スクリーンショット 2021-10-28 18 48 47

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

CSS Modules

yarn add -D sass

たとえば↓

import { ReactNode } from 'react';
import styles from './ErrorText.module.scss';

export const ErrorText = ({ children }: { children: ReactNode }) => <span className={styles.text}>{children}</span>;

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

env variables

VITE_FIREBASE_APIKEY=hogehogehogehogehogehoge
  • VITE_から始まる変数だけクライアント側に放出される
  • 環境変数へのアクセスはデフォでは型安全でないが、env.d.tsといったファイルを定義してstringにしておくとよい

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

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 {

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

まとめ

  • だいたいこれで実装するときに必要な知識は網羅できた...？
  • 個人的に良いなと思っているところ

layout: image-header-intro

自由時間に入る前に...

告知

layout: center-image

<style> body h1 { font-size: 2.5rem; margin-bottom: 16px; } body .text-center { text-align: left; } body .col-span-12 { margin: auto 48px; } </style>

マナリンクではエンジニアを採用中です！

オンライン家庭教師マナリンク(https://manalink.jp)は以下の課題を解決しています。

先生を直接指名できない

多くの家庭教師サービスは、先生ではなく「運営会社に資料請求」するので体験指導と本指導の先生が違うこともあるなど、先生にこだわりたいご家庭にとって不満が残ります。
マナリンクではすべての先生のプロフィールを作成し、YouTube上に自己紹介動画も公開しています。もちろん直接指名できます。

保護者から指導が見えない

教育サービスの大きな課題は価値を受ける人（生徒）と対価を支払う人（親）が別人なことです。
マナリンクでは専用のReact Native製アプリで先生-生徒間の指導を実施していただき、保護者さんに閲覧権限を与えることで指導内容を可視化、解約を防ぎます。

職業自体の認知度が低い

オンライン家庭教師自体はここ数年でZoom等の普及によって生まれた新しい職業です。
そのため、オンライン家庭教師という仕事を普及しより多くの方のキャリアの選択肢に入れてもらうため、マナリンクTeachersというメディアを公開・運営しています。
Next.js × microCMS製です。

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

カジュアル面談を随時受付中

詳しく訊きたいと思っていただいた方はMeetyでぜひご連絡を！

https://meety.net/matches?q=%23%E3%83%9E%E3%83%8A%E3%83%AA%E3%83%B3%E3%82%AF



テックブログも公開中

採用技術はTypeScript(React, React Native, Vue, AWS CDK, Vite, Firebase), PHP(Laravel), AWSなどです。

https://zenn.dev/manalink

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

個人的な告知

  • Twitterフォローしてね
    • @Meijin_garden
  • ZennでViteの記事なども書いているので、本日の内容が勉強になったという方がいらっしゃったらサポートください💰

layout: image-right image: https://raw.githubusercontent.com/lightvue/slidev-theme-light-icons/master/static/light-icons-illustration.svg

自由時間

・感想など雑談



・プラスアルファ

デプロイ、Storybook、プラグイン探しなどなど