サーバーサイドGTM 始めにサーバーサイドGTMというのはGoogleの公式用語ではないです。 用語だけ独り歩きしている感じがあるのですが、 実態は要素技術の組み合わせでしかありません。 Google公式ではサーバサイドタグと呼ばれています。 この記事を書いた動機 サーバサイドタグは要素技術の集合と冒頭で書きました。 情報が断片的だったり、情報自体が古かったりして設定方法が変わっており、 設定箇所も多く、総合的なwebの知識が必要でハマりどころがかなり多かったため、まとめたかったのが動機です。 （そもそもサーバサイドタグの導入ガイド的なものの情報があまりない…） なぜサーバサイドタグが必要なのか？ 皆さんも一度は目にしたことがあろう、EUのウェブサイトを中心としたCookie許可のバナー。 これらは広告トラッキング用のサードパーティcookieを許可するかの確認バナーです。 (※画像はst

爆速でコンテンツスケーラブルなウェブページを目指して NextJSなどに代表するフレームワークはHydrationという仕組みでストリーミングでコンテンツをダウンロードするというアプローチを取っています。 対してQwikはResumableという全く違ったアプローチで高速化を図っています。 QwikはMisko Hevery（Builder.ioのCTOでAngularJSの開発者）が作成した新しいフレームワークです。 Resumable vs. Hydration 極端な図ですが、ファーストビューのレンダリング完了まで（要はCore Web Vitalsの計測対象まで）の比較は以下のイメージです。（実際にはQwikの方も1ms程度の最低限のJSコードはダウンロードが発生する） 主にReactJSなどに代表されるSSR/SSGアプリケーションがクライアントで起動すると、クライアントのフレー

はじめに 静的なページをインフラレベルで動的に生成し爆速にするためのエッセンスです。 ReactJS、NextJS、Vercelの挙動に関して知っている方向けの記事です。あしからず。 NextJS＆Vercelの機能をフル活用することでランディングページなどでReactJSを使ったモダンな開発をしつつ爆速な静的ページを生成することができます。 先日リリースされたNextJS 12.2.0から割と最後の課題であったVercelのページ単位のキャッシュクリアをAPIで解決することが可能になりました。 SSG→ISR ページ単位のVercelキャッシュクリア CSR無効化 ISR ISRに関しては詳しくまとまっている記事があるのでそちらにゆずります。 Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する 端的に言うとキャッシュが切れたら動的にSSGを行う

まずはじめに Reactはユーザインターフェース構築のためのJavaScriptライブラリです。 React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 - React公式より Reactのプロジェクトである程度規模が大きくなっていくと問題になっていくのは きちんと設計しないとビジネスロジック、コンポーネントのステート、表示 これらが入り混じって数百行の巨大なコンポーネント（モノリシックなコンポーネント）ができてしまう場合があることです。 確かにReactはユーザインタラクティブなViewの作成には強力な力を発揮しますが、 綺麗なコンポーネント設計に関しては利用者に委ねられています。 (Re

GTMと聞いて別のサービスを思い浮かべるのは私だけでないはず。 そこで正しいサービスに戻してみようと思います。 ここの記事を参考にさせていただきました。 LGTMを戻す window.onload = function() { var img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAC0CAMAAAB4+cOfAAAApVBMVEX///9FhPA5abtYkPE9gPA1Z7pGcr9liMgwZLkoYLiOr/W+y+WIoNE1fO/R4PtBgvAweu+nwPfy9v73+v7s8v1glPLg6fzl7f1+pvQ+bb5Jhe3M2/q7z/l1ofPF1vra5fyYt/a90fmUtfavx/ijv/dqmvJ9pfTS2+5dkvJRi/GOsfWUq9mqvN+Fq/Szyfgmdu98mM9Zf

動機 Web上で3D表現するにはUnityかWebGLの選択肢に大体落ち着くと思います。 Unityに関してはとても素晴らしいフレームワークなのですが、 Web上で動かすにはプラグインが必要なのと、Unity自体の仕組みやライセンスにロックオンされるのが個人的にあまり好きではなかったので、オープンな仕様でプラグイン不要なWebGLのほうが好きです。 WebGLのフレームワークもA-Frameとか最近色々増えてきましたが古参でライブラリが充実しているThreeJSでちょっと本気でアクションゲームぽいものを作ってみました。 アクションゲームを作ろうとした時に厄介なのが、3Dオブジェクトの当たり判定だと思います。 その辺に関してまとめられてる情報が少ない気がしたので、 今回はAmmo.js（物理エンジン）を使ってキャラクターを地形に沿って移動できたり、落ちてくる物体を動かせたりできるようにしまし

レビューガイドライン(Review GuideLine) ここで述べているレビューはピアレビューについての方法です。 （作業成果物の欠陥と改善の機会を探すレビュー） 「最悪を最初に」を基本としてレビューすべき、 たとえば、仕様やアルゴリズムに欠陥があるのに、typoにこだわってもしょうがないので、なにが最悪かを考え、それを防ぐための物からレビューをします。 誤りがプロダクト全体に影響し、手戻りのコストが高くつく、あるいは失敗するようなリスクがないかを考慮にいれてレビューの対象を選択します。 たとえば、基本的な初期フェーズの要求仕様や、クリティカルな決定の基礎になる仕様、使用頻度が高いモジュールなどを重点的にレビューします。 以下に書く項目はレビュアーに負担をかけないようにするのが前提なのでレビュアーに出す前にそもそもテストしたい項目です。 参考： あなたのおっしゃるレビューってどのことかし

ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。 最近はJSON色つけ係と呼ばれてたりしますが、 Web開発未経験・初心者向けに最低限知っておいたほうが良い基礎知識とテクニックに関して体系的にまとめておきます。 （CodePenによる動作例付き） 環境構築に関しては（兎に角）早くプロトタイプを作る技術（初心者向け）を参考にしてください。 HTML、CSS、JavaScriptはブラウザ自体の実装に依存します。 この記事では比較的汎用的に使える書き方やHTML、CSS、JSを記載したつもりですが 最新のJavaScript APIやCSS3の機能によってはブラウザによってサポートされていない機能もあります。（特にIE） 各機能に関してはCan I useで現在のブラウザの対応状況を確認することができます。 HTML HTML(Hyper Text Markup La

煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02

はじめに 今回のサンプルは以下に用意しました。 Apollo Server & Apollo Clientサンプル 以前こんな記事を書きました。 React(+Redux)+gRPCで実現するクリーンアーキテクチャ＋マイクロサービス構成 BFFのフロントエンドAPI部分に関して、次の記事を見てクライアント通信の部分をGraphQLで実装できるとより柔軟で堅牢な気がしたので試してみました。 世のフロントエンドエンジニアにApollo Clientを布教したい REST API、 GraphQLの違いに関しては下記を参考にしてください アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた GraphQLを導入するメリットはざっくり以下の通りです。 APIのインタフェース定義(送信パラメータのデータ型定義)ができる（それにともない、データの型定義によるAPIパラメータの

はじめに イケてるは誇張かもしれませんが社内にデザイナーがいなく、 エンジニアにランディングページを作ってと振られたときのケースを想定して ノンデザイナーでも体系的にCSSコーディングすることでそれっぽいランディングページを作成できることを目的としてます。 デザインは一朝一夕でできるものではなく、ブランディングに関わる部分の画像に関しては、商材の撮影やPhotoShopやIllustratorで専用のアイコンやロゴ画像を別途制作する必要があります。 本格的に作成する場合はやはり本職のデザイナーさんに依頼した方が良いでしょう。 （それっぽいといったのは今回はそれらのブランディングに関わる画像の作成を省いて、素材画像やCSSでごまかしているからです。） 今回はCSS Designerという仮想CSSエディターの商材を想定してランディングページを作成しました。 作ったページ全体のサンプルはこちら

転職 Advent Calendar 2016 12日目の記事です。 ※あくまで個人の主観です。 直近3ヶ月以内で超大手通信会社から メディアとかに取り上げられたり、ストアランキング上位のアプリを出している超ベンチャーに転職しました。 初めての転職です、自分を変えたくて転職しました。 プロジェクトの進行がわかりやすい 大手だと何かやるにつけて会議だの稟議だの通さないといけない。 何かやりたいってなったときに待ちの状態が発生しやすくフラストレーションが溜まる。 ベンチャーだと施策実行までのラインが短い よくわからないところで進捗が止まりにくい 裁量が大きい 自分がこのサービスで世の中を変えるんだってくらいの熱量がなければできない。 （それくらいの熱意と覚悟がないと逆にベンチャーへの転職はおすすめできないです。） 任されているものが大きいだけにやりがいはでかい 一人一人がサービスを支えてる自覚