空の下でひっそりと

てきとーに更新していきます。レーザーカッターや３Dプリンタが好き

Laravel Turboを使ってみた。（NextJSと比較してみる）

Laravel Turbo がいい感じと聞いたので、使ってみました。

claude codeに指示を出しながら軽く触ってみた感じなので、ブログの全般を書いてもらいました。

最後の個人的な感想部分のみ自分で書いています。

環境

  • Laravel 12
  • PHP 8.3
  • PostgreSQL 16
  • Laravel Reverb（WebSocketサーバー）
  • Tailwind CSS (CDN)

Node.jsを使わずに、Laravel Turbo Streamsでリアルタイムな画面更新を実現するチャットアプリケーションを作ってみました。

Laravel Turboの実装でやったこと

基本構成

Room（部屋）とMessage（メッセージ）のシンプルなモデル構成で、/room/{id}でアクセスできるチャット機能。

リアルタイム通信の仕組み

Laravel Turbo Streamsと Laravel Reverbを組み合わせて、以下の流れでリアルタイム更新を実現：

  1. メッセージ送信: フォーム送信でMessageController経由でDBに保存
  2. ブロードキャスト: MessageCreatedイベントをWebSocketで配信
  3. 画面更新: 受信側でTurbo Streamを適用して部分的にDOM更新
// MessageControllerでのブロードキャスト
broadcast(new MessageCreated($message));

// EventクラスでTurbo StreamのHTMLを配信
public function broadcastWith(): array
{
    $html = view('rooms._message', ['m' => $this->message])->render();
    return ['html' => $html];
}

フロントエンド側では、Pusher.jsを使ってWebSocketを受信し、Turbo.renderStreamMessage()でDOM更新を行います。

つまずいたこと・解決方法

1. Laravel Echoのコンストラクタエラー

最初はLaravel EchoライブラリでWebSocket接続を試みましたが、「Echo is not a constructor」エラーが発生。直接Pusher.jsを使用することで解決しました。

2. Pusherバージョン互換性問題

Pusher.js v8系で「cluster must be provided」エラーが発生。Laravel Reverbではclusterが不要なため、v7.6.0にダウングレードして解決。

3. 重複メッセージ表示問題

送信者が自分のメッセージを2回見る問題が発生： - 1回目：フォーム送信の即時表示 - 2回目：WebSocket経由での受信

解決策として、送信者もWebSocket経由でのみメッセージを受信するよう変更。フォーム送信は非同期化し、JSON応答のみ返すようにしました。

// 非同期フォーム送信
document.getElementById('messageForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const response = await fetch(this.action, {
        method: 'POST',
        body: new FormData(this)
    });
    if (response.ok) {
        messageInput.value = '';
    }
});

Next.jsなどのJSフレームワークとの比較

Laravel Turboの利点

  • 学習コストの低さ: 既存のLaravelスキルで実装可能
  • サーバーサイド主体: ロジックがバックエンドに集約される
  • SEO対応: サーバーサイドレンダリングが標準
  • 軽量: Node.js環境が不要

制約・課題

  • リッチなUI: 複雑なインタラクティブ要素は実装が困難
  • クライアントサイド状態管理: Reactのような状態管理ライブラリがない
  • エコシステム: JavaScriptエコシステムほど豊富ではない

使ってみた感想

個人的にはLaravel Turboかなりいいと感じました。ただ、Reactを使った時はコンポーネントによるUI側の整理などもできるため、システムが大きくなってくるとReact側がいいのかな？と思いました。

一部分だけでbroadcastさせたい時のシステム開発はLaravelだけで足りる可能性がありそうだなと感じたし、開発環境がシンプルになるので、個人的には好きだな〜と思いました。

まとめ

Laravel Turboはとてもいい。

Claude Code Extension for VS Codeを使ってみた

Claude Codeを試したい

コードの生成を試したく、いろいろ情報を取得していました。

現在、Github Copilot Proの年間プランを契約しているため、Pro Plusにアップグレードする案と、Claude Codeで悩んでいたのですが、Claude CodeのVScode拡張機能がある、ということでClaude Codeを試してみることにしました。

セットアップ

❯ node -v
v23.11.0

❯ npm -v
10.9.2

# claudeをinstall
❯ npm install -g @anthropic-ai/claude-code

❯ claude --version
1.0.31 (Claude Code)

拡張機能をvscodeにインストールし、ファイルタブの右上にあるclaudeのアイコンをクリック。 ログインを求められるので、1のCluade account with subsctiptionを選択。

ブラウザが開かれるので、課金しているアカウントでログインします。

注意事項を読み、Enter。 Recommend settingはYes。 フォルダーの信頼はYes。 を自分は選択しました。

初期構築

/init

その次はもう作り始めてみる。

nodejsでtodoアプリを作ってください。

何回かサーバーの起動に失敗したけど、「サーバー起動に失敗する原因を教えてください。また対策を行い起動してください。」と指示を出すと、うまく起動してくれました。

追加、編集、削除と基本的な機能がそろったTodoアプリの完成です。

面白すぎた

初めてのagent使用となりましたが、神すぎました。

家にPC１つ買って置いといて、動かし続けられると熱いなーと思い、ハードオフ回ってみたけど、思いつきでPC買うのは流石に躊躇しちゃいました。。。

でも、放置でアプリを作れるのは本当に楽しかったです。ぜひ使ってみて！

ソフトウェアエンジニア１時間チャレンジ（１回目）

なんか作りたいな

一応自分はエンジニアです。

仕事でコードを書いているといはいえ、「別の言語触ってみたいなー」、とか「こうやったらもう少し早くコード書けるようになるかもなー」とか仕事中に思ったりします。

ということで、「早くコードを書けることは大切だがプレッシャーがない状態でやりたい！」という願望を叶えるべく、お題を決めて１時間でどれくらいできるのか、というのをやってみます。

ルール

１、作業は原則一時間で絶対に終わる。

２、タイムスケジュール：お題を30分くらいで決める→1時間作業する→30分振り返りも兼ねてブログ書く。

３、続きをやってもいいし、新規で始めても良い。

４、Github管理にする。（ファイル管理だといつか絶対に復元できなくなる）

そんな強くは縛らない

ルールはいろいろ書いたけど割とゆるめに設定したつもりです。1週間に2回くらいできるといいな〜。

それと、たまに3Dモデルを作りたい、とも思っているのでコードじゃない日が現れるかも。

まとめ

このブログはとりあえずの記録で書いていきます。もしまとまった技術ブログみたいなのが書けそうな情報が揃ったらNoteかZennにでも書いみようかなという感じにします。

コンタクト変えたので眼科にいったら目に小さな傷がついてた

コンタクトを変えた

このJINSコンタクト、いい感じにフィットするんです。

コンタクトつけ始めてからほぼずっとMagicというコンタクトを使ってました。でもゴロゴロすることも多く自分にあってないなーと思ってました。なので、JINSのコンタクトをお試ししてみたところ、とてもフィット！

継続して買うようになりました。

ただ、目の状態が全くわかりません。前回は眼科とメガネ一番が一体になっている店舗で購入したので検査したのですが、いまの自分の目がどんな状態になっているか不安でした。

ということで、眼科に行ってみることにしました。

裸眼とコンタクトありの状態で検査

まずは裸眼の視力検査をしました。

結果は0.1,0.1で左右ともに悪くなっていました。日々のパソコン作業とスマホが原因です。これは仕方ない、、、

次に、裸眼の状態で先生にみてもらったところ、目の周辺に少し傷がついていて、こういった傷が真ん中にあると、少し見えづらくなるらしいです。ちょっとだけ怖くなりました。😱

コンタクトありの状態もみてもらいました。

左2.5、右2.75のコンタクトレンズを使っています。視力は0.9,1.0で3年前より少し落ちてるけど日常生活は全く問題ないくらいでした。

ちなみに、両目の差はほぼないので、同じ度数でもいいとのことでした。次は同じのを買おうかな。

両目3.5だと1.2見えるようになるらしいので、度数UPもいいなーと思ってます。

今後の対応として、修復できる点眼液を処方してもらいました。ほんとに治るのかな？と不安ではありますが、継続して通っていこうかなと思います。

コンタクトつけてるなら眼科に検査に行った方がいいかもよ

たぶん、目の傷はコンタクト関係ない可能性が高いと思います。週２くらいでしかコンタクトをつけていません。でもコンタクトをつけてる以上、目の状態が悪くなりやすいと思うので、気を付けていきたいなと思っています。

正直目に傷がついているなんてわからなかったので、眼科にいってよかったなと思いました。またどんな状況になったか書こうかなと思います。

Laravelで簡単に開発環境を作る方法。Laravel hardを使ってみる

Laravelの開発環境が簡単に作れる

とあるチュートリアルで紹介されていました。

Laravel Herd

チュートリアルはこちら

https://laracasts.com/series/30-days-to-learn-laravel-11/episodes/1

うまく動くとこんな感じの画面が表示されます。

dockerでLaravelの開発環境作らないの？

もともと自作のdocker-composeファイルがあり、それを使って初期構築を行っていました。今回Laravel hardで環境構築している理由は、自分の知らないツールを使ってみたかった、触ってみるチュートリアルの内容がそれだったから、というだけの理由です。

なんでLaravel？

Laravel、、、phpで簡単にwebアプリケーションが作成できるLaravelが結構好きです。

ですが、最近はLaravelを使ったアプリの開発の案件もないので、触っていませんでした。

そこで、こんなチュートリアルを見つけたので、暇つぶしがてら触ってみようと思います。

日本語字幕があるので、それなりに理解もしやすそうです。

https://laracasts.com/series/30-days-to-learn-laravel-11/episodes/1

 

ChatGPTのAPIを久しぶりに使おうとした時にBillingのエラーが出た

Billing Setting

ChatGPTを2023年の4月に触って以来、久しぶりに触ろうと思った時に下記のエラーがで続けて困っていました。

 

You exceeded your current quota, please check your plan and billing details.

 

原因は課金設定が旧プランになっていたこと

Billingのページにいくとずっと0.00$と表示されていました。てっきり今月の使用量かと思っていたのですが、これがどうやらcredit（使用可能な課金額）の残高になっていたみたいです。

 

おそらく、使った分だけ課金から、事前にチャージして使ってね、みたいな変更がされていたようです。知らなかった。

 

ということで、旧プランをキャンセルして新しいプランに変更したらうまく動くようになりました。

 

去年使った時はうまくいってたので、そこは関係ないと思ってた、、、

javascriptの変数の一括宣言には落とし穴

Javascriptで一括で次のように変数を配列で宣言した場合、最後の変数にしか反映されないということを知りました。
let array4,array5,array6 = [];
 
Javascriptでこのようなコードがあります。
四行目のこのコードは一括で変数を宣言できているように見えます。
let array1 = [];
let array2 = [];
let array3 = [];
let array4,array5,array6 = [];
Logger.log(array1);
Logger.log(array2);
Logger.log(array3);
Logger.log(array4);
Logger.log(array5);
Logger.log(array6);

しかし、出力結果は次のとおりになります。

[]
[]
[]
null
null
[]

一括で配列宣言しようとしても、四行目の書き方だと最後の変数にしか配列宣言ができないようです。