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