自分の周辺情報をまとめる静的サイトをつくった
この資料はつくばexpress.js #1のLT資料です。
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
改めまして
みなさんようこそつくばexpress.jsへ
第0回は運営メンバーにより守谷にて開催しました
基本呑んだだけです
つくばexpress.jsの運営メンバー
お前は誰
自己紹介
大山奥人 , おおやまみちのく a.k.a やまのく 得意領域
マークアップ・フロントエンド・UIデザイン・アクセシビリティ
Ruby on Railsの会社に入ったのでその辺をゴリゴリ触っている感じです
ザ・モノリシックです
既婚で1児の父と猫🐈🐈🐈の飼い主
9/30より流山市民になりました
増税前に流山おおたかの森に戸建てを手に入れました🏠
boiyamaさんもおおたかの森民
いつか大型犬を飼いたいと思っています
デザインまわり担当しました
おおたかの森周辺について
高島屋系列のショッピングセンター
アネックスもある
ペットショップある
犬かわいー
流山おおたかの森駅南口都市広場
SC前でイベントが開催されてる
今はスケートリンクが設置されている
保育園
現状待ちはあるが豊富
流山市立おおたかの森小学校・中学校
2015年に新設した一貫校
図書館もある
駅から出て南にデカい公園がある
土日は子連れが基本いる
ごはん処
ブロンコビリーおおたかの森店
家族向けのステーキハウス
サラダバーが豊富
魚べい 流山おおたかの森店
回転寿司
それはそれとして
令和元年台風第19号すごかったですね
みなさん大丈夫でしたでしょうか
大丈夫でした
エンジニアの端くれとしてなにか作りたい
まずは「知る」ことに特化しよう
あとは自分がメインで使えるようにしたい
やれること
コッテコテのフロントエンド太郎
バックエンド側でなんとかやってくれてるのに付随する
よっしゃフロントエンド太郎だし静的サイトでもつくるか！！
流山市避難所
小児科
ご飯どころ
現状周辺のことを載せてるだけですね
全然足りんし
利用技術
そういやReact.js最近触っとらんし素振りするか
helmetこうなってんのねと改めて理解した
サクッとSSRできる
ほんとにできた
GraphQL試してみる
はーなるほどねーとなった
社内で
使い方ちょっと不思議だから と言われるPWAとかやりたい
キャッシュで爆速！！！！！！！
プラグインで簡単にいけた
みなさんご存知のやつです
GitHubリポジトリ登録してdeploy設定してドーン
HTTPS対応も簡単
便利
ドメインはすでにここで取ってる
便利
GatsbyJSに関する不満点
React.Fragment ができない内包しているReactがv16じゃない
ちゃんとHTML書きてえなぁ
スタイルが余計なものを考慮しないといけない
height: 100% をしたかったのですが ___gatsby が果てしなく邪魔 html.js なるものを弄らないと困るやつ gatsby-plugin-typescript が必要そのほか色々設定した
大正義Takepepeさんがまとめてた
ハマりどころが多かった気がする
そもそもいらんやろ
脱React.jsできるか
ガッツリReact.js依存
素振りの感覚だったし別にそこまで心中する気はない
最近11tyというのがいいというのを聞く
いいとこ
なにも気にしなかったら
@11ty/eleventy だけで完結できちゃう npx eleventy でビルド様々なテンプレートがひっぱれる
サイトのURL設計がツールに縛られない
コレクションの設定が柔軟
Dataディレクトリが便利、JSを書いたりもできる
ファイルを生成する前にフックで加工できる（
.addTransform ）実例
試してみた
クセはあった
設定を自分であれこれカスタマイズできる
記法の慣れは必要
モジュールのcssを読み込みたい時
_includes/layout.njk{% set css %}
{% include "node_modules/yama-normalize/yama-normalize.css" %}
{% endset %}移行できそう
ネクストステップ
そもそもAPIにしてみるか
自分の個人情報をAPI化してるやつが居た
それをビルドして静的サイトジェネレートする
天気情報とかがあってもいいかな
流山市役所の情報クロール
Puppeteerの素振り
なんかいいネタください
2021/9/19追記: 更新も疎くなってしまったためサイト自体を削除しました