自分の周辺情報をまとめる静的サイトをつくった

令和元年台風第 19 号すごかったですね

• みなさん大丈夫でしたでしょうか
• yamanoku の家のアンテナが魚の骨なので怖かった
  • 大丈夫でした

エンジニアの端くれとしてなにか作りたい

• まずは「知る」ことに特化しよう
• あとは自分がメインで使えるようにしたい

やれること

• 経験のある技術
  • コッテコテのフロントエンド太郎
    • バックエンド側でなんとかやってくれてるのに付随する
• よっしゃフロントエンド太郎だし静的サイトでもつくるか！！

https://nagareyama.yamanoku.net/

• 
  • 流山市避難所
  • 小児科
  • ご飯どころ
• 現状周辺のことを載せてるだけですね
  • 全然足りんし

利用技術

• GatsbyJS
  • そういやReact.js最近触っとらんし素振りするか
    • helmet こうなってんのねと改めて理解した
  • サクッとSSRできる
    • ほんとにできた
  • GraphQL試してみる
    • はーなるほどねーとなった
    • 社内で使い方ちょっと不思議だからと言われる
  • PWAとかやりたい
    • キャッシュで爆速！！！！！！！
    • プラグインで簡単にいけた
  • Netlify
    • みなさんご存知のやつです
      • GitHubリポジトリ登録して deploy 設定してドーン
      • HTTPS 対応も簡単
    • 便利
• AWS Route53
  • ドメインはすでにここで取ってる
    • サブドメにCNAMEでNetlifyの値をあてるだけ
  • 便利

GatsbyJSに関する不満点

• React.Fragmentができない
  • 内包している React が v16 じゃない
  • ちゃんとHTML書きてえなぁ
• スタイルが余計なものを考慮しないといけない
  • height: 100%をしたかったのですが
  • ___gatsbyが果てしなく邪魔
    • html.jsなるものを弄らないと困るやつ
• TypeScript対応
  • gatsby-plugin-typescriptが必要
  • そのほか色々設定した
    • 大正義Takepepeさんがまとめてた
      • https://qiita.com/Takepepe/items/144209f860fbe4d5e9bb
  • ハマりどころが多かった気がする
  • そもそもいらんやろ
• 脱React.jsできるか
  • ガッツリReact.js依存
  • 素振りの感覚だったし別にそこまで心中する気はない

最近11tyというのがいいというのを聞く

• 静的サイトジェネレーター
  • Node.js製
• いいとこ
  • なにも気にしなかったら@11ty/eleventyだけで完結できちゃう
    • npx eleventyでビルド
  • 様々なテンプレートがひっぱれる
    • markdownほかHTMLとかpugとかnunjucksとかも
  • サイトの URL 設計がツールに縛られない
  • コレクションの設定が柔軟
    • https://11ty.io/docs/collections/
  • Data ディレクトリが便利、JS を書いたりもできる
  • ファイルを生成する前にフックで加工できる（.addTransform）
  • https://twitter.com/_yuheiy/status/1200976795396235264
• 実例
  • https://web.dev/
  • https://accrefs.jp/
  • https://takanorip.com/
• 試してみた
  • クセはあった
    • 設定を自分であれこれカスタマイズできる
  • 記法の慣れは必要
    • モジュールの css を読み込みたい時

{% set css %}
  {% include "node_modules/yama-normalize/yama-normalize.css" %}
{% endset %}

• 移行できそう
  • https://github.com/yamanoku/Nagareyamanoku/tree/feature/11ty

ネクストステップ

• そもそもAPIにしてみるか
  • FROKAN × UIT #2 「年忘れ LT バトル」#5df9fb9ec2cd3f0000d46b25
    • 自分の個人情報を API 化してるやつが居た
  • それをビルドして静的サイトジェネレートする
• 天気情報とかがあってもいいかな
• 流山市役所の情報クロール
  • Puppeteerの素振り
• なんかいいネタください