自作アプリにおすすめの外部API（JS,Reactのコードあり）

はじめに

みなさん、こんにちは。Happiness Chainメンターのryoです。

今回は自作アプリを作る際に、導入するとおすすめな外部APIを紹介していきます。
ほとんどの現場では外部APIを1つ以上は使用しているので、これから紹介する外部APIを1つでも導入することで、転職が有利になることがあるので、是非参考にしてみてください。

※各APIにて、実際に動作するJavaScriptのコードを記述しています。SDKが正常に動作するものに関しては、SDKを使用しています。

1. Slack API

Slackを使用しているモダンな会社では、Slack APIを使用している所が多い印象です。例えば、ユーザーが特定のアクション（ユーザー登録など）を行った時や、メール送信時、エラーが起こった時等にslackの特定のチャンネルに通知します。実務だとSlackは常に開いているツールなので、ユーザーの動きをすぐに察知して、早期アクションを取ることができます。エンジニアもエラーをすぐ察知できるので、おすすめです。僕の経験になりますが、Slack APIを導入していない会社で導入した際、ビジネスサイドにとても喜ばれました。
無料でも利用することができますので、是非組み込んでみてください。

// ex.slackにメッセージ送信
const body = {
    blocks: [
      {
        type: "header",
        text: {
          type: "plain_text",
          text: ":pencil:タイトル:pencil:",
          emoji: true,
        },
      },
      {
        type: "section",
        fields: [
          {
            type: "mrkdwn",
            text: "- リスト\n- リスト\n- リスト",
          },
        ],
      },
    ],
}

fetch("https://hooks.slack.com/services/....", //slack apiで発行したwebhook url
    {
      method: "POST",
      body: JSON.stringify(body),
    }
)

2. OpenAI API

現在多くのアプリにAIが組み込まれているのをよく見ます。そういったときにOpenAI APIを使用しているかと思います。マッチングアプリを例にすると、趣味や性格、価値観等を入力すると、自己紹介文を自動で生成するようなものです。こういった機能はOpenAI APIを利用して、プロンプトをカスタマイズすることで簡単に実装することができます。従量課金にはなるのですが、比較的安めなので、おすすめです。

import { Configuration, OpenAIApi } from "openai"

const configuration = new Configuration({
  apiKey: "API_KEY",
})
const openai = new OpenAIApi(configuration)

const messages = [
　　　// 会話全体のトーンや背景、制約などを設定
    { role: "system", content: "あなたは京都弁が流暢な京都人です" },
   　// 実際の質問内容
    { role: "user", content: "京都について、教えて" },
]

// ChatGPTに質問して、回答をもらう
const completion = await openai.createChatCompletion({
  model: "gpt-4o",
  messages,
  max_tokens: 1000,
})

console.log(completion.data.choices[0].message)
// "ほな、京都についてお話しするわね。京都は、..."

3. Google API (Google Calendar API, Google Map API等）

まずGoogle Calendar APIは、予定管理アプリではよく使用されています。アプリ上にて作成した予定をGoogle Calendarに反映させる、もしくはGoogle Calendarの予定をアプリに取り込むことができます。Google Map APIはGoogle Mapそのものをアプリに埋め込むことができ、Google Mapから特定の座標の取得、名称から座標の取得、口コミを取得等ができます。
どちらのAPIも一定の無料枠がありますので、個人利用では超過することはないかと思います。

// キーワードからGoogle MapのPlace Idを取得し、Place Idから口コミを取得する
const suggestListQuery = new URLSearchParams({
  query: "東京タワー", // 検索したい会社名や住所などのキーワード
  key: "API_KEY",
  region: "jp",
  language: "ja",
})

// キーワードから候補一覧を取得
const resSuggestList = await fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?${suggestListQuery}`)
const suggestList = await resSuggestList.json()

const placeDetailQuery = new URLSearchParams({
  key: "API_KEY",
  // 取得した候補一覧の最初のplace_idを使用
  place_id: suggestList.results[0].place_id,
  region: "jp",
  language: "ja",
})

 // place_idの場所の口コミ一覧を取得
const resPlaceDetail = await fetch(`https://maps.googleapis.com/maps/api/place/details/json?${placeDetailQuery}`)
const placeDetail = await resPlaceDetail.json()

console.log(placeDetail.result.reviews) <= 実際のレビューの配列　Max5件
console.log(placeDetail.result.user_ratings_total) <= 合計レビュー数
console.log(placeDetail.result.rating) <= 平均レビュー値

4. Stripe API

支払いをアプリ上で実装する場合は、手数料が低く、簡単に実装できるStripe APIがおすすめです。購入処理、サブスクリプション管理、顧客管理など、支払いに関するすべてのアクションが行えます。自社でECサイトを運営している場合は、導入していることが多いので、そういう会社に入りたい場合はおすすめです。
個人でもtest環境（実際の支払いを行わない環境）で利用可能です。

※こちらはクレジットカードのフォームを実装するのが自前だと面倒なため、SDKを使用するのがおすすめです。

index.jsx

import { Elements } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"
import { useEffect, useState } from "react"

import CheckoutForm from "@/components/organisms/CheckoutForm"

const stripePromise = loadStripe("PUBLICK_API_KEY")

const PaymentPage = () => {
  const [clientSecret, setClientSecret] = useState(null)

  useEffect(() => {
    const headers = {
      Authorization: `Bearer ${SECRET_API_KEY}`,
    }

    // 支払い予定を作成して、client_secretを取得する必要がある
    fetch(
      "https://api.stripe.com/v1/payment_intents",
      {
        method: "POST",
        body: new URLSearchParams({
          amount: "10000",
          currency: "jpy",
          receipt_email: "[e-mail]",
          "automatic_payment_methods[enabled]": "true",
        }),
        headers,
      },
    )
      .then((res) => res.json())
      .then((res) => setClientSecret(res.client_secret))
    }, [])

    if (clientSecret == null) return <></>

    return (
        <Elements options={{ clientSecret }} stripe={stripePromise}>
            <CheckoutForm />
        </Elements>
    )
}

export default PaymentPage

CheckoutForm.jsx

import { useStripe, useElements, PaymentElement } from "@stripe/react-stripe-js"

const CheckoutForm = () => {
  const stripe = useStripe()
  const elements = useElements()

  const handleSubmit = async (event) => {
    event.preventDefault()

    if (!stripe || !elements) {
      return
    }

    // 支払いを確定する
    const result = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "支払い完了後にリダイレクトするURL",
      },
    })

    if (result.error) {
      // 支払い失敗時に行う処理
    } else {
      // 支払い成功後に行う処理
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe}>支払う</button>
    </form>
  )
}

export default CheckoutForm

5.メール関連のAPI

• AWSでインフラをゴリゴリ構築しているような会社に入りたい: Amazon SES
• AWSはハードルが高いけど、本番環境で実際にメールを送信できるようにしたい: なんでもOK

メール送信に関しては、ベンチャー企業の場合、SendGridを使用している会社が多い印象なのですが、個人利用が禁止されているため、Amazon SESを使わない場合は、何を使用しても良いかなと思います。

終わりに

いかがだったでしょうか？
独学だとなかなか外部APIにふれる機会はないかと思います。
ですので、もし自作アプリに1つでも組み込んでいれば、他の就活生と差別化できるので、余裕があれば是非検討してみてください！