Morph

Morph 1.0

ページ - ローンチウィーク#1

2024-10-29
三橋 啓多
三橋 啓多
共同創業者 COO

皆様こんにちは!ローンチウィークの2日目となる本日は、マークダウンでインタラクティブなデータアプリが構築できる、ページ機能についてご紹介します!

マークダウンでインタラクティブなデータアプリを制作

Morphでは、SQLやPythonを組み合わせて作ったデータパイプラインを、マークダウンの拡張形式である MDX ファイル内に配置することで、すぐにデータアプリのページを作ることができます。

プリメイドのコンポーネントに、PythonやSQLの関数名を指定するだけなので、本当に簡単です!

Morph 1.0

また、スタイリングにはTailwind CSSを用いることができるため、自由にスタイルを指定して、美しく使いやすいデータアプリを制作できます!

制作したページは、コードエディター内か、上部の Pages タブからすぐにアクセスできます。

なぜマークダウン?

当初、データアプリの機能を構想したときには、No-Code形式の画面エディターを考えていました。しかし、Morphのフレームワークはすべてコードで管理されており、それによって高い自由度・カスタマイズ性・保守性を達成しています。そこで例外を作りたくなかったので、コードベースで、かつ誰にとっても簡単にデータアプリページを構築できる方法を探しました。

そこで、マークダウンの形式で記述することができ、かつReactによって機能を拡張することができるMDXを採用しました。

マークダウンは、マークアップ言語としての長い歴史を持ち、専門性を問わず広く使われています。データアプリの制作には、データベースエンジニア・データエンジニア・アナリティクスエンジニア・バックエンドエンジニア・フロントエンドエンジニア・ビジネスマネージャー・マーケティング担当者など、さまざまな職種の人が関わる可能性があります。そんな多様な専門性を持つ人々の共通言語として、マークダウンベースであるMDXを採用することが最適だと考えました。

また、MDXはReactを用いて機能を拡張することができるため、Reactのエコシステムを持ち込むことができることも、MDXの大きな魅力です。Morphのワークスペース上でも、 npm install コマンドからReactパッケージを使うことができます。

SQLやPythonの実行結果を、たった数秒でアプリ化

Morph上で構築したPythonやSQLの結果をMDXに持ち込むために、データフェッチのコードを書く必要はありません。基本的には、コンポーネントを配置していくだけで、インタラクティブなデータアプリを構築することができます。

また、MorphのSQL・Pythonでは、変数を用いることができますが、MDXファイルに変数用のコンポーネントを配置することで、ユーザー入力をSQL・Pythonに渡すことができます。

これにより、従来のBIツールなどのドリルダウン分析のような、事前定義の処理では複雑になり過ぎてしまうような分析であっても、PythonとMDXで柔軟に表現できます!

プリメイドのコンポーネント

Morph上でのデータアプリの構築をより簡単で、成果物をリッチにするために、プリメイドのコンポーネントが数多く用意されています。

詳しくは、ドキュメントをご覧ください!

このコンポーネントライブラリは、今後も積極的にアップデートされていきます。

おわりに

本日はデータアプリページの構築機能であるPageについてご紹介しました!

明日は、Morph AIの最新機能についてご紹介します。お楽しみに!