---
title: "#30DaysOfStreamlit Day14 Streamlitのコンポーネント"
description: "この記事では、#30DaysOfStreamlitの内容の紹介を行います。\nコンポーネントについて\nコンポーネントとはstreamlitでできることを拡張するサードパーティ製のPythonモジュールです。"
---

[AIDXナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/aidx)

# [#30DaysOfStreamlit Day14 Streamlitのコンポーネント](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day14-streamlitのコンポーネント)

 作成者: [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo)｜2023年12月19日

## はじめに

この記事では、#30DaysOfStreamlitの内容の紹介を行います。   
#30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。

## コンポーネントについて

[コンポーネント](https://docs.streamlit.io/library/components)とはstreamlitでできることを拡張するサードパーティ製のPythonモジュールです。

## 利用できるコンポーネント

streamlitの[webサイト](https://streamlit.io/components)には数十のコンポーネントが紹介されています。  
Fanilo氏(streamlitの製作者)は、この[サイト](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634)にてコンポーネントを紹介しています。

## 使い方

まずは、利用したいコンポーネントをインストールします。   
Pythonライブラリとして公開されているため、pipでインストールします。

今回は、`streamlit_pandas_profiling`を利用してみます。

こちらのコンポーネントはPandasデータフレームで読み込まれたテーブルデータのプロファイリングを行い、表示することができるコンポーネントのようです。  
また、ライブラリの依存関係上、以下のライブラリもインストールします。

以下のようなアプリケーションを作成します。

## コードの解説

まずは、必要なライブラリをインポートします。 依存関係上、`ydata_profiling`もインポートします。

続いて例の如く、ヘッダーテキストを設定します。

続いてデータをロードします。 今回は、[ペンギンデータセット](https://allisonhorst.github.io/palmerpenguins/)を利用します。(データセットの詳細はリンクを確認してください。)

さらに、以下のコマンドでデータフレームに対するプロファイリングを作成して、st\_profile\_reportで可視化します。

以下がアプリケーションを実行した時の画面です。

## 独自のコンポーネント作成

また、コンポーネントは独自で作成することも可能です。 以下のリソースが役に立つかと思います。

- [コンポーネントを作成する](https://docs.streamlit.io/library/components/create)
- [コンポーネントを公開する](https://docs.streamlit.io/library/components/publish)
- [コンポーネントAPI](https://docs.streamlit.io/library/components/components-api)
- [コンポーネントに関するブログ記事](https://blog.streamlit.io/introducing-streamlit-components/)

また、ビデオ教材としてTim Conkling氏がチュートリアルを公開していますので、そちらも参考になります。

- [streamlitコンポーネントを構築する方法 | パート1：セットアップとアーキテクチャ](https://youtu.be/BuD3gILJW-Q)
- [streamlitコンポーネントを構築する方法 | パート2：スライダーウィジェットを作成する](https://youtu.be/QjccJl_7Jco)

## コンポーネントについての資料

- [Streamlitコンポーネント - APIドキュメント](https://docs.streamlit.io/library/components)
- [注目のStreamlitコンポーネント](https://streamlit.io/components)
- [Streamlitコンポーネント - コミュニティトラッカー](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634)
- [streamlit\_pandas\_profiling](https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling)

[完全な記事を表示](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day14-streamlitのコンポーネント)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Budo Ogimoto"
  },
  "dateModified" : "2023-12-19T03:12:36.051Z",
  "datePublished" : "2023-12-19T03:12:35Z",
  "headline" : "#30DaysOfStreamlit Day14 Streamlitのコンポーネント",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1531,
    "url" : "https://download.insight-lab.co.jp/hubfs/30days_logo.png",
    "width" : 3121
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day14-streamlitのコンポーネント",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "AIDXナレッジ - INSIGHT LAB"
  }
}
```