【序章】Pythonよりおすすめ！？TypeScriptで始めるAIアプリ開発👑

👋 Hello TypeScript World！

やっほー、みんな！
福岡生まれのAIアンバサダー、宇宙野クラウディアっちゃ！
今日は、うちの大好きなプログラミング言語、TypeScriptについて語りたいと思うと。
JavaScriptをちょっとだけ知っとる人でも分かるように、できるだけ簡単に説明していくけん、最後まで付き合ってね！

TypeScriptワールドへレッツゴー！

🤔 TypeScriptって何？JavaScriptとどう違うと？

TypeScriptは、簡単に言えば、JavaScriptにスーパーパワーをつけたようなもんたい。
JavaScriptでできることは全部できるし、さらにいろんな便利な機能がついとるんよ。

例えば、こんな感じ：

// JavaScript
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

greet("クラウディア"); // 出力: こんにちは、クラウディアさん！
greet(42); // 出力: こんにちは、42さん！

// TypeScript
function greet(name: string) {
  console.log(`こんにちは、${name}さん！`);
}

greet("クラウディア"); // 出力: こんにちは、クラウディアさん！
greet(42); // エラー: Argument of type 'number' is not assignable to parameter of type 'string'.

この例では、greet関数にnameって名前を入れる関数を渡して挨拶するプログラムを作っとるんたい。
JavaScriptでは、数字の42を渡しても一見動くように見えるけど、実際はおかしな挨拶になってしまうんよ。TypeScriptを使うと、関数に渡す値の種類（型）を指定できるから、間違った値を渡すミスを事前に防げるっちゃん。

💪 TypeScriptのイイところ

1. ミスが見つけやすい：
   コードを書いてるときに、変なとこあったらすぐに教えてくれるけん、バグが減るとよ。

2. チームで開発しやすい：
   コードの構造がはっきりしてるから、他の人が書いたコードも理解しやすいんよ。

3. AIとの相性バッチリ：
   TypeScriptは、AIの開発や利用にめっちゃ向いとるんたい。

   型を定義するシステムが強力で予想しないエラーが起きにくいし、JavScriptで使えるAIのAPIは全部対応しとーと！

4. 将来性バツグン：
   どんどん進化しとるから、新しい機能をいち早く使えるっちゃん。

🤖 TypeScriptでAI開発：福岡の観光案内AIボット

TypeScriptとAIの相性の良さを示すために、福岡の観光案内AIボットを作ってみるばい！
空っぽのフォルダがある状態から説明するけん、試してみてね!

準備するもの

• node.jsとnpmをインストールしたパソコン
• コードエディター(VSCodeをさらに発展させたCursorがおすすめっちゃん！)
• OpenAI APIキー

ステップ1:TypeScriptを使える環境を作ろう！

まずはプロジェクトのターミナルでこのコードを入れてみてね！

npm init -y && npm install --save-dev typescript && npm install openai && npx tsc --init

このコマンドは以下の操作をまとめたものなんよ:

1. npm init -y: プロジェクトを初期化し、デフォルト設定でpackage.jsonファイルを作成
2. npm install --save-dev typescript: TypeScriptを開発依存関係としてインストール
3. npm install openai: OpenAI SDKをインストール(今回AI関係の設定はこれだけ😳)
4. npx tsc --init: TypeScriptの設定ファイル（tsconfig.json）を生成

これらのコマンドを1行にまとめることで、TypeScriptとOpenAI SDKを使用するプロジェクトを素早くセットアップできるんよね！
注意して欲しいのは、フォルダ名を事前に設定していないとエラーが出ること！
未設定とか日本語のフォルダ名だとエラーが出るから気をつけてね🚧
うちは今回 【TestApp】 ってフォルダでデスクトップに作ってみたよ！
そうするとこんな感じのフォルダ構成になると思う！

エラーは気にせんといてね（笑

ステップ2:Index.tsを作ろう！

ここからエディターでファイルの中身を触っていくよ！
まずはルートに画像みたいにindex.tsを作って・・・

下のコードをコピペして貼ってみてね！

index.ts

import { OpenAI } from 'openai';

// OpenAI APIの設定
const openai = new OpenAI({ apiKey: '' });//ここにAPIキーを入れるんよ！

// 観光スポットの型定義
type TouristSpot = {
  description: string;
};

// AI観光案内関数
async function getAITourRecommendation(userInput: string): Promise<TouristSpot> {
  const response = await openai.chat.completions.create({
    model: "gpt-4o-mini",//ここでモデルを決めるっちゃん
    messages: [
      { role: "system", content: "あなたは福岡の観光案内AIです。回答は必ずJSON形式で、name, description, ratingのフィールドを含めてください。" },
      { role: "user", content: `${userInput}に合うおすすめの観光スポットを教えて。` }
    ],
  });

  // AIの回答をパース
const recommendation = response.choices[0].message.content || '';

  return {
    description: recommendation.split('\n').slice(1).join('\n') || "説明なし",
  };
}

// 使用例
async function main() {
  try {
    const spot = await getAITourRecommendation("");//ここに旅のスタイルを入れてみ！
    console.log(`回答: ${spot.description}`);
  } catch (error) {
    console.error("エラーが発生したと:", error);
  }
}

main();

apiKeyには自分のAPIキー、getAITourRecommendation("")には一人旅とか家族旅行とか、自分の旅のスタイルを入力しみてね！

ステップ３:実際に動かしてみよう！

ここまできたらあとは楽勝！
このコマンドをターミナルに入れて実行してみて！

npx tsc

これで、TypeScriptがJavaScriptに変換されて、index.jsが生成されると！

index.tsの上にindex.jsが！

あとはこのコードを入力するだけ!

node index.js

試しにawait getAITourRecommendation("家族旅行")って入力してからビルドすると・・・

回答: {
  "recommended_spots": [
    {
      "name": "福岡タワー",
      "description": "福岡タワーは高さ234メートルで、展望台からの絶景が楽しめます。周辺には公園もあり、家族でのピクニックにも最適です。",
      "rating": 4.5
    },
    {
      "name": "マリンワールド海の中道",
      "description": "マリンワールド海の中道は、豊富な海の生き物を観察できる水族館です。ショーや体験プログラムもあり、子供たちが楽しめるアク
ティビティが充実しています。",                                                                                                                    "rating": 4.7
    },
    {
      "name": "大濠公園",
      "description": "広大な公園で、ボート遊びやサイクリングが楽しめます。湖の周りには遊具や広場もあり、家族でのんびり過ごすことができます。
",                                                                                                                                                "rating": 4.3
    },
    {
      "name": "福岡市動植物園",
      "description": "動物園と植物園が併設された施設で、さまざまな動物や美しい植物を楽しむことができます。自然と触れ合える貴重な体験ができま
す。",                                                                                                                                            "rating": 4.4
    },
    {
      "name": "キャナルシティ博多",
      "description": "ショッピングとエンターテインメントが楽しめる大型施設です。映画館やレストラン、さらには噴水ショーもあり、家族全員が楽し
めます。",                                                                                                                                        "rating": 4.6
    }
  ]
}

出力結果がコンソールに！
めっちゃ詳しくおすすめしてくれとるやん！

TypeScriptを使うことで、AIからの返答の型をきちんと定義できるから、データの扱いがめっちゃ楽になるんよ！

📊 TypeScriptのいいとこ悪いとこ

TypeScriptの特徴をわかりやすくまとめてみたばい：

特徴	いいとこ	気をつけんといかんとこ
型システム	バグが減る、コードが分かりやすい	最初は型の書き方に慣れるのに時間かかる
コンパイル	JavaScriptに変換されるから、どこでも動く	コンパイルに時間がかかることがある
IDE支援	コード補完が優秀、リファクタリングが楽	設定が複雑になることも
AI開発	型定義でAI APIが使いやすい	AI特有の型定義が必要になることも
コミュニティ	大規模で活発、情報が多い	情報が多すぎて、最新のベストプラクティスを追うのが大変

😅 よくある困りごととその解決法

1. 「型エラーがいっぱい出て困る」ってなったとき：

   • 解決法：any型を一時的に使うか、型アサーションを使ってエラーを回避。でも、最終的には適切な型をつけるのがベストっちゃ。

2. 「ライブラリに型定義がない」ってなったとき：

   • 解決法：@types/ライブラリ名をインストールするか、自分で型定義ファイル（.d.ts）を作成するんよ。

3. 「コンパイルが遅い」ってなったとき：

   • 解決法：tsconfig.jsonのincrementalオプションをtrueにするか、ts-nodeを使ってコンパイルを省略するのもええかもね。

🚀 TypeScriptの未来

1. AIとの更なる融合：
   型システムを活用して、よりスマートなAI開発ツールが登場するかもしれんね。

2. ブラウザネイティブサポート：
   将来的には、ブラウザが直接TypeScriptを解釈できるようになるかもしれんとよ。

3. 量子コンピューティングとの統合：
   型システムを活用して、量子アルゴリズムの開発がしやすくなる可能性もあるかも・・・！

📚 TypeScriptの学び方

1. 公式ドキュメント：
   TypeScriptの公式サイトが一番詳しかと。英語やけど、Google翻訳使えば大丈夫！

2. サバイバルTypeScript:
   😭「いや、翻訳しんどい！日本語がいい！」

   って人は、サバイバルTypeScriptもおすすめよ！

   TypeScriptと合わせてjavaScriptについても学び直せるから、すごく実践的な内容になっとるっちゃ！

3. オンライン学習プラットフォーム：
   UdemyやCourseraにTypeScriptのコースがあるけん、チェックしてみてー。

4. インタラクティブな学習：
   TypeScript Playgroundってサイトで、ブラウザ上でTypeScriptを試せるとよ。

5. 実際のプロジェクトを見る：

   • VSCode：Microsoftのエディタたい。全部TypeScriptで書かれとーと。
   • Angular：Googleのフレームワークで、TypeScriptがデフォルトたい。
   • Deno：Node.jsの後継として注目されとるランタイムたい。

🎤 今回の話はどうやった？

1. TypeScriptのどの機能が一番面白そうと思った？
2. AIと組み合わせて、どんなアプリ作ってみたか？
3. うちの説明、分かりやすかった？もっと知りたいことあるかな？

コメント欄で教えてくれたら嬉しかばい！
次は「TypeScriptとGoogleCloudで作る自動電話発信システム」の話をするけん、楽しみに待っとってね🎉