2024-09-02

DDD

値オブジェクトとエンティティ

リポジトリ

ドメインサービス

アプリケーションサービス

ドメインオブジェクトを直接公開するか、しないか
- 直接公開すると
  - コードがシンプルになる
  - ドメインオブジェクトをアプリケーションサービス以外からも操作できてしまう→依存範囲が広がってしまう
- 直接公開しないパターン
  - DTOに詰め替えてリターンする方法がある
  - DTOのコンストラクタにドメインオブジェクトを渡して詰め替えるのがおすすめ
  - コード量が増えるというデメリットがある

2024-08-25

nodeのエコシステム

node

対象	それは何か？
npx	node package executor。任意のnpmパッケージを実行できるコマンド。 npmに含まれている。ローカル、リモートのどちらのパッケージでも実行できる。
npm	node package manager。node用のパッケージマネージャー。オープンソース。

2024-08-25

firebaseとNextjsの統合

下記のチュートリアルをやってみる https://firebase.google.com/codelabs/firebase-nextjs?hl=ja#0

※pnpmを使う

pnpm dlx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install

firebaseのプロジェクトを設定する - 有料プランにする - Authenticationを有効化 - Firestoreを有効化 - Cloud Storageを有効化

2024-06-21

bashのhistoryからコマンドを実行する

Shell

historyコマンドで履歴を表示する

history

コマンド履歴が番号付きで表示されるので、!の後に実行したい履歴番号を入力すると実行される

!12

!!を入力すると最新の履歴が実行される（最新の履歴を実行するなら↑カーソルボタンで十分な気がする）

!!

2024-06-07

NextJS

Nextjs typescript

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 ページ間のナビゲーション

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

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

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

VercelのPostgresを利用できるようにセットアップする

SDKをインストールする

pnpm add @vercel/postgres

データをシードする ※ドキュメントと手順が違う

### 環境変数をセットする
export POSTGRES_URL=xxxxxxxxx

### seedスクリプトを実行
node scripts/seed.js

chapter7 データをフェッチする

React Server Componentsを使う

chapter8 静的レンダリング、動的レンダリング

chapter9 ストリーミング

loading.tsxファイルページがローディング中の表示を切り替えることができる

<Suspense>の利用

chapter10 パーシャルプリレンダリング

experimental_ppr = true

chapter11 検索フォームとページネーションの追加

検索条件をURLパラメーターに反映する

デバウンシング：キー入力ごとに実行させない。最適化させる。

pnpm add use-debounce

chapter12 データの追加・更新・削除

revalidatePathでprefetchのキャッシュを更新する

chapter13 エラーハンドリング

try catchでエラーハンドリングするリダイレクトはtry catchの外に記述する error.tsx でデフォルトのエラーハンドリング、エラー表示を行えるリソースが存在しない場合は notFound() がある　→ not-found.tsxも作る

chapter14 アクセシビリティの改善

Nextjs には eslint-plugin-jsx-a11y が含まれている

Client-sideバリデーション - requiredでブラウザのバリデーションが効く

Server-sideバリデーション - useActionState フックを使う ※useActionStateはCanaryリリースのものなのでuseFormStateを使うのもあり参考Issue　

ARIA(Accessible Rich Internet Applications)

chapter15 認証の追加

NextAuth.jsを使う方法がある

pnpm i next-auth@beta

下記コマンドでランダムキーを作成し、.envファイルにAUTH_SECRETという環境変数で設定する

openssl rand -base64 32

chapter15 メタデータの追加

Nextjsでは2つの方法で設定できる

コンフィグベース
ファイルベース

2023-10-04

NeoVimのプラグイン

vim

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

2023-10-04

Vimで忘れがちなやつ

vim

ターミナル

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

文字列の変更

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

移動系

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

削除

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