起こったこと

Vagrant CentOS7 環境に Rails プロジェクトに gem react_on_rails を導入して
React を動かそうとしたところ rails generate react_on_rails:install

で

追加されていた依存する gem mini_racer
が以下のエラーを出してRails 起動しなくなった。

/home/vagrant/dev/rails-proj/vendor/bundle/ruby/2.6.0/gems/bootsnap-1.4.7/lib/bootsnap/load_path_cache/core_ext/
kernel_require.rb:23:in `require': 
/home/vagrant/dev/rails-proj/vendor/bundle/ruby/2.6.0/gems/mini_racer-0.3.1/lib/
mini_racer_extension.so: 
undefined symbol: _ZTTNSt7__cxx1119basic_istringstreamIcSt11char_traitsIcESaIcEEE - /home/vagrant/dev/rails-proj/vendor/bundle/ruby/2.6.0/gems/mini_racer-0.3.1/lib/mini_racer_extension.so (LoadError)

原因

最近、gem mini_racer が version 0.3.x に上がったようで
不安定のよう。

解決法

とりあえず、gem mini_racer (最近0.3.xに上がったようなので) 、修正対応のある、最新のversion を取り入れる。

Gemfile

gem 'mini_racer', git: 'https://github.com/rubyjs/mini_racer', platforms: :ruby

該当部分

https://github.com/rubyjs/mini_racer/commit/94cdb03211044f2e0620c6275525d09f84f26c78

補足

最初は gem mini_racerを 安定版の0.2.15 に戻したりしたが、
libv8 などで特定のGCC version 依存があるようで、
OSの GCC version調整がいるようで、
とりあえずこれで。

$ gcc --version
gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-39)

https://www.cyberciti.biz/faq/centos-rhel-7-redhat-linux-install-gcc-compiler-development-tools/

https://stackoverflow.com/questions/36327805/how-to-install-gcc-5-3-with-yum-on-centos-7-2

参考

https://stackoverflow.com/questions/36327805/how-to-install-gcc-5-3-with-yum-on-centos-7-2

https://github.com/rubyjs/mini_racer/issues/169

データグリッド

Reactでデータグリッドを実装したいときにおすすめしたいコンポーネント集です。
Material UIが好きなので、Material UIを使っている私の目線でのコメントが多いですが、ご容赦ください。

まだ実装お試ししていないけど良さそうなものがいくつかあるので、少しづつ追加しますよ :D

コンポーネント集

見る専部門

データを見せることに向いている系です。

Material UI - Table Component

Table React component - Material-UI
MaterialUI純正のテーブルコンポーネントです。ソートやフィルタは自分で実装してイベントで差し込んでいく感じですね。仮想テーブルもできますが、他のライブラリとのあわせ技なので、このコンポーネントの特徴ってことでもないですね。なにより、Material UIの純正なので、Material UIをアプリの全体荷適用しているなら第一候補ですね。見た目もスッキリ統一感が出ますしね。あとはなんて言ったって、Material UIはデモページもAPIのページもとっても詳しい。ありがたい。

React-Table

tannerlinsley/react-table

Reactのテーブルといえばこれですね。名前もそのままReact-Table。いろいろな方がコントリビュートしてくれているので、やりたいことはなんだってできるような印象です。デモページもとっても豊富でわかりやすいですね。Material UIにこだわらないなら、第一候補ではないでしょうか？ちょっと見た目の調整は頑張らないといけないかもしれないですね。Style差し込んで行きましょう。

Grid.js

Grid.js - Advanced table plugin

比較的新しいライブラリです。TypeScriptで実装されているのがいいですね！新しい割にGitHubスター数が結構多いので、これからグイグイくるんじゃないかなぁ、という期待と、TypeScriptを採用しているので仲良くなれそうだなぁという理由から、序盤で紹介させていただきました。見た目もかっこいいですね。

Material-table

mbrn/material-table

Materialデザインを踏襲して実装されたテーブルコンポーネントですね。Material UIのサイトでも紹介されているので、公式もその良さを認めているのかな？テーブル自体の操作感はよく、いいコンポーネントだと思います。

mui-datatables

gregnb/mui-datatables

Material-table と対を成すのが、mui-datatablesです。テーブル自体の操作感はかなり良いです。デモページも結構見やすくて、見ているだけでも楽しくなるので、おすすめです。gregnb/mui-datatables

SpreadSheet寄り編

データを見ながらちょちょっと修正したいときに便利なコンポーネントです。ほとんどExcelじゃん、ってのもあります。

react-data-grid

React Data Grid · Excel-like data grid component built with React

Excelライクな感じになっているが、それなりにWeb感も残しています。Excelほど自由自在にコピペできる感じではないのがちょっと惜しい。

React Datasheet

React Datasheet Component

かなりExcelライクな感じですね。テーブルのほとんどの要素を編集可能にしないといけないケースには向いていそうですね！

ブルジョワ編

金の力は偉大だ！！！

ReactGrid (有償)

React Grid

なにもいうことはないです。すげーよ。

はじめに

今、出向している現場の開発はviewをすべてHTMLで作成している。
画面数だけのHTMLがあり、書き手によって粒度が違う。
また、デザインの変更やフォーム修正に対しHTMLファイルを修正しているので、
もちろん抜けも多くなるしテスト効率も悪い。

そこで、Reactの導入を考えたのである。

なぜ、Reactなのか

ぶっちゃけると、Angularでもよかった( ´∀｀ )
ただ、在籍するエンジニアのこれからを考えるとReactのほうが良いかなという判断
Reactの案件が増えつつあるのでPHPer引退しても何とかなる。。。多分！

リーダーに伝えてみた

今の案件はBPに人権があって意見も言いやすいので
さっそく、伝えてみることにした。

【自分】
「次の開発は、Reactつかって開発してもいいですか？
今のやり方だと画面修正するたびに莫大な工数がかかってるじゃないですか」

【リーダー】
「別いいよー。データはJSONでやりとりできれば嬉しいなー」

【自分】
(ふむ、REST API 使うイメージかな、何とか出来そうや)

【リーダー】
「ただ、コンポーネント設計がめんどくさいよ。コンポーネント設計はセンスいるし」

本編 : コンポーネント設計はセンスなのか

コンポーネントとは

Reactにおけるコンポーネントとは「部品」である
例えば、フォームの入力欄であったりボタンである

なぜ、センスがいるのか

例えば、yahooの検索フォームを見てみると

最小のコンポーネントは検索ボックス(form) 検索ボタン(button) etc...である
しかし、そのままコンポーネントを並べたのでは実用性に欠ける。
なので、検索ボックス(form) 検索ボタン(button)で新たなコンポーネントを作成する

上記のように、コンポーネントを組合せテトリスのように画面を構築するのが
センスがないと難しいのでコンポーネント設計はセンスと言われてしまったのではないか。

はたして、本当にそうなのか

結論を言ってしまえば、自分はNOだと思った。
なぜなら、調べていくうちに「Atomic Design」という概念を知ったからだ。

Atomic Design

はじめに

Redux Saga内で、actionをdispatchしたい時は、yield putを使用します。

ただし、コールバック関数内ではyield putを使用することができません。
yieldはジェネレータ関数内でのみ機能するからです。

そんな時に役に立つ、eventChannelチャンネルについて紹介します。

実装の例

エラーになってしまう書き方

やりたいこと: 何らかのidを購読し、変更があった場合にactionを発行する

ダメな例

function* subscribeId(action) {

    const { id } = action.payload;
    const subscription = subscribe(id).subscribe({
      next: ({ value }) => {
        // これはエラー！
        yield put(action)
      },
    });
    return subscription.unsubscribe;
}

うまくいく書き方

• コールバック内でチャンネルに向けてアクションを送信します
• コールバック外でアクションを待ち受け、受け取ります

function* subscribeId(action) {
  // チャンネルを用意する
  const channel = eventChannel((emitter) => {

    const { id } = action.payload;
    const subscription = subscribe(id).subscribe({
      next: ({ value }) => {
        // チャンネルに向けて送信！
        emitter(roomID);
      },
    });
    return subscription.unsubscribe;
  });

  // -----------
  //  コールバックの外でアクションを待ち受ける
  // -----------
  while (true) {
    const action = yield take(channel);
    yield put(action);
  }
}

まとめ

チャンネルを用意することで、まるでコールバックから値を外に送信するような実装が可能になりました。?

この記事は株式会社富士通システムズウェブテクノロジーが企画するいのべこ夏休みアドベントカレンダー 2020の27日目の記事です。本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

はじめに

本記事ではFacebook社のJavaScriptのSPAライブラリのReactについて紹介したいと思っています。

プロジェクトでフロントエンド基盤を整備することを目的に2020年4月に0からReactを勉強してきました。

この経験を踏まえ、React興味あるけど勉強の仕方がわからない、SPAを作ってみたいという方にとって、React開発を始めるきっかけになれればいいと思っています。

SPA（Single Page Application）ってなに？

SPAとは単一のWebページでアプリケーションを構築するアーキテクチャです。

サーバーサイドWebとSPAと比較すると...

上の画像を見てわかる通り、SPAは極力サーバーへのリクエストを減らし、単一のWebページのみを使用して、効率よくWebページの表示ができます。

今が熱いReact

3大SPAフレームワーク/ライブラリは、

• React.js
• Vue.js
• Angular.js

がありますけど、ランキングはこんな感じ

ダウンロード数（2020/08/06現在）

reactの圧倒的ダウンロード数！！！！

githubスター数（2020/08/06現在）

vueとreactがいい勝負。

こんな感じでいろんな人がReactをダウンロードして開発している

npm trends react vs vue vs angular
https://www.npmtrends.com/react-vs-vue-vs-angular

はじめてのアプリ作成

さっそく、Reactアプリケーションを作ってみよう！

準備

下記のツールを自分の端末にインストール！

• Google Chrome
• Visual Studio Code
• Node.js（※推奨版）

YARNを導入

npm install --global yarn
もしくは
npm i -g yarn

プロジェクト作成

JavaScript版でReactプロジェクトを作成する場合
npx create-react-app [プロジェクト名]
TypeScript版でReactプロジェクトを作成する場合
npx create-react-app [プロジェクト名] --typescript

プロジェクト起動

作成したプロジェクトまで移動
cd [プロジェクト名]
プロジェクトの起動
yarn start

http://localhost:3000/ で下の画面が表示される！

Hello World!を表示する

フォルダ構成はこんな感じ

src/App.jsもしくはsrc/App.tsxを開いて、以下の内容を変更して保存！

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
-         Edit <code>src/App.js</code> and save to reload.
+         Hello World!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

ロゴ画像の下に「Hello World!」と表示される

とっても簡単。

りあくとのはじめかた

Reactの習得する方法は以下の流れ

1. JavaScriptの習得
2. (TypeScriptの習得) ※必要がある人だけ
3. Reactの習得

おすすめ勉強サイト/書籍
・現代の JavaScript チュートリアル
・りあクト！ TypeScriptで始めるつらくないReact開発 第2版
・React 公式サイト
・TypeScript 公式サイト

やってはいけないこと

• いきなり完成されたコードを読もうとする
• HTML、CSS、JavaScriptの知識がない状態でReactの開発に臨む
• Reactの設計思想を知らない状態で開発を始める

基礎からちょっとずつ進めることをお薦めします。

みんなの反応

2020年7月17日(金)にウェブテクデーを使用して、チーム内でReact勉強会を開催しました。
私が講師として進めていました。開催後のみんなの反応はこんな感じです。

H・Hさん
従来型のウェブ開発ばかりやっていると、モダンなJavaScript(ES6以降)の知識がコードが全く読めないことを痛感した。新しい技術に触れないとだめだなと感じたし、特にフロントエンドは流れが素早いと思った。

E・Hさん
C#やJavaScript(ES5以前)はやってみたことがあったが、
今日の勉強会を通して、JavaSciprt(ES6以降)は新しい言語で臨むつもりで勉強しないといけないと感じた。
ただ、JavaScriptの新しい機能は便利だと思ったし、SPAの仕組みについても知れてよかった。
家でももっとやりたいと感じた。

T・Sさん
業務チームのある程度の水準でスキルを均一化をどう図るかが今後の課題になってくる。

Y・Sさん（React学習経験あり）
私は山田と一緒に1週間ペアプログラミングを行い、Reactを学びました。短い期間ですが、体験してみて感じたことは技術を学ぶ際には、必ず基礎から始めるべきだとということです。いきなり完成されたコードを読み込んでも、読めなくて挫折するだけです。
私はReactの学習を下記の流れで行いました。私はこれである程度実装できるようになりましたよ！
① HTML、JavaScript(TypeScript)の知識を習得する
　りあクト！ TypeScriptで始めるつらくないReact開発 第2版 ← これ本当におすすめ！
② Reactの公式ドキュメントの最初のページを読んで、Reactで何ができるかを知る
③ React公式ドキュメントに記載されているチュートリアルを行い、小さいコンポーネントから開発

おわりに

4月から勉強を開始して、2か月間がっつりReactを独学で勉強しました。
フロントエンドの開発自体、あまり経験がなく学習にすごく苦労しましたが、
最終的にはウェブテクデーで人に教えられるレベルまで成長できたので良かったです。

JavascriptでJSONから特定の要素を取り出す際の考え方が配列のときと少し異なるのでまとめました。

JSONとは

• JavaScript Object Notationの略。直訳すると「Javascriptオブジェクト記法」ということになる。JSONにおけるJavascriptオブジェクトとは基本的には、{}（オブジェクト）と[]（配列）を組み合わせてデータ構造を表現したものをJSONとして扱うことができる。

→つまり、JSONとは、{}（オブジェクト）と[]（配列）を組み合わせてデータ構造のこと。

JSONの特定の要素の取り出し方

example.tsx

const messageArrayContainer: any[] = [{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }];

console.log('データ' + JSON.stringify(messageArrayContainer, replacer));
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//データ
[{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }]

//userデータ
{"_id": 1, "avatar": "", "name": ""}

ここで、注意なのが、配列と同じように考えると、userデータのみを取り出したいときに、下記のように書きたくなるがこれだとundefinedが表示される。

example1.tsx

console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//結果は,undefinedになる

JSONは大きな一つの要素と考え、

example2.tsx

console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//出力：　userデータ{"_id": 1, "avatar": "", "name": ""}

と書く。