猫でもわかるWebプログラミングと副業

本業Webエンジニア。副業でもWebエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

Next.js で <table> を使おうとして Hydration failed because the initial UI does not match what was rendered on the server.

Next.js でたまにこういうエラーが出てくる。 エラーが出てくるけど、dom は正常に描画されている。 どうやら、HTML タグの使い方がおかしい場合にこのエラーが出てくる事があるようだ。 私の場合は、<table> タグを使おうとしてこのエラーが出たのだが、<table> タグを使</table></table>…

Next.js で、いい感じに head, title, ogp などを配置する【React.js】

Next.js の Head コンポーネントを使う タイトルとかをいい感じに使い回す Next.js の Head コンポーネントを使う Next.js では、 Head コンポーネントを使うことで、 title などの <head> タグ内の属性を設定できます。 import type { NextPage } from 'next'; im</head>…

AWS ECS + Fargate の ECS Exec で An error occurred (TargetNotConnectedException)

ECS Exec で An error occurred (TargetNotConnectedException) Amazon ECS Exec Checker でトラブルシューティング 実行例 各項目の説明 Prerequisites for check-ecs-exec.sh Prerequisites for the AWS CLI to use ECS Exec Cluster Configuration Can I …

Stripe の Checkout Session と Webhook で届いた Subscription の紐付け

Stripe Checkout と Webhook Checkout session と Webhook の紐付け Subscription の metadata を使う customer.subscription.created 以外の Webhook を使うのは? success_url に到達した瞬間にサービス提供するのは? Stripe Checkout と Webhook Stripe …

個人で VPS で Kubernetes クラスタを組むなら kubeadm (vs Kubespray)

はじめに Kubernetes 概要 kubectl コマンドについて Kubernetes クラスタの構築 indigo VPS を利用 kubeadm vs kubespray Kubernetes クラスタのマスターノードとワーカーノード kubeadm を使った Kubernetes クラスタ構築の手順 全てのノードで実行 マスタ…

aws/aws-sdk-php で Your requirements could not be resolved to an installable set of packages.

composer ライブラリの依存エラー エラーの見かた 解決方法 詳細な解決方法 composer update guzzlehttp/psr7 guzzlehttp/promises 最後に composer ライブラリの依存エラー composer で aws/aws-sdk-php のライブラリをインストールしたところ、以下のよう…

Yjs の「Awareness & Presence」ドキュメントを読む

docs.yjs.dev ※ Yjs は、ドキュメント共同編集用のライブラリです。 ※ Awareness 、あるいは、 Awareness 情報というのは、ドキュメント共同編集の際の、各ユーザーのカーソルの位置など、ドキュメントの更新以外の情報のことを指します。 Awareness & Prese…

y-protocols/sync 内のメソッドが何をしているのか

y-protocols のドキュメントが少ない Yjs の WebSocket のサーバーサイドを自前実装しようとすると、y-protocols について理解しなければなりません。 github.com Yjs 公式には y-websocket というリポジトリがあり、この中にはサーバーサイドの実装も入って…

yjs/y-websocket 共同編集エディタ用ライブラリ YJS の WebSocket 周りの実装

y-websocket の README の翻訳です。 github.com y-websocket とは Quick Start y-websocket をインストールします。 WebSocket サーバーを立ち上げます クライアントの実装例 API (Websocket Provider の API) Websocket サーバー データを永続化したい場…

Django REST framework シリアライザの種類

ModelSerializer どのフィールドを含めるか ネストされたフィールドのシリアライズ フィールドの形式を指定する Readonly なフィールド HyperlinledModelSerializer ListSerializer BaseSerializer ModelSerializer JSON, XML など ↔︎ Django の model の変…

'OrderingFilter' object has no attribute 'filter_queryset' エラーの対処法

view で import している OrderingFilter のクラスが間違っている ダメな例 from django_filters.rest_framework import OrderingFilter from django_filters.filters import OrderingFilter 正解はこっち from rest_framework.filters import OrderingFilte…

Django REST framework Serializers

www.django-rest-framework.org Serializers Declaring Serializers(シリアライザを定義する) Serializing object(シリアライズする) Deserializing objects(デシリアライズする) Serializers Serializers は、Django の QuerySet や、モデルのインス…

PHPのHTTPクライアントライブラリ Guzzle を使うときに知っておきたいこと

Guzzle とは リクエストオプションの指定の方法 例外処理の方法 例外の構造 例外の意味 GuzzleException まとめ Guzzle とは HTTP リクエストを送りたいとき、例えば、Web APIを叩きたい時、PHP では Guzzle という HTTP クライアントライブラリが最も有名で…

Mac はプログラミングにおすすめの PC ですが、どの Mac を買えば良いのか

僕はエンジニアとして働いていて、開発には MacBook Pro を使っています。そんな僕が、2021年おすすめの Mac を紹介していきます。 なぜ Mac なのか どの Mac が良い? MacBook の中でどれを選択したら良い? MacBook Air をどういうスペックにするか MacBoo…

PCの古いモニタを安く簡単に処分する方法

モニタは粗大ごみで回収不可 リネットジャパン 2枚のモニタを回収してもらった 感想 先日、ウルトラワイドのモニタを買った記事を書きましたが、今回はモニタの処分についてです。 www.utakata.work モニタは粗大ごみで回収不可 モニタを買ったらモニタを処…

業務と個人でScalaを使って感じたScalaのメリット・デメリット

はじめに Scala をどこで使っているか 個人での利用: LGTMoon 会社での利用 Scala のメリット/デメリット 教育コストが高い 実装の負債化 実行時のパフォーマンスが良い コンパイルによるエラーチェックが強力 コンパイルが遅い まとめ コップ本 はじめに こ…

【PHP】Laravel で JSON 形式の Web API を実装する時に考えること

はじめに JSON 形式の Web API とは Laravel で JSON を返す基本的な実装 JsonSerializable インタフェースを使う JsonSerializable を使うと便利な点 想定外の例外が発生した場合の対応 Laravel デフォルトのエラー画面 Laravel のレスポンス形式は Accept …

PHP 8.0 / 8.1 で個人的にめっちゃ使いたい機能3選

はじめに PHP 8.0 / 8.1 で個人的にめっちゃ使いたい機能3選 名前付き引数(PHP 8.0) コンストラクタのプロモーション(コンストラクタ引数のプロパティ化) Readonly Property おわりに 余談: ドメイン駆動設計について はじめに 遅れました。この記事は P…

Golang と Cobra でサクッとコマンドラインツール作成

はじめに この記事は Go Advent Calendar 1日目の記事です。 qiita.com go でサクッとコマンドラインが作りたい 最近、よく行う処理を PHP でスクリプト化しています。 例えば、以下のような処理です。 CSVを突き合わせて差分を出す 動作確認のために開発環…

データベースのテーブルの正規化について、とにかくわかりやすく説明する

達人に学ぶDB設計 徹底指南書 はじめに: DB設計の重要性 テーブルの正規化 第一正規形 正規形と「更新時異常」 更新時異常とは 挿入時異常 削除時異常 修正時異常 関数従属性 第二正規形 挿入時異常について 削除時異常について 修正時異常 情報無損失分解 …

【Laravel】ServerError のレスポンスを Json で返すために Handler に実装を見る

Handler の処理を見ていく 最初の部分 次の部分 最後の部分 $request->expectsJson() Laravel は、デフォルトで例外をキャッチして、サーバーエラーの表示をしてくれる。 この処理を行っているのは、 App\Exceptions\Handler である。 このクラスは Illumina…

PHP + Laravel on Docker で MySQL に接続しようとして could not find driver at ...

環境 エラー内容 調査 環境 Docker の php:7.4.16-apache を利用 Laravel を利用 エラー内容 [2021-08-24 10:43:16] production.ERROR: could not find driver at /app/laravel/vendor/laravel/framework/src/Illuminate/Database/Connection.php:671) 調査 …

sbt のバージョンを 1.5.5 にしたら java.lang.NoSuchMethodError: scala.tools.nsc.Settings.bootclasspath()Lscala/tools/nsc/settings/AbsSettings$AbsSetting;

Scala + Play Framework のプロジェクトで、 sbt のバージョンを 1.3.9 から 1.5.5 にしたところ、以下のエラーが発生しました。 #9 87.82 [error] java.lang.NoSuchMethodError: scala.tools.nsc.Settings.bootclasspath()Lscala/tools/nsc/settings/AbsSet…

Scala sbt のバージョンを上げたら java.lang.RuntimeException: insecure protocol is unsupported

執筆時の sbt のバージョンが 1.5.5 だったので、 LGTMoon (https://lgtmoon.herokuapp.com/)で使っている sbt のバージョンを 1.3.9 から 1.5.5 に上げる作業を行いました。 sbt を 1.3.9 から、1.4.9 (1.4系の最新)に上げた際に以下のエラーが発生しま…

【PHP】autoload された class が定義されたファイルを確認する

結論 どういう時に使うの? Carbon と Chronos の例 Chronos と Laravel 結論 PHP の ReflectionClass を使えば可能です。 getFileName()); どういう時に使うの? PHP には autoload という機能があり、皆さん普通はこの autoload を利用しているかと思いま…

ショップディズニー1周年記念の 30% オフクーポンをプログラムから探す

作戦1: 画像のURLを推測する 作戦2: ページをクロールする 結果 ショップディズニーの、ネット通販サイトが1周年記念でキャンペーンをしていました。 その中で、「ページのどこかにクーポンが隠れている」というのがありました。 ショップディズニーのサイト…

Kubernetes チュートリアルで「ローリングアップデート」を学ぶ

はじめに ローリングアップデートとは 実際にやってみる アップデートの完了 ロールバック はじめに 前回、アプリケーションのスケールアップ/ダウンをやりましたが、その知識を使って、アプリケーションの「ローリングアップデート」をやります。 kubernete…

Kubernetes チュートリアルで「アプリケーションのスケーリング」を学ぶ

はじめに スケーリング 実際にスケールアップさせてみる ロードバランシングの確認 スケールダウン はじめに 前回、 Hello Minikube チュートリアルをやりました。 www.utakata.work 今回はその次のチュートリアルである「Kubernetes の基本を学ぶ」をやりま…

Hello Minikube チュートリアルで Kubernetes を学ぶ

Hello Minikube とは Minikube とは Mac に Minikube と kubectl をインストール Minikube の起動 Kubernetes のノードと kubectl Pod と Deployment Deployment の作成 Service を作成してコンテナにアクセス アドオンについて Kubernetes クラスタ上のリソ…

When authenticating requests to the Twitter API v2 endpoints, you must use keys and tokens from a Twitter developer App that is attached to a Project.

Twitter の v2 API を oauth 1.0a 認証で叩こうと思ったら、以下のエラーが返ってきました。 {"client_id":"21075140","detail":"When authenticating requests to the Twitter API v2 endpoints, you must use keys and tokens from a Twitter developer Ap…