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

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

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

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

もっと見る

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

List

  • 2016/10/01

Portfolio - Rails/React製のポートフォリオサイト

ポートフォリオサイトというのは一般的に自分の作った作品や写真、デザインしたWebサイトのスクリーンショットを掲載して自分のスキルをアピールします。デザイナーの方に利用者が多いようです。そんなポートフォリオ、エンジニアであればどうなるか。それはポートフォリオサイト自体のシステムになるでしょう。そこで見てみたいのがPort...

List

  • 2016/09/04

flappy-bird - HTML5製のFlappy Birdクローン

有名なサービスはすぐに真似されます。パクリというと悪い印象がありますが、技術者にしてみると真似することでその中で使われている技術、デザインを実践的に学べるという利点があります。今回紹介するflappy-birdはその名の通り、Flappy Birdを真似したソフトウェアです。特徴としてはReactを使ってHTML5アプ...

List

  • 2016/08/30

Di-ary - LaTeXとMarkdownが同時に使えるメモアプリケーション

単にメモを取るアプリケーションであれば数多くあります。それだけに何らかの特徴を持たせる必要があるでしょう。例えばアーキテクチャを工夫しても良いでしょうし、機能的な特徴でも考えられます。今回紹介するのはDi-ary、Ruby on Rails製のノートアプリケーションです。技術的、機能的な特徴のあるソフトウェアです。##...

List

  • 2016/07/01

Monod - オフラインファーストなMarkdownエディタ

MarkdownエディタはWeb、GUIともに増えています。インストール不要で使える分、Webベースのが便利だとは思うのですが、厄介なのはネットワークがない時です。そんな時に使えないのでは使う気が失せてしまうでしょう。そこで使ってみたいのがMonodです。Webベースですが、オフラインファーストなMarkdownエディ...

List

  • 2016/06/09

React Storybook - Reactアプリのコンポーネント開発にお供に!

Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理...

None

  • Premium_s 2016/06/08

React Europe 2016レポート

ここ最近、海外のカンファレンスに足繁く通うようにしているのですが、今回はパリで開催されたReact Europe 2016に参加してきました。Reactは言わずと知れたFacebook製のUIライブラリですが、React Nativeによってアプリ開発まで対応できるようになったことで一気に利用者が増えている感があります...

List

  • 2016/05/18

Reapp - Reactを使ったハイブリッドアプリフレームワーク

最近のスマートフォンはWebブラウザの性能が向上しており、ちょっとしたアプリであればネイティブなのかWebブラウザベースなのか分からないくらいになっています。となるとWebブラウザならではの複数プラットフォームへの対応という利点が活かせるようになります。それを実現するのにCordovaなどのハイブリッドアプリが注目され...

List

  • 2016/05/17

react-jsonschema-form - React製のフォーム生成ライブラリ

Webでフォームを作り、さらにそれを運用するのは意外と面倒です。入力チェックを作ったりするのも大変ですし、それが複数あったりすると嫌になってしまうでしょう。そこで使ってみたいのがreact-jsonschema-formです。JSON Schemaを使ってフォームを生成するReactライブラリです。## react-j...

List

  • 2016/05/08

React Grid Layout - React用のグリッドシステム

Reactを本格的に使っていく上では多くのコンポーネントが必要になります。その基礎となるのがグリッドではないでしょうか。グリッドが作れれば、その中にコンテンツを配置して整理されたレイアウトが作れるようになります。今回紹介するのはReact Grid Layout、React用のグリッドレイアウトシステムです。ドラッグ&...

List

  • 2016/05/01

enclave - WebベースのReactアプリを開発するのに必要な仕組みを提供

ReactでWebアプリを作りたいと思ったとして、最初に問題になるのがデファクトと呼べるアーキテクチャが存在しないことかと思います。Node.js + Expressは良いとして、サーバサイドレンダリングで行う場合の構築法がこれ!というものがないのです。そこで紹介したいのがenclaveです。Reactに特化しつつ、そ...

List

  • 2016/04/20

Rebass - Reactで使えるUIコンポーネント集

ユーザ向けに使うライブラリを使いたいと思うかどうかは、UIが優れているかどうかに大きく左右されます。特にBootstrapが出てきてから、その傾向が強くなっているように感じます。今回はReactと組み合わせて使うUIライブラリRebassを紹介します。実に57種類(執筆時点)もある、UIライブラリです。## Rebas...

None

  • 2016/04/17

native-css - スタイルシートをReact用オブジェクトに変換

Reactではスタイルシートをファイルのまま使うよりも、JavaScriptからスタイル要素に直接指定する方法が好まれます。ただ、その際に問題になるのは通常のスタイルシートと書き方が全く異なるということでしょう。数年前まではデザイナーとエンジニアの作業分担が言われていたのですが、Reactではうまくいきません。そこで代...

List

  • 2016/04/16

iTunes Search by React - Reactでの作り方を知るのに便利なiTunes検索システム

Reactが使われるようになってきていますが、まだ実例が足らないと感じている人も多いでしょう。そうした方はReactで作られたオープンソース・ソフトウェアをチェックすると、内部実装まで確認できて良いです。ということで今回はiTunes Search by Reactを紹介します。iTunes検索のAPIを使ったReac...

None

  • 2016/04/08

React Armor - DOM構造を変化させてクロスサイトスクリプティングを防ぐ

セキュリティインシデントを起こすWebサービスの多くがサーバや入力に対するチェックが甘く、クロスサイトスクリプティングによってDOMを操作されてしまい、情報漏洩を起こします。セキュリティホールがないのがベストですが、万一起きた時のために使えるかも知れないのがReact Armorです。## React Armorの使い...