Reactで作るTypeScript対応のInstagram埋め込み実装

nstagramの埋め込み機能は、ウェブサイトやブログにInstagramの投稿を簡単に組み込める便利な機能です。
しかし、TypeScriptプロジェクトでこの機能を実装する際には、適切な型定義が必要となります。

この記事では、TypeScriptでInstagramのembed.jsを安全に実装する方法について詳しく解説します。

目次

1. Instagramの埋め込み機能の概要
2. TypeScriptでのWindow型拡張の必要性
3. グローバル型定義の実装方法
4. 実装における注意点と最適化
5. まとめ

Instagramの埋め込み機能の概要

Instagramの埋め込み機能は、Instagramが提供する埋め込みコードを使用することで、ウェブサイトやブログにInstagram投稿を簡単に表示できる機能です。

実装は非常にシンプルで、Instagramから提供される埋め込みコードをHTMLに追加するだけです。

通常のウェブサイトでは問題ありませんが、シングルページアプリケーション（SPA）の場合、ページ遷移時にembed.jsが再読み込みされないという課題があります。

対応させるためにembed.jsを使って動作させる必要があります。

TypeScriptでのWindow型拡張の必要性

TypeScriptプロジェクトでembed.jsを使用する際の主な課題は、WindowオブジェクトにInstagram関連のプロパティが存在することをTypeScriptコンパイラに認識させる必要がある点です。

これを解決するために、グローバルなWindow型を拡張する必要があります。

グローバル型定義の実装方法

グローバル型定義は、以下のように実装します。

1
2
3
4
5
6
7
8
9
10
11
export {};

declare global {
  interface Window {
    instgrm?: {
      Embeds: {
        process: () => void;
      };
    };
  }
}

この型定義について、重要なポイントを解説します。

• export {}の必要性: ファイルをモジュールとして認識させるために必要です。これにより、グローバルスコープの汚染を防ぎます。
• オプショナルチェーン（?）の使用: instgrmプロパティが存在しない可能性を考慮し、TypeScriptの厳格な型チェックに対応します。
• process メソッドの型定義: Instagram埋め込み処理で使うメソッドを定義します。

実装における注意点と最適化

実装時には以下の点に注意が必要です。

• 遅延読み込みの考慮: embed.jsは非同期で読み込まれるため、processメソッドの呼び出しタイミングに注意が必要です。
• 型ガード処理の実装: instgrmオブジェクトの存在確認を適切に行う必要があります。

以下は、実装例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { useEffect, useState } from 'react'

interface Props {
  html: string
}

export function InstagramEmbed(props: Props) {
  const [html, setHtml] = useState('')

  useEffect(() => {
    setHtml(props.html)

    if (window.instgrm) {
      window.instgrm.Embeds.process()
      return
    }

    const script = document.createElement('script')

    script.src = '<https://www.instagram.com/embed.js>'
    script.async = true
    script.onload = () => {
      if (window.instgrm) {
        window.instgrm.Embeds.process()
      }
    }

    document.head.appendChild(script)
  }, [props.html])

  return (
    <div>{html && <div dangerouslySetInnerHTML={{ __html: html }}></div>}</div>
  )
}

まとめ

TypeScriptでInstagramのembed.jsを実装する際には、適切な型定義が不可欠です。
Windowオブジェクトの拡張、オプショナルチェーンの活用、適切なエラーハンドリングを組み合わせることで、安全性と保守性の高いコードを実現できます。

今回Reactを使ったアプリケーションでInstagramの投稿を埋め込む機会があったため、記事にしてみました！