yuw27b’s blog

技術メモと雑記

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/)で確認するのが分かりやすいです。

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

第57回勉強会(2018/09/29) - 長岡 IT開発者 勉強会(NDS)

に参加してきました!
前回(7月)は行かれなかったので、半年ぶりでしたが、今回もとっても充実した時間になりました。
主催のcivicさん、みなさまありがとうございました!
(あっ、半年前は行ったのにブログ書いてない・・・)

以下、その場でもメモったものとか感想とか:

SIerの社内教育(仮)

実際にどのような社内教育制度になっているかというお話でした。
全体をとおして「こういう制度です」ではなくて、「今はこんな感じです」という雰囲気で話されていて、硬直化させずに改善を続けようとしているんだな、と感じました。

新入社員研修の作り方~完全版~

そして、その新入社員研修の具体的なお話でした。
教育する対象である新入社員の傾向から達成目標まで、きちんと分析した上で教えるべき内容を導き出していて、教育といってもこんなに科学的なんだな、と知りました。
プレゼン術まで教えてもらえるとか、こんな会社に新卒入社したいですね!(どうやって・・・?)

ITマスターについて

ITマスターって全然知らなくて、情報処理系の資格のひとつなのかな、くらいのイメージだったのですが、このマスターは教える人でした。
私の場合はちょっとITマスター取得までは距離が遠そうなんですが、今回こういうものがあるって知れて良かったです。今後の人生何があるか分かりませんから・・・。

Google Colabで試す、Kerasを使った画像認識

最近Kerasでにわか機械学習をやって(座礁して)いるので、とっても楽しみにしていたセッションでした。
Google Colabだと無料でGPU(とTPU?)が使えるということで、手元のデータでどのぐらいの処理速度になるかちょっとやってみようかなと思います。
あと、「シーフードカレーイタリアン」と「バスセンターのカレー」を識別させる方法は、私もちょっと考えてみたいです。ひとまず画像の枚数を増やしてみるのがいいのかな。

はじめてのOSSライブラリ開発記

私の発表です。最近ずるずるとJSライブラリを作っていたので、その話をしました。
スライドはこれです:NDS57_PRESTO.pdf - Google ドライブ
話の本題としては「作るのに使ったツールとかマインドセット的なもの」と「作ったら勉強になるよ」みたいなことだったんですが、
背景というか、私が働いている分野のことも少し知ってもらえて良かったです。
はっきりした根拠はないんですが、ITエンジニアさんって科学研究に興味を示してくれる人が多い印象です。うれしい!

オンライン英会話ビジネス史

オンライン英会話はずっと興味があって、今回歴史的経緯といろんなサービスを知れて良かったです。
「QQ English」というサービスは私は知らなかったんですが、今後オンライン英会話を検討することがあったらまずここを試してみたいな、と思いました。
あと、Chrome機能拡張を作っててすごい!こうやって、仕事以外でも技術力で問題解決できるのはエンジニアさんのかっこいいところですよね!見習いたいです。

中学生エンジニアやってます

ここで語彙力が消失して「中学生なのに発表の内容も発表自体もレベル高くてすごくてすごい」みたいな感想になっちゃうんですけど、本当にすごい。
スマホ上にPepprくんみたいな対話型AI(ただしもっと賢くてかわいい)を実装しよう、という試みなんですが(こういう方面はあまり詳しくないので何か誤解してたらごめんなさい)、インフラ〜センサー周り〜プログラミング、となかなかいろんな知識・技術が必要そうで、興味深いですね。

レガシーWebシステムをどうにかしたい

デモがトラブルで見られなくて残念だったのですが、レガシーな環境で動かす場合の知見ってもっと共有されてもいいのでは?と思いました。
社内システムとか、閉じられた環境であれば古いOSやブラウザが現役というケースは十分考えられますし、古いから悪い、ということでもないですよね。

C#で、新入社員研修 ~ ライブ版 ~

研修の題材の一つとして、「リバーシ」を作るというのを実演してくださいました!
リバーシについて「ループと配列が必要になる」とおっしゃってましたが、すごく適切な題材なんだろうなと感じました。
・・・私作れるかな。JavaScriptで作ってみようかな・・・。

学校教育の変革とそれを支えるICT、を支えるカオスモンキー業

現職で携わっているお仕事の背景と、どんなことをされているかを紹介してくださいました。具体的なところは当然オフレコということですが、とてもいいお話でした、笑った後に涙が出るような。

おわびのLT

前回不参加だったので(?)おわびの理由をはっきり存じ上げていないのですが、現在携わっているお仕事のお話で、以前からちょっと興味のあった事業だったので興味深かったです。

Androidアプリ開発の入門本を書きながら気にしたこと

単著出版おめでとうございます!
単行本くらいの長さになるとこんな苦労・配慮があるんだな、なるほどー、となりました。スムーズに読み進められる本って、実はすごく考えて作られた結果なんですね。

オンライン学習被害者の会

プログラミングのオンライン学習って、そういえばやったことないんですが、こんなにいろんなコースがあるんですね。
しかし「受講コースの積読」状態が発生する恐れがあるとのことで、技術書を積読しがちな私も「被害者」になるかもしれませんね・・・。

研修報告について

Webサーバセキュリティの講習を受けてきました、というお話で、私の業務上もこの講習は有効では??となったので、ちょっと職場で交渉しよっかな、と思ってます。
Apache向けの内容が含まれていたので、「うちApache使ってないよね」って言われたらどうしようか検討中です・・・w



ということで、なんかすごい量のインプットがありました(懇親会含む)。
次回は12月8日の予定とのことで、仕事の予定が未確定ではありますがぜひまた行きたいです!!!

npmのoptionalDependenciesの使いどころ

npmのpackage.jsonの依存パッケージの定義には、よく使うdependencies、devDependenciesの他に、optionalDependenciesというのもあります。

今まで存在を知らなかったのですが、「optional」という名のとおり、なくても問題ないとか、特定の環境でだけ必要とかの場合に使うもののようです。

最近JavaScriptのライブラリを作ったのですが、そこで「開発にもライブラリ本体にも必要ないけど、サンプルコードの中で使ったパッケージ」がありました。サンプルコードを正しく動作させるのにはインストールしてほしいけど、なくてもライブラリの動作とか開発には影響はないので、これはまさにoptionalDependenciesではないか、と思って初めて使いました。

ライブラリは(この前も書いたけど)これです:
https://github.com/PrestoTools/presto.js


なかなか使う機会はなさそうですが、optionalDependenciesの一例になるのかな、と思ってメモ。