はてなブックマーク

はじめに 今回はChatGPTを利用した開発におけるアシスタントのやり方とLangChainを活用した実装方法を具体的なアプリ開発を例に解説していきます。 LangChainの実装方法について、Python未経験の自分でもサクッと実装できたので、初心者でも理解できるように解説をしていきます。 この記事で学べること ChatGPTを使って要件定義、設計、開発などをアシストする活用例が分かる アプリ開発においてLangChainの活用方法を学べる 前半でビジネスサイド(いわゆる要件定義、設計)などの解説をし、後半で具体的な開発例を解説する構成になっています。 LangChainにおける開発では具体的に下記の機能を実装します。 【URLを入力】 【URL先のコンテンツを解析】 【解析をしたデータを元に文章を生成】 前提 あくまで活用例を紹介する記事なので、技術的な細かい内容は公式サイトを添付して

開発したアプリ リンクはこちら👇 開発のきっかけ いつでも見返せるような「ストック型」のAIツールまとめが欲しかった 海外のAIツールも抵抗なく使いたい いつでも見返せるような「ストック型」のAIツールまとめが欲しい 近年、AI技術の急速な進展により、最新のAIツールやプロダクト情報を追いつくのが難しくなった。 TwitterなどのSNSでは日々新しいAIツールが紹介されていますが、これらは「フロー型」のアプリケーションで、大半の情報は瞬く間に流れてしまいます。 多くの場合、私たちは気になる情報を「いいね」やブックマークで保存しますが、情報の流れは速く、結果としてほとんどの情報を見直すことができません。 そういった中で、「ストック型」のAIツール紹介サービスがあれば便利だと考え、開発を始めました。 海外のAIツールも抵抗なく使いたい AIツールの大部分は海外製で、英語が苦手な人にとっては

はじめに 今回はtRPCについて周辺の用語解説及び整理に加え、簡易的なTODOアプリを開発しながら、具体的な使い方を解説していきます。 この記事の主な対象者 tRPCやZodについて基礎から学びたい人 API開発及びフロントエンドとの繋ぎ込みを担当している人 tRPCを使ってアプリ開発をしてみたい人 本記事の目標 tRPCやZodを含むその他周辺技術の用語の整理 簡易的なTODOアプリ開発を通してtRPCの使い方を学ぶ 用語解説 tRPCを理解するためにその周辺知識の整理と今回作成するTODOアプリで登場する用語の解説をしていきます。 T3 Stack 今回は開発する簡易アプリではT3 Stackは採用していませんが、tRPCの周辺用語でもあるので、簡単に解説をします。 T3 Stackは下記の3つの思想をもとにTheo氏によって作成されたWeb開発スタックです。 simplicity(簡

またクラスを利用していないため、オブジェクト指向の特性「継承」「カプセル化」「ポリモーフィズム」は利用していません。この部分が厳密なドメイン駆動設計(DDD)のニュアンスと異なるので「風味」という言葉を使っています。 全体概要と用語の整理 まず初めにドメイン駆動設計の全体の概要と出てくる用語について紹介します。 自分は言葉を理解しないとコードの理解に落とし込めなかったので詳しく解説をしていきます。 各用語の具体的な実装は後の章で紹介します。 すべての用語において理解しやすいように「ユーザー管理システムを実装する」例を用いて解説を入れています。(解説の都合で書籍とは異なる例を採用しています) ドメイン駆動設計とは ドメイン駆動設計はその名の通り、「ドメインの知識」に焦点をあてた設計方法 「ドメイン」とは、ソフトウェア開発におけるプログラムを適応する対象となる領域 ドメインについて ドメイン駆

はじめに 自分は渋谷のWeb系開発会社にて執行役員兼エンジニアをやっています。(新卒入社3年目) 直近では6~8名程のエンジニアがいるプロジェクトで、ディレクトリ設計やissue作成、コードレビュー、スケジュール管理、PMへのUI/UX及び機能提案などを行なっています。 その中で自分が「エンジニアチームにとって開発しやすい環境整備」を色々試し、実践してきたので整理していきます。 この記事の主な対象者 エンジニアチームの開発モチベーションを上げたい人 エンジニアにとって開発しやすい環境の作り方 おことわり 今回紹介するのは自分が実践してきた一例であり、必ずしも正解というわけではありません 「こうしなさい」ではなく「こうするとより良くなるかも」といったモチベで書いています 具体的な開発の設計を紹介するものではありません エンジニアが開発しやすい環境作り 5つのセクションに分けて紹介していきます

はじめに 最近コードレビューの機会が増えてきたので、「リーダブルコード」を読み直しました。 リーダブルコードを読んでいく中で要点を整理し、実務の現場でコードを書いたりレビューをする際にどのように活用していくべきかを自分なりにまとめてみました。 この記事を読むことで、リーダブルコードの要点の把握と実際の活用例を学ぶことができます。 この記事の主な対象者 リーダブルコードの要点をサクッと知りたい人 初級~中級者(実務歴1~3年目)の人 コードレビューの機会が増えてきた人 これまで我流でコードを書いてきた人 リーダブルコードについて リーダブルコードはあくまで「こう書きなさい」と押し付け口調ではなく「こう書いた方がもっとよくなるよ」といった丁寧な語り口で書かれています。 それを前提として要点や活用方法をまとめていきます。 1章 理解しやすいコード 優れたコードについて リーダブルコードで優れたコ

全体の概要 基本的なAPI結合 基本的にはフロント(Next.js)からaxios等を利用して、サーバー側のAPIエンドポイントに対して直接リクエストを送る構成かと思います。 今回紹介するNext.jsのAPI Routesを中間APIとして挟んだ場合 今回紹介する構成は下記のようになっています。 この構成にするメリット・デメリットは後の章で解説をしていきます。 この記事の対象者 フロントエンド初級者から中級者 Next.jsのAPI Routesの基本を学びたい人 セキュリティーを考慮したAPI通信手法について知りたい人 Next.jsのAPI Routesを中間APIとして挟むメリット セキュリティーが強化できる ログの管理ができる APIエンドポイントの抽象化 セキュリティーが強化できる Next API Routesを中間APIとして挟むことで、外部から直接本体のAPIにアクセスさ

はじめに 今回はフロントエンド(Next.js×TypeScript)におけるAPI通信手法について、基本的なAPI通信の手法に加えて、「Repository層, Model層, Factory, API-Client」を用いた手法を具体的なコード例とともに解説します。 この記事の対象者 フロントエンジニア初級者から中級者 API結合におけるディレクトリ設計が明確に定まっていない人 API通信をする上での「Repository層」「Model層」「Factory」 「API-Client」それぞれの責務について理解したい人 全体の概要図 後の章でこの部分は詳しく解説します。 基本的なAPI通信手法 今回紹介するAPI通信手法 基本的なAPI通信手法 カスタムフックを使わない場合 カスタムフックを使わない基本的なAPI通信手法としては下記が例の1つとして挙げられるかと思います。 src/ap