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

    React JavaScript
    「Reactでマインスイーパーを作ってみた」で作ったマインスイーパーに、 reduxを導入しました。 デモはこちら。 盤面の状態をredux管理下に移すのはしんどかったので、 とりあえず難易度やクリア/ゲームオーバーの状態など、 ゲーム全体の情報だけをreduxで管理するようにしました。 だいぶ見通しがよくなって、機能追加がやりやすくなりました。 今... read more
  • RailsにおけるSPAの認証方法について

    Rails React
    Rails×SPAでの認証方法は何がベストなんだろうと思って、調べたことをまとめておきます。 SPAでの認証方法 SPAでの認証方法はざっと調べたところ以下の3種類に集約できそうです。 JWT トークン セッション×クッキー それぞれのPros/Consを以下で考えてみます。 1. JWT Json Web Tokenを使って認証... read more
  • Reactでマインスイーパーを作ってみた

    React JavaScript
    Reactでマインスイーパーを作りました。デモはこちら。 こういうパズルゲーム系はReactだと作りやすい気がしました。 ソースコードはこちらにあるので、参考にしてみてください。 ... read more
  • React+ReduxでAJAXを使ったアプリを作ってみる

    React Redux JavaScript
    Redux公式のページで紹介されているAJAXを使ったアプリをベースに、 GitHubの公開リポジトリを取得するアプリを作ってみました。 React Redux Async Sample 動作イメージ↓ 環境 react 15.5.4 redux 3.6.0 react-redux 5.0.4 redux-thunk 2.2.0... read more
  • React on Railsの環境構築手順

    Rails React
    Rails5.1からサポートされるJavaScript周りのツールを使って、 Rails上にReactの環境を構築する手順をまとめました。 環境 $ ruby -v ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16] $ rails -v Rails 5.1.0.rc1 手順 1.... read more
  • appear.inのAPIを使って簡単ビデオチャット

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

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

    React JavaScript
    これまで何度かReactを触ってきましたが、 今回はこれまでの復習がてら、ありがちですがTODOアプリを作ってみます。 今回の完成形はこんな感じ↓ todo-app 1. 設計図を描く 最初にコンポーネントの構成を考えます。 今回はこんな感じでいってみます。 TODOリスト全体の状態管理はAppコンポーネントでやって、 各TODOのそれはTo... read more
  • Reactで三目並べの続き

    React JavaScript
    Reactの公式チュートリアルの三目並べには以下のように続きがあります。 Now, you’ve made a tic-tac-toe game that: lets you play tic-tac-toe, indicates when one player has won the game, stores the ... read more
  • React DnDを使ってみた

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

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