NextJS

pnpm dlx create-next-app@latest

lern nextjs

Learn Next.js | Next.js

chapter1

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

chapter2

app/ui/global.css 全てのルートに適用されるCSS トップレベルでインポートしておくのがよい。app/layout.ts

Tailwind

CSSModules

どちらも使えるし、併用することもできる

clsx cssのclass nameを簡単に切り替えることができるライブラリ

chapter3

layout shiftは避けるべき

next/image コンポーネントで画像最適化を実現できる

chapter4

URLの階層はフォルダで実現する

フォルダの中にpage.tsxを配置する必要がある。つまり/app/dashboard/page.tsxというファイルが/dashboardというURLのパスに対応する。

layout.tsx にレイアウトを書いていく

ルートレイアウト(app/layout.tsx)は必要。全てのページで共有されるレイアウト。,タグの調整やメタデータの追加を行う。

chapter5 ページ間のナビゲーション

タグでリンクすると毎回ページ全体がリフレッシュされてしまう。→next/Linkコンポーネントを使うとクライアントサイドナビゲーションを実現できる。 またコード分割とプリフェッチが行われる。

usePathname()フックで現在のパスを取得できる。clsxと組み合わせて動的にスタイルを変更できる。

chapter6 データベースのセットアップ

WIP

NeoVimのプラグイン

LazyNvim

プラグインマネージャー。neovimにインストールするプラグインを管理する。

nvim-treesitter

tree-sitterという構文解析ライブラリをNeoVimで使いやすくするもの。高度なシンタックスハイライトや構文解析を行う。

nvim-lspconfig

Neovim組み込みのLSPクライアントの設定を簡単にする。

mason

LSPサーバー、DAPサーバー、リンター、フォーマッターなどを簡単に管理できるインターフェースを提供する。

fidget

NeovimのステータスラインやUI部分にアニメーションや動的な要素を追加するもの。

neodev

Neovimのinit.luaプラグイン開発用のヘルプを表示してくれる。

nvim-cmp

コード補完を行う。

telescope

ファジーファインダー。拡張が簡単。

null-ls

Vimで忘れがちなやつ

ターミナル

コマンド 説明 備考
:vert term ターミナルを垂直分割で開く
CTRL-W N ターミナルのノーマルモードに入る(ヤンクなどができる) iやaで戻る

文字列の変更

コマンド 説明 備考
CTRL-A カーソル下または後ろの数値を加算する
CTRL-X カーソル下または後ろの数値を減算する

移動系

コマンド 説明 備考
zt カーソル行を画面の最上部に表示する
zz カーソル行を画面の真ん中に表示する
zb カーソル行を画面の最下行に表示する
CTRL-O ジャンプリストの古い方へ移動
CTRL-I ジャンプリストの新しい方へ移動
g; 変更リストの古い方へ移動
g, 変更リストの新しい方へ移動

削除

コマンド 説明 備考
D 行末まで削除
J 下の行と結合する

GA4

トラフィックソースに関するディメンションのスコープ

ユーザースコープ

  • ユーザースコープの各ディメンションに割り当てられた値は、そのユーザーが何度もページを訪れた後も変わらない
  • First User, というプリフィックスが付く

セッションスコープ

  • 新しいセッションを開始した新規orリピートユーザーの情報を確認できる
  • Sessionというディメンションがつく

ベントスコープ

参考

https://support.google.com/analytics/answer/11080067?sjid=13046614350603686674-AP#zippy=%2Cin-this-article

セッションについて

  • セッションのタイムアウトは30分
  • セッションが開始されると自動的にsession_startイベントが収集され、ga_session_id, ga_session_numberが生成される
  • セッションIDがsession_startイベントに付与されないことがある
  • GoogleAnalyticsのセッション数は推定値が計算されているため、BigQueryの数値と多少の差異が発生することがある
  • セッションが日付を跨ぐ場合は1つのセッションだが、各日で1回ずつカウントされる

イベントについて

  • 特定のイベントをコンバージョンイベントとしてマーク付けができる
  • イベントのほとんどは1件ずつ送信されるのではなく、グループ化またはバッチ処理される。
    • コンバージョンイベントはリアルタイムで送信される
    • ユーザーのデバイスで保持されるイベントは、ユーザーがページから離れた時点で送信される
    • sendBeaconAPIをサポートしていないブラウザ環境では、全てのイベントが即時送信される

参考

https://support.google.com/analytics/answer/9191807?sjid=2369625601677922354-AP#zippy=

https://support.google.com/analytics/answer/9322688?sjid=2369625601677922354-AP#

cloud loggingのクエリ言語が覚えられない

クエリ言語に限らずですが、使用頻度が少ないものって全然覚えられないです。 なのでメモしておきます。

比較のオペレーター

=           -- 一致
!=          -- 一致しない
> < >= <=   -- 大なり、小なり
:           -- "hogehoge" hogehogeに部分マッチするかどうか
=~          -- 正規表現マッチ
!~          -- 正規表現にマッチしないもの

参考

https://cloud.google.com/logging/docs/view/logging-query-language?hl=ja

Github Actionsの概要

コンポーネント

ワークフロー

  • 1つ以上のジョブを実行する自動化プロセス
  • イベントによるトリガー、手動トリガー、スケジュールトリガーが可能
  • 別のワークフローを参照することも可能

イベント

  • ワークフローをトリガーするリポジトリ内の特定のアクティビティ

ジョブ

  • 同じランナーで実行されるワークフロー内の一連のステップ
  • 実行されるシェルスクリプトもしくはアクション
  • 各ステップは同じランナーで実行されるため、データの共有が可能
  • デフォルトではジョブ同士に依存関係はなく並列で実行される。依存関係を持たせることも可能。

アクション

  • GithubActions用のカスタムアプリケーション。頻繁に繰り返されるタスクを実行する。
  • 独自のアクションを定義することも可能
  • Github公式アクション https://github.com/actions

ランナー

  • ワークフローが実行されるサーバー
  • 1つのランナーで一度に1つのジョブを実行できる
  • 独自のランナーをホストすることも可能

式・演算子

https://docs.github.com/ja/actions/learn-github-actions/expressions

コンテキスト

https://docs.github.com/ja/actions/learn-github-actions/contexts

ワークフローの手動実行

ワークフローを手動で実行するには、workflow_dispatchイベントで実行するように設定しておく必要がある また、ワークフローがデフォルトブランチに存在する必要がある

キャッシュ

  • キャッシュの保存は自動で行われる
    • ジョブの最後にPost Run actions/cacheが実行されて、そこで保存される

参考

Github Actionsドキュメント
https://docs.github.com/ja/actions