saitoxu.io

AboutTwitterGitHub

#React

16件の投稿があります

オランダ空軍式トレーニングができるサービスを作った

April 29, 2018

集中力を鍛えたいなーと思って、オランダ空軍式トレーニングができるサービス(サービスと言えるほど大したものでもないが)を作った。 Dutch Air Force Training オランダ空軍式トレーニングとは タイル上に並べられた文字(A-9)の中に、指定された文字が何個あるか…

Reactのグラフ描画ライブラリRechartsを使ってみた

February 28, 2018

前から気になっていた React のグラフ描画ライブラリRechartsを触ってみた。 内部でD3.jsを使っていて、README に書いてあるが大きな特徴は 3 つあるらしい。 React コンポーネントとして使える 素の SVG の描画をサポート 画面に表示したいコンポーネ…

ReactでRailsのassets内のリソースを使う

July 31, 2017

React × Rails の環境で、React から Rails の assets 内のリソースを使う方法について調べました。 Rails 5.1 から導入されたrails/webpackerを使っている前提とします。 環境 Rails 5.1.1 React 15.5.4 …

preactを使ってブログのアーカイブメニューを作る

July 01, 2017

developit/preactという React から一部機能を除いてサイズを軽くしたライブラリがあります。 この preact を使って、Jekyll で書いてるブログのアーカイブメニューを作ってみた(フッター参照)ので、 作り方をメモしておきます。 1. アーカイブページ…

Reactでマインスイーパーを作ってみた②

June 25, 2017

「React でマインスイーパーを作ってみた」で作ったマインスイーパーに、 reduxを導入しました。 デモはこちら。 マインスイーパー 盤面の状態を redux 管理下に移すのはしんどかったので、 とりあえず難易度やクリア/ゲームオーバーの状態など、 ゲーム全体の情報だけを …

RailsにおけるSPAの認証方法について

June 17, 2017

Rails×SPA での認証方法は何がベストなんだろうと思って、調べたことをまとめておきます。 SPA での認証方法 SPA での認証方法はざっと調べたところ以下の 3 種類に集約できそうです。 JWT トークン セッション × クッキー それぞれの Pros/Cons を以下…

Reactでマインスイーパーを作ってみた

April 25, 2017

React でマインスイーパーを作りました。デモはこちら。 マインスイーパー こういうパズルゲーム系は React だと作りやすい気がしました。 ソースコードはこちらにあるので、参考にしてみてください。

React+ReduxでAJAXを使ったアプリを作ってみる

April 16, 2017

Redux 公式のページで紹介されている AJAX を使ったアプリをベースに、 GitHub の公開リポジトリを取得するアプリを作ってみました。 React Redux Async Sample 動作イメージ ↓ Anime 環境 react 15.5.4 redux 3.6.…

React on Railsの環境構築手順

April 13, 2017

Rails5.1 からサポートされる JavaScript 周りのツールを使って、 Rails 上に React の環境を構築する手順をまとめました。 環境 手順 1. プロジェクト作成 でプロジェクトを作成します。 React のプロジェクトを作る場合は、を指定します。 もう…

appear.inのAPIを使って簡単ビデオチャット

April 05, 2017

appear.inという手軽にビデオチャットができるサービスがあります。 最近、自分のサイトに簡単に埋め込める API があるのを知ったので、ちょっと使ってみました。 ドキュメントはこちら 1. サンプルアプリ チャットルームを生成して、そのルーム参加者とビデオチャットできるも…

TODOアプリでReact Routerを使ってみる

April 02, 2017

前回作った TODO アプリに、 react-router を使ってルーティングを組み込んでみます。 できたものはこちら ↓ todo-app-2 1. コンポーネントの構成 コンポーネントの構成は次のような形にします。 また、ルーティングは次のとおりとします。 トップペー…

ReactでTODOアプリ

March 30, 2017

これまで何度か React を触ってきましたが、 今回はこれまでの復習がてら、ありがちですが TODO アプリを作ってみます。 今回の完成形はこんな感じ ↓ todo-app 1. 設計図を描く 最初にコンポーネントの構成を考えます。 今回はこんな感じでいってみます。 TOD…

Reactで三目並べの続き

March 26, 2017

React の公式チュートリアルの三目並べには以下のように続きがあります。 Now, you’ve made a tic-tac-toe game that: lets you play tic-tac-toe, indicates when one player has wo…

React DnDを使ってみた

March 22, 2017

React でドラッグ&ドロップを簡単に実装できるReact DnDを使ってみました。 前回同様、公式のチュートリアルに従ってます。 一応、成果物はこちら ↓ react-dnd-sample 環境 MacOS Sierra 10.12.3 Node.js v6.10.0 Re…

Reactで三目並べ

March 21, 2017

React の公式チュートリアルにある三目並べを作ってみました。 成果物はここにおいたので確認してみてください。 react-tic-tac-toe 環境 MacOS Sierra 10.12.3 Node.js v6.10.0 React 15.4.2 Create Reac…