はてなブックマーク

株式会社ココナラ、Web開発グループのフロントエンドチームでエンジニアをしているのんちゃんと申します！ 新卒で入社して2年目。社会人としての基礎を学びながら、少しずつ仕事にも慣れてきた頃、開発PM（テクニカルプロジェクトマネージャー、TPMとも呼ばれます）を任されることになりました。右も左も分からない状態からのスタートでしたが、この経験は私にとって大きな成長の機会となりました。 この記事では、私が新卒2年目で開発PMを経験した中で得られた学びや壁、そして成長についてお話しします。 開発PMとは？ まず、開発PMとは何かについて簡単にご説明します。 開発PMとは、プロダクト開発の効率化と品質向上を目指し、エンジニアリングの知見を活かしてプロダクト開発を推進する役割です。 具体的には、ロードマップに基づいたプロジェクト計画の策定、各タスクの優先順位付け、進捗管理、リスク管理、そして関係者間のコ

こんにちは！ 株式会社ココナラマーケットプレイス開発部アプリ開発グループAndroidチームでエンジニアをしております、Falconです。 久しぶり(実に1年半振り！)のテックブログ投稿になります。 今回は、リモートと出社のハイブリッド勤務がデフォルトになっている弊社で、あえて週5日フル出社してみたお話をしたいと思います。 (エンジニアの生産性について語っているので、これも「テックブログ」です。きっと。) 対象読者 弊社では原則、出社とリモートワークのハイブリッド勤務を採用しています。したがって本記事は「ハイブリッド勤務も選べるけれども、あえてフル出社してみたよ！」というレポート記事になります。以下の特徴に当てはまる方には参考になる内容かと思いますので、ぜひお読みください。 (逆に、どれか1つでも当てはまらない方には役立たない、あるいは当たり前すぎる内容かもしれません。あらかじめご承知おき

いかにしてココナラはCursor Businessを導入したのか? 〜生成AIツール導入のための社内調整術〜 はじめに こんにちは！！ 株式会社ココナラのエージェント開発部で Web エンジニアをしている、もちさんです。 ココナラテックというフリーランス向けのエージェント事業サービスの開発をしています。 この記事では、ココナラが生成 AI ツール Cursor のビジネスプランである「Cursor Business」を導入するまでの実践的なプロセスと具体的な成功事例、そして社内調整のためのノウハウを時系列とともに詳しくご紹介します。 昨今、生成 AI ツールを活用した業務効率の向上は IT エンジニアにとって、もはや開発現場で避けて通れないテーマとなっています。 しかし、「どのように上司を説得するか」「どのように社内承認を通すか？」という壁にぶつかり、導入への一歩を踏み出せずにいる方も少な

株式会社ココナラの情報システムグループ CSIRTチームのテトロドナです。 本記事では、EDRはどのようにして敵対的な行動を見つけるのかを解説していきます。 はじめに EDRとは、EDRはEndpoint Detection and Responseの頭文字をとった語で、従来の（とはいってもEDRの概念が初めて世に出たのがすでに結構前の話ではありますが）アンチウイルスソフトウェアと異なり、各エンドポイントの詳細なログを収集・分析することで、脅威が侵入した際の被害拡大を防ぐセキュリティソリューションの総称です。 従来のセキュリティ製品との違いとしては、既知のマルウェアのシグネチャや挙動パターンをもとに検知するような静的な動作のみではなく、任意のエンドポイントにあるプロセスがどのような動きをしているのかを、機械学習や振る舞い分析を取り入れ、未知のマルウェアも含めた包括的な悪意のある行動への対策

こんにちは。 株式会社ココナラ在籍のKです。 「時間がないからテストは後で書く」 そのような言葉を聞くたび、「テストを一緒に書くことでむしろ時間を節約できるのに、もったいない」と感じます。 本記事では、その理由を明確にした上で、私がよくやっているTDDをゆるく取り入れたテストの進め方をご紹介します。 対象読者 本記事は、以下のような悩みをお持ちの方に向けた記事です。 テストの重要性は理解しているものの、時間的な制約からテストを後回しにしてしまいがち TDDに興味はあるものの、難しそうでなかなか実践できない TDDのテストファーストという手法に馴染めない チーム内にテストの文化を広めたい 本記事の構成 大きく以下の2つの構成になっています。 テストを後で書くという考え方への考察 TDDをゆるく取り入れた実践手法 本記事におけるテストの定義 本記事で扱うテストは、主としてロジックのユニットテス

本記事は株式会社ココナラ Advent Calendar 2024 11日目の記事です。 こんにちは！株式会社ココナラマーケットプレイス開発部でQAチームのチームマネージャをしているまるです。今回はSlackのワークフローをDeno Slack SDKを利用して開発し、開発フローの一部を自動化した話をします！ 背景 まずは背景として自動化対象のフローから説明します。弊社では内部統制上、開発に対する承認をGithubのissueで管理し、Slackにて承認依頼を行っています。そして1つの開発に対して「開発着手」と「テスト着手」の2つの承認をそれぞれ得る必要があります。 またそれぞれの承認に対して承認部門が複数あり、この部門は開発のリスクレベルに応じて必要だったり不要だったりします。さらに開発部門の承認者は開発のリスクレベルに応じて変わります。まとめると以下のようになります😭 利用部門 (開

この記事は株式会社ココナラ Advent Calendar 2024 9日目の記事です。 こんにちは。世界から法律に関わる悩みをなくしたい高崎です。普段はココナラ法律相談という、弁護士の先生方と相談者のマッチングサービスをつくっています。 今年も大小さまざまなプロジェクトに関わってきましたが、その中でもこのチームや人は仕事の進め方がうまいな〜とか、なぜかスムーズに仕事が進むな〜と感心することが多くありました。 そういった人たちを観察して分かった共通点はプロジェクトの不確実性を下げるのがうまい、ということです。その中でこれは再現性高く汎用的に使えそう、と感じたポイントを3つまとめてみました。 そもそもプロジェクトにおける不確実性とはなんだろう？ タイトルにもある不確実性とはそもそもなんでしょうか？元々は経済学の分野などで使われる言葉ですが、とりわけソフトウェアエンジニアリングの世界では、プロ

上記以外にもAWS Summit 2024への出展や、iOSDC 2024・DroidKaigi 2024・Kaigi on Rails 2024へのスポンサードも行いました。 connpassの登録者数がこの1年間で500名増加するぐらい効果がありました！ まだまだこれからもメンバーを増やしていきます！ いくつか記事にしていますので、ぜひご覧ください。 これらの結果から総合的に分析しました。KPTで整理してみます。 Keep 主催イベントを増やせたことは特筆すべき成果。 共催イベントに参加するよりもターゲッティングやKPI設定、もろもろの準備で工数が必要なので、昨年は二の足を踏んでいた 今年は強力な仲間のお陰で施策数を増やすことができた ブース運営の経験値を積めた。 ブース運営の経験が多くなく、昨年はうまく機会を活かせなかったが、今年は事前準備で作り込むことができたので、Good Pro

本記事は株式会社ココナラ Advent Calendar 2024 2日目の記事です。 こんにちは。 株式会社ココナラでバックエンド開発に従事するかわむーと申します。 私は趣味で技術同人誌を執筆しており、技術書典や技術書同人誌博覧会などの技術同人誌イベントへサークル参加しています。 直近でも2024年11月2日から11月17日まで開催されていた「技術書典17」にサークル参加しました。 そこで、「鍛錬するとコードレビューがループする　〜へーしゃの技術戦略室室長が語ったコードレビューの在り方〜」（以降、「コードレビューループ本」と記載）という本を頒布していました。 最終的な頒布部数は、オフライン／オンライン含めて276部となりました。 本記事では、この「コードレビューループ本」についての裏側を記載します。 この本を執筆しようとしたきっかけ 前述の通り、私は技術同人誌の執筆を趣味にしています。で

こんにちは。世界から法律に関わる悩みをなくしたい高崎です。普段はココナラ法律相談という弁護士の先生方と相談したい悩みのある相談者のマッチングサービスをつくっています。 ココナラ法律相談はもうすぐリリース10年を迎える、それなりに歴史があるRuby on Rails（以後Rails）で実装されたWebサービスです。Railsは非常に洗練されたフレームワークで、迅速に機能を実装可能ですが、その反面自由度が高いがゆえに意図せず技術的負債を生み出しやすい傾向にあります。 この記事では、関数型ドメインモデリングという考え方を参考に、どのように普段のRails開発で一貫性を保った設計、実装を行うか検討します。またココナラ法律相談での実装例としてdry-monads を利用したワークフロー実装のコード例も紹介します。 関数型ドメインモデリングとは 関数型ドメインモデリングとは、「関数型ドメインモデリング

はじめに こんにちは。株式会社ココナラアプリ開発グループ、iOSチームのじょにーです！ 今回はiOSチームで最近導入したDependabotについて概要から設定方法、どのように運用しているかまでお話ししていきます。 Dependabotとは？ Dependabotはリポジトリ内の依存関係をチェックし、必要に応じてパッケージバージョンの脆弱性をメールなどで通知したり、バージョン更新用のPull Requestを任意のタイミングで自動的に発行してくれるなどの役割を担っています。 元々は独立したサービスでしたが、2019年にGitHubが買収し、現在はGitHubがホストしているbotサービスのひとつとなっています。 Dependabotは大きく分けて以下３つの機能が存在します。 Dependabotの機能 説明

こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井夏樹 です。 ココナラ法律相談というプロダクトのフロントエンド・バックエンド開発を担当しています。 よければXのフォローをお願いします！喜びます！ @superhahnah この記事ではフロントエンドテストの導入にあたり、私たちのプロダクトではどんなテスト戦略をとるべきかを調査・検討して得られた知見を共有します。 読んでくださる皆さんの参考になれば幸いです。 そもそもフロントエンドのテストって色々ありすぎてよくわからん 「〇〇テスト」っていう用語、本当にたくさんありますよね。 例えば… ユニットテスト(単体テスト) インテグレーションテスト(結合テスト) E2Eテスト(End to End テスト) 手動テスト ロジックテスト インタラクションテスト スナップショットテスト ビジュアルリグレッションテスト アク

こんにちは。 株式会社ココナラ Web開発グループ フロントエンド開発チームの加藤です。 普段はWebのフロントエンドの開発をしていますが、最近プライベートでFlutterの勉強も兼ね、アプリの個人開発をしました。 Flutterの開発言語のDartはJavaScriptに似ているため、フロントエンドエンジニアでも馴染みやすいと思います。 今回はそこで使ったAPIやパッケージの紹介・解説をします。 作ったもの チャットアプリのようなUIで気軽に国会の発言を見ることができるアプリです。 議員をフォローしてその議員の全発言を見たり、ワードをフォローしてそのワードが含まれる発言を抽出したり、会議を指定して議事録を見たりすることができます。 Androidアプリと、iOS用にWebアプリがあります。（Macを持っておらず、iOSアプリのビルドはできなかったため） API 概要 国立国会図書館が公開

こんにちは。 株式会社ココナラでバックエンド開発に従事するRKと申します。 みなさまはシステムのバージョンアップ対応をした経験はありますでしょうか？ システムの安定稼働に配慮して一定期間で実施している場合もあれば、利用しているライブラリや開発言語そのものの End Of Life（以降、EOL） によってバージョンアップを余儀なくされて実施した場合もあるでしょう。 どちらにせよ、ユーザーの皆様に安心してシステムをご利用いただくためにも、バージョンアップ対応はとても大事な作業の1つとなります。 弊社ココナラでも、もう少しでEOLを迎える／迎えた開発言語や環境を持つシステムは存在します。 本記事では、ココナラのとあるシステムのバージョンアップ作業対応を実施した際の私自身のふりかえり内容を記載します。 本当にこの記事を過去の自分に送って読ませたい。 なお、弊社ではすでにバージョンアップに関連する

はじめに こんにちは！ 株式会社ココナラの募集部のマーシャです。７年くらい前に日本に来て、６年間日本で働いています。私はコミュニケーションの専門家ではありませんが、西洋文化圏から来ており、内向的で、見た目も異なるため、コミュニケーションの違いに気付きやすく、それがなぜそうなるのか、どうすればより効率的にできるのかを考える傾向があります。今までの経験を通じて、以下で具体的にお話ししますが、いくつかの一般的なコミュニケーションパターンに気づきました。これらの一部は文化に起因し、効果を発揮しています。しかし、それらを認識し、少し努力することでさらに職場でのメリットを得ることができると思います。また、コミュニケーションをより親しみやすくするために絵文字を使用するような一般的なアドバイスではなく、実践的な戦略に焦点を当てていきます。 ※ 研究大学出身で論文のように固く書く傾向がありますが、基礎的な話

こんにちは。 株式会社ココナラのインフラ・SREチーム所属の かず です。 システム運用において、有事の際に迅速かつ適切なシステム稼働状況の確認は欠かせません。 その手段の1つとして、ログの調査や分析の効率化は切っても切れない関係です。 システムが成長するにあわせ、ログの種類や量が多くなり、結果としてログの調査や分析が難しくなるのはよくある話かと思います。 弊社でもサービスのグロースに伴って、ログの種類や量が多くなり、結果としてログの調査や分析で課題を抱えていました。具体的には以下の2点です。 ログから原因調査を行うには、複数ログを横断・突き合わせが必要 ログの追跡に必要な情報がログに出力されない場合がある そこで、課題への対応としてログ調査基盤の構築を行いました。 本記事では背景や苦労したこと、効果についてご紹介します。 複数ログの横断調査実現に向けて ログ調査基盤の構築 苦労したこと

こんにちは！ 株式会社ココナラフロントエンド開発グループの雨嶋です。 最近の CSS の進化はすさまじいです。 今までは Javascript 数行で実装していた部分が CSS1 行で済んだりします。 ただ知ってないと使えないので、自分の勉強も兼ねて便利そうな CSS を 8 個選定しました。 大体モダンな CSS を選定したつもりですが、もうモダンではないものもあるかもしれません。 （いつからがモダンなのか、、） 本記事ではそれぞれ軽く説明するに留めますので、詳細については MDN Web Docs などで調べていただければと思います。 コンテナクエリ コンテナクエリは、要素のサイズに応じてスタイルを適用するための機能です。 メディアクエリのようにブラウザ画面の横幅などに応じてスタイルを適用するものではなく、要素自体のサイズに応じてスタイルを切り替えることができます。 コンテナクエリを使

こんにちは！ 株式会社ココナラのHead of Informationに任命された ゆーた（@yuta_k0911）です。 PagerDuty Advent Calendar 2023の18日目の記事です！ ココナラでは2016年からPagerDutyを使っています。（私が入社する4年も前から・・・） PagerDuty導入以前のオンコール運用や導入後から現在に至るまでどのような利用・工夫をしていて、今後どう利活用しようとしているか？をアドベントカレンダーの記事にしてみます！ 私の推し機能も紹介します。 ぜひ、PagerDutyを利用検討中の方もご覧ください！ 実は会社名義でアドベントカレンダーに参加するのはこれが初めてです💦 初歩的な内容が多いと思いますが、お付き合いください🙇‍♂ ココナラでのPagerDutyの使い方 PagerDutyを使い始めたのは私が着任する前ですので、想像

こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ

こんにちは！ 株式会社ココナラ フロントエンド開発グループのよしみんです。 本記事では、Vue.jsを使用して入力フォームのテキストエリアにリアルタイムでハイライト機能を自前実装した話をしたいと思います。 なぜ自前実装？ テキストエリアにハイライトなんてcssでつければいいんじゃないの？ テキストエリアにcssで装飾することはもちろんできますが、入力した文字に対するハイライトのような装飾の仕方はできません。 ライブラリを使えば簡単に実装できるのでは？ Vue.jsでテキストエリアにハイライトをつける機能のライブラリを調べると、下記のようなライブラリがヒットします。 ただ、ライブラリではtextareaのタグが含まれているものでした。 今回実装したいのはBuefyの入力フォームコンポーネントを使用している箇所であり、このコンポーネントでは既にtextareaのタグがラップされている為、適用す

こんにちは！ ココナラテックエージェント や Futurizm を始め、いくつかの新規事業開発を担当している大川です。 今回は、現在模索しているGraphQLのエラーハンドリングについて書いていこうと思います。 模索中ではあるものの、模索する上で調査した他社事例であったり、複数の選択肢の中から比較を行う観点等を掲載していますので、一部の方には刺さるのではないかと思い執筆することにしました。 背景 私たちのチームは、バックエンドでAPIを構築する際、Ruby on Railsを用いてGraphQL APIを構築する選択肢がファーストチョイスとなっています。 しかし、GraphQLのエラーハンドリングにはいくつかの選択肢があり、自分達に合う方法を見つけることが出来ていませんでした。 そこで、新しくGraphQL APIサーバーを構築することをきっかけに、改めて主流となるエラーハンドリングの方法

株式会社ココナラ DevOps開発グループ 業務システム開発チーム 所属のもりしたです。 前回は巨大リポジトリから会計システムを分離して開発生産性をあげた話という記事を書きました。 みなさんは業務システム開発チームという名前を聞いてどんなことをやっているか想像できますか？ 「業務のシステムを開発しているんでしょ？」でしょうか。 では、業務システムとは何でしょうか？👀 弊社にはエンジニアが多数所属し、役割によって、グループやさらにその配下のチームが細分化しています。その中でわたしが所属する業務システム開発チームがどんな役割をもって、どんな仕事をしているのかについて簡単ですが、ご紹介したいと思います。 どういう人たちと仕事するの？ 主に関わりがあるのは下記の３グループとなります。 その中でも特に関わりが深いのは１つ目の経理財務グループ💴です。 経理財務グループ（経理部門に相当） カスタマー

釣りタイトル容赦。なんてことありません、僕の失敗談です。 失敗談は好きですか？僕は大好きです。 他人の不幸はなんとやら。さぁ行ってみよう！ 1. 早すぎる最適化をしてしまう ドナルド・クヌース先生の、「早すぎる最適化は諸悪の根源」という言葉は、ソフトウェア開発に携わっている皆様であればそれなりに日々実感することであり、なんとなくでも直感的に共感できることと思います。 この言葉自体は、ソフトウェア開発の性能チューニングの文脈で語られるものだとは思いますが、僕はこの言葉、結構いろんな場面で使えると思いますし、使っています。 もちろん原義通り、パフォーマンスのための最適化という文脈でも当たり前のように意識したほうが良い言葉ではありますが、例えば抽象概念のモデリングや、コード品質の向上、ライブラリやアーキテクチャの選定といった場面でも使える概念ではないでしょうか。 「ここ」と「そこ」のロジックはな

こんにちは！ 株式会社ココナラのインフラ・SREチーム所属のおさだと申します。 本記事では、コンテナオーケストレーションのデファクトスタンダードであるkubernetesに対する弊社の取り組みについて紹介いたします。 ココナラのサービス開発の課題 こちらの記事でも述べている通り、弊社サービス開発には以下の課題があります。 現状アプリケーション基盤がEC2、ECS+EC2、ECS+Fargateに分散しており、運用管理コストや拡張性に課題がある 新規機能毎にインフラを構築する工数を確保出来ずに、既存アプリケーションの肥大化が進んでいる 既存アプリケーションに実装することにより、新規機能に適した言語を選択する幅が狭まっている kubernetesが上記課題の解決手段になりうるか、導入検討を進めております。 kubernetes導入検討でやったこと 直近では以下の対応を実施しており、それぞれ内容

こんにちは。 株式会社ココナラ フロントエンド開発グループの加藤です。 1年前、ココナラのフロントエンドは表示速度に課題があり、Google Search Consoleのページエクスペリエンスではモバイルの良好URLはたった1%しかありませんでした。 しかしその後パフォーマンス改善に取り組み、良好URL99%まで大幅に改善することができました。（記事の最後に実際のスクリーンショットもあります） この記事では、そこで行った改善内容を紹介したいと思います。 はじめに ココナラのフロントエンドは、主にNuxt + Vue.jsで作られています。 そこで nuxtjs/web-vitals を使ってパフォーマンスのログを取り、Grafanaで可視化しています。 Grafanaで可視化したページごとのLCP モバイルではLCP（Largest Contentful Paint）が2.5秒を超えてい

プロダクト開発部バックエンド開発グループでエンジニアをしています、おかだです。 ココナラには開発環境改善委員会があり、開発スピードの維持・改善に取り組んでいます。 本日は、取り組みの一環としてAppleシリコンのMacでのDocker開発環境のパフォーマンスを5-10倍程度改善したお話をしたいと思います。 はじめに AppleシリコンのMacが発表されてから数年が経ちました。ココナラでも昨年から導入が進んでおります。新しく入社したメンバへはM1 MacBook Pro(最近だとM2)が標準で支給されるようになっており、現在はIntel MacとM1 Macが混在して利用されている状況です。 バックエンドの開発では、ローカルでの動作確認や単体テストはコンテナ内で実行できるようになっています。 Dockerパフォーマンス問題 M1 Macを導入したメンバから 単体テストが遅い 静的解析が遅い

こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ

こんにちは。ココナラ法律相談 の開発をしているエンジニアの大川と高崎です。 ChatGPT、話題にならない日がないくらい話題ですよね。 先日の ChatGPTを駆使して実現したAIアシスタント機能の開発ストーリー に引き続き、ココナラ法律相談でもChatGPTを組み込んで既存機能を改善した話をしていきます。 ChatGPTを活用した機能を企画・開発するにあたってさまざまな課題がありました。 今回は、その課題を解決するにあたり、何に苦労しどう工夫したかについて書いていければと思います。 もうすでに取り組んでいる方、これから取り組む方のご参考になるのではないでしょうか。 つくったもの 法律Q&A投稿画面 の相談内容から相談タイトルを自動生成する機能をリリースしました。 ChatGPT導入後の投稿画面 背景 ココナラ法律相談はいわゆるメディアサービスであり、多くのユーザーがサイトを訪問し、コンテ