yuw27b’s blog

技術メモと雑記

HighchartsをReactで使う

ReactなWebアプリケーション内に、Hightchartsでグラフを描画するときのメモ。

基本的には、Hightcharts公式のReact用ラッパーライブラリを使えば良い。
GitHub - highcharts/highcharts-react: The official Highcharts supported wrapper for React

npmにあるので、Highcharts本体とこのライブラリを入れる。

npm install highcharts highcharts-react-official
  • ミニマムなexampleは上記の公式GitHubリポジトリにあるとおり
  • 実際は、チャートだけを独立したコンポーネントにすることがほとんど
  • チャートのoptionパラメータが多いので、別のファイルに書いたり、サーバからJSONで取ってきたりする
  • グラフデータのフォーマットが想定されているものと合っていないと、コンソールに Uncaught ReferenceError: Highcharts is not definedエラーが出る
  • 開発時に、とりあえずで空配列を渡してもこのエラーが出るので、最初から描画可能なモックデータを渡すのが良さそう
  • テンプレートにしてるコード:GitHub - yuw27b/react-highcharts-template (2020/07/05更新)

f:id:yuw27b:20200705155907p:plain

NDS第59回勉強会に行ってきたよ

参加&発表して来ました!

nagaoka.techtalk.jp

・・・次でちょうど60回なんですね!
いつもどおりいろいろな発表が聞けて、良いインプットになりました。
テーマが「学習・AI・入学」ということで、機械学習について発表もさせてもらいました。
私の働く研究室での取り組みについて話せる範囲でお話したのですが、絶賛試行錯誤中なのでスライドの公開ができません、ごめんなさい。成果として早めに公表できるようがんばります。

以下、印象に残った発表などを(発表者の敬称略)。
※メモを取るのをすっかり忘れて聞いていたので、記憶が間違っていたらごめんなさい!!



「TensorFlow.jsで遊ぶ」(kasacchiful)

TensorFlow.jsを使って、ブラウザでの機械学習のデモを見せてくださいました。
モデルさえロードされていればオフラインでも画像の判定などができるはずなので、おもしろいですね!
あとで「他の人がやっているのを見てささっと作った」みたいなことをおっしゃていましたが、手を動かすのが早くて見習いたい・・・。

「趣味がはかどる趣味プログラミングの話」(yyasuyuki)

AS番号の観察がご趣味とのことで、番号の取得と返却を自動で監視してTweetするbotを作りました、というお話でした。
AS番号というものは知らなかったのですが、通信事業者の歴史まで分かって興味深かったです。
botをフォローしたらさっそくいろいろ発生しているのですが、ぜひ背景について解説していただきたいところ・・・


「Angularでコンポーネント間のデータ受け渡し」(gatabutsu)

Angularのコンポーネント間でデータの受け渡しをする場合の最適解は何だろう、というお話でした。
私は普段、主にReactを書いているので、最近のAngularのコードを見られて良かったし、コンポーネント間のデータの受け渡し、という問題はReactでも同様に発生するので、とても興味深く聞きました。
データの受け渡し方法がいくつかあるわけですが、それを(コンポーネント同士の)結合強度によって整理して、不必要に結合を強くしないようにする、という考え方はとても良さそうだと感じました。

「GHELIAグループとAIUEOの取り組み MakersのためのAI」(清水 亮)

清水さんのことは存じていて、前述のように私も最近は機械学習に関わっているので、とても楽しみにしていました。
スケールが大きく力強いお話で圧倒されていたのですが、何より、AIが社会インフラとなる時が来ることを確信して、そのために着実に事業を進めていらっしゃる、という印象を受けました。
実験的なAIの話はよく聞きますが(私が研究寄りの仕事だからかもしれませんが)、実際に社会で活用するための”出口”をこんなにしっかりと見据えたお話は初めてで、とてもおもしろかったです。

C#で、安眠装置の開発」(ailight)

安眠装置、というか「降雪量によって自動的に水量をコントロールできる融雪パイプがあれば雪が降っても安心して寝てられる」装置です。
インターネットから降雪情報を取得→イーサーネットリレーで電圧を制御→融雪パイプから水が出たり止まったりする、
という仕組みです。これ本当に動いてるそうです・・・すごい・・・。
悲しいことに(?)今年は雪が少なかったので、効果の検証は次の冬まで持ち越しの部分もあるようですが、どうなるか気になります。
技術を使って身の回りの問題を解決するのは、まさにエンジニアのあるべき姿でかっこいいですね!


最後に、主催のcivicさん今回もありがとうございました&お疲れさまでした!
次回は6月22日の予定だそうです。

TDDBC 長岡 に参加してきました

TDDBC 長岡 2019-02 - connpass に参加してきました。

参加の動機

私は普段、業務で主にWebアプリケーションを作っていますが(フロント・サーバ両方)、機能もユーザーも限定的で小規模なものが多く、あまりテストを書くことはありません。
テストを書いた数少ないケースでも、「これはさすがにテストくらい書いたほうがいいのかなあ」というような曖昧な動機で、プロダクトコードがほぼ完成してから書いていました。それでも、テストを書いてみるとプロダクトコードの問題点に気づけたり、多少でもプログラムの動作に自信が持てたりするので、テストについてもっとしっかり学ぶと良さそうだな、という気持ちがありました。

講師のt_wadaさんのことはもちろん存じていて、監訳をされたSQLアンチパターンという本を読んでいたこともあり、それも参加を決めた要因でした。
(TDDの本は今読んでいるところです・・・)

感想

まず午前中のキーノートセッションおよびライブデモがとても分かりやすく、早く手を動かしてみたい!という気持ちになりました。
TDDについて「なんかテストを先に書くのかなあ」くらいに考えていたのですが、「開発手法」の1つなのだな、ということが理解できました。
課題がまずToDoリストに細分化されるので、スムーズに開発に入っていけそう、という印象です。

午後からはペアプログラミングでTDDを実践してみる、という内容でしたが、ペアの相手の方とたくさん会話をしながらコードを書き進めることができ(きっといろいろと気を使ってくださっていたと思います、ありがとうございます)、とても良い経験になりました。

ToDoリスト→テストを書く→コードを書く・・・を繰り返しているうちにプログラムが出来上がっていくので、現在地を見失わず視界も良好、という感覚になりました。そして出来上がった時に自信を持って「できたー!」と言える感じがしました。
途中、楽しくなりすぎてうっかりテストの前にコードを書いてしまい(そして案の定テストが通らず迷子になった)、遠くにライオンの姿が見えたりもしましたが、それも含めて良い経験でした。

レビュータイムも、TDDを実践している(TAの)方々がどこに着目しているのかが分かって興味深かったです。
懇親会でもたくさんの発表があり、あっという間の1日でした。

新潟県内でこのようなイベントを企画していただき、ありがとうございました!

今後

ということで、まずは一度、自分の業務でTDDをやってみたいところです。来週あたりフロントエンドの小規模な新規開発がありそうなので、ちょうどいいかも?と思っています。

GCEでGPUを使うとメンテナンスで止まることがある

Google Compute EngineではインスタンスGPUを追加することができます。

f:id:yuw27b:20191121215600p:plain


これを利用して、数日かかるDeep learningの計算をしていたのですが、途中で止まってしまうケースがありました。突然終了するらしく、プログラムから出力していたログ(テキストファイル)も壊れている状態でした。

GCEのログを確認したところ

terminateOnHostMainetenance
と出力されていました。ホストメンテナンス時に止まったようです。

GCEは、メンテナンス時には自動的に別のハードへ移行するので、それまで気にしたことがなかったのですが、改めてインスタンス作成画面を見てみると「GPU搭載のマシンはホストメンテナンス時に移行できません」と記載されていました。

f:id:yuw27b:20191121215702p:plain

ですので、ホストメンテナンス時には「VMインスタンスを終了」しか選べません。

それは仕方ないのですが、GCEはユーザーの操作以外で終了した場合には自動的に再起動します。
再起動時に自動的に計算を再開するようにしていない場合は、「何も計算していないのにインスタンスが起動していて課金される」状態になるので、再起動オプションを「オフ」にするのが良さそうです。

私が経験した限りでは、このようなホストメンテナンスでのインスタンス終了は、1インスタンスで月に1回あるかどうか、という印象なので、自動的に計算を再開するプログラムを用意するのは手間のわりにメリットがないと判断してやっていません。インスタンスが終了していたら手動で起動して続行させています。

カレンダーUIを実装するReact component

Airbnb謹製のReact用カレンダーUIコンポーネントの紹介です>

Reactで作っているWebアプリケーションにカレンダーUIが必要だったので、どんなのがあるかな、と検索したところ、いろいろありました。
例えばこんな:

いろいろ見てみましたが、必要な機能や見た目などをふまえて検討した結果、react-datesというコンポーネントを使うことにしました。
GitHubリポジトリはこちらです:
GitHub - airbnb/react-dates: An easily internationalizable, mobile-friendly datepicker library for the web
作者はAirbnbです。
見た目は非常にすっきりしています。Airbnbではこんな感じで使われていました。
f:id:yuw27b:20180828220209p:plain

レスポンシブになっていて、画面幅が狭いとこのように縦になります。
f:id:yuw27b:20180828220337p:plain

GitHubのスターは8000を超えており(2018年10月現在)、またAirbnbは、

  • JavaScriptのスタイルガイドでもよく知られている
  • 宿泊施設の予約サービスにとってカレンダーUIは非常に重要と思われる
  • 国際的な(多言語での)サービスを提供している

・・・こういった点から考えても、品質の高いコンポーネントなのでは、と期待できます。

どんなことができる?

ここでいろいろとオプション指定を変えながら試すことができます:
http://airbnb.io/react-dates/
Storybookで作られているので、これをローカルで動かすこともできます。

主なところでは以下のような機能があります。

  • 単一の日付選択または範囲選択
  • 表示月数の指定
  • 週始まりの曜日の指定
  • 無効(disabled)にする
  • 選択可能な日付の設定

また、日付が選択された時や月を移動した時など、ひととおりのイベントにはハンドラを登録できるようになっています。
さらに、ラベルや月名表示の言語設定、スクリーンリーダー向けの設定項目もあり、このあたりはさすがにAirbnb用に作られただけある、という感じでしょうか。

使ってみる

インストールはGitHubリポジトリのページに書いてあるとおりですが、単純にnpm install〜を実行するのではなく、npm install〜コマンドを生成するためのコマンドを実行するよう書かれています。
このコマンドを実行すると、Peer dependenciesに指定されている、Moment.jsやReact本体のバージョンをチェックしつつnpm install〜コマンドを生成するようになっているようです。

インストールしたあとは、カレンダーUIを使いたいコンポーネント内でreact-datesとmomentをimportして使用します。

import React from 'react';
import PropTypes from 'prop-types';

import moment from 'moment';
moment.locale('ja');
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: ''
    };
  }

  render() {
    return (
      <div>
        <SingleDatePicker
          date={this.state.date}
          onDateChange={date => this.setState({date: date})}
          focused={this.state.focused}
          onFocusChange={({ focused }) => this.setState({ focused })}
          numberOfMonths={1}
          displayFormat='YYYY-MM-DD'
          transitionDuration={0}
        />
      </div>
    );
  }
}

export default SampleComponent;


コンポーネントの種類と、どんなオプションを指定するとどうなるかは、上記のStorybookのデモ(http://airbnb.io/react-dates/)で確認するのが分かりやすいです。