reactjs
reactstudio

ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい

react_studio1.JPG

ReactStudioを使ったアプリの作り方はこちら

React Studioを使ってQiitaの記事一覧アプリを作成してみる

はじめに

reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、
学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、
まだまだとっつきにくさが否めないライブラリです。
しかし、今回は、そんなReactをドラッグ&ドロップでアプリが
作れてしまうツールがあったので紹介したいと思います。

※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。

公式サイト

公式サイトへのURLはこちら。
React Studio
https://reactstudio.com/

ツールの使い方

ReactStudioでコンポーネントをデザインします。
react_studio2.JPG

その後、コードが自動生成されます。
react_studio3.JPG

無料で使える

Macのみ使用でき、無料でインストールすることができます。
react_studio4.JPG

ReactStudioの強み

react_studio5.JPG

従来のプロトタイピングツールでは、テキストや画面サイズが異なった場合、
上手く実装に反映することができませんでした。
しかし、ReactStudioを使うと、デザインからコードが生成されるため、そのまま使うだけで済みます。
このようにコードとデザインとデータの3輪を上手くかけあわせ格段に
生産効率性をあげたのがこのツールの最大の特徴であり強みです。

ReactNative版のIDEツール「DECO」もある

ReactStudioのようにIDEでReactNativeアプリが作れるツールもあるようです。
(だがしかしmacに限る)

公式サイト
Deco
https://www.decoide.org/

deco01.PNG

deco02.PNG

ダウンロードと使い方はこちら
https://www.decoide.org/download

deco03.PNG

おわりに

ぜひMacでReact使っている方は、試してみてはいかがでしょうか。