こんにちは、Ryotaです🐶ときはAIエージェント元年。生成AIの急速な進化により、ソフトウェア開発の常識は大きく塗り替えられつつあります。弊社でもこの潮流をチャンスと捉え、社内AIエージェント開発プロジェクト を立ち上げました。反復的なコーディング作業をAIに任せることで開発効率を飛躍的に高め、エンジニアが「機能設計」や「ユーザー体験の向上」といった、よりクリエイティブな上流工程に集中できる環境を目指しています。本記事でご紹介する「アノテーション駆動開発」は、AIエージェントによるUI自動実装の重要なマイルストーンです。これまで多くの工数を要してきたUI実装を、AIエージェ...

ML、深層学習、NLP、LLM、AIエージェント、特徴量…。気づけばAI前提の会話が社内外のビジネスシーンに入り込んで、これはもう無視できないと感じることが多くなりました。特に今年になってAIエージェントを目にするようになってから、さすがに「ふんふん」って相槌だけじゃごまかせなくなってきた、という危機感からの行動です。というわけで、AWS AI Practitioner に合格するために学習過程から得た知識を含めて書いていきます！ あんた誰？エックスポイントワンでPMを担当しています。最近は顧客と直接やり取りし、ヒアリングから要件整理・調査・顧客折衝・MTGの実施・WBS作...

はじめにApple は Android よりも細かくレビューガイドラインが定められており、アプリの審査が厳しい傾向にあります。審査でリジェクトされた場合、審査提出 → リジェクト → 修正 → 再提出のプロセスを少なくとも1回以上踏む必要があり、1回あたり約2日は期間を要します。クライアントからアプリのリリース日が明確に決められている案件では、1つのリジェクトがリリース日遅延のリスクに繋がることもあるので、要件定義など上流工程の段階からリジェクト対策をしっかり行いたい方もいるのではないでしょうか。Apple ではApp Review Appointment というものが用意...

はじめにエックスポイントワンでリードエンジニアをしているRenです。本記事ではNode.jsのアーキテクチャを解説しながら、なぜCPUバウンドな処理を書く際は注意する必要があるかを紐解いていきます。 Node.jsとはNode.jsは大量の同時接続をさばけるアプリケーションの構築を目的に設計されたJavaScript環境です。その根幹にあるのが「シングルスレッド」で動作する「イベントループ」です。 シングルスレッドとマルチスレッドプログラムの中で命令を実行する最小の作業単位を「スレッド（Thread）」と呼びます。スレッドには大きく分けてシングルスレッドとマルチスレ...

リリース後のプロダクト改善など、常に小さく試すことに価値がある開発フェーズには当てはまらないかもしれません。 この記事の主張複数ブランチで同時作業 + GitHub Copilot Agent Mode(AIエージェント)によって、生産性向上が見込めます。この記事では、その主張に至った経緯と複数ブランチでの同時作業のやり方の紹介をします。 「WIP制限」は本当に今も有効なのか？WIP（Work In Progress）制限という考え方があります。これは「同時進行する作業を減らし、マルチタスクによる生産性の低下を防ぐ」ことが目的です。https://www.atlas...

はじめにはじめまして。エックスポイントワンでリードエンジニアをしているRenです。今回は、新規開発のプロジェクトにおいて「スクラム」と「Findy Team+」を同時に導入し、開発メンバーの意識改革と進捗可視化を両立させることで、生産性を大幅に向上させた事例をご紹介します。 スクラム と Findy Team+ の概要 スクラム とはスクラムはアジャイル開発手法の一つで、2週間程度の短い「スプリント」を繰り返しながら機能を段階的に完成させていくフレームワークです。本記事では詳細を割愛しますが、興味のある方はスクラムガイド（日本語訳）をご参照ください。 Findy ...

はじめに2024年は、フロントエンド以外の開発経験がない状態から、フルスタックに様々なチャレンジをさせていただきました😀弊社では、全エンジニアがフルスタック開発に取り組んでいます。詳細については、以下の記事をご覧ください。https://zenn.dev/x_point_1/articles/8e982be93ca26fこの記事では、僕の2024年の1年間の取り組みを振り返ります。 技術面※詳細を省き、簡潔にやったことを紹介します。 フロントエンド (React, TypeScript)ReactとTypeScriptを用いて、APIの繋ぎ込みやUI作成を行いま...

TypeScriptの痒いところTypeScriptの型システムは強力ですが、意図した型を推論できないケースもあり、any型や型アサーションを使わざるを得ないことがあります。しかし、これらを使用すると型安全性を失い、本来コンパイルエラーとして検出されるべき問題が見逃されてしまい、実行時エラーを引き起こす原因になります。コンパイルエラーは開発時に修正できますが、実行時エラーは本番環境で発生すると大きな影響を及ぼす可能性があり、回避したいものです。!おさらいany型が型安全性を損なう理由any型はすべての型を許容してしまうため、誤った型の利用によるエラーを見逃す原因になり...

はじめにエックスポイントワン取締役CTOの鈴木です。このたび弊社は、エンジニアのプラットフォームを提供するファインディ株式会社が運営する 「Findy Team+」利用企業を対象に、開発生産性が優れたエンジニア組織を表彰する「Findy Team+ Award 2024」 の「Team Award シーケンシャル開発アプローチ部門」に選出いただきました！受賞のご報告とともに、開発生産性の向上のための弊社の取り組みをご紹介させていただければと思います。 どのような取り組みをおこなったかタイトルからある程度内容は察していただけるかと思いますが、社内のエンジニアのフルスタック...

はじめにどうも、うみぶどうです。エックスポイントワンで働いているエンジニアです。近頃はモバイルアプリ開発に業務で取り組むようになりました。先日、開発中アプリをローカルサーバで動かしているうちは問題が起きないのですが、内部配布した開発用ビルドではうまく動かない、という状況に直面しました。Android端末本体からログを取得したいと考えたのですが、Expoを利用して開発を行なっていた、という事情もあり、ログ出力を確認するまでにいくつかハードルがありました。確認方法自体はUSB有線接続を利用したシンプルなものですが、一連の流れとしてまとまった記事を見つけづらかったため、記事を残す...

紹介することVisual Studio Codeなどで、変数にカーソルを合わせると、以下のように型情報が表示されます。このとき、Sampleという型名のままではなく、型の中身を直接表示させたほうが参照が楽です。例えば、次のように中身が表示されると便利です。この記事では、型情報を表示されるようにするテクニックをBefore/Afterの順で紹介します。 はじめに型情報の行数を増やすまず、型情報を省略せずに表示できるように設定を変更します。デフォルトの設定では、型情報が長い場合、以下のように省略されてしまいます。tsconfig.jsonの設定で、"noError...

ユースケースHeaderやFooterのようなコンポーネントで、ステータスや権限によってUIを変えたい場合、コンポーネントを分けるほどではないことがあります。そのような場合、propsで表示内容を切り替える方法が便利です。例えば、次のようなHeaderPropsを定義したとします。type HeaderProps = { title: string; leftButton?: React.ReactNode; rightButton?: React.ReactNode; onPress?: () => void;};今回の仕様は以下の通りです。a...

Reactと関数の関係Reactは、純関数であることを仮定して設計されているUIライブラリです。https://ja.react.dev/learn/keeping-components-pureであれば、Reactのpropsは関数の引数、ReactのUIは関数の戻り値と考えることができると思います。したがって、良い関数の定義と良いコンポーネントの定義は似ているのではないかという仮説を軸に、良いコンポーネントを考察します。 良い関数の定義から導いた良いコンポーネントfunction定義propsを明示的に書くコンポーネント名から何を表示するかわかるコンポーネン...

紹介することReactで開発する上でmemo,useMemo,useCallbackとどう付き合っていくべきかについて考察します。これらのメモ化技術をチーム単位でどのように取り入れていくかの方針を、具体に依存せず抽象的な観点から紹介します。 紹介しないことメモ化の各API、hooksの機能具体的な使い方、ユースケース 結論具体的な基準を設けず、コンポーネントや関数、値ごとにメモ化が必要かどうかを、各エンジニアが判断して実施するのが良いと考えます。まずはメモ化のメリットやデメリットを紹介し、それらを踏まえた上で上記の理由を紹介します。 メモ化のメリットとデメ...

紹介することReactにおけるts-patternの使用がもたらすメリットとデメリットを、可読性やパフォーマンスの観点から考察します。また、ユースケースやデメリットにどのように対処すべきかについても考察します。 ReactとパターンマッチReactは、関数型プログラミングのエッセンスをふんだんに取り入れているUIライブラリだと思います。宣言的なUIを持ち、純粋性を重視することから、Reactは関数型プログラミングに近い概念を採用しています。パターンマッチは、関数型言語の一つの機能として知られています。フロントエンド開発ではビジネスロジックを書く機会が少ないため、パター...

紹介することTypeScriptの型を厳密に定義し、ドメインモデリングを行います。ソースコードがドキュメントとして機能することを目指します。具体的には、Branded Typeやタグ付きユニオンなどの技法を扱います。この記事は、TypeScriptをこれから使いこなしてみたい方向けの内容です。 紹介しないことドメイン駆動開発や関数型プログラミングの概念については、深くは触れません。 Make Illegal States Unrepresentableあり得る型だけを定義するという考え方です。詳細は以下を御覧ください。https://fsharpforfunan...

どんな人が読むと良い記事か？Reactで実装はできるけど、もう一段階良いコードを書きたいと思っている方向けです。 扱わない内容フックについてESLintの設定で概ねルール化できるかつ、React公式でわかりやすく解説されているので、チェックリストには入れませんでした。https://ja.react.dev/reference/rules/rules-of-hooksuseMemo、useCallback、memoなどのメモ化についてメモ化することによってのパフォーマンス上の影響はそこまで大きくなく、優先的に実施するものではないと思ったので、チェックリストには入...

扱わないことこの記事では具体的なReactディレクトリ/コンポーネント設計を扱いません。具体的なデザインパターンも扱いません。 では、何を紹介するのか？Reactの思想とSOLID原則を用いると、どのようにReactディレクトリ/コンポーネント設計を考えることができるのかを考察したいと思います。SOLID原則はいかなるシステム開発においても転用できる原則だと思います。更に、Reactディレクトリ/コンポーネント設計は複雑になりがちで、TypeScript、状態管理ライブラリ、CSS、コンポーネントライブラリ、フェッチライブラリ、テストライブラリと考えることが多く、ケースバ...

スキーマ駆動開発とはスキーマを最初に定義しておき、その定義を元にバックエンド、フロントエンドを開発します。※ここでいうスキーマは、ここではAPIの仕様のことで、エンドポイント、メソッド、リクエスト、レスポンスなどの定義を指します。バックエンド、フロントエンドでAPI定義の齟齬がなくなる最初にスキーマ定義すれば、バックエンド、フロントエンド同時に開発できる(←AI時代は親和性高い) Fastifyでのスキーマ駆動開発の進め方 環境今回は、フロントエンドからFastifyで作られたREST APIを叩くアーキテクチャを想定しています。 今回目指すことJSON ...

※言語ごとのオブジェクト(json)のことをこの記事では辞書と呼びます。 はじめにReactでreact-i18nextを使用して多言語対応をしています。そこで使用している辞書運用のベストプラクティスを模索しました。導入時の初期設定などは省きます🙇‍♂ よくある実装(工夫前)例えば、日本語と英語対応したいと思ったときに、以下のような実装がよくあると思います。 ja.json 日本語の辞書{ "profile": { "name": "名前", "email": "メールアドレス", "password": "パスワード" }, "...