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

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

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

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

もっと見る

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の使い方例えば東京で...

List

  • 2017/02/16

Spectacle Editor - HTMLスライドをグラフィカルに作成

HTMLで作るプレゼンテーション用のスライドが流行っていますが、作成するのが意外と面倒だったりします。多くはMarkdownファイルをベースにしたものですが、エフェクトを定義できなかったりとスライドとしてのインパクトに欠けるものもあります。そこで使ってみたいのがSpectacle Editorです。HTMLをベースにし...

List

  • 2016/12/13

katatema - Reactを使った小さな静的サイトジェネレータ

Reactを使うとなんとなくシステムが大事になってしまう雰囲気があります。そのため、大型なWebアプリケーションでないと使うのを控えてしまうでしょう。もっと手軽に小さなツールでも使えると便利なはずです。そこで使ってみたいのがkatatemaです。Reactを使った静的サイトジェネレータです。## katatemaの使い...

List

  • 2016/11/02

exerslide - React製のHTMLプレゼンテーション作成ツール

HTMLのスライドをよく見かけるようになってきました。派手なアニメーションはなくとも、作成のしやすさであったりデザインのカスタマイズが容易なのが利点です。オンラインでの公開も簡単です。今回はFacebookインキュベーターで生まれたHTMLスライド作成ツールexerslideを紹介します。## exerslideの使い...

List

  • 2016/10/01

React Server - Reactの開発をはじめるのに最適なベースを生成

Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使...