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

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

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

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

もっと見る

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...

List

  • 2018/02/19

Reacteroids - React製のアステロイド

新しい言語やフレームワークを覚えるのに、まず何か作ってみるのはお勧めです。書籍を見るだけでなく、実際に手を動かしてみると分かることがたくさんあります。脳の刺激にもなり、記憶定着に役立つでしょう。今回紹介するのはReacteroids、Reactを使ったアステロイドです。## Reacteroidsの使い方ゲーム画面です...

List

  • 2018/02/18

ReForum - React × MongoDBの掲示板

掲示板はインターネット黎明期の頃から存在しました。今でも某巨大掲示板をはじめとして、掲示板システムは健在です。チャットと異なり、多少の非同期感がちょうど良く、多くの人たちによって日夜会話が続いています。そんな掲示板システムの最新版としてReForumを紹介します。Reactを使った先鋭的な掲示板となっています。## R...

List

  • 2018/01/23

Yogurt - React製のドキュメント作成システム

Web上でコンテンツを作る際のUIについて悩むことはないでしょうか。一ページずつ作る仕組みにするのがシンプルですが、ユーザにとって使いやすい仕組みとは言いづらいです。そこで参考にしたいのがYogurtです。Reactを使い、ユーザビリティの高いドキュメント作成が可能です。## Yogurtの使い方編集画面です。カテゴリ...

List

  • 2018/01/10

Docusaurus - Facebook製のオープンソース・ドキュメントサイト

開発ドキュメントの整備は大きな問題です。ソースコードに書かれたりWikiや何らかのCMSを使ったりと様々な方法がありますが、これといった解決策はなかなか見つけられません。そこで使ってみたいのがDocusaurusです。Facebook製のオープンソース・ドキュメントサイトです。## Docusaurusの使い方メインペ...

List

  • 2018/01/09

Misago - Django/Python製の掲示板

Web上でのコミュニケーションの基本と言えばフォーラムでしょう。ユーザであれば会話ができればそのシステムに目を向けることはありませんが、開発者は違います。Pythonのフォーラムが別な言語で作られていたら嫌ですよね。今回紹介するMisagoはDjango/Pythonで作られています。フロントエンドはReact.jsに...

List

  • 2017/09/25

Megadraft - Draft.JSをベースにしたリッチテキストエディタ

Facebookが開発している、WYSIWYGエディタのベースになるDraft.JS

List

  • 2017/08/31

CodeSandbox - Reactのオンラインプレイグラウンド

Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです...

List

  • 2017/07/12

React Native Web Player - React NativeをWebでプレビュー

ReactはWebだけでなく、スマートフォン開発においても使えるフレームワークになっています。一度書けばすべての環境で動作する、という訳ではありませんが一度Reactの書き方に慣れてしまえば様々な環境に対してソフトウェアが開発できるようになります。そんなReactのスマートフォン版であるReact NativeをWeb...

List

  • 2017/05/25

Bemuse - ハマらないよう注意。Webベースの音ゲー

音ゲーは根強い人気のあるゲームジャンルです。やり方も手を使ったりバチを使う、足で行うなど様々な種類があります。手で行うものであればパソコンで再現されたソフトウェアも数多く存在します。好きな方はハマってしまうことでしょう。そんな音ゲーをWebブラウザベースで楽しめるのがBemuseです。HTML5で作られているので幅広い...

List

  • 2017/05/10

React Timekeeper - Google Keepアプリにインスパイアされた時間入力UI

時間の入力インタフェースは意外と古くさくて面倒な場合が多いです。日付はカレンダーで入力できるのに、時間はドロップダウンでいちいち選択しないといけません。テキストで入れる場合も数字のみしか入力できないようにしなければならないでしょう。そんな時間入力インタフェースとして作られたのがReact Timekeeperです。Go...

List

  • 2017/03/13

Flatris - React製。プログレッシブWebなテトリス

HTML5がどんどん高機能化、表現力が高くなっているのに合わせて、これまでローカルアプリケーションでしか実現できなかったようなことがWeb上でできるようになっています。ゲームもその一つです。今回紹介するFlatrisはプログレッシブなWebテトリスです。HTML5でさくさくと遊べます。## Flatrisの使い方ゲーム...

List

  • 2017/02/21

Citii - 各都市で生活するにはどれくらいお金がかかるのか、が分かるアプリケーション

海外で暮らしてみたいというのは島国の日本ならではの夢かも知れません。海外には海外の良さがありますが、もちろん悪いところもあります。まず現状と同等の生活を送れるのかをチェックしなければなりません。そこで使えるのがCitiiです。各国の生活コストがどれくらいなのか分かるソフトウェアです。## Citiiの使い方例えば東京で...