AI コーディング アシスタント、スターター テンプレートなど: 労働時間を減らすためのガイド

あなたは、素晴らしいものを構築するという大きな夢を持つ JavaScript 開発者です。しかし、次の素晴らしいアプリのアイデアに着手する前に、定型コードとインフラストラクチャのセットアップに何時間も費やすことになります。開発環境を構成し、CI パイプラインをセットアップし、ユーザー プロファイルや認証フローなどの多くの汎用機能を構築する必要があります。

あなたは、それが自分の時間や才能の最善の使い方ではないと感じています。それが近道を探し始めるときです。アプリの日常的な部分を処理できるツールとリソースにより、構築しようとしている特別な機能に集中できます。

皆さんはすでに AI コーディング アシスタントにある程度依存していると思いますが、プロジェクトを活性化するために設計された他の開発ツールやリソースと AI コーディング アシスタントを組み合わせたときに、本当の魔法が起こります。

AI は多くのタスクを効率化できますが、実証済みのツールとリソースを効果的に使用する方法を理解することが重要です。これらにより、AI アシスタントがよりクリーンで、より適切にテストされた、より効率的なコードを生成できるようになります。

プロジェクト テンプレートと AI コーディング アシスタント

プロジェクト テンプレートは、さまざまな技術スタック用の事前構成されたセットアップを提供します。これらは長い間存在していましたが、おそらく直観に反するかもしれませんが、AI コーディング アシスタントの台頭によりさらに重要になっています。

例: Vercel.com および Remix.run のスターター テンプレート

テンプレートは AI アシスタントに最適なコンテキストを提供し、綿密なプロンプト エンジニアリングや AI 仲間との長時間の会話にかかる時間を節約します。テンプレートが詳しく説明されています。開発環境、使用する依存関係、データ転送方法、フレームワーク、状態管理、スタイリング ソリューションなどを定義します。

テンプレートには、コーディング規約と開発標準も埋め込まれています。しっかりとした、テスト済み、検証済みのベースがあれば、プロンプトごとに全体をつなぎ合わせる必要がなくなります。

Cursor AI と @Codebase メンションを使用した、事前に作成されたプロジェクト (テンプレート) のカスタマイズ

テンプレート自体に加えて、一部の AI アシスタント (Cursor AI など) は、AI が行うすべての提案をガイドするための一般的な命令ファイルもサポートしています。たとえば、上級開発者によって作成された、.cursorrules ファイル内で使用するための Cusror AI 命令のコレクションを参照してください:

https://cursor.directory/

Infrastructure-as-Code と AI コーディング アシスタント

コーディングとは、単にフロントエンドやバックエンドのロジックを書くことではなく、アプリが成功するためのエコシステム全体をセットアップすることです。 AWS CDK、Pulumi、Terraform などのツールを使用すると、クラウド インフラストラクチャをコードとして定義できます。

SST のような最新の IoC ツールは、コードベースの機能面を高度に「認識」しています。これらはアプリのロジックに組み込まれており、合理化され、より失敗しにくい開発が可能になります。 Modren IoC ツールは、多くの場合、非常に抽象的な API を提供するため、ユーザーと AI コンパニオンが理解しやすくなります。

IoC を使用すると、AI コーディング アシスタントがさらに支援できるようになります。ロジックや UI と同じように、インフラストラクチャを操作および拡張できます。 AI が適切にサービスを提供するために必要なのは、コードベースだけです。アプリを強化するリソースを含め、隠されたものは何もありません。

/**  
* SST Example; the code for nextjs deployment   
* along with the creation of an S3 bucket (acesible to it)  
**/  

const bucket = new sst.aws.Bucket("MyBucket", {  
  access: "public"  
});  

new sst.aws.Nextjs("MyWeb", {  
  link: [bucket]  
});

自己ホスト型 UI ライブラリと AI コーディング アシスタント

UI コンポーネントを (不変の) npm パッケージとしてインストールするのではなく、プロジェクトに直接埋め込む方向への顕著な変化があり、より柔軟に調整したり拡張したりできるようになりました。

コードベースの一部として UI コンポーネントの独自のインスタンスを持つことの大きな利点の 1 つは、AI コーディング アシスタントが、カスタマイズされたコンポーネントのコレクションと (潜在的に) 変更されたコンポーネントを参照しながら、オンデマンドで新しい UI を簡単に作成できることです。動作と API。

shadcn/ui などの一部のコンポーネント コレクションでは、「コピー＆ペースト」プロセスに役立つ CLI ツールが提供されています。 Bit などの他のツールは、Bit プラットフォームでホストされている UI ライブラリで同じことを行うのに役立ちます。どのコンポーネントもプロジェクトにインストールまたはコピーできます。

Bit Platform でホストされる Radix コンポーネントのカスタム コレクション

Bit Platform の場合、専用の AI アシスタントが、お気に入りのコンポーネント ライブラリに基づいて共有コンポーネントのカスタム コレクションを生成することもできます。

Bit Platform 上でカスタム マテリアル UI コンポーネントの共有コレクションを生成

コンポーザブルコードベースとAIコーディングアシスタント

コンポーザブル ソフトウェアまたはコンポーザブル コードベースは、ソフトウェア開発において以前から存在する 2 つの密接に関連した概念です。

本質的に、構成可能なコードベースは、モジュール式で再利用可能で独立して管理可能なコンポーネントまたはモジュールを使用して設計されています。これらのモジュールはさまざまな方法で組み立てて、新しいシステムを作成したり、既存のシステムを変更したりできます。システムは、ビルド時、実行時、またはハイブリッド中に構成でき、フロントエンド、バックエンド、さらにはそのインフラストラクチャを形成します。

例: 再利用コンポーネントで構成される、コンポーザブルな React Apollo サーバー アプリケーション

「コンポーザブル」アプローチは、標準化され、保守しやすく、適応性の高いコードを生成するため、多くの人に愛され、採用されています。

「標準化」。同じコンポーネントがシステム全体で再利用されるためです。 「保守可能」というのは、システム内のコンポーネントが相互の関係を説明する明確な依存関係グラフを形成するだけでなく、コードの総行数 (LOC) が大幅に削減されるためでもあります。最後に、コンポーネントをさまざまな組み合わせで使用して、新たなニーズが発生するたびに対応できるため、「適応性」です。

AI コーディング アシスタントは、コンポーザビリティにまったく新しいひねりを加えています。

Bit のようなプラットフォームはこのアプローチを採用し、AI を活用したコーディング アシスタントとともに、独立したコンポーネントのホームを提供しています。このアシスタントは単純なコード生成を超えています。システムの依存関係グラフを理解し、新しいコードを最初から作成するよりも既存のコンポーネントの再利用を優先します。

この戦略的な再利用により、コードベースの効率性と保守性が確保され、不必要な肥大化が回避されます。さらに、再利用されたコンポーネントはすでにテストおよび検証されているため、より良い夜の睡眠が保証されます。

たとえば、Bit の AI アシスタントに与えられる次のプロンプトを参照してください。

Bit の AI コーディング アシスタントを使用した新機能の生成

生成されたコンポーネントは、コードベースからの既存の独立したコンポーネントの構成になります。

AI によって生成されたコンポーネント「contact-us-form」は、コードベースの既存のコンポーネントで構成されています

コンポーネントは、コードベースに参加する前にビルドおよびテストされます。これは、ある意味、再利用可能なコンポーネントの厳選されたコレクションです。

AI で生成されたコンポーネントは、Bit Platform 上のコードベースに参加する前に構築およびテストされます

結論

ボイラープレートを設定したり、パイプラインと格闘したりすることに夢中になって、コーディングに取り組む人はいませんでした。本当の魔法は、実際に重要なクリエイティブでゲームを変えることに集中できるときに起こります。 AI コーディング アシスタントは、そのために役立ちますが、計画や方法論を念頭に置かずに使用すると、多くの場合、AI パートナーとの長くて退屈な会話になる可能性があります。

以上がAI コーディング アシスタント、スターター テンプレートなど: 労働時間を減らすためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。