要件 Next.js によるウェブアプリケーション すでにUAによる計測を行っている UAによる計測は、自動計測＋特定のページだけconfigをオーバーライドしている（カスタムディメンジョン用） この状態で Google Analytics 4 による計測も同時に行いたい 既存のUAには影響がないようにしたい できればカスタムディメンジョンを付与したイベントも GA4で再現したい 検討項目 Google Tag Manager を使うとアプリケーション側でイベントの制御を行うのではなく、GTMの管理コンソール側で制御できるようになる雰囲気があるのでまずGTM の導入を検討する 結論（やったこと） Google Tag manager と Google Analytics 4 を連携した Google Analytics 4 と BigQuery を連携した Next.js のコードには G

株式会社パルケの手を動かすCTO、みつるです。 今年に入ってからリリースしたプロダクトでは、TanStack Query (旧React Query）を全面的に採用しました。 無料でずっと話せるミーティングアプリ パルケミート とにかく簡単につながる無料ビジネスチャット パルケトーク このツールを使い倒した結果、これはいちライブラリの枠に収まらない、開発の考え方そのものを変える神フレームワークだと思うようになりました。 今回はその神ってるところを紹介したいと思います。 TanStack Queryとは 公式のトップページより Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte パワフルな非同期状態管理ツールという事です。 ただのデータ取得＆キャッシュの便利ツールではない、という気持ちが

JavaScriptの関数は、関数宣言、関数式、アロー関数の3通りの方法で作れます。 アロー関数は後発​JavaScriptの歴史を紐解くと、元々は関数宣言と関数式しかありませんでした。この2つの機能上の違いはほぼありません。この2つはまとめて「従来の関数」と呼びます。アロー関数は、従来の関数の問題点を解決するために、あとで導入されたものです。 構文の簡潔さ​従来の関数は構文の長さが問題でした。JavaScriptではよくコールバック関数を書きます。コールバック関数とは、関数の引数として渡される関数を言います。従来の関数は、関数を書くたびにfunctionキーワードを書く必要があります。処理が1行だけでも、複数行要するコーディングスタイルもあります。書くのも読むのもわずらわしいコードになりがちです。一方で、アロー関数は短くシンプルな記述になります。

本記事はNRIネットコム Advent Calendar 2021 17日目の記事です。 🥨 16日目 ▶▶ 本記事 ▶▶ 18日目 🍪 はじめまして、入社2年目の高橋栞です。 Google アナリティクス（GA）を中心としたGoogle マーケティング プラットフォーム（GMP）のテクニカルサポートを担当して約1年半になります。 まだまだ修行中の身ですが、今回は誰でも簡単にTechな感じでGTMの設定を行えるようこの記事を書きました。パッと見は小難しく見えるかもしれませんが、やっていることはシンプルなのでぜひ読んでいただければと思います！ はじめに 組み込み変数とは クリックした要素の〇〇を取得したい！ クリックした要素の親要素/子要素の〇〇を取得したい！ dataLayerで取得できる値を全部チェックしたい！ GTMで値を確認してみましょう！ まとめ はじめに GTMは「Googl

Fastly の新しい next-compute-js ライブラリを使用することで、Compute@Edge プラットフォーム上で Next.js アプリケーションをホストできるようになりました。これにより、Next.js 開発者のエクスペリエンスが向上し、圧倒的なスピードを誇る Fastly のグローバルエッジネットワークのメリットが得られます。オリジンサーバーも必要ありません。 Next.js は広く普及している JavaScript ベースのサーバーフレームワークで、開発者に優れたエクスペリエンスを提供します。具体的には、フロントエンドのコードを React で作成できるほか、ごくわずかな設定で本番環境に必要な優れた機能 (ハイブリッドの静的レンダリングとサーバーレンダリング、スマートバンドル、ルートプリフェッチなど) を直感的にセットアップできる便利さを備えています。 Next.j

欧州連合（EU）の執行機関である欧州委員会が、EUで販売されるスマートフォンなどの電子機器の充電用端子として、USB Type-Cを採用するよう義務付ける法案を可決した。製品にLightning端子を搭載する米Appleは対応を迫られる。 有線充電式で100W以下で動作する電子機器が対象。2024年末までに、携帯電話やタブレット、カメラ、ヘッドフォン、携帯ゲーム機、キーボードなどにUSB Type-C端子の搭載が必要になる。26年春にはノートPCも対象になる。 同法案は21年9月に欧州委員会に提出された。1つのベンダーに依存してしまう「ベンダーロックイン」への対策や、無駄な充電器の購入を防ぐのが目的。賛成602票、反対13票、棄権8票で可決になった。 USB Type-C端子の搭載義務に加え、スマホなどの端末購入時に、充電器のセット購入をするかどうかも選択できるようにする。これにより、不要

input[type=number] には空文字とかも入力できるので、string 型で状態管理をしないと意図しない動きをすることがある

TL;DR CentOS6など、古いベースイメージの起動に失敗（エラーコード：139）が発生することへの回避策 動作環境 Windows 10 Home 64bit (2004) Ubuntu 18.04 LTS WSL2 Docker 19.03.08

開発スピードの速い企業は品質が高く、遅い企業は品質が低い。和田卓人氏による「組織に自動テストを根付かせる戦略」（その2）。ソフトウェア品質シンポジウム2022 9月22日と23日の2日間、一般財団法人日本科学技術連盟主催のイベント「ソフトウェア品質シンポジウム2022」がオンラインで開催され、その企画セッションとして行われた和田卓人氏による講演「組織に自動テストを書く文化を根付かせる戦略（2022秋版）が行われました。 講演で、企業の業績はソフトウェアの開発能力に左右されるようになってきていること、その開発能力を高める上で重要なのがコードの「テスト容易性」や「デプロイ独立性」であると和田氏は指摘。その上で、それを実現させるような「自動テストを書く文化」をどうすれば組織に根付かせることができるのか、講演の後半ではこの本質的な議論へと踏み込みます。 本記事は、2時間におよぶこの講演をダイジェス

{ "runtime": "nodejs14.x", "handler": "index.js", "launcherType": "Nodejs", "shouldAddHelpers": true } 詳しくは後述しますが、ここでのポイントは、 .vercel/output/functions というディレクトリ構造が存在する その直下に index.func というディレクトリが存在する index.func の内部に .vc-config.json という関数の設定ファイルが存在し、ランタイムなどが定義されている index.func の内部に関数の実体である index.js というファイルが存在する などです。こうした要件を備えた .vercel ディレクトリは、vercel deploy --prebuilt コマンドによって Vercel へと直接デプロイすることができます

新しいiPhoneへ乗り換える際、データを移行する必要があります。 移行するデータは、写真や連絡先、使用していたアプリなど、さまざまなものがあります。iPhoneにデータを移行するには、iCloudやiTunesにバックアップを取って復元する方法がありますが、iCloudは50GB以上をバックアップするには有償のプランを契約する必要があり、iTunesを使う場合はPCにバックアップ用のストレージを確保しておく必要があります。 今回はデータ量や使用料金を気にせず、iCloudやiTunesより手軽にデータ移行する方法「クイックスタート」をご紹介します。 データ移行する前の注意点 一部のアプリデータはクイックスタートでは移行されません。まずは、本体のデータ移行をする前に、アプリごとに引継ぎ作業や再ログインを行う必要があります。例えば、LINEやSuica、Googleアカウント、スマホゲームな

野菜や果物を多く食べる人は、そうでない人と比べ、２０年以内に死亡するリスクが７～８％低かったとの研究結果を国立がん研究センターと横浜市立大のチームがまとめた。ビタミンや食物繊維を豊富に含む野菜や果物の摂取は健康のために重要とされるが、国内の大規模調査で裏付けされたのは今回が初めてという。 【図表】日本人の平均寿命の推移 研究は、全国１１地域に住む４０～６９歳の男女約９万５０００人が対象で、１９９５年か９８年に食事に関するアンケートに協力してもらい、その後の約２０年間を追跡した。調査期間中に約２万４０００人が死亡した。 アンケート結果から参加者ごとに１日あたりの野菜と果物の摂取量を推計し、最も多いグループから、最も少ないグループまで五つに分けて死亡リスクを解析した。その結果、果物では摂取量が最も少ないグループより、最も多いグループでは８％低かった。野菜も同様に７％低かった。

背景 Dockerコンテナを立てたらマルウェアに感染したのでサイバーセキュリティの啓蒙を兼ねてメモ書きしてみました。 注意事項 マルウェアに感染した被害の対処方法を記述しています。マルウェア自体の機能や解析の解説ではなく一般利用者ユーザーの視点から感染経路と対応方法についての記述になります。 マルウェア感染状況 症状 Dockerコンテナを稼働させたホストのロードアベレージ(CPU負荷)が常時4を超える状況になっていました。つまり400%でホストがフル回転してた訳ですな。 例えるならエヴァンゲリオン初号機が暴走してマヤちゃんがコンソール画面に向かって叫んでいるところです（違） こうなるとクラウドサービスのAWSとかだと英文で警告アラートが飛んで来ますし毎日課金されで膨大な利用料金請求が来ることになります。恐ろしい！！ 状況の調査 CPUの利用状況やメモリの使用量などを調査するツール類があり

はじめに 12.1のリリースで、もっともリクエストの多かった機能、On-demand ISRが導入されたらしいので試してみました。 TL;DR SSG/ISRで生成した静的ファイルが、どのタイミングで再生成するか試してみたことをまとめた記事です。（revalidate で指定した値を過ぎたてアクセスしたり、unstable_revalidate を実行したり、などいろいろ試してみた結果をまとめてます） 検証で作ってみたサイトは こちら サンプルコードは こちら On-demand ISRとは On-demand ISRは、12.1のリリースにてベータ版で入った機能ですが、ISRについてもあらためて。 ISRとは まずはドキュメントです。 ISRは段階的に静的ファイルを生成する仕組みです。一度生成したファイルを指定した時間経過後にリクエストすると再生成してくれます。 getStaticPro

最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe