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

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

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

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

もっと見る

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を紹介します。## ...

List

  • 2016/02/09

imba - RubyとReactが好きな方に触ってみて欲しいWebアプリケーション開発言語

JavaScriptは徐々に進化していますが、それでもRubyやPythonに比べると冗長的で書きづらいと感じる人も多いのではないでしょうか。しかしReactが面白いので嫌々ながらもJavaScriptを使っている、なんて方もいるはずです。そんな方に試して欲しいのがimbaです。RubyとReactを使いこなす方向けに...

List

  • 2016/01/18

React Komik - Reactを使ってマンガを編集

Reactを使ったWebアプリケーションが数多く作られるようになっています。興味深いのは入力した後のリアルタイムな反応でしょう。そのためチャット系のソフトウェアが多いように見えます。今回はちょっと変わってReact Komikを紹介します。Reactを使ってコミックが作れる、そんなソフトウェアです。### React ...

List

  • 2016/01/06

Treed - React製のツリービュー&エディタ

一つのノードから枝葉を伸ばしていく、いわゆるツリービューは様々な場面で使えます。有名なところではマインドマップがありますが、階層構造を表すのにぴったりな仕組みです。そんなツリービューを自由に組み込めるようにしたのがTreedです。React製なのも見逃せないポイントです。## Treedの使い方デモです。左側は編集がで...

List

  • 2016/01/03

React Virtualized - Reactで大量データのスクロール表示

ReactでWebアプリケーションを作るとサーバサイドの感覚でスムーズに開発ができます。しかしそれでもUI、UX周りになると気にしなければならないことも多数あります。その一つとして長大なリストがあります。大量のDOMを表示したりスクロールすると時間がかかってしまうものです。それを改善してくれるのがReact Virtu...

List

  • 2015/12/13

Calypso - 新生WordPress.com管理画面

WordPress.comがNode.jsベースになるという衝撃が走りました。WordPressは世界中のなんと25%近くのサイトで動作しており、PHP + MySQLのいわゆるLAMPスタックの代表とも言える存在だからです。もちろんWordPressがPHPを捨ててNode.jsになる訳ではありません。あくまでもWo...

None

  • Premium_s 2015/12/02

2015年の振り返り(1)「React」

早いものでもう2015年最後の月に入りました。年初に目標を決め、それに向かってまっすぐに突き進んできた方、ちょっと寄り道した方、早々にそんな話はすぐに忘れてしまった方、さらに年初には思いもしなかった方向に方針転換しているという方もいるかも知れません。今回から2015年をキーワードで振り返りつつ、オープンソース・ソフトウ...

List

  • 2015/11/06

React Desktop - Reactを使ってMac OSX/Windowsアプリを開発

Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere(一度覚えればどこでも動く)が素晴らしい考えと言えます。そんなReactを次...

List

  • 2015/10/24

React Native for Web - React NativeのUIコンポーネントをWebで

Reactを使ってWebアプリケーションを作っていたのに対して、その技術を使ってスマートフォンアプリを開発できるようにしたのがReact Nativeです。元々iOS向けでしたが、最近Androidにも対応しました。そんなReact Nativeが先祖返りしたとも言えるのがReact Native for Webです。...

List

  • 2015/09/26

Gatsby - Markdown×Reactによる静的サイトジェネレータ

静的サイトを作る時にはコンテンツを作ってリロードして表示を確認するのが基本です。その時、ライブリロードのような仕組みを使っていても基本は変わりません。SPA(シングルページアプリケーション)であれば一番上まで戻ってしまうでしょう。確認がだんだん面倒になっていくはずです。そこで使ってみたいのがGatsbyです。Markd...

List

  • 2015/09/19

react-blessed - CUIアプリケーションでもReact!

Reactの良いところは表示されている状態を管理する必要なく、ただバーチャルDOMに描画すればReactがいいように仕上げてくれるところにあります。これはWebだけでなく、React Nativeのようにアプリでも使える考えと言えます。他にもWindowsやMac OSXでもReactの考えが取り入れられていくかも知れ...

List

  • 2015/09/16

Winterfell - React用。JSON Schemaを使ったフォームビルド&入力チェック

JSON Schemaと呼ばれる入力の検証であったり、ドキュメント生成にも使われる技術に注目が集まっています。とはいえ、JSON Schemaをわざわざ作成して運用するのは面倒と言ったイメージもあるでしょう。そこでもっとJSON Schemaを使えるライブラリを利用するようにしましょう。今回はReactアプリで使えるW...

List

  • 2015/08/22

Redux DevTools – Diff Monitor - Reduxと組み合わせる状態ビジュアル化ツール

Reactが流行っていますが、より大きなソフトウェアを開発する場合には単にReactを使うだけでなく、Fluxと言われるアーキテクチャで構築するのが推奨されています。Redux

List

  • 2015/08/18

React MineSweeper - React製のマインスイーパー

ReactはJavaScript向けのビューライブラリですが、変更点を気にせずに全面的に画面を書き換えるように処理を書きつつ、その差分を検知して最小限の変更に済ませてくれるのが特徴となっています。その結果として作られたのがReact MineSweeper