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

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

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

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

もっと見る

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の使い...

List

  • 2016/04/07

Draft.js - テキストエディタ開発用のReactコンポーネント

Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コ...

List

  • 2016/03/31

MERN - Express/Reactを使ったWeb開発フレームワーク

Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB +...

List

  • 2016/03/20

React-designer - React製のベクターグラフィックスエディタ

Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。今回はその一つとしてReact-designerを紹介します。Reactで作ら...

List

  • 2016/03/07

Elemental UI - React用のUIフレームワーク

Reactを使うと、デザイナとプログラマの分業が難しくなります。そこは致し方ない部分もあるのですが、デザインが面倒に感じられてしまいます。そこでReactで使えるUIフレームワークを使いましょう。今回はElemental UIを紹介します。## Elemental UIの使い方スクリーンショットを多めに紹介します。まず...

List

  • 2016/03/01

Pixel Art to CSS - スタイルシートで出力できるドット絵エディタ

ピクセルアート、いわゆるドット絵は昔から変わらず人気があります。今のゲーム機ではほとんど見られなくなりましたが、Webやスマートフォンアプリでは使われていたりします。そんなドット絵を作るためのエディタがPixel Art to CSSです。特徴はReactJSで作られていること、さらにCSSで出力できることです。## ...

List

  • 2016/02/22

InfernoJS - 高速なVirtualDOMライブラリ

VirtualDOMの魅力はあれど、Reactは重いというのは度々聞かれます。開発者にとってはDOMの状態を気にしなくなって便利に使える仕組みなれど、速度が遅くなっては意味がありません。そんなこともあって代替のVirtualDOMライブラリがたくさん登場しています。今回はその一つ、InfernoJSを紹介します。## ...