クラウドサイン事業本部の田邉(𝕏@s_tanabe_)です。 フロントエンドの開発に携わっているみなさんは、バックエンドや BFF(Backends For Frontends) の開発を待たずにフロントエンドの開発に取りかかりたいと考えたことはありませんか？ これが実現できると フロントエンドでの不確定性を早いうちに潰しておける バックエンドと並行してフロントの開発を進めることができるようになる など開発の高速化につながるメリットを享受することができます。 そしてこれを実現することができるようになるツールこそが Mock Service Worker です。 以降では Mock Service Worker を MSW と略称で呼ぶこととします。 MSW を導入した背景 前提 MSW（MockServiceWorker）とは Next.js で MSW を使えるようにする MSW の運

まずはこちらをお聞きください。 技術的解説: ボタンを a 要素で作るな a 要素は URL などへのリンクをつくるためのもので、button 要素はなんらかの処理を起動するボタンをつくるためのものです。 配置されるものがリンクなら a 要素で実装し、ボタンなら button 要素で実装すべきです。 これに違反すると、意図しない動作や、アクセシビリティ上の問題が発生します。 これは MDN でも詳しく説明されています。 onclick イベント -- \<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。 これらの偽の

クラウドサインのフロントエンドエンジニアの辻@t0daaayです。 2024 年 9 月 1 日に Vue 3.5 のリリースが発表されました。 https://blog.vuejs.org/posts/vue-3-5 このブログでは、このリリースノートを読みリリースされた内容を実際に動かしてみたり、さらに調査した内容についてまとめました。 Reactive Props Destructure の安定化 https://vuejs.org/guide/extras/reactivity-transform.html#reactive-props-destructure props が分割代入の形式でもリアクティブを保てるようになりました。 書き方がかなり簡潔になっています。 const { count = 0, msg = 'hello' } = defineProps<{ count?:

こんにちは2025年内定者の千木良です。現在は東京国際工科専門職大学4年生で、２０２５年４月に弁護士ドットコムに入社予定です。 ２本目の記事では、チーム開発では欠かせない思考を学べる「Team Geek」について大切だと思った点をまとめました。 学生と社会人の大きな違いは、チーム開発を行うかどうかだと思います。本書を読むと、チーム開発を円滑に進めるための知識が身につくためぜひご覧ください！ この本が必読書である必要性 Team Geekとは こんな人におすすめ Team Geekの重要ポイント チーム開発における重要な考え方 素晴らしいチーム文化を作る 文化とは 文化を気にかける必要性 外発的動機と内発的動機 さいごに この本が必読書である必要性 Team Geekを読んで私が感じたことは、Team Geekで大事にしている考え方がないとチーム内で余計な衝突が起きたり信頼し合える関係を築く

こんにちは、2025年内定者の千木良です。現在は東京国際工科専門職大学4年生で、２０２５年４月に弁護士ドットコムに入社予定です。 この記事では、弁護士ドットコムの必読書である「リーダブルコード」を読んだため、学生エンジニア視点で重要だと思った点をまとめた記事になります。 ボリュームがある記事になってしまいましたが、この記事を読むだけでエンジニアとして一回り成長できる内容になりましたのでぜひ最後まで見てもらいたいです！ この本が必読書である必要性 リーダブルコードとは？ こんな人におすすめ 本書の重要ポイント 名前の命名を意識しよう 名前に情報を埋め込む 誤解されない名前にする コメントする際はなぜ記述するのか考えよう コメントの目的を考える コメントは正確で簡潔に コメントを書く癖をつける 変数を意識して使う 変数を削除する 変数のスコープを縮める さいごに この本が必読書である必要性 こ

こんにちは。クラウドサイン事業本部 QAチームの田中です。 先日、自動テストツール「mabl」のユーザーイベント「mablers.jp」にて、APIテストをテーマに登壇させていただく機会がありました。 今回は、スライドでお伝えしきれなかった部分を中心に振り返りながら、登壇レポートを書かせていただきます。 登壇資料 アーカイブ動画 発表内容 なぜAPIテストを導入したか 何故mabl で取り組んだのか 具体的な取り組み 効果 課題と今後の展望 参加者の反応 まとめ ※イベントの詳細情報はこちらをご覧ください。 登壇資料 資料はSpeakerDeck に公開しております。 アーカイブ動画 この登壇はYouTubeにアーカイブ動画を公開しております。 発表内容 今回の発表は「APIテストで見えた新しい未来」と題し、クラウドサインの環境へのAPIテストの導入プロセス、具体的な効果、今後の展望などを

こんにちは、藤谷(𝕏@fujitanien05)です。 2024/7/1より弁護士ドットコム株式会社クラウドサイン事業本部 Reliability Engineering部 CREチームに転職して、1か月が経過しました。 何事も最初の新鮮な気持ちって大事なので、この新鮮な気持ちを残してみます。 クラウドサインのCustomer Reliability Engineeringについて CREは「Customer Reliability Engineering」（顧客信頼性エンジニアリング）の略で、顧客の信頼性を担保することを目的としてGoogleによって提唱されました。 クラウドサインのCREチームでは、CREを「CREing Engineer（CREをやっているエンジニア）」と捉えています。 顧客がどんな課題に直面していて、根本的に何に困っているのかをエンジニアリングの視点から追求するこ

クラウドサインのフロントエンドエンジニア ツノです。 みなさんは Design the Partnership Alliance（略して DPA）についてご存じですか？ DPA とは、スクラム開発でのふりかえりの場を作るために行うワークショップの 1 つです。この記事では、チームの形成期に DPA を実践して得られた経験を共有します。 DPA に取り組んだきっかけ DPA とは 準備 実践 DPA DPA をやってみたふりかえり まとめ DPA に取り組んだきっかけ 現在所属しているスクラムチームのメンバーと「アジャイルなチームをつくる ふりかえりガイドブック（翔泳社）」の輪読会をしていました。 アジャイルなチームをつくる ふりかえりガイドブック(翔泳社) この本には、ふりかえりのためのワークショップが多数紹介されており、その中に DPA もありました。 私たちのチームが立ち上がったばかり

TL; DR Go HTML Template では、渡した文字列がデフォルトでエスケープされますが、Typed Strings を渡すとエスケープされません そこにユーザーが自由に指定できる値を設定すると、XSS 脆弱性につながる恐れがあります Revel の関数の中には、引数に渡した値を、内容はそのまま Typed Strings にして返すものがあります すべての条件が揃うケースは稀ですが、気をつけましょう Go の HTML テンプレート html/template は Go の標準ライブラリです。 他の言語にも存在するような、HTML へのテンプレート展開を実現してくれます。 以下のコードが <!-- greeting := "hello!" --> <p> {{ .greeting }} </p> このように変換されます。 <p> hello! </p> 便利な一方で、変数を

こんにちは。クラウドサインでプロダクトマネージャー（PdM）を担当している中井です。 2024年もあっという間に4月。東京では桜の見頃が過ぎ、桜吹雪が綺麗ですね。 そんな中、2024年4月10日、株式会社ラクスと弁護士ドットコム株式会社と合同で「【弁護士ドットコム × ラクス】PdM Meetup〜ビジョンを成功に導く効果的なPdM組織とは？」をオフラインイベントとして開催しました。 今回の記事ではイベントの雰囲気とともに発表内容の一部をご紹介します。 イベント概要 rakus.connpass.com 本イベントでは、BtoB SaaSサービスを展開する2社（弁護士ドットコム株式会社、株式会社ラクス）がプロダクトマネジメントの在り方についてディスカッションを行いました。 両社の製品は、BtoB SaaSであるという点は共通していますが、製品フェーズも、製品価値も異なりますし、PdMを取り

弁護士ドットコムで働く人事部 労務チームの後沢です。 弊社には様々な部活があるのですが、私は某アイドル事務所を応援する部活に入り、大好きなアイドルグループ Kis-My-Ft2 を応援することに生きがいを見出しております。 しかし、昨年、事件が起きました。 生きがいであるアイドルグループKis-My-Ft2のメンバー北山宏光くんが2023年8月31日にグループを脱退し、事務所も退所することになったのです。 www.oricon.co.jp 仕事の憂さは、推し活で晴らし、日々生きながらえているのですが、この事態だけはどうにも受け止めることができません。 忘れるために熱心に仕事をしていたら、推し活の憂さを仕事で晴らす結果となったので、せっかくだからブログにしたためました。 （エンジニアでもない私が、GASを書くきっかけは、こちらをお読みください。） creators.bengo4.com これ

こんにちは。税理士ドットコム事業部の @komtaki です。 ChatGPT が 2022 年 11 月 30 日に出て一年が経ちました。みなさんも生成 AI を本番サービスで活用できてますか。 弁護士ドットコム株式会社でも実運用の壁を乗り越えて、実際にビジネスを変革するため本番サービスへの活用が進んでいます。「Developers Summit 2024」で市橋がプレゼンしていますので、よろしければご覧ください。 GenAI in Production～生成AIに君がみた光と、僕がみた希望～ / 20240215_devsumi2024 - Speaker Deck その事例を踏まえて、社内システムで生成 AI を組み込む流れとその勘所についてお話しします。生成 AI のカスタマイズに関する専門的な話（ファインチューニングや RAG など）には一切触れず、プロンプトエンジニアリングだけ

クラウドサインのフロントエンドエンジニア辻です。 現在所属しているスクラムチームで、はじめてモブプロを実施しました。 その結果、チームに非常に良い結果をもたらしたため、実施した経験とその中で得られた成果について書いていきます。 モブプロとは 前提 今回実施したモブプロ 目的 役割 進め方 ツール mob 1. セッションの開始 2. ドライバーの交代 3. セッションの再開 4. セッションの終了 Live Share (Visual Studio Code) canvas (Slack) 実施詳細 成果 効率的な問題解決と意思決定 コードレビューの効率化 知識共有の促進 見落としや修正点の早期発見 実装経緯の共有 心理的安全性の向上 まとめ モブプロとは モブプロ（モブプログラミング）とは、複数の開発者が 1 つのプロジェクトやタスクに取り組むソフトウェア開発の手法です。 チーム内で、1

Gmailが「メール送信者のガイドライン」を改訂し、なりすましメールへの対策を強化する旨を発表しています。今までは原則、なりすましメール対策の有無にかかわらず、メールはいちおうは届いていました。しかし今後は、なりすましとみなされたメールは届かなくなる方向に向かいつつあります。 なりすましメールとみなされないようにするために、メール送信者には、「メール送信ドメイン認証」への対応が求められます。メール送信ドメイン認証の技術には、主に以下の3つがあります。 SPF: Sender Policy Framework (RFC 7208) DKIM: DomainKeys Identified Mail (RFC 6376) DMARC: Domain-based Message Authentication, Reporting, and Conformance (RFC 7489) SPFは従来

この記事は、弁護士ドットコム Advent Calendar 2023の25日目の記事です。 前日は tsuchiya さんの「ログや例外についてレビューや実装時に意識していること」でした。 はじめに: 人と成りては童子のことを棄てたり インターネットの海には、不幸な開発プロジェクトの話が溢れています。例えば「とにかく言われた通りに作ればいいんだ」「スケジュールにコミットしろ」「遅れは徹夜で取り戻せ」「障害を起こしたら減給だ」など*1。 プロダクト開発に携わる人であれば、こうしたやり方が無意味どころか逆効果であることはご存知でしょうか。では、なぜこうしたやり方が提唱されてしまうのでしょうか。 それは、旧来のビジネスの常識*2に照らせば、ある意味でまっとうなやり方だからです。問題は、プロダクト開発においてはビジネスの常識が通じないことにあります。 (加えて、にも関わらず旧来の常識が押し通され

この記事は、弁護士ドットコム株式会社の Advent Calendar 2023 の 22 日目の記事です。 前日は @et_tei さんの「FireHOL で公開されているブラックリストからの接続 Akamai でブロックする」でした。 こんにちは。税理士ドットコム事業部の @komtaki です。 数年間 TypeScript を業務で使っていたのですが、型パズルの Type Challenges をやってようやく TypeScript の本質を理解していないことに気づきました。 この記事では Type Challenges を通して、私のような型パズルが難しいと感じる人のために型パズルを理解するための言語機能と使い方を 8 つのポイントでまとめます。 この 8 つのポイントを理解すれば、いろんな型パズルが理解できるようになるはずです。 Type Challenges とは TypeS

この記事は弁護士ドットコムAdvent Calendar 2023の20日目の記事です。 昨日は @dskymd さんのOptimistic Updateに触れてみる でした。 はじめに こんにちは、弁護士ドットコム本部 デザイナーの林です。 去年のアドベントカレンダーはデザイントークンの記事を書いたのですが、今年は弁護士ドットコムのデザインシステムの取り組みを俯瞰した振り返り的なお話をしたいと思います。ノウハウではなく過去からの学びですが、下記のような方々に読んでいただけると良いのかな、と思っております。 これからデザインシステムを始める方 デザインシステムを始めたけれど、どこにリソースを集中したらいいのか迷っている方 qiita.com デザインシステムは捉えにくいもの デザインシステム‥この言葉をあなたはどう説明しますか？ そもそも、「デザイン」も「システム」も、一義的に固定された意

この記事は弁護士ドットコム Advent Calendar 2023の 17 日目の記事です。 前日は@Abbiscuitさんの投稿「デザイナーが Alpine.js を触って感じた Good なこと」でした。 こんにちは。 BUSINESS LAWYERS のプロジェクトマネージャーを担当している、こが @_poemn です。 私は 2023 年の 5 月に育休から復帰しました。 その後6 月から BUSINESS LAWYERS LIBRARY と弁護士ドットコムライブラリーの開発をするライブラリー推進グループでプロジェクトマネージャーを担当しています。 新米プロジェクトマネージャーながら何を考えどう振る舞ったのか、まだまだ足りないこれから意識したいことはどんなことかを整理して振り返ります。 主にやったこと 半年間でプロジェクトマネージャーとしてやったことはたくさんありますが、主に以下

この記事は「弁護士ドットコム Advent Calendar 2023」の 14日目の記事です。 前日の記事は @astkhs さんの「イマジナリーキャットと暮らしたい」でした。 とても真剣に猫を追求する内容がとても面白く興味深かったです！ タイトルだけで面白いのずるいです（笑） 弁護士ドットコム株式会社で、電子契約サービスであるクラウドサインの開発に携わっているエンジニアの神達です。 入社して2年経ったのですが、業務にて入社前には未経験だったスクラム開発をすることになったので、その過程と大事だと思っている内容をまとめてみました。 内容としてはマインド面の要素が多く、具体的なテクニックのようなものは少ないです。 まだ経験値は浅いのですが、似た境遇の方に参考にしていただいたり、単純に読み物として楽しんでいただければ幸いです。 対象読者 要約 前提知識 スクラム開発ってなに？ ん？？アジャイル

この記事は、弁護士ドットコム Advent Calendar 2023の13日目の記事です。 前日は @quickper さんの「地域防災から学ぶ平時の備え」でした。 災害が多くなってきている時代なのに、社会人になってから防災を学ぶ機会がないことに危機感を感じました。事前に知識・備えをしておくことの大切さを学んだ素敵な記事でした。 前置き：猫と暮らしたことがない人間の妄想している内容になります。猫飼いの先輩方、お手柔らかに見ていただけますと幸いです。 弁護士ドットコムのデザイナーの高橋です。 転職も挟んだリモートワーク生活が、来年で4年目に入ります。 SNSでは日々、多くの人が猫を飼うことで生活の質（QOL）が向上すると感じている発信していまよね。 猫との触れ合いはストレス軽減や心の安定につながる 猫と暮らすことで責任感が芽生え、メリハリのある日常生活が送れるようになる。 猫の遊び相手にな