honai.me / slides

JSXでJSなしの静的サイトをつくる

埋め込みコード (iframe)

JSXでJSなしの静的サイトをつくる のスクリプト

  1. JSXでJSなしの静的サイトをつくる
  2. 自己紹介 ほない 京都大学大学院 情報学研究科 修士1年 CAMPHOR- 2022年代表 好きな食べ物 :みかん 出 身 :愛媛県 技 術 :Webフロントエンド、ネットワーク @honai 好きな音楽 :サカナクション、ハニカムベアー @_honai 好きな漫画 :かぐや様は告らせたい honai.me
  3. Reactは好きですか
  4. JSXは好きですか
  5. 好きな静的サイトジェネレータは何ですか
  6. Hugo, Gatsby, Jekyll etc…
  7. Eleventy (11ty), a simpler static site generator . https://11ty.dev/
  8. Eleventy (11ty), a simpler static site generator .
  9. Eleventyが “simpler” たるゆえん _data/ └── profile.json _includes/ └── post-page-template.ejs posts/ ├── hello-world.md └── second-post.md index.ejs
  10. Eleventyが “simpler” たるゆえん index.ejs _data/ --- title: ポートフォリオ └── profile.json --- _includes/ └── post-page-template.ejs <!DOCTYPE html> <html lang="en"> posts/ <head> ├── hello-world.md <title><%= title %></title> </head> └── second-post.md <body> index.ejs <h1><%= title %></h1> <p><%= profile.introduceText %></p> </body> </html>
  11. Eleventyが “simpler” たるゆえん _data/ posts/hello-world.md └── profile.json --- _includes/ └── post-page-template.ejs layout: post-page-template.ejs postTitle: はじめての投稿 posts/ --- ├── hello-world.md └── second-post.md # こんにちは index.ejs
  12. Eleventyが “simpler” たるゆえん _data/ _includes/post-page-template.ejs └── profile.json <!DOCTYPE html> _includes/ └── post-page-template.ejs <html lang="en"> <head> posts/ <title><%= postTitle %></title> ├── hello-world.md </head> └── second-post.md <body> index.ejs <%- content %> </body> </html>
  13. v1.0.0 が1月10日に公開
  14. v1.0.0 の新機能の1つ: Custom T emplate Language
  15. わかりやすい利用例: SCSSに対応させる https://www.11ty.dev/docs/languages/custom/
  16. JSXに対応してみよう .eleventy.js ... eleventyConfig.addExtension("jsx", require('./jsxConfig')); ... jsxConfig.js const { createElement } = require('react') const { renderToStaticMarkup } = require('react-dom/server’)
  17. JSXに対応してみよう const { createElement } = require('react') const { renderToStaticMarkup } = require('react-dom/server') module.exports = { outputFileExtension: "html", init: () => { Babelのregister機能で require("@babel/register")({ requireしたときにJSX/ESM extensions: [".jsx"], }) をCommonJSに変換 }, compile: (_, inputPath) => { const ExportComponent = require(inputPath).default; return function (data) { const Component = createElement(ExportComponent, data, null); データをpropsに渡して return renderToStaticMarkup(Component); }; HTMLにレンダリング }, getData(inputPath) { return require(inputPath).data frontMatterの代わりに }, export const data = {} read: false };
  18. スタイルもCSS in JSで書きたい！ https://emotion.sh/docs/introduction
  19. EmotionでCSS in JS Babel.config.json { "presets": [ [ "@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" } ], [ "@babel/preset-env", { "targets": { "node": "current" } } ] ], "plugins": ["@emotion/babel-plugin"] }
  20. こんなふうにページが書けるようになります
  21. こんなふうにページが書けるようになります import { css } from "@emotion/react"; import styled from '@emotion/styled' export const data = { FrontMatterの代わり title: "タイトル" } export default (props) => ( <div> <h1 css={ css` インラインでCSS-in-JS color: red; `} >{props.title}</h1> <div dangerouslySetInnerHTML={{ __html: props.content }} /> マークダウン等の中身は ここに <Footer>ポートフォリオ</Footer> </div> ); const Footer = styled.footer` styled-components風の color: blue; 書き方もOK `
  22. まとめ
  23. JSXを楽しもう！ Thank you for listening!