Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

takanorip
January 21, 2023

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

takanorip

January 21, 2023
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

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

    Astroで始める 爆速個人サイト開発 Takanori Oki / takanorip 2023/1/21 - BuriKaigi 2023
  2. 自己紹介 takanorip / 大木 尊紀(Takanori Oki) デザインエンジニア@Ubie デザインしたりコード書いたりしてます。 趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。 デザインシステムとかデザインエンジニアとかの同人誌書いています。

    https://inutetraplus.booth.pm/
  3. Ubie株式会社 Ubie株式会社

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

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

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

  10. 個人サイトのススメ C 名刺代わりにな8 C デザインの練習にな8 C コンテンツは自分自身T C Webの仕組みを知る良い機E C

    普段できないことをやってみる場所
  11. SSGって何? SSGって何?

  12. Static Site Generator Static Site Generator データから静的サイトを
 生成するツール

  13. Static Site Generator data page1 page2 page3

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

    Sveltベース Svelt Kit
  15. Astroって何? Astroって何?

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

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

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

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

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

  23. コンポーネントごとにJSを生成・ロードできる … クライアントサイドでJSを利用したいとき、propsに と
 指定するとコンポーネントごとにJSを生成しロードすc … JSを並列でロードしてくれるのでパフォーマンスが良W … コンポーネントのLazy Loadingにも対応

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

    MyReactComponent client:load
  25. Islands Architecture

  26. 様々なフレームワークと一緒に使うことができる l ファイルでは様々なフレームワークで作られたコンポーネントを
 読み込み使用できY l https://docs.astro.build/en/guides/integrations-guideb l TypeScriptを標準で利用できる環境になっているのでtsxなども問題なく 利用できY l

    EleventyなどのPure JSなSSGフレームワークはTypeScriptやtsx の導入ハードルが少し高いデメリットがある .astro
  27. 様々なフレームワークと一緒に使うことができる --- --- import import import ; ; ; MyReactComponent

    from MyVueComponent from MySveltComponent from '../components/MyReactComponent.jsx' '../components/MyVueComponent.jsx' '../components/MySveltComponent.jsx' < /> < /> < /> MyReactComponent MyVueComponent MySveltComponent
  28. Astroの推しポイント Astroの推しポイント

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

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

  31. おすすめの技術構成 インフラ Cloudflare Pages CMS Contentful SSG Astro テンプレート Preact(tsx)

    スタイリング CSS Modules
  32. Cloudflare Pages ‚ Cloudflareがやっている静的ホスティングサービ8 ‚ https://www.cloudflare.com/ja-jp/products/pages„ ‚ UIが見やすg ‚ キャッシュの設定がしやすg

    ‚ Google Analyticsを導入しなくてもPV数などの計測をしてくれる
  33. None
  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/
  35. Preact Y Reactとほぼ同じ機能を持ちつつ軽量なライブラ@ Y https://preactjs.comU Y Reactと互換性があるのでReact製のUIライブラリを利用でき1 Y 軽量なのでJSを動作させたいときの罪悪感が少ない

  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 筆者はアンチなので使わないが
  37. Webサイトを作るときの デザインTips Webサイトを作るときの デザインTips

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

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

    レジュメを見て転職のスカウトをしてくれ2 ƒ SNSをフォローしてくれる
  40. マークアップをちゃんとする ˆ Webサイトはマークアップをちゃんとすれば大体良い感じになC ˆ アクセシビリティも大体良い感じになC ˆ HTMLを学ぼ3 ˆ 「武器になるHTML」がおすす' ˆ

    https://gihyo.jp/book/2022/978-4-297-13132-6
  41. 余計な装飾を入れない w カルーセルとかパララックスとか余計な装飾を入れなY w デザイナーのポートフォリオとかを参考にすると入れが… w スクロールジャックは絶対にするな!!$ w 情報設計とコンテンツ設計、レイアウトに注力すi w

    装飾は最低限(見出しの装飾、グルーピングのための枠線、など7 w 興味がある人は「レイアウト・デザインの教科書」を読むと良いかy w https://www.sbcr.jp/product/4797397314/
  42. 余計な装飾を入れない スクロールジャックは 絶対にするな!!!

  43. まとめ まとめ

  44. まとめ Astro最高!!!

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

  46. None
  47. Ubie株式会社ではエンジニアを大募集中です! 現在募集中の職種 G プロダクト開発エンジニA G ソフトウェアエンジニア(デリバリー&サクセス6 G QA エンジニA G

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

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