ファミリーデイの出し物をGatsbyJSで作った話

ファミリーデイの出し物を GatsbyJSで作った話 @pirosikick

自己紹介 • @pirosikick • 穴井宏幸 • エンジニア • JavaScript白帯です

話すこと • ファミリーデイとは？ • GatsbyJSとは？ • どうだったか？

ファミリーデイとは？ • 社員の家族やパートナー、友達などをオフィスに招き、 もてなすイベント • 「社員が元気に働けているのはみなさんのおかげです。 ありがとう。これからもよろしくね」的な 意味合いで開催

今年の東京の ファミリーデーの様子 • https://www.facebook.com/yahoojapan/posts/ 1572732192872512 • 社食を開放 • 動くけんさく・えんじんが練り歩く • さまざまな体験イベント etc

天神オフィスの ファミリーデイ • 12/2 (日) に開催 • オフィスが開設して初のファミリーデイ • 東京のファミリーデーに参加したことがあり、 気づいたら運営委員に巻き込まれる参加することに • 来場者向けの出し物は 運営委員がアイデアを持ち寄ることに

• エンジニアだし、デジタル的な何かを作りたいな〜 • この日しか使わないし、工数低め • せっかくなので、新しい技術を試したい

座席当てクイズ • 社員の座席にQRコードを置き • 自分のお父さん・お母さんの座席を探すクイズ

座席当てクイズ 座席に貼る紙 QRコード、ヒント QRコードを 読む 正解ページ 名前、写真、自己紹介文

GatsbyJSで作成 アンケート • 名前 • ヒント • 自己紹介文 写真 • 社員ディレクトリ • チャットのアイコン • いらすとや ...etc 入力 Gatsby 出力 正解ページ 印刷用ページ

GatsbyJS • https://www.gatsbyjs.org/ • 静的サイトジェネレーター

GatsbyJSの特徴 • モダンなスタック • Reactで記述、入力データはGraphQL経由で取り出し • 入力データが柔軟 • Markdown、JSON、YAML、画像、...etc • プラグインで拡張可能 • 静的なPWAを出力（プラグイン） • オフラインキャッシュ、マニフェストファイル • 速い • コードスプリッティング、画像最適化（サイズ、読み込み）

もっと知りたい人は... アナイ・ジ・エンド @pirosikick 12/22発売のWEB+DB PRESSのどんとこい！ フロントエンド開発はsakito氏（ .@__sakito__）にGatsbyJSについて書いて いただきました。フロントエンドカンファレ ンス福岡でも話題に出てたと思うので、ぜ ひ！#wdpress WEB+DB PRESS編集部 @wdpress WEB+DB PRESS Vol.108、どこよりも早い表紙画像です！ 今号はスキーマ駆動Web API開発、PostgreSQL、ZOZO開発ノウ ハウを大特集！12月22日発売予定です！#wdpress 18:03 - 2018年12月11日

GatsbyJS &

GatsbyJSのな点 • データ形式が柔軟 • 画像のクロップ、リサイズが楽 • 社員から集めた画像はサイズなどバラバラ • 「300x300で中央にクロップ」みたいな GraphQLのクエリを書くと、 • 画像がいい感じに生成されてよかった

GatsbyJSのな点 • GraphQL上のデータ構造が深い • 深い、コードがやや複雑になってしまう • その他、詰まった部分 • 動的にページを増やす方法を理解するのに時間が掛った • devとbuildで同じディレクトリを使っていて 謎のエラーが出る→クリーンしたほうがよい • 画像リサイズなどの設定を雰囲気でやってしまっている • 下調べが足りなかったかもしれない

これを読むとスムーズに 始めることができそうです！ アナイ・ジ・エンド @pirosikick 12/22発売のWEB+DB PRESSのどんとこい！ フロントエンド開発はsakito氏（ .@__sakito__）にGatsbyJSについて書いて いただきました。フロントエンドカンファレ ンス福岡でも話題に出てたと思うので、ぜ ひ！#wdpress WEB+DB PRESS編集部 @wdpress WEB+DB PRESS Vol.108、どこよりも早い表紙画像です！ 今号はスキーマ駆動Web API開発、PostgreSQL、ZOZO開発ノウ ハウを大特集！12月22日発売予定です！#wdpress 18:03 - 2018年12月11日

その他の感想

ぐっと来た • 自分の子供が 自分の作ったもので 笑顔になる姿は • ぐっと来ました

こどものツボが難しい • 手間を掛けなかったアイデアが結構うける • 「壁ホワイトボードにお絵かき」 • ホワイトボードからなかなか子供が離れない • 「テレビ会議システム体験」 • テレビ会議システムを2つの会議室でつないだだけ • 子供がダッシュで行き来しまくる

さいごに

アナイ・ジ・エンド @pirosikick 12/22発売のWEB+DB PRESSのどんとこい！ フロントエンド開発はsakito氏（ .@__sakito__）にGatsbyJSについて書いて いただきました。フロントエンドカンファレ ンス福岡でも話題に出てたと思うので、ぜ ひ！#wdpress WEB+DB PRESS編集部 @wdpress WEB+DB PRESS Vol.108、どこよりも早い表紙画像です！ 今号はスキーマ駆動Web API開発、PostgreSQL、ZOZO開発ノウ ハウを大特集！12月22日発売予定です！#wdpress 18:03 - 2018年12月11日

ありがとうございました