ソフトウェア開発者のための OSS、まとめてみました!

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア(OSS)をまとめています!

MENU

React を真剣に学習し基礎を深めたいなら!「React Interview Questions & Answers」

概要

皆さんは Web アプリを作る際はどんな言語を使用していますでしょうか?

私はもっぱら JavaScript を利用しているため、React.js や Next.js を使用して開発を行っています。

ただ、React.js ですがなんとなく使用することはできるのですが、細かい部分に突っ込みなどされると基礎を突き詰めていないため回答できないことがありました。

そんな中、React.js を基礎から学習することができ、知識を深めることができる OSSGitHub に公開されていたため、今回はこちらをご紹介しようと思います。

今回ご紹介するのは、React.js を基礎から学び知識を深めることができる OSSReact Interview Questions & Answers」になります。

全体的に英語ですが、章立てがされていたり実際のソースコードが例として記載されているなどされているので、勉強しやすい形になっているかと思います。

それでは早速使い方などについて見ていきましょう!

目次

特徴

まず特徴ですが、主には章立てされているところにあると思いました。

また、1 つ 1 つの章が短いため、章の内容を完結に理解することができますし、比較的簡単に読むことができますね。

最初の方だと、React.js とは何か?React.js の主な特徴は何か?など、基本的なところから入り、実際の React.js の使い方について説明がされており、だんだんと内容的に濃くなっていっています。

現時点(2024/2/1 時点)では章が 338 章まであるため、React.js についてより深く学ぶことができそうです!

利用手順

利用方法は以下の GitHub の Readme を閲覧することで利用することができます。

github.com

使用感

早速私も使ってみました!

私自身は React.js を普段から利用しているので最初の方はふんふんそうだね、といった感じで流し読みしていましたが、50 章くらいからはだんだんと込み入った話になっており、なるほどーという感じでとても勉強になりました。

例:67 章:コンポーネントを条件付きでレンダリングするにはどうすれば良いでしょうか?

今まで知らなかった基礎的な内容を学ぶことができるので、個人的にはとても勉強になりました!

まとめ

今回は、React.js を基礎から学び知識を深めることができる OSSReact Interview Questions & Answers」についてご紹介しました。

私自身は React.js を普段から利用していて理解しているので、ほとんどの内容は知っている内容だろうと思っていたのですが、全然自分の知識は浅はかだったことに痛感しました。

今後はこちらの「React Interview Questions & Answers」を参考にしながら、React.js の知識を増やしていき、深めていけたらと思います。

全編英語表記ですが、簡単な英語で記載されているのとソースコードの例もたくさん載っていますので、そこまで苦ではないかと思います。

React.js について知識をより深めたいと考えている方、基礎的な内容も復習しながら学ぶことができますので、ぜひ一度こちらの OSSReact Interview Questions & Answers」に触れてみてはいかがでしょうか。

ライセンス

特に明記されていませんでした。

リンク

react.gg

github.com

AI に関する GitHub 上の有意義なまとめリストを提供!「AI Collection」

概要

皆さんは普段から AI を生活の中で利用していますでしょうか?

最近では iPhone に搭載されている Siri なんかも AI の一部として紹介され、iPhone を持っている方は一度くらいは利用したことがあるのではないでしょうか。

AI とはそもそも「人間のような知能を持ったコンピューター」のようなものと考えられており、人間の何かしらの質問だった理に回答を自動で返してきてくれる便利な奴、と認識いただいてもかまいません。

monstar-lab.com

人間の質問だったりに良い感じで自動応答してくれる AI ですが、やはり GitHub 上には様々なサービスだったりアプリ、アルゴリズム、仕組みなどがたくさん開発されています。

AI についてはこれまでもたくさんの技術だったりサービスが開発されていますが、どれを見たらよいか迷ってしまう方もいらっしゃるかもしれません。

そこで今回は、AI についての有益なサービスを 1 つのリストにまとめてくれている OSSAI Collection」になります。

それでは早速詳細について見ていきましょう!

目次

特徴

AI Collection」の特徴としては、AI に関する数多くの サービスを分類してわかりやすくまとめなおしてくれている点ではないでしょうか。

次のようにリストの分類ごとに AI サービスをまとめてくださっています。

また、AI に関連するサービスの内、トップ 3 に入るサービス・製品が README にまとめられていました。

忙しい方だったり、とりあえず今話題の AI サービスは何だっけ?といった方にはこちらのまとめはうれしいかもしれませんね。

あとは、翻訳作業が徐々に進められてきているという点かと思います。

まだ日本語への翻訳はされていませんが、以下の言語に対応しているようです。

これから日本語翻訳されたバージョンも見てみたいですね。

利用手順

利用手順としては「AI Collection」の README を参照することで見ることが出来ます。

github.com

使用感

早速私もこちらの「AI Collection」についていくつか内容を見てみました。

AI Collection」の中で今最も熱い 3 件のサービスが紹介されていますので、もし多すぎて何から見ようと悩んでいる方にとって、まずは取り組みやすいかもしれませんね。

また、下へスクロールしていくと、AI を利用したサービスだったりアプリの内、「AI Collection」が有益だと判断されたものがまとめられていました。

現在私自身はチャットボットにはまっているので、チャットボットに関連した AI を見てみると、以下のようなリストが表示されました。

チャットボットだけで AI を利用したサービスが 11 件も出てきました!

また内容としてもタイトル、簡単な説明、あとは無料利用可能か、といった情報も記載されていました!

気になっている AI サービスだったりアプリがこちらの「AI Collection」にまとめられていたら、一度内容を確認されてみるのもよいでしょう。

まとめ

今回は、AI についての有益なサービスを 1 つのリストにまとめてくれている OSSAI Collection」についてご紹介しました。

AI に関連するサービス・アプリ・仕組みなどについて、「AI Collection」が有益であると判断されたものがリストとしてまとめられるので、本当に素晴らしいサービスしか集まらず質の良いリスト化と思います。

AI に興味を持っている方やこれから AI について触ってみたいと思っている方にとっても、とても有益な OSS になるかと思います。

一度見てみたいなと思った方は、ぜひ一度こちらの「AI Collection」を参照ください!

ライセンス

Creative Commons Zero v1.0 Universal

リンク

ai-collection.org

github.com

Web と React Native の両方で動作する UI ライブラリ!「TAMAGUI」

概要

皆さまは普段アプリなどを作成していたり、何かしらのサービスを開発されていますでしょうか?

私自身は主に Web アプリやサービスを個人的に開発していたり、時々趣味でモバイルアプリなども作成しており、プログラミングを楽しんでいます。

Web アプリ・サービスを開発しているときは TypeScriptReact.jsNext.js などを主に利用しており、モバイルアプリを開発しているときは FlutterKotlin、React Native、時々 Object-C を利用しています。

nextjs.org

ja.legacy.reactjs.org

www.typescriptlang.org

flutter.dev

developer.android.com

いろいろなプログラミング言語を触れたり、新しいライブラリやフレームワークなどを触りながら趣味のようにプログラミングをしているので、個人的にはとても楽しく開発作業をしています!

しかし時々、Web サービス開発時に利用していたデザイン関連のライブラリ・モジュールが、モバイルアプリ開発にも利用できたらいいな、などと思う時があります。

そんな時、Web サービス開発時に利用でき、かつモバイルアプリ開発時に利用できるフレームワーク React Native の両方で動作する UI ライブラリを見つけましたので、今回はこちらについてご紹介しようと思います。

今回ご紹介する OSS は、Web と React Native の両方で動作する UI ライブラリ「TAMAGUI」になります。

TAMAGUI」は Web と モバイルの間でより多くのソースコードを共有することを目的に作成された OSS になります。

それでは早速詳細について見ていきましょう!

目次

特徴

TAMAGUI」の特徴としては、やはり Web と React Native とで同じように UI を開発することが出来るという点でしょうか。

また、「TAMAGUI」を利用することで、DX、パフォーマンス、およびソースコードの保守性を犠牲にすることなく、かつ改善しながら Web アプリとモバイルネイティブアプリの間でソースコードを共有することが出来るそうです!

利用手順

TAMAGUI」をインストールする方法は以下のコマンドを実行することで利用可能です。

Web

yarn add tamagui

インストール後は環境変数をそれぞれ以下のように、TAMAGUI_TARGET=web webpack のように設定します。

{
  "scripts": {
    "dev": "TAMAGUI_TARGET=web webpack"
  }
}

モバイルネイティブ

TAMAGUI_TARGET=native react-native start
TAMAGUI_TARGET=native expo start

また、次のように TAMAGUI_TARGET をインライン化するように、 Metro と Babel に示すようにします。

yarn add @tamagui/babel-plugin babel-plugin-transform-inline-environment-variables
  • babel.config.js
// just to ensure TAMAGUI_TARGET is set
process.env.TAMAGUI_TARGET = 'native'

module.exports = {
  plugins: [
    ['transform-inline-environment-variables', {
      include: ['TAMAGUI_TARGET']
    }]
  ]
}

使用感

いくつか公式ドキュメントのほうのソースコードを見てみました。

import { Stack, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Stack margin={10}>
    <Text color="$color">Hello</Text>
  </Stack>
)

StackText は「TAMAGUI」のベースとなる要素であり、React Native の ViewText と同等ということです。

一方 Web の場合はデフォルトでは divspan に変換されます。

また、styled を使用することで、既存のコンポーネントを拡張して新しコンポーネントを作成することもできるそうです。

import { Stack, styled } from 'tamagui' // or '@tamagui/core'

export const Circle = styled(Stack, {
  borderRadius: 100_000_000,

  variants: {
    pin: {
      top: {
        position: 'absolute',
        top: 0,
      },
    },

    centered: {
      true: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },

    size: {
      '...size': (size, { tokens }) => {
        return {
          width: tokens.size[size] ?? size,
          height: tokens.size[size] ?? size,
        }
      },
    },
  } as const,
})

上記のソースコードでは、第 1 引数に渡されている Stack コンポーネントを拡張し、Circle コンポーネントを定義しています。

Props の宣言方法はいくつか種類がありますが、上記のように variantscentered などで宣言します。

内容としては JavaScript を触ったことがある方にとってはそこまで難しくなく利用することが出来そうだな、という印象でした。

このほかにも様々な記法やテクニックがありますので、詳細について把握したい方はぜひ公式ドキュメントのほうを参照されることをおすすめします!

tamagui.dev

まとめ

今回は、Web と React Native の両方で動作する UI ライブラリ「TAMAGUI」についてご紹介しました。

TAMAGUI」を利用することで、Web とモバイルネイティブとで同じようにソースコードを書いてデザインを作成することが出来るため、ソースコードの管理がしやすくなりそうですね。

自分も今後は積極的にこちらの「TAMAGUI」を使用して開発を進めていきたいなと思いました!

普段 Web アプリを開発していて React Native でモバイルアプリを開発することになったが何か良いデザイン用ライブラリがないかお探しの方、もしくはその逆で、普段 React Native でモバイルアプリを開発していて Web アプリを開発することになったが何か良いデザイン用ライブラリがないかお探しの方は、ぜひ一度こちらの「TAMAGUI」を利用されてみてはいかがでしょうか?

ライセンス

MIT License

リンク

tamagui.dev

github.com

Python でシステム構成図を書いてみたいなら!「Diagrams」

概要

突然ですが、皆さまはシステム構成図を描いていますでしょうか?

システム構成図とは簡単に説明すると、システム全体の構成を図で表したものを指します。

主にシステムの機能やネットワーク構成、セキュリティ要件などを表現することが可能で、システムの全体像を把握することを容易にし、問題の特定を簡単にしてくれます。

システム構成図を作成することができるとシステム上の問題やクライアントとのコミュニケーションの支援などが容易になり、プロジェクトを円滑に進めることもできる素晴らしいものです。

参考: システム構成図の書き方のコツ3選!作成するメリットや利用できるサイトを紹介 - 比較 BiZ 発注ノウハウまとめ

www.biz.ne.jp

そんなシステム構成図ですが、Google 検索などで検索してみるとどれもきれいに描画されていて、初めてシステム構成図を各方にとってはハードルが高い場合もあるかと思います。

そんな方たちに朗報です!

今回はシステム構成図を簡単にかける OSS を見つけましたので、ご紹介しようと思います。

今回ご紹介する OSS は、プログラミング言語 Python でシステム構成図を簡単に描画することができる「Diagrams」についてご紹介しようと思います。

こちらの「Diagrams」を使えば、主にクラウドシステム構成図を Python を利用して簡単に描画することが可能です!

それでは早速詳細について見ていきましょう!

目次

特徴

Diagrams」の開発コンセプトとしては、設計ツールを使用せずに新しいシステム構成図のプロトタイプを作成するというものでした。

現在ではそのコンセプトを発展させ、簡単にかつ綺麗描画することができるようになりました!

さらに、「Diagrams」では以下のクラウドサービスのシステム構成図を簡単にかけるようにサポートされています。

また、クラウドサービス以外にもオンプレミス用に便利な機能であったり、主要なプログラミング言語フレームワークに対してもシステム構成図を簡単に描画できるようサポートされているということでした。

利用手順

事前準備

Diagrams」を利用するには Python 3.6 以降がインストールされていることが必要です。

インストールしていない場合は事前にインストールを済ませておきましょう。

www.python.org

また、Graphviz という OSS も事前にインストールされていることが必要ということなので、こちらもインストールされていない方は、以下から事前にインストールしておきましょう。

www.graphviz.org

インストール方法

Diagrams」をインストールするには以下のコマンドを実行します。

# pip (pip3) を利用する場合
$ pip install diagrams

# pipenv を利用する場合
$ pipenv install diagrams

# poetry を利用する場合
$ poetry add diagrams

使用感

早速私のほうでもこちらの「Diagrams」を利用してみました!

公式ドキュメントのほうを写経して以下のようなソースコードを作成して Python スクリプトを実行すると、AWS のシステム構成図が描画されていました!

diagrams.mingrammer.com

# diagram.py
from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Service", show=False):
    ELB("lb") >> EC2("web") >> RDS("userdb")

実行した Python スクリプトは以下。

python diagram.py

実際に生成されたシステム構成図(PNGファイル)は以下。

Diagrams」では上記のように少ないソースコードできれいなシステム構成図を簡単に描画することができるので、これまでシステム構成図を書いたことがない方にとっても良い選択肢になりそうですね!

また、「Diagrams」では項目をリスト化することでシステムをグループ化することができたり、クラスター化して 1 つにまとめたりすることができるようです!

グループ化

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Grouped Workers", show=False, direction="TB"):
    ELB("lb") >> [EC2("worker1"),
                  EC2("worker2"),
                  EC2("worker3"),
                  EC2("worker4"),
                  EC2("worker5")] >> RDS("events")

クラスター化

from diagrams import Cluster, Diagram
from diagrams.aws.compute import ECS
from diagrams.aws.database import RDS
from diagrams.aws.network import Route53

with Diagram("Simple Web Service with DB Cluster", show=False):
    dns = Route53("dns")
    web = ECS("service")

    with Cluster("DB Cluster"):
        db_primary = RDS("primary")
        db_primary - [RDS("replica1"),
                     RDS("replica2")]

    dns >> web >> db_primary

公式ドキュメントのほうには他にもいろいろな表記方法が記載されていますので、実際にシステム構成図を書いてみようかなと考えている方は、一度こちらの公式ドキュメントを見てみると良いですね!

まとめ

今回は、プログラミング言語 Python でシステム構成図を簡単に描画することができる「Diagrams」についてご紹介しました。

システム構成図を描画することができればシステム全体について理解することができるだけでなく、プロジェクトを円滑に進めることが出来るため、エンジニアとして仕事を進めていく上では必須スキルかと思います。

システム構成図をプログラミング言語で記述してみたいなと思っていた方や、システム構成図をこれから始めて書いてみる方などにとっても最適な選択肢になるかと思います。

Python 言語で簡単に記述することが出来るため、気になった方は一度試してみてはいかがでしょうか?

ライセンス

MIT License

リンク

diagrams.mingrammer.com

github.com

OpenAI API を利用した RPG のような環境を実現!「GPTRPG」

概要

ChatGPT が世間をにぎわせている中、一度は ChatGPT を触ったことがある方が多いかと思います。

ChatGPT はアメリカの OpenAI 社が開発した人工知能を使ったチャットサービスのことで、人間の質問に対してまるで人間のように自然に答える技術を搭載しており、AI と自然な会話ができると今話題となっています。

参考:ChatGPT(チャットGPT)とは?始め方・使い方・ログイン手順・料金を解説|日本語には対応している? - GOAL

www.goal.com

そんな ChatGPT ですが、なんと API 経由で ChatGPT を利用することができるよう OpenAI 社が公開しているため、ChatGPT の機能を組み込んだサービスが GitHub 上でも数多く開発・公開されています!

ChatGPT の API を利用して、ChatGPT をデスクトップアプリで利用できるサービスが開発されたり、音声合成技術と組み合わせた新しいサービスなども次々と開発されたりしています。

そんな中、OpenAI API を全く新しい観点で利用しているサービスがあったので、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、OpenAI API を利用して RPG のような環境を実現した「GPTRPG」になります。

GPTRPG」はブラウザ上で動作し、まるで RPG のような世界観を実現しています。

OpenAI API は、キャラクターのおかれた周囲の状態やキャラクター自身の状態について判断させ、UI 上で表示させるために使用されているそうです。

それでは早速詳細について見ていきましょう!

目次

特徴

GPTRPG」の特徴として、OpenAI を利用したキャラクターの意思決定が、周囲の環境を判断してなされるという点があります。

本記事執筆時点(2023年4月時点)では、キャラクターが可能なアクション(どのタイルに移動できるかなど)、周囲の状況、およびキャラクター自身の状態(現在は眠気のみが測定される)が、OpenAI API 経由で回答され、UI 上に表現されるようです。

その他の特徴としては、本記事執筆時点で以下のことができるようです。

  • キャラクターの操作
    • キーボードのカーソルキーでキャラクターを移動可能
    • 植物タイルに種を植えることが可能(キーボード「s」キー)
    • 植物タイツから食料を収穫することが可能(キーボード「d」キー)

OpenAI API を使った、新しい ChatGPT の使い方として、今後の発展に期待が持てますね!

利用手順

利用方法としては、GitHub リポジトリからソースコードをクローンし、ローカル環境で動作させる方法のみとなっています。

なお、「GPTRPG」は Node v16.19.0 で動作確認済みとのことなので、必要に応じて Node.js をインストールしてください。

nodejs.org

  1. ソースコードのクローン
   git clone https://github.com/dzoba/gptrpg.git
  1. agent/.env.json に OpenAI API キーを設定

  2. 必要な Node.js モジュールのインストール

gptrpg に移動して、必要なモジュールをインストールします。

   cd gptrpg
   npm install
  1. ローカル環境で起動
   npm start

起動後は、http://localhost:3000/ にアクセスして動作を確認できます。

使用感

早速私のほうでもこちらの「GPTRPG」を試してみました!

キャラクター自体はキーボードのカーソルキーで操作できました!

ただ、植物タイルに種を与える操作「s キー」と植物タイルから食料を収穫する操作「d キー」を行うと画面が固まってしまう現象が起きてしまいました。

現在も絶賛開発中ということなので、このあたりのバグなども修正していってほしいですね。

また、今後の機能実装予定項目として、以下の内容が挙げられていました。

  • マルチエージェントのサポート
  • エージェント アクションの追加 (飲む、食べる、食べ物を植える、食べ物を収穫する、詩を書くなど)
  • エージェントの状態の追加 (空腹、喉の渇きなど)
  • エージェントの記憶機能
  • ウェブへの展開
  • 人間が操るキャラクターの追加
  • UI の強化 (エージェントの状態、人間とのやり取りなど)

さらなる機能の追加に期待ですね!

まとめ

今回は、OpenAI API を利用して RPG のような環境を実現した「GPTRPG」という OSS についてご紹介しました。

ChatGPT の API を全く新しい形で利用している OSS サービスだったので、非常に興味深かったです!

OpenAI API(ChatGPT)を利用してキャラクターの置かれている状況や心情なども表現しようという試み、自分では思いつかない発想だったので、今後のさらなる開発にとても興味を持ちました!!

ChatGPT の新たな活用方法について興味がある方や、新しい RPG の在り方に興味がある方は、ぜひ一度こちらの「GPTRPG」を試してみてはいかがでしょうか。

ライセンス

特に明記されていませんでした。

リンク

github.com

ChatGPT と Azure の人工知能言語モデルを基に作成された話す ChatGPT!「Polyglot」

概要

ChatGPT が登場し社会に絶大なインパクトを与えて久しくないですが、今では様々な ChatGPT のサービス(OpenAI API を利用したサービス)が登場してきています。

aismiley.co.jp

openai.com

そんな中、また新たに ChatGPT に関連する面白い OSS を見つけましたので、ご紹介しようと思います。

今回ご紹介する OSS は、ChatGPT と Azure の人工知能言語モデルを基に作成された、話す ChatGPT「Polyglot」になります。

こちらの「Polyglot」ですが、多くの言語に対応しており、さらにデスクトップアプリとして利用することができる、なかなか素晴らしいアプリとなっています。

それでは早速詳細について見ていきましょう!

目次

特徴

こちらの「Polyglot」の特徴ですが、以下の点が挙げられていました。

  • 多言語対応
    • 英語、日本語、韓国語、フランス語、その他
  • 音声合成機能
    • Azure TTS サービスを利用
  • 自然な対話機能
    • ChatGPT(OpenAI API を利用)
  • ダークモードをサポート
  • テキスト翻訳機能

現在絶賛開発中ということもあるため、その他にも随時機能が追加されるようです。

気になった方は README からどのような特徴・機能があるかを確認してみると良いですね。

利用手順

利用方法としてはインストーラー経由で起動する方法と、リポジトリ経由で起動する方法があります。

インストーラ経由で利用する方法

インストーラ実行後、「Polyglot」が起動しますので、アプリ画面の「Setting」から OpenAI API キーを入力して利用ください。

リポジトリ経由で起動する方法

  1. リポジトリをクローン
   git clone https://github.com/liou666/polyglot.git
  1. pnpm を利用して必要なモジュールをインストール
   cd polyglot
   pnpm install 
  1. 環境変数ファイル名を変更
   mv .env.example .env
  1. ローカルサーバー起動 cmd pnpm dev

起動後はデスクトップアプリが起動しますので、OpenAI API キーを「Setting」から設定して利用ください。

使用感

早速私のほうでもこちらの「Polyglot」を利用してみました!

少し触ってみた感触としては、ChatGPT のように自然言語で AI と対話できるし、きちんと日本語にも対応していました。

チャット画面のほうにもありますが、AI 側の回答についてはきれいな音声・発音で話してくれますし、こちらの音声もマイク経由で入力することができたため、音声操作・返答が不自由なくできる ChatGPT という印象でした!

AI 側のアイコンを自分好みに変更できる点、名前も変更できる点、返答してくれる言語も変更できる点について、とても素晴らしいなと思いました!

個人的に気になった 2 点ありました。

1 つめはユーザーのアイコン変更ができなそうという点で、AI 側のアイコンを変更できるなら、ユーザー側のアイコンも変更できたらよかったなと思いました。

もう 1 点は AI が返答した内容を翻訳した文言の音声出力できなそうという点で、翻訳したメッセージの下にあるスピーカーマークを選択しても、デフォルトで設定した言語でした音声出力してくれないので、翻訳してくれたらなと思いました。

(下の図だと、翻訳機能で中国語に変換してくれているのですが、この状況でスピーカーマークを選択しても中国語でなく日本語の音声が出力されてしまうということです。)

ただ、「Polyglot」は本記事執筆時点でバージョンが「0.1.1」ということもあり、現在絶賛開発中です!

そのため、上記で気になった点も正式版時点では改善されていることだと思います。

個人的にはとても素晴らしいアプリだと思ったので、正式版まで気長に待ちたいなと思いました!

まとめ

今回は、ChatGPT と Azure の人工知能言語モデルを基に作成された、話す ChatGPT「Polyglot」という OSS についてご紹介しました。

ChatGPT を利用したサービスは現在も続々と開発され続けています。

その中でも音声入力・音声出力が高いレベルで可能、かつ多言語にも対応しているというこちらの「Polyglot」は、内容としても非常に素晴らしいサービスかと思います。

ChatGPT を音声入力・出力してみたいという方や少しでも気になった方は、ぜひこちらの OSSPolyglot」をインストールしてみて、動かしてみてはいかがでしょうか。

ライセンス

MIT License

リンク

github.com

github.com

Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント!「shadcn/ui」

概要

Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか?

私自身は普段から React.jsNext.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。

ja.reactjs.org

nextjs.org

tailwindcss.com

mui.com

そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。

いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。

今回ご紹介する OSS は、Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネントshadcn/ui」になります。

上図のように、とてもきれいな UI をこちらの OSS を利用すると実現することができるそうです。

それでは早速詳細について見ていきましょう。

目次

特徴

shadcn/ui」の一番の特徴としては、コンポーネントライブラリではない点でしょうか。

TailwindCSS や MUI の場合は NPM など外部ライブラリを読み込んで利用するかと思いますが、「shadcn/ui」の場合はソースコードをコピーして直接アプリのほうへ張り付けるなどして利用するようにとドキュメントに記載があります。

そのため、あくまでもドキュメントにある UI デザインは参考例で、独自の UI を作成することができる!というのが売りのようです。

ちなみに、Radix UI(レイディックス)とは次世代の Headless UI コンポーネントということでした。

www.radix-ui.com

Headless というのはスタイルが適用されていないということで、UI を「見た目」と「振る舞い」に分けたとき、「見た目」が取り除かれているようなイメージということです。

Radix UI についての詳細は以下の記事のほうが詳しく記載されていますので、気になった方はこちらの記事を参考にしてみてください。

zenn.dev

利用手順

利用方法としてはいくつかあるので、ご紹介します。

プロジェクトを新規作成する場合

以下コマンドを利用して「shadcn/ui」を導入します。

npx create-next-app -e https://github.com/shadcn/next-template

なお、上記のコマンドでプロジェクトを作成すると、以下機能を含むプロジェクトが作成されます。

  • Next.js (v13)
  • Tailwind CSS
  • TypeScript
  • ESLint
  • Prettier

Next.js、TypeScript を利用される方にとってはこちらの方法でのインストール方法が良いかと思います。

create-next-app でプロジェクトを作成した場合

CLI より「shadcn/ui」をインストールすることができます。

npx create-next-app my-app

上記で作成していた場合、以下のコマンドより「shadcn/ui」をインストールします。

npx shadcn-ui init

手動で適宜インストールする場合

プロジェクトに以下の Node モジュールを依存関係のあるものをインストールします。

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

その後、@ エイリアスtsconfig.json に設定します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Tailwind CSS に関連する tailwind.config.js ファイルを以下のように修正します。

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

続いて、styles/globals.css のほうに以下のようにスタイルを設定します。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

最後に、Tailwind CSS クラスを条件付きで簡単に追加できるよう、cn ヘルパーを設定します。

以下のように lib/utils.ts ファイルに設定を反映させます。

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

使用感

今回はデモ版が公開されていましたので、実際の使用感についてこちらのデモ版から確認したいと思います。

ui.shadcn.com

こちらのデモ版を確認するに、非常きれいな UI を構築することができるということがわかりますね。

また、公式ドキュメントのほうでも UI コンポーネントごとにソースコードが公開されていたり、実際のサンプルでもなども表示されていますので、「shadcn/ui」を使った UI 構築はとても簡単に実装できそうな印象です。

また、各 UI コンポーネント後にソースコードのインストール方法だったり簡単な例、メモなども記載されていますので、すぐにでも「shadcn/ui」を使用してアプリ開発・デザイン調整ができそうだなと思いました!

まとめ

今回は、Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネントshadcn/ui」についてご紹介しました。

Web サービス・アプリを開発しているがいつもと同じようなデザインになってしまうという方、何か新しいデザインフレームワークを使ってみたいといった方などに、今回紹介した OSSshadcn/ui」は良い選択肢の 1 つかもしれません。

興味を少しでも持った方は、ぜひこちらの「shadcn/ui」を一度利用してみてはいかがでしょうか。

ライセンス

MIT LIcense

リンク

ui.shadcn.com

ui.shadcn.com

github.com