We Are JavaScripters! @33rd
GatsbyJSのすすめとStaticQueryの使い方
https://docs.google.com/presentation/d/1K5gLHvxRdRoOrVJmkaBNid_AI3XmuJjRBACgBrAtgiU/edit?usp=sharing
GatsbyJSとは
React.jsベースの静的サイトジェネレーター
公式プラグインでほとんどの機能を実装できる
ごく基本的知識だけで実装できる
仕組み
Data Sources
GraphQLに出力
MarkdownをHTMLに変換
GraphQLの制限
ページ生成用のコンポーネントのみ
分断されたコンポーネントに渡す時、冗長なコードになりうる
StaticQueryを使う
StaticQueryの宣言
変数クエリが使えない
複雑な操作をする時は全数取得後にjsでデータを操作する
フロントエンドエンジニア
こんなことありませんか？
他の端末では動いたがローカルで動かない
サーバーの環境をつくるのが大変
Dockerを使う
やること
コンテナを立ててアプリをつくる
メリット
環境構築が楽
ソースコードと環境変数をまるごと管理
サーバーサイドの人とも簡単に環境を共有
デプロイ
一発でAPIサーバーと同時に建てられる
デメリット
仮想環境なのでホットリロードが遅い
Linuxコマンドの知識
CPU依存なので環境によっては動かない
環境
JavaScriptとRubyの違い (Function編)
そもそも関数とは？
サブルーチンの一種
jsfunction suqure(number){
return number * number;
}メソッドは？
とあるobjectに紐付けられた関数
Rubyはどうなるか
とりあえずオブジェクトをつくる
クラスからオブジェクトをつくる
メソッドはそのクラス内で設定できる
function は書けるか？書けない
すべてがメソッドになるため
関数が存在しない
JavaScriptで簡単にできることがRubyできないこと
変数を代入
メソッドの呼び出しでカッコを省略できる
変数にメソッドを代入できないこともない
メタプログラミングがしたかったらRubyをやる
手触りの違い
クラスが分かれば理解は進む
JavaScriptはどうだろう？
つくったもの
要件
お問い合わせフォームを使いたい
LINEに通知したい
ライブ情報とニュースはCMSで
構成
Netlify Function
Netlify Form
LINEに通知
プルリクをつくるとプレビューURLを見れる
つまづきポイント
Netlify Form
html側にネーム属性を書く
data-netlify="true" を書くSSRじゃないと認識できない
DOMに差分があると紐付けが見つけられずエラーになる
解消方法
いったんキャッシュを消す
公式にも追記されてる
SPAでも使えそう？
Netlify Function
サーバーサイドプログラムをJSかGo langで書ける
AWS Lambdaが裏側で動いてる
Prettier入門
Ubie, incインターン
コードフォーマッター
第一引数に内容
第二引数にオプション
簡単な仕組み
パース
parserというオプション
@babel/parser @typescript-eslint/estree remarkベースのパーサー
Docに変換
中間形式
テキストに近い方をしている
言語に関係ないアルゴリズムでテキストに変換
文字列に変換
Prettierについて知りたい
prettierのソースを読む
commands.mdを読む
Philipの論文を読む #WeJS
Chromaticで手軽にVisual Regression Testを導入する
サイボウズ株式会社
kintone開発チーム
フロントエンド
Intro
とあるプロジェクトでJS => TypeScript移行がメイン
StorybookとStoryshotsでデグレしてないかみたい
Jestの
SnapShot Testing を利用DOMの比較しかできない…
ビジュアルテストしてくれる
Storybook使用が前提
OSSなら無料
使い方
アカウント登録
Storybook使用のリポジトリを用意
importで呼び出し
tokenを取得してビルドする
ライブラリ
ブランチを切り替え
ビューポート
Tips
--exit-zero-on-changes をつける差分が合ってもビルド自体はパスする
Open Source Planは審査が必要
スタータープラン扱い？
日本語フォントが対応まだ
Repro Web はヘッドレスCMS(違う)
7月からrepro
ポートフォリオサイトをつくる
スプレッドシートで作ってみたやつ
コンテンツがない
CMSを探求してみる
Repro Web
サインイン
設定 => アプリ設定 => SDKトークンを控える
index.html に設置コンテンツを書くとサイトができる
記事投稿
見出し、本文、ボタンが作れる
ダイアログボックスっぽくなる
複数の画面を創る
ホーム画面、プロフィール画面
画面遷移イベント定義
イベントをトリガーに表示
URL別に異なるものができる
ページを作る時のメッセージ以外の肝
配信期間
長くする
表示回数
無制限
イベントトリガー
配信対象設定
配信対象設定でハマる
全ユーザーへの選択肢がない
デザイン
カスタム設定で組める
JavaScript SEOに変更があったのでいろいろ話したい
Peep
検索において最適化をしたい
Google Botのレンダリングが最新化した
最新のJSに対応してくれた
SEOでやること
サイトのポテンシャルを上げる
検索エンジンに伝える
重要キーワード
SSR
CSR
SSR + SPA
SSR or SPA
正しくインデックスさせるためにはどうすればいいか？
SSRとDynamic Renderingが良さそう？
最新だとDRをしなくなってよかった
懸念点
WRS更新が少し送れる
2-3週間遅れて更新
生成されたコンテンツはインデックスが遅い
余談
インデックスでのセキュリティが悪い
<?=$_GET['page']> みたいにGoogleのバグだけど変えられなかった
これが原因で変えられた？
WorkerDOM
<script> の属性について defer async type="module" async レンダリングが短ければ短いほどよいサイト
いちいち手書きするのはダルい
自動的にHTMLを書いたらAMPに変換
worker-dom
WebWorkerを使って並列処理を行う
html<script type="module">
import {upgradeElement} from '/dist/main.mjs';
uogradeElement(document.getElementById('xxxxx'), '/dist/worker/main.mjs');
</script>独立したDOMのように振る舞える