ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フレームワーク - Reactの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

None

  • 2020/03/19

Edtr.io - React製のWebページ編集コンポーネント

Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr...

List

  • 2020/03/10

OpenChakra - Chakra UI用のビジュアルエディタ

Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。#...

List

  • 2020/02/26

drop.lol - WebRTCを使って任意の相手とファイルの送受信

ファイルを送受信というのは意外と面倒です。特に目の前の相手にファイルを送りたい時です。メールアドレスを聞くのも面倒ですし、そのためにソーシャルメディアを交換するのも手間です。ファイル共有サービスを使おうにも、そのURLを通知するのはどうしたらいいでしょうか。そこで使ってみたいのがdrop.lolです。共通のURLを介し...

List

  • 2020/02/18

Jira clone - React製のJiraクローン

JiraといえばAtlassian社が提供している課題管理、プロジェクト管理になります。大規模な開発をサポートし、企業規模の大きなところで使われているイメージがあります。他のAtlassian製のサービスと連携できるのも強みです。そんなJiraのクローンを目指すのがJira cloneです。新しいテクノロジーを使ったモ...

List

  • 2020/01/28

React Spectrum - カラフルなテキスト用プレースホルダーを生成

Webやアプリのデザインを行う際に、アテで文字列を適用します。同じ文字を繰り返す、小説の一文を使うなど様々な方法がありますが、むしろテキストでない方がいいこともあるでしょう。そんな時に使ってみたいのがReact Spectrumです。カラフルなプレースホルダーを生成します。## React Spectrumの使い方生成...

List

  • 2019/12/28

Markdown Editor - シンプルなWebベースのMarkdownエディタ

Markdownエディタは多数存在します。それらを使うことで、自分のWebアプリケーション内にMarkdownを使った編集機能を簡単に追加できます。特に開発者向きのWebサービスで役立つでしょう。今回紹介するMarkdown EditorはそんなMarkdownエディタの一つです。シンプルですが、使いやすいエディタです...

List

  • 2019/11/17

Mobile First Animation in React - React製のスマートフォンアプリ風UXコンポーネント

Webがどんどんネイティブアプリに近い体験を提供できるようになっています。WebブラウザのAPIもそうですが、アニメーションの高速化によって、スマートフォンアプリのようなUXも実現できます。今回紹介するMobile First Animation in ReactはモバイルWeb向けにアニメーションを提供するReact...

List

  • 2019/11/11

TinaCMS - React製のWebサイト編集ツール

Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目...

Missing

  • 2019/10/26

React SlideShow UI - Slideshare/Speakerdeck風の表示を行うReactコンポーネント

スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。今回紹介するReact SlideShow UI...

List

  • 2019/10/19

upload.express - React製のファイル共有サービス

インターネットを通じたファイル共有サービスはたくさんあります。日本でも幾つかあり、ビジネスでも使われていたりします(ユーザ情報漏洩して炎上したりもしていましたが)。それだけ需要が大きい分野なのでしょう。今回紹介するupload.expressはそんなファイル共有サービスの一つです。UIでReactを採用し、モダンな作り...

List

  • 2019/09/24

Recharts - React用のグラフ/チャートコンポーネント

Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。今回はRechartsを紹介します。React用のチャートコンポーネントです。## Rechartsの使い方グラフのサンプルをスクリーン...

List

  • 2019/09/14

ForrestJS - ReactでSSR対応のPWAを開発

PWAはオフラインでも動作することが求められるので、クライアントサイドで表示内容を制御します。その結果、サーバサイドレンダリングは弱い傾向にあります。最近ではGoogleのクローラーがPWAでも動作するようになっていますが、サーバサイドレンダリングが不要な訳ではありません。そこで注目したいのがサーバサイドレンダリングを...

List

  • 2019/05/16

React95 - 懐かしのWindows 95のUIをReactで

Windows 95が発売してからすでに25年が経とうとしている事実。4半世紀前になるのです。その頃からMac派なのでWindows 95発売日の祭りはニュースで見た程度なのですが、PCの歴史が変わった瞬間でもありました。そんなWindows 95のUIを現在の技術、Reactで再現しようというのがReact95です。...

List

  • 2019/04/15

GoDiscourse - Go製のフォーラム

Webの歴史はコミュニケーションからはじまったといっても過言ではないでしょう。ネットニュースやIRCなどからはじまり、Eメールやフォーラム、さらに最近ではSlackに代表されるチャットやソーシャルメディアもあります。常にコミュニケーションが中心にあります。今回紹介するGoDiscourseもそんなコミュニケーションを促...

List

  • 2019/02/12

Ownphotos - Django & React製のGoogle Photosクローン

Google Photosは小さな画像であれば無料でアップロードできて便利なサービスです。しかしGoogleはこれまでに類似サービスを次々とつぶしてきた歴史があるので、安心して利用できないサービスでもあります。そこでGoogle Photosクローンを冠するOwnphotosの紹介です。自分で立てるならつぶれる心配はあ...

List

  • 2019/01/20

React Kawaii - React用の可愛いコンポーネント

Webコンポーネントの考え方を取り入れることで、Webサイトのデザインを再利用しやすくなります。実用的なコンポーネントもすでに出てきていたり、複雑な機能を可能にするコンポーネントを導入することでWebサイトを作りやすくなります。そんな中、今回はちょっと変わり種のコンポーネントReact Kawaiiを紹介します。Rea...

List

  • 2018/05/04

React Velocity - Reactアプリのコンポーネントを作成

Reactで開発を進める際に、まず画面全体の設計を行うのが大事です。全体を囲むコンポーネント、そして画面の各要素を構成するコンポーネントと順番に作っていきます。それをやらずに開発を進めると後で修正が大変でしょう。そこで使ってみたいのがReact Velocityです。コンポーネント設計を行い、スケルトンコードを生成しま...

List

  • 2018/04/20

React Slack Clone - ReactとChatkitで作ったSlackクローン

一つの流行ったサービスが出てくると、そのクローンサービスとも言える存在が次々に登場します。最近多いのはSlackクローンでしょう。Slackを置き換えようとするものもありますし、単に自社技術と合わせる目的のものもあります。今回紹介するReact Slack Cloneは後者に近いもので、Pusherが提供するChatk...

List

  • 2018/03/06

SQLECTRON GUI - SQLECTRONのGUIフロントエンド

コンソール上で簡易的なデータベース管理UIを提供するSQLECTRON

List

  • 2018/03/04

Proton Native - React Nativeのデスクトップ版

Electronを使えばデスクトップアプリとして動作するソフトウェアがクロスプラットフォームで作成できます。しかし、HTMLなのでUIを作るのが若干大変という印象があります。同様のことはモバイルアプリでも起きており、Reactが示した解決策がReact Nativeになります。そしてProton NativeはReac...