フロントエンド初学者が1時間でshadcn/uiを触ってみた【1時間シリーズ #1】

はじめに勉強しようと思っても「気づいたら時間が溶けていた」「何から始めればいいかわからない」「学ぶことの規模を大きくしすぎて途方に暮れる」ということが多く、学びはしていても定期的に続けられていませんでした。また、自分が取り組む作業がどれくらいでできそうかの見積もりが、全くあてに

TCA (The Composable Architecture) と MVVM の比較

TCA (The Composable Architecture) vs MVVMアプリ開発で新規プロジェクトを立ち上げる際、どの「アーキテクチャ」にするか考えることになります。本記事では、iOSのアプリ開発で採用事例が多い TCA (The Composable Archi

お父さん、ゲーム作れるの？ 🔖 3

2026年5月3日(日)僕は、子ども達と一緒にインディゲーム展示会 「東京ゲームダンジョン12」 に出展します。https://tokyogamedungeon.com出展するゲームは、3つ。僕：「Slime Ten Puzzle」長男：「人狼を基盤にした推理ゲーム

WebGPUでGPT-2をフルスクラッチ実装してブラウザで動かしてみた

はじめにWebGPU Compute Shaderを使って、GPT-2の推論パイプラインをブラウザ上でフルスクラッチ実装した。ONNX Runtime WebやTransformers.jsといった既存ライブラリには一切頼らず、行列積（GEMM）からAttention、Laye

ソニックムーブ入社前インターンの総括！

はじめに2025年12月、内定先のソニックムーブから会社貸与のMacBookProが届きました。個人開発で使い慣れたマシンとは違う、業務デバイス特有の安心感と少しの緊張感。ここから、僕の入社前インターンが始まります。この記事は、約3ヶ月間のインターンで経験したことの記録です

Kotlinのクラス委譲によるComposition

はじめに素直にコンポジションをやろうとすると、単に処理を横流しするだけのメソッドを大量に書く必要があり、ちょっと辛いです。override fun loginfo() { logger.loginfo() }　みたいなやつです。Kotlinだと、委譲がサポートされていて、b

Claude Code × devcontainer で起きやすいプロジェクトメモリ衝突と対策Tips

はじめにClaude Codeをdevcontainer内で使っていると、「あれ？別のプロジェクトの記憶が混ざってる...？」という現象に遭遇することがあります。Claude Codeのプロジェクトメモリは、作業中のプロジェクトを識別したうえで管理されます。通常はgitリポジ

LivewireとInertia.jsの長所・短所とユースケース 🔖 1

Livewire vs Inertia.jsこの記事を読んでいる方はご存知だと思いますが、Laravelの新規プロジェクト作成時にどういう構造のアプリが欲しいのかプロンプトがいくつかあります。その中から、比較するのはLivewireとInertiaJs。より良い選択できるように

普段コード書かない奴が落合陽一に触発されてCLIツールを作った話 🔖 6

きっかけ前提として、自分は普段あまりコードを書かない人間だ。肩書きとしてはエンジニアだが、最近は口を出すことのほうが多くて、自分の手でガリガリ実装する機会はめっきり減った。最新のフロントエンド技術やクラウドの進化にもついていけていない。React の最新機能も追えてないし、イ

GitHub Copilot CLI - hooksとalerterでタスク完了時に通知してくれる仕組み作った

はじめにGitHub Copilot CLIでタスクを依頼すると、処理が終わるまでターミナルを眺め続けることになりがちです。長めのタスクを投げて別の作業をしていると「いつ終わったかな？」とターミナルを何度もチェックしてしまう…という体験をしていました。そこで Copilot

Androidアプリで発生するUnknownHostExceptionの再現方法

Androidアプリで発生するUnknownHostExceptionの再現方法Androidアプリでネットワーク通信をする際に一部のユーザでUnknownHostExceptionが発生することがありました。その際にUnknownHostExceptionエラーを再現するた

GitHub Copilot CLIのSkillsを使ったissue駆動開発 🔖 3

はじめに株式会社ソニックムーブのmito1111です。近年、コーディング自体をAIに任せる「Vibe Coding」が広く普及し始めています。多くの開発者がAIを活用してコードを生成するようになりましたが、開発のトリガーとなるissueやチケットを作成したり、修正内容をまと

【Claude Code】Auto Mode 登場 — もう手動承認に振り回されない 🔖 2

!2026/3/12（現地時間）からリサーチプレビュー版の提供が開始される予定です。 こんな経験ありませんか？Claude Code で長めのタスクを回していると、こんな確認が何度も出てきますよね😅Do you want to proceed?❯ 1. Yes2.

LINE Messaging API - コピペで使える構成サンプル集

LINE Messaging API — コピペで使える構成サンプル集Flex Message・Template Message のJSONサンプルと、見た目の対応をまとめたページです。気になるサンプルをそのままコピペして使ってください。プロパティの完全な仕様は LINE

Compose導入で一番変わったのはUIではなく"State設計"だった

はじめに以前、Jetpack Composeを段階的に導入した話を書きました。実際に運用を続けてみて感じたのは、一番変わったのはUIの書き方ではなく、状態（State）の設計だったということです。Composeは単なるUIフレームワークではありません。状態設計がで

初めて新規メンバーをオンボーディングしてみての反省会 🔖 1

はじめにバックエンドエンジニア3年目の松崎です。僕が参画している運用案件に新卒のメンバーが新たにアサインされ、そのオンボーディングを担当することになりました。僕自身、新卒1年目の頃からこの案件に携わっていますが、他メンバーをオンボーディングする経験は今回が初めてです。この

Nuxt3 SPA を Flutter WebView に組み込む — 双方向通信の全体設計 🔖 1

この記事で分かることFlutter アプリ内の WebView で Nuxt3 SPA を動かす構成の全体像Flutter → Nuxt（Flutter が Nuxt 側の関数を呼ぶ）の実装方法Nuxt → Flutter（Nuxt が Flutter にメッセージを

【RDS】メジャーバージョンアップデートでTerraformを4回叩いた人のおはなし -本当は2回で済む-

はじめにこんにちは。株式会社ソニックムーブでバックエンドエンジニアしているmugiです。インフラだけでなくバックエンドのコードを触る機会も増えてきて、とても幸せな気持ちになっています。今回はインフラでぶつかった課題についての共有です。terraform初心者の私はベストプ

ページ全体のスクリーンショット（Capture full size screenshot）がうまく取れない！

はじめにフロントエンドエンジニアの usako です。「ページ全体のスクリーンショットをいただきたいです！」ディレクターさんなどにこのような依頼を受けたことはないでしょうか？この記事では、ページ全体のスクリーンショットをなるべく簡単に作成する方法をご紹介します。 経

いい加減重い腰を上げてNeovimへ移行した 🔖 4

知人の話などから移行したいとは思っていたものの、 最近は仕事ではIDEでの開発が多くVimを使い込む機会もそこまでなく、騙し騙しVimを使い続けてしまっていました。いい加減そろそろかなと思い年末年始の休みを利用して移行したのでざっくりまとめます。 移行したプラグイン・所感

Claude Codeのセッションをコミットに残すEntire CLIを試してみた 🔖 4

Claude Codeで開発していると、PRレビューのときに「この差分、どの指示から出てきたんだっけ」となることが増えてきました。3日前の自分のPRですら判断の経緯が思い出せない。人間が書いていた時代ならコミットメッセージに意図を残せばよかったのですが、AIとの対話で生まれたコー

AI駆動開発で分かった、AIと正しく付き合うためのポイント 🔖 1

近年AIが急速に発達し、Webエンジニアなら基本的にAIにコードを書かせることも可能な世の中になってきました。すごい時代です。。。！！そんな時代なので個人開発等ではAIに開発をとりあえず任せるみたいなところも増えてきたのではないでしょうか？ですが、AIがコーディングしてくれる時

【Cursor】利用制限に引っかかった私のNG行動と、現在意識していること

はじめにCursorを使っていると、気づけば「利用制限」にかかってしまっていた……という経験はないでしょうか？私はあります。便利すぎてついつい使い倒してしまいがちですが、実は何気ない操作が原因で、無駄にトークンを大量消費していることがあります。この記事では、利用制限にかかっ

フロントエンドエンジニアとして働いて気づいたこと

はじめにこんにちは！私はエンジニアとして働き始めて4ヶ月になります。フロントエンドエンジニアとして働く中で、この仕事の楽しさや、エンジニアとして大切だと感じたことに少しずつ気づくようになりました。まだ経験は浅いですが、感じたことを共有したいと思います。 幅広い言語に触

AI組織にナレッジベースを与えたら知識が爆増した

複数のAIエージェントが知識を共有して動作する「AI組織」を構築しました。構成は Slack + Webサービス(MCP含む) + Claude code + Elasticsearch。Slackで「これを調べて」と投げると、AIが調査を行い、結果をElasticsearc

Xcodeのcoding intelligenceに、さくらのAI Engineを使ってみる

Xcodeのcoding intelligenceのモデルに、さくらのAI Engine（無償プラン）を使ってみます。 XcodeとMacOSのバージョンXcode 26MacOS TahoeXcodeのcoding intelligenceを使うにはXcode 2

Compose Preview Screenshot Testing

はじめにこの記事では、Compose Preview Screenshot Testing について解説しようと思います。iOSのUIテストだと、SwiftSnapshotTesting などがあると思うのですが、AndroidのUIテストでも便利そうなのがあったので、軽く触

【Zod】使い始め2ヶ月間の使用傾向を調べてみた

はじめに実務で Zod を使い始めてから約2ヶ月が経ちました。フォームのバリデーションでよく使用しているのですが、どの API を多用していたのか今振り返ると改善できそうな点はどこかといった点が気になったため、自分自身の振り返りを兼ねた Tips 集としてこの記事を

Amazon EventBridgeでのcronの書き方まとめ

はじめにバックエンドエンジニアの角方です！「特定の時間にスクリプトを自動実行したい」 そんな時に欠かせないのが cron（クーロン） です。しかし、いざ設定しようとすると「曜日の数字、0だっけ1だっけ？って毎回調べてる…」「そもそもcronの書き方、何度設定しても覚えられな

RSA暗号の数学的原理をゼロから理解する

はじめに!本記事は筆者が学習した内容をまとめたものです。内容に誤りがある可能性がありますので、誤りを見つけた場合はコメントでご指摘いただけると幸いです。RSA暗号の安全性の根拠として、「大きな数の素因数分解が難しいから」とよく言われます。今回は、「なぜそれで暗号化と復号が

terraform-docsでTerraformモジュールのドキュメント自動生成を始める

はじめにTerraformモジュールを作成する際、READMEの作成・更新は面倒な作業です。変数を追加するたびにREADMEを手動で更新するのは手間がかかり、ドキュメントと実装の乖離も起きやすくなります。terraform-docsは、Terraformの設定ファイルからドキ

AWS CLIで学ぶAmazon Bedrock AgentCore Memory

はじめにAWS Bedrock AgentCore Memory は、AIエージェントに「記憶」を持たせるためのマネージドサービスです。会話履歴の保存だけでなく、会話から重要な情報を自動抽出し、後からセマンティック検索で取り出すことができます。この記事では、AWS CLI を

Amazon Bedrock AgentCore Runtime に最小構成のエージェントをデプロイする

はじめにAmazon Bedrock AgentCore Runtimeは、カスタムエージェントをAWS上でホストできるサービスです。公式ドキュメントではStrands Agentsを使った例が紹介されていますが、実際のところどこまでシンプルにできるのか気になりませんか？本記

売上130%成長・ARR2億突破・麻布台ヒルズへ。激動の2025年、ソニックムーブの軌跡

!この記事は クラウドワークス グループ Advent Calendar 2025の 25日目（最終日）の記事です。 はじめにこんにちは。株式会社ソニックムーブ代表の大塚です。昨年のAdvent Calendarでは「創業22年の歴史」をしみじみと振り返らせていただき

WebGPUをもっと手軽に - TypeGPU

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の24日目の記事です。 はじめに: WebGPUとはWebGPUとは2023年に Google Chrome に正式サポートされ、WebGLの後継とされているモダンGPU AP

「再実行の恐怖」から救う冪等性の話

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の16日目の記事です。 1. はじめに：「何度やり直しても大丈夫」と言えますか？「この処理、失敗したからもう一回実行しておいて」そう言われたとき、あなたは自信を持って「はい、

【挑戦】アクセシビリティ対応のモーダルウィンドウを実装する【a11y】

!この記事はクラウドワークス グループ Advent Calendar 2025 シリーズ2の15日目の記事です。フロントエンドエンジニアの usako です。今年のアドベントカレンダーに参加させていただくことになりました。どうぞよろしくお願いします。 はじめにモ

社内のデザインを標準化するプロジェクトの振り返りと今後の展望

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の14日目の記事です。 はじめにジングルベルな季節になりました。今年は、プライベートではモンスターハンターワイルズに入れ込みました。はじめてハンターランクがカンストしたり複

ラーメン屋で理解するキューの仕組みとAWSでの実装方法

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ 2 の 13 日目の記事です。エンジニアの福田です弊社のサービスである「Comsbi」では、キューの仕組みを利用してシステムの開発を行うことがあります。なんか使われてるなぁくら

自社サービスにAIチャットボット機能を導入した話

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ 2 の 12 日目の記事です。 はじめに顧客管理/マーケティングを目的とする、LINE拡張ツールを開発しております、@mitsuyashiです。2025年11月、LINEにA

MVVM+Repositoryを理解する

はじめにこの記事では、MVCに慣れていたエンジニアがMVVM+Repositoryの概念を理解するための解説をします。この記事の対象MVVM+Repositoryを学び始めた人得られる知識MVVMの手法各層でのAPI、データの扱い注意事項エラーハ

Storybookインタラクションテスト入門 ＆ Vitest Browser Modeとの比較

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ 2 の 11 日目の記事です。 はじめにこんにちは、ソニックムーブの原です 🐐現在弊社では、品質向上を目的にテスト実装を強化しているところです。その中で、Storybook

【Git】merge 済みなのに差分だらけ？　「Already up to date」と Revert の落とし穴

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2 の10日目の記事です。 はじめに概要: git merge をしても "Already up to date" と言われるのに、git diff を見ると差分がある現象に

多言語翻訳機能をWebサイトにお気軽導入！「GTranslate」を使う時のポイントとJavascriptでの検知方法

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の9日目の記事です。どうもこんにちは！！！クラウドワークスグループのソニックムーブで働いている安立です。今年もAdvent Calendarの季節になりましたね。今年はシリー

新卒1年目の頃に書いたコードを読み直したら汚すぎて体調が悪くなった話 🔖 1

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の8日目の記事です。!この記事に引用として出てくるコードは自分が実際に書いていたコードに改変や脚色を加えたものです。ご了承ください。 はじめに汚すぎて読んでいると体調が悪

AIにテストコードを書かせてみた

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の7日目の記事です。 はじめに担当している案件にて、AIにテストコードを書かせてエンジニアの負担を減らそうという動きがありました。しかし、ただ何も考えずにAIに任せっきりにな

AI時代のワイヤーフレームFrame0 - Figmaに疲れたあなたへ

はじめに元々私はワイヤーフレームをFigmaで作成していましたが、最近はFrame0というAIを活用したツールで作成するようになりました。 「Figma疲れ」を感じていませんか？「とりあえずワイヤー作って」そう言われてFigmaを開いたものの、気づけばオートレイアウトの

eval()による黒魔術：PHPの深淵を覗く

はじめに"eval() is Evil"PHPプログラマなら誰もが一度は耳にする格言です。リフレクションやマジックメソッド（__call, __getなど）といったメタプログラミングは、柔軟な設計のために私たちもよく利用します。これらは強力ですが、あくまで言語仕様の枠内に収

1文変えただけでどこまで変わる？CopilotのCoT（Chain of Thought）検証 🔖 1

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2 の 6日目 の記事です。2025年現在、フロントエンド開発にもAIを使うことが当たり前になってきました。そこで疑問が生まれました。「CopilotにCoTを出させるかどうかで

Copilot を2ヶ月使って実感した「ずぼらでも成果が出るAI活用術」

!この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ2の5日目の記事です。約2ヶ月前から Copilot を使用しており、それまで触ったことのない自分にとっては革命でした…（今更過ぎるかもですが…🙄）特に “自分で工夫しなくても A