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

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

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

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

もっと見る

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

List

  • 2015/08/08

Show me the React! - Reactを使っているサイトが一目で分かる!

Reactでの開発を学ぶ上で、既存のReactを利用しているサイトを見てその内容を把握するのは良い材料になるでしょう。しかし表面上はDOMを出力しただけなのでReactを使っているのかどうかは分かりづらいです。そこで使ってみたいのがShow me the React!

List

  • 2015/08/07

React Lessons - Reactの使い方を学ぼう

プログラミング言語やフレームワークの学習は実際に手を動かして自分でコードを書いてみるのが一番です。とはいえ、ゼロから自分ではじめるのは難しく、本を買ったりWebサイトでチュートリアルを読んだりするかと思います。今回はReactを学ぶためのチュートリアルソフトウェア、React Lessonsを紹介します。React L...

List

  • 2015/07/27

Spectacle – React製のプレゼンテーションツール

Reactが流行っていることもあって、既存の仕組みをReactで再実装し直す試みが増えています。既にある題材を使えばアイディアに困りませんし、Reactの向き不向きを感じることもできるでしょう。今回はReactを使ったスライドツール、Spectacleを紹介します。アニメーションもサポートし、Reactでプレゼンが行え...

List

  • 2015/05/20

Cape.JS - Virtual DOMをサポートしたJavaScriptフレームワーク

Reactに注目が集まっているのは特にVirtual DOMによるところが大きいのではないでしょうか。JavaScript側ではとにかく必要な部分全体をレンダリングしてしまって、実際の描画についてはReactに任せられるのがメリットです。そんなReactと同じくVirtual DOMをサポートしたJavaScript ...

List

  • 2015/03/09

md2react - React用Markdownレンダー

最近注目が集まりはじめているReact。特に良さそうなのがViewを抽象化しているのでReact CanvasやReact Nativeのような使い方へ発展している点です。困難はありそうですが面白そうな取り組みです。今回はそんなReactを使ってMarkdownをレンダリングするmd2reactを紹介します。Markd...