React Velocity - Reactアプリのコンポーネントを作成
Reactで開発を進める際に、まず画面全体の設計を行うのが大事です。全体を囲むコンポーネント、そして画面の各要素を構成するコンポーネントと順番に作っていきます。それをやらずに開発を進めると後で修正が大変でしょう。 そこで使ってみたいのがReact Velocityです。コンポーネント設計を行い、スケルトンコードを生成します。 React Velocityの使い方 例です。Webブラウザ上で自由に画面を構成できます。 Redux版。 作成した画面構成をダウンロードすると、こんな感じにファイルが生成されます。 React Velocityはあくまでもスケルトンコードで、イベントなどが実装される訳ではありません。とは言え、まずはReact Velocityで画面構成を作っておけば、コンポーネント間の関連も可視化されるので分かりやすくなるでしょう。 React VelocityはJavaScrip
CodeSandbox - Reactのオンラインプレイグラウンド
Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。 そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです。 CodeSandboxの使い方 メイン画面です。中央のペインでコードを編集できます。 編集内容はすぐに反映されます。 別なファイルを開いて編集できます。 シェアするための設定画面です。 CodeSandboxはJSFiddleに代表されるようなオンラインでのJavaScript開発環境のReact版と言えます。書いたコードを他の人と共有したり、GitHubなどからオンラインデモとしてリンクしたりすると言った使い方もできそうです。 CodeSandboxはnode/Jav
Proton Native - React Nativeのデスクトップ版
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばデスクトップアプリとして動作するソフトウェアがクロスプラットフォームで作成できます。しかし、HTMLなのでUIを作るのが若干大変という印象があります。同様のことはモバイルアプリでも起きており、Reactが示した解決策がReact Nativeになります。 そしてProton NativeはReact Nativeと同じ解決策をデスクトップアプリに対して適用しようとしています。 Proton Nativeの使い方 Proton Nativeのサンプルコードです。ノートアプリになります。 import React, { Component } from 'react'; import fs from 'fs' import { render, Window, A
Yogurt - React製のドキュメント作成システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でコンテンツを作る際のUIについて悩むことはないでしょうか。一ページずつ作る仕組みにするのがシンプルですが、ユーザにとって使いやすい仕組みとは言いづらいです。 そこで参考にしたいのがYogurtです。Reactを使い、ユーザビリティの高いドキュメント作成が可能です。 Yogurtの使い方 編集画面です。カテゴリはフォルダアイコンで表示され、その中にドキュメント（エントリーと呼びます）を追加します。 カテゴリを選ぶとエントリーの追加ができます。 エントリーを選んで編集できます。 新しいカテゴリを追加します。 ドキュメントの編集はMarkdownが使えます。 こちらは閲覧モード。 MarkdownがHTMLに変換して表示されます。 Yogurtはカテゴリとドキュメントという形式
exerslide - React製のHTMLプレゼンテーション作成ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLのスライドをよく見かけるようになってきました。派手なアニメーションはなくとも、作成のしやすさであったりデザインのカスタマイズが容易なのが利点です。オンラインでの公開も簡単です。 今回はFacebookインキュベーターで生まれたHTMLスライド作成ツールexerslideを紹介します。 exerslideの使い方 exerslideで生成されたファイル群です。 できあがったHTMLです。コンテンツはMarkdownで作成します。左側にアウトラインが出るのがポイントです。 Markdownファイルを追加するとスライドが追加できます。 ソースの閲覧もできます。 exerslideはReactで作られています。修正すればすぐにWebブラウザ側に反映されて、中身を確認しながらさくさく
React Server - Reactの開発をはじめるのに最適なベースを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。 そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使えばReactを使った開発環境周りの整備が一気に進むでしょう。 React Serverの使い方 React Serverをインストールした後はyeomenのコマンドで起動します。 yo react-server 後は npm run start でサーバが立ち上がります。 ボタンをクリックすると「！」が増えます。 ファイル構成は次のようになっています。 ベースにな
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
Monod - オフラインファーストなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownエディタはWeb、GUIともに増えています。インストール不要で使える分、Webベースのが便利だとは思うのですが、厄介なのはネットワークがない時です。そんな時に使えないのでは使う気が失せてしまうでしょう。 そこで使ってみたいのがMonodです。Webベースですが、オフラインファーストなMarkdownエディタです。 Monodの使い方 Monodの画面です。2ペインのよくあるMarkdownエディタです。絵文字をサポートしています。 テンプレート機能があり、YAMLフォーマットでテンプレートが使えます。 例えばprojectとして定義すれば、[project]の部分が書き換わります。 MonodはReact.jsを使って作られています。そうした点も注目に値するのではな
React Storybook - Reactアプリのコンポーネント開発にお供に！ MOONGIFT
Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。 そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理できるようになります。 React Storybookの使い方 デモのTodoアプリです。 データを追加すると、それがロガーに表示されます。 左側のメニューから選択するとデータが表示されている版が選択できました。 さらに未完了タスクの表示を選択しました。 こちらは2つのタスク、ステータスによるフィルタリング機能がついた画面です。 消し込みがかかった版です。 React Storybookを使うことで、UIコンポーネントを分割してその結果を確認しながら開発できるようになります
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
React Grid Layout - React用のグリッドシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを本格的に使っていく上では多くのコンポーネントが必要になります。その基礎となるのがグリッドではないでしょうか。グリッドが作れれば、その中にコンテンツを配置して整理されたレイアウトが作れるようになります。 今回紹介するのはReact Grid Layout、React用のグリッドレイアウトシステムです。ドラッグ&ドロップやリサイズにも対応しています。 React Grid Layoutの使い方 実際に使っているところです。ドラッグで移動したり、大きさの変更ができます。スタティックとして移動できないように指定することもできます。 さらにフリーレイアウトとして重ならないけれど縦の配置は自由と言ったレイアウトも作れます。 この他、配置情報をlocalStorageに保存しておいて
react-jsonschema-form - React製のフォーム生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webでフォームを作り、さらにそれを運用するのは意外と面倒です。入力チェックを作ったりするのも大変ですし、それが複数あったりすると嫌になってしまうでしょう。 そこで使ってみたいのがreact-jsonschema-formです。JSON Schemaを使ってフォームを生成するReactライブラリです。 react-jsonschema-formの使い方 デモです。JSON Schemaの他、UISchemaと呼ぶ入力設定のJSONも使います。 JSON Schemaがネスとしている場合にも対応しています。 データが配列の場合もOKです。項目を自由に追加、削除できます。 バリデーションにももちろん対応。 日付のようなinput.type設定も可能です。 Reactでフォーム全体を書く
enclave - WebベースのReactアプリを開発するのに必要な仕組みを提供 MOONGIFT
ReactでWebアプリを作りたいと思ったとして、最初に問題になるのがデファクトと呼べるアーキテクチャが存在しないことかと思います。Node.js + Expressは良いとして、サーバサイドレンダリングで行う場合の構築法がこれ！というものがないのです。 そこで紹介したいのがenclaveです。Reactに特化しつつ、そのベースとして使えるシステムです。 enclaveの使い方 enclaveの始め方は簡単です。npmでインストールします。 $ mkdir my-new-app $ cd my-new-app $ npm init $ npm install enclave --save $ npm install react react-dom --save さらに例えばJavaScriptとHTMLファイルを作成します。 $ mkdir src && touch src/App.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
React Nativeベースのオープンソースのモバイルアプリ開発フレームワーク「Pepperoni」がリリース