Astroで始める爆速個人サイト開発

Transcript

1. Astroで始める
   
   爆速個人サイト開発
   Takanori Oki / takanorip
   2023/1/21 - BuriKaigi 2023
   Astroで始める
   
   爆速個人サイト開発
   Takanori Oki / takanorip
   2023/1/21 - BuriKaigi 2023
   

   View Slide

2. 自己紹介 takanorip / 大木 尊紀（Takanori Oki）
   デザインエンジニア@Ubie
   デザインしたりコード書いたりしてます。
   
   趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。
   デザインシステムとかデザインエンジニアとかの同人誌書いています。
   
   https://inutetraplus.booth.pm/
   

   View Slide

3. Ubie株式会社
   Ubie株式会社
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. 個人サイトのススメ
   
   Astroって何？
   
   個人的Astro推しポイント
   
   おすすめ技術構成
   
   デザインTips（伝えたいことを考えろの巻）
   
   まとめ
   目次
   

   View Slide

8. 個人サイトのススメ
   個人サイトのススメ
   

   View Slide

9. 個人サイトのススメ
   個人サイトは自己表現の場
   プラットフォームに依存しない

   自由に自分を表現できる場所
   

   View Slide

10. 個人サイトのススメ
    C 名刺代わりにな8
    C デザインの練習にな8
    C コンテンツは自分自身T
    C Webの仕組みを知る良い機E
    C 普段できないことをやってみる場所
    

    View Slide

11. SSGって何？
    SSGって何？
    

    View Slide

12. Static Site Generator
    Static Site Generator
    データから静的サイトを

    生成するツール
    

    View Slide

13. Static Site Generator
    data
    page1
    page2
    page3
    

    View Slide

14. 主なJS製のSSGフレームワーク
    メタフレームワーク
    Astro
    Reactベース
    Gatsby
    Next.js
    Pure JS
    Eleventy
    Hexo
    Sveltベース
    Svelt Kit
    

    View Slide

15. Astroって何？
    Astroって何？
    

    View Slide

16. Astro = Static Site Generator
    “Build faster websites.”
    
    爆速静的サイトを作ってくれるやつ
    良い感じにやってくれるStatic Site Generator
    

    View Slide

17. 何が爆速なの？
    3) セットアップが爆%
    ) viteでビルドが爆%
    ) ページの表示が爆速
    

    View Slide

18. 爆速セットアップ
    npm create astro@latest -- --template jmblog/astro-starter-kit
    ESLint、Prettier、Markuplint、Stylelint、@astrojs/sitemap、astro-
    compress、 astro-seo、astro-purgecssが全部入りのスターターキット
    

    View Slide

19. 爆速セットアップ
    A public6
    A src6
    A components6
    A Header.astr%
    A Button.js
    A layouts6
    A PostLayout.astr%
    A pages6
    A posts6
    A post1.m&
    A index.astr%
    A styles6
    A global.cs0
    A astro.config.mj0
    A package.jso
    A tsconfig.json
    

    View Slide

20. src/pages/index.astro
    ---
    
    =
    =
    ---
    
    =>
    import
    const await
    const
    { } ;
    
    ​
    
    { } . ( );
    
    . ( . );
    
    Using your CMS
    With top-level await, Astro makes it easy
    
    to fetch content from your CMS.
    
    { . (( ) (
    
    ={ . } { . }
    ))}
    
    storyblokApi
    get
    values links
    map
    href slug name
    from
    storyblokApi
    Object data
    links link
    link link
    "../cms"
    'cdn/links'
    data
    links
    < > >
    
    < >
    
    >
    
    < >
    
    < >< > > >
    
    >
    h1 h1
    p
    p
    ul
    li a a li
    ul
    

    View Slide

21. Astroの特徴
    「完全に静的なサイト」を作れる
    コンポーネントごとにJSを生成・ロードできる
    様々なフレームワークと一緒に使うことができる
    

    View Slide

22. JSを全く生成しない「完全に静的なサイト」を作れる
    v ReactやVueなどに対応したJS製のSSG（Gatsbyなど）は、JSを生成し
    てしまうので、表示は早いが操作できるまでが遅いという問題点があっe
    v Astroは完全にJSを排除したHTMLを生成できるので、

    ページの読み込みが格段に早くなる
    

    View Slide

23. コンポーネントごとにJSを生成・ロードできる
    … クライアントサイドでJSを利用したいとき、propsに と

    指定するとコンポーネントごとにJSを生成しロードすc
    … JSを並列でロードしてくれるのでパフォーマンスが良W
    … コンポーネントのLazy Loadingにも対応
    client:load
    

    View Slide

24. src/pages/index.astro
    ---
    
    ---
    
    import ;
    
    MyReactComponent from '../components/MyReactComponent.jsx'
    < />
    MyReactComponent client:load
    

    View Slide

25. Islands Architecture
    

    View Slide

26. 様々なフレームワークと一緒に使うことができる
    l ファイルでは様々なフレームワークで作られたコンポーネントを

    読み込み使用できY
    l https://docs.astro.build/en/guides/integrations-guideb
    l TypeScriptを標準で利用できる環境になっているのでtsxなども問題なく
    利用できY
    l EleventyなどのPure JSなSSGフレームワークはTypeScriptやtsx
    の導入ハードルが少し高いデメリットがある
    .astro
    

    View Slide

27. 様々なフレームワークと一緒に使うことができる
    ---
    
    ---
    
    import
    import
    import
    ;
    
    ;
    
    ;
    
    MyReactComponent from
    MyVueComponent from
    MySveltComponent from
    '../components/MyReactComponent.jsx'
    '../components/MyVueComponent.jsx'
    '../components/MySveltComponent.jsx'
    < />
    
    < />
    
    < />
    MyReactComponent
    MyVueComponent
    MySveltComponent
    

    View Slide

28. Astroの推しポイント
    Astroの推しポイント
    

    View Slide

29. 推しポイント
    6 tsxが簡単に扱え
    6 Pure HTMLを作れ
    6 Integrationが豊富
    

    View Slide

30. 個人サイトにおすすめの
    
    技術構成
    個人サイトにおすすめの
    
    技術構成
    

    View Slide

31. おすすめの技術構成
    インフラ
    Cloudflare Pages CMS
    Contentful
    SSG
    Astro テンプレート
    Preact（tsx） スタイリング
    CSS Modules
    

    View Slide

32. Cloudflare Pages
    ‚ Cloudflareがやっている静的ホスティングサービ8
    ‚ https://www.cloudflare.com/ja-jp/products/pages„
    ‚ UIが見やすg
    ‚ キャッシュの設定がしやすg
    ‚ Google Analyticsを導入しなくてもPV数などの計測をしてくれる
    

    View Slide

33. View Slide

34. Contentful
    t Headless CMSの1$
    t https://www.contentful.comU
    t 機能が充実しており、データ設計が柔軟にでき#
    t 無料枠が大きい（Records: 25k、API calls: 2,000,000/mo
    t 公式にもサポートドキュメントがあ#
    t https://docs.astro.build/en/guides/cms/contentful/
    

    View Slide

35. Preact
    Y Reactとほぼ同じ機能を持ちつつ軽量なライブラ@
    Y https://preactjs.comU
    Y Reactと互換性があるのでReact製のUIライブラリを利用でき1
    Y 軽量なのでJSを動作させたいときの罪悪感が少ない
    

    View Slide

36. CSS Modules
    s ScopedなCSSを生成するための技P
    s CSSは温かみのある手書きに限q
    s Tailwind CSSを使ってもまあ良い気がすq
    s https://docs.astro.build/ja/guides/integrations-guide/
    tailwind
    s 筆者はアンチなので使わないが
    

    View Slide

37. Webサイトを作るときの
    
    デザインTips
    Webサイトを作るときの
    
    デザインTips
    

    View Slide

38. ウェブサイトで伝えたいことを明確にする
    マークアップをちゃんとする
    余計な装飾を入れない
    デザインで気をつけること
    

    View Slide

39. ウェブサイトで伝えたいことを明確にする
    ƒ 自分のWebサイトを訪問してくれた人にどんな情報を得てほしいa
    ƒ 情報設計が大G
    ƒ Webサイトを見たあとにどんなアクションを期待するかY
    ƒ 副業の依頼をしてくれ2
    ƒ レジュメを見て転職のスカウトをしてくれ2
    ƒ SNSをフォローしてくれる
    

    View Slide

40. マークアップをちゃんとする
    ˆ Webサイトはマークアップをちゃんとすれば大体良い感じになC
    ˆ アクセシビリティも大体良い感じになC
    ˆ HTMLを学ぼ3
    ˆ 「武器になるHTML」がおすす'
    ˆ https://gihyo.jp/book/2022/978-4-297-13132-6
    

    View Slide

41. 余計な装飾を入れない
    w カルーセルとかパララックスとか余計な装飾を入れなY
    w デザイナーのポートフォリオとかを参考にすると入れが…
    w スクロールジャックは絶対にするな！！$
    w 情報設計とコンテンツ設計、レイアウトに注力すi
    w 装飾は最低限（見出しの装飾、グルーピングのための枠線、など7
    w 興味がある人は「レイアウト・デザインの教科書」を読むと良いかy
    w https://www.sbcr.jp/product/4797397314/
    

    View Slide

42. 余計な装飾を入れない
    スクロールジャックは
    
    絶対にするな！！！
    

    View Slide

43. まとめ
    まとめ
    

    View Slide

44. まとめ
    Astro最高！！！
    

    View Slide

45. We're hiring!
    We're hiring!
    

    View Slide

46. View Slide

47. Ubie株式会社ではエンジニアを大募集中です！
    現在募集中の職種
    G プロダクト開発エンジニA
    G ソフトウェアエンジニア(デリバリー&サクセス6
    G QA エンジニA
    G SRE（Site Reliability Engineer）
    https://recruit.ubie.life/engineer
    

    View Slide

48. Ubie株式会社ではエンジニアを大募集中です！
    各職種の詳しい募集要項は採用サイトをご覧ください！
    カジュアル面談だけでも大歓迎なので、
    
    気軽にご連絡ください！
    https://recruit.ubie.life/engineer
    

    View Slide

49. ご清聴ありがとうございました！
    

    View Slide