のらねこの気まま暮らし

技術系だけど、Qiita向きではないポエムとかを書くめったに更新されないヤツ

モバイルファクトリー在籍中に開発したOSSの振り返り

この記事はモバイルファクトリー Advent Calendar 2018の17日目の記事です。

どうも、@mizuki_rです。 2018年にモバイルファクトリーを退職して、今は弁護士ドットコムという企業でエンジニアをやっています。

モバイルファクトリーには2011年に新卒として入社して2018年まで8年近く務めました。 その中で、様々なプロジェクトや役回りを任されてきましたが、今日は在籍期間に制作したOSSを供養したいと思います。

代表作

Spica

github.com

Spica - the HTTP client for dealing with complex WEB API.

2013年に制作した、複雑なAPIクライアントを簡易化するOSSです。 なんでスピカって名前だったのかはもう覚えてない。

当時複数キャリアや様々な外部APIとの通信が必要なプロジェクトにおり、 APIごとに異なるフォーマットや命名規則をModel層に持ち込むことが嫌で実装しました。

APIのリクエストをORMのようにラップし、共通のI/Fでリクエスト、IteratorとRowクラスを返し、 APIの仕様で閉じた実装を隔離するためのモジュールです。

APIから受け取った情報をビジネスロジックで運用したいのに、 なぜ整形処理や変換処理をビジネスロジックでやらねばならんのかと。 外部APIが連携することでテスト不能になっていいのかという思いで作りました。

僕の中ではトップ3に入るくらい熱量のこもった作品です。もう作れない。

mizuki-r.hatenablog.com

検索したら当時YAPCでLTしたときの動画が出てきて震えた。

hariko

GitHub - rymizuki/node-hariko: Mock Server that implements the API Blueprint specification.

Mock Server that implements the API Blueprint specification.

2015年に制作した、API-Blueprintの仕様に基づくモックサーバーです。 張り子。ハリボテを用意するツールなので。命名したのは@nekobatoくんです。

当時の開発フローがフロントエンドで情報設計とプロトタイピングの後にAPI実装という流れだったので、 APIをモックサーバで代替する必要がありました。 しばらくJSONベースの簡易モックサーバを運用して、しかしドキュメンテーション不足を感じたので、 ドキュメントとモック、あわよくばテストデータをかね揃えるツールが欲しいとなり作りました。

当時、API-BlueprintとSwaggerが勢力を二分していた(はず)時期で、Markdownでかけるってことでこちらを採用。 実際開発中もヘビーに利用していました。

mizuki-r.hatenablog.com

syntagme

github.com

Syntagme is a flux's flamework.

2016年に制作した、fluxフレームワークです。 草案によると「記号化されたfluxを紬、拡張する」ことを目指していたようです。恥ずかしいなこれ。

もともとは、AngularJSにFluxを導入してビジネスロジックを抽象化し、ReactなりRiotなりに載せ替えようっていう媒のツールを目指していました。 いくつかこだわりがあって、「非同期処理を前提とする」「シンプルなReducer」「利用者はActionとReducerだけを考えればいい」「拡張可能」をいかに氏実現するかを考えました。

当時からすでにReduxは存在していましたが、Reduxの複雑性はサーバとフロントを兼任するエンジニアたちにはコストが高いと考え、 よりシンプルな頭で思考停止しても書ける学習コストの低いフレームワークを目指しました。

実際これにより、AngularJSとVueJSの共存が実現し、かつフロントエンドもだいぶ実装しやすくなったので、僕はこのフレームワークを生み出したことを誇りに思ってます。まあ、もう使うことはあるまいが...

speakerdeck.com

Perl

代表作って程いばれるわけではないけど一応書いたぞっていう奴ら。 当時はAmon2にハマっていて、いい感じに欲しいものをプラグイン化したくてかいたのが多いです。

Amon2-Web-Auth-Path

github.com

Set the trigger for each certification path.

2013年。URI単位で認証を切り替えられるヤツ。

mizuki-r.hatenablog.com

Amon2-Plugin-Web-Validator

github.com

Request validator keep it simple controller.

2013年。コントローラーでの煩雑なリクエストバリデーションを簡略化するやつ。 2016年くらいに後輩がこれを更に強力にしたようなヤツ書いてて、あー...ってなった思いで。

mizuki-r.hatenablog.com

Amon2-AccessControl

github.com

2013年。詳細が思い出せない。 多分Auth-Pathをより強力にしたようなやつ。

jQuery

はい、jQuery系ですよ。form周りの処理をいい感じにしたかった。

jquery-fillInForm

github.com

2013年。$form.fillInForm(data)ってしたらそれに紐づくinputを探して値を打ち込む。

jquery-formize

github.com

jquery-formize is form utilities for jquery.

2013年。真面目に書いたやつ。 formのcontrol要素に対してゲッターとセッターをはやしてオブジェクト的に扱えるようにしたやつ。

jquery-pageNavigator

github.com

2013年。たぶんpagerをいい感じにするやつ。

Heimdall

github.com

Heimdall is a form validation module for jquery or zepto.

2013年。温泉発火村での作品。 zeptoのことみんな覚えてる?たしか 仮面の人にzeptoでも使えるようにしない?って提案されて対応した気がする。

フォームバリデーションツールとして、Backbone、jQuery, Zeptoでの利用を想定していた。

mizuki-r.hatenablog.com

そもそもなんで「ヘイムダル」なのか。北欧神話の神が由来で、巨人の軍勢がビフレストを渡ってアースガルズへ侵攻するのを知らせる、という門番の役割を持ってる、ということから。

えもい(恥ずかしい

Backbone系

いぇーーーい、Backboneだぜーーーー!

backbone-pjax

github.com

2013年。BackboneでPjaxしたかった。 jquery.pjax.jsとbackboneを連携しようとして生み出されたヤツ。

mizuki-r.hatenablog.com

backbone-validator

github.com

2013年。後のHeimdall

AngularJS系

AngularJSは1.x系だよ。

angular-statename

github.com

AngularJS Directive for insert the current state name in the DOM.

2015年。ui-routerのstate名を任意のタグに差し込んでくれる。 ページによって背景とかスタイルを大きく変えたいときとかに使う。

angular-scroller

github.com

AngularJS Directive for shorthand of IScroll 5.

AngularJSでIScrollを使いたいときに、いい感じに隠蔽してくれるやつ。

angular-period

github.com

AngularJS Directive for switching the DOM in the period.

2015年。期間の前・中・後に合わせてDOMを出し分けするヤツ。 Dateにハマったとの、setTimeoutに指定できる時間に上限があることを知った。

mizuki-r.hatenablog.com

その他

とくに分類できないけど、せっかく書いたので供養。

action-tracker.js

github.com

The easy-to-use library for Google Analytics's tracking

2015年。GoogleAnalyticsをいい感じにwrapするヤツ。 いらなくね?って後で気づいた。むしろ書いたことを忘れててプロジェクトの中に入ってるのに気づいて「まじかよ...」ってなった。

grunt-xslate

github.com

Compile Text::Xslate template files from Grunt.

2015年。Perl製テンプレートエンジンをあろうことかGruntJSでコンパイルを試みたプロジェクト。 普通にプロジェクトで使ってた気がする。

hubot-scheduler

github.com

Extension of hubot to execute scheduled task.

2018年。指定時刻にhubotに発言させる拡張。 当時slackでpostとかsnippetとかを指定時刻に投稿できなくて必要だった。 確かcronで動いてたWebHookをhubotに移植するときに作ったんだっけな。

今は叛逆性MAのイベントリコメンドに使ってます。

electron-ffp

github.com

2015年。Electronのおためしで作ったプロジェクト。みてみてcoffee-scriptだよ。 ffpはFastFindPositionの略で、minifyされたJavaScriptから任意の位置をすばやく発見するためのツール。

errorログに流れてきたけどそれがどこのエラーなのかわからない!っていうときにつかった。

まとめ

8年に渡って実装してきた公開ライブラリを一気に紹介しました。 これ以外にも僕のリポジトリには作り途中で放棄したライブラリなどが残っており...

こうして振り返ってみると、思いの外向けにライブラリを発信していて(発信力はともかくとして)高いモチベを意地していたんだなと思います。 OSSで作る意義は、先日の吉祥寺pmで@fujiwaraさんが話していて、「これだ!!!」ってなったのでぜひ読んでみてください。

speakerdeck.com

こういったOSS活動を促進してくれる文化があり、またともに意見交換できる環境があるモバイルファクトリーに感謝を。 願わくば、この文化を今後も発展させていってほしいですね!

10月に弁護士ドットコム株式会社に入社しました

10月1日から弁護士ドットコム株式会社の税理士ドットコム事業でエンジニアとして働き始めました。

え、今11月? いや、ごめん、普通に忘れてました。

忘れないうちに転職に至った経緯や、今後の展望を書きます。 とにかくこの1ヶ月いろいろあって割と記憶が飛び気味。それくらい濃密に過ごせている。 まあ、とりとめなくだらだら書くんであしからず。

転職ドラフトでの出会い

自分はこれ以上成長できない、と感じた

退職エントリでも書いたんですが、 当時の僕は自分のキャリアに見通しが立っていない状態でした。

仕事はこなしているし、生産性も決して低いわけではないと思ってはいる。 それでも、満足感や達成感がなく、自分のキャリアの限界を感じていました。これ以上自分は成長しないのではないか、楽しめる仕事なんてないのではないか、と諦めの気持ちもありました。

まあ、この1年くらいまではキャリアや今後の展望とかをほとんど意識せずに貢献だけを考えてやりたいことを提案、実装、改善とがむしゃらに走ってきたっていうのが一つの要因だとは思っています。自身のキャリアについて考えてこなかった。

しかし、メンバーの育成をサポートする上で僕のプレゼンスの強化を考えたときに、今のままじゃ先が無いなと感じました。

他の会社と繋がりたいけど、経路がない

そんなこんなでいろいろ悩みをもんもんと抱えていたんですが、まあとにかく他の会社ではこういう人をどう扱うのか?って言うのを切り口にしようと考えました。

この時点では転職のタイミングとか考えてなかったし、自分にマッチししそうな環境があるかもわからない状態だったんで、転職を前提とした相談みたいなのを知り合いにするのは少々抵抗がありました。まあ、僕が「辞める」って言い出したときの影響とかも考えつつ、ではありましたが。

なんとか内密に浅く始められないか、と考えました。

いろいろ転職系のサービスにも登録してたんですが、概要とか「とにかく一回あって話しましょ」っていうエージェントからのリクエストに答えるのは手間だと思っていました。登録しておしまい。メールは読まない。

そこで遥か昔に登録した転職ドラフトをお試し気分で使ってみようと思い立ったんです。

まずはレジュメを書くことで状況を整理する

転職ドラフトは最初のエントリ時にレジュメを登録します。 そこで今後自分がどういう方向性を出したいのか、を なんとなく 書き出します。 確定とかじゃなくていい。とりあえず思いついたことをだらっと書きました。

ついで、プロジェクトとかでこれまでやってきたことを書き出してみてみます。 幸い僕はこういう文章を長ったらしく書くのが得意だったのと、何よりそこそこ濃ゆい経験をしてきたので書くこと自体はこまらなかった。逆に主張したい点に絞って優先度の低い案件を削りました。

こうしてレジュメを書くことで「人の役に立ちたい」「求められたい」という要求と「面白いことがしたい」という漠然とした思いを抱えていました。

とはいえこれだけでは、転職すると表明するには物足りなさがあったので、この先は実際に話をして感じたものを土台に考えようと思いました。

実際何回かのドラフトを経て数社から指名をいただきました。

技術か、ビジネスか

幸いなことに指名金額も現状の自分の給与と比較してみると違和感なく、 会ってみたい、話してみたいと思う内容の指名だったのでカジュアル面談から各社と話を伺いました。

実際最初はほんと漠然としていた思いだったんですが、 前職で採用もやっていたため、どういうことを聞くか話すかを考えられたので事前に何通りかシミュレーションはしていました。

僕が目指す方向性として「フロントエンドとしてUI/UXにコミットできるポジション」あるいは「関心のあるビジネスの問題解決をサポートするポジション」そのどちらかで「今よりも楽しそう」という感覚を得られるかどうかを元に話を聞きに行きました。

お硬そう? いや、全然そんなことはない

名前からして硬そうなイメージありますよね? 僕もそう思いましたし、何人かからも言われました。関心を持ったのは事業領域が全く知らない領域だったことと、僕の経験が活かせる領域だったこと、そして過去何度か参加した勉強会のスポンサーをしていたことです。

スポンサーをやっていた、というのは結構大きくて、僕自身勉強会と組織の成長について考えていたりもしたのでそこに力を入れてることは僕の方向性との相性を感じました。

面白くないですか? 全く違うドメインで自分を活かせそうなことをやっていて、期待に合いそうな動きをしている。

最初こそ緊張したものの、カジュアル面談から各選考まで実に楽しく進めさせてもらいました。 いや、ほんと。何人かとお話させてもらいましたが、CTO以外は「これ面接ですか?」ってくらい楽しくおしゃべりしてました。CTOとの面接は「あ、これ、面接ですね」って感じだったw

縁、期待、そして未知の領域への挑戦

弁護士ドットコムの選考を進めていた頃は、転職ドラフト経由じゃないところも含めて数社の選考を進めていました。 実際転職活動してみると、各社興味が強くて、どこも行きたいって気持ちになってなかなか悩みました。いろんな選択肢を考慮してどのシナリオが一番納得感があるか。

今振り返ると、弁護士ドットコムを選んだ決めては大きく3つありました。

縁を感じた

選考の過程で現在の上司と話したんですけど、その人が前職で採用やってたときの他社の採用担当で結構印象深く残っている人だった。

期待を感じた

判断基準として、アサイン予定のチームや関わりそうなエンジニアとお話させてもらった際に、「この人達と働くと面白そう」という期待をいだきました。 実際これは間違ってなくて、僕の中ではめっちゃ刺激のある議論をたくさんさせてもらえてる。いやほんと、転職前にどういう人と働くのか確認する機会は大事です。あのときの感覚は間違ってなかったなって、入社して速攻思いました。

ビジネス領域に関心を引かれた

当時語られた過去の経緯、現状、今後の展望に対して僕が貢献できそうという期待。それに加えて、税理士や弁護士という領域に関しては全くの未知。しかし、それが社会貢献につながることや今後自分の人生にどういう影響を与えるか予測できないという点で興味を引かれました。

結構これは感覚の話で言語化が未だに難しいんですけど、他ではできない領域であり、ちょうど今から面白くなるフェーズで「え、面白そう」って思ってました。

もちろん、当時内定を頂いてた他の企業も面白そうって感覚があってすごい悩んだんですけど、この選択がきっと一番予測できない未来だったし、後悔しないと信じられた選択でした。

そして1ヶ月働いた現在、後悔してないしむしろ充実してる。

お仕事楽しいです

実際に一ヶ月働いてみて、いい意味でも悪い意味でも当初の想定を裏切りました。

任された裁量の大きさ

この1ヶ月のアクションを説明するとソレだけで連載記事がかけるくらいのボリュームがあるので省略しますが、とにかく提案が「いいじゃん」「そういうのを待っていた」「すごい、感動してる」みたいになんかみんながめっちゃ反応返してくれる。 期待を感じるし、期待に応えようと頑張れるし、フィードバックを感じ取れて貢献の実感がある。(慢心はしたくないので謙虚に振る舞うけどめっちゃ嬉しい)

プロ意識

いや、この言葉使うのどうなの?って思うけど、実際職務に真摯に向き合ってくれている。 ビジネスドメイン的にエンタメとは違う方向性、ニーズがあるからっていうのもあるとは思うけれど、関係している人たちみんな本当に真摯に向き合っていて、だからこそ話やすいし議論が楽しい。

レガシーシステム

思っていたより技術的負債があるなぁという。 とはいえ、深刻さや絶望はそんなに感じていない。知識不足って気もするけど、でもメンバーがちゃんと向き合おうとしていて、信頼できるエンジニアが側にいて、経験的にもなんとかする方法は思いつく。できるかどうかは別だけど、でもやろうと思ってやれないことはないって感じている。

今後の展望

目標設定を通して、今後の方向性とかはアウトプットしてきた。 当面僕がやりたいことも出来たし、ただそれはやれば結果が出るものではないし、じんわりと影響を与えるものなので全然気は抜けない。 ただ、これまで僕がやりたがらなかった領域に僕が積極的にアクションを始めている。この変化が結構驚きで、いい意味で自分の変化が予測できなくなった。 いろんな人と意見交換しながら、改めて自分のキャリアを見つめ直すことができそう。

この先、どういう展開を踏むかはまだわからないけど、僕にとっても周囲にとっても良い状況を作れるよう頑張ろうと思う。

最後に

これからよろしくおねがいします。

なお社外発表とかそういう系の活動はこれまでどおり気が向いたりissueが来たり相談されたりしたら動くつもりなんで気軽にはなしてください。 あと、今回の記事は割と雑に書いたので詳しく聞きたいとかあればTwitterとかで声かけてくれれば話せることは話します。なんせ濃密すぎて1万文字とか余裕で超えそうなんで...

今後ともよろしくね☆

モバイルファクトリーを退職します

9月末付けで株式会社モバイルファクトリーを退職します。本日8/24が最終出社でした。

まだあまり実感はなくて、(弊社では伝統の)退職者発表や挨拶なんかをしながら「あー辞めるのかー」という気持ちを出しつつ、でもなんかやっぱ実感はわかないなぁって思ってるところです。

いろいろ思い出を振り返りながら、まあ当たり障りの無い範囲で何をやってきたかとかをつらつら書いてます。

なれそめ

もともとWeb系がやりたかったので、Web系ベンチャーを探していました。 ベンチャーって絞ってたのは、割と裁量もらえてガンガン勉強できそうって印象があったから(まあ実際そうだった)。実際当時の人事担当と会って「あ、ベンチャーっぽい」ってなったのが印象深いですね。

やってきたこと

基本スタンスとしてはフロントエンドエンジニアであることが長かったですが、 最初はサーバサイドでPerlを書いていたし、度々Perl書いたりExpress書いたりAWS触ったり、最近はNuxtさわったりと、Webに関しては全般的にさわっていました。

後期になるに連れて、チームや人にフォーカスが広がり、サービスに対するUXに限らずチーム内の体験をどう改善するかについて検討・行動を繰り返していました。 実際、チームの会議体を精査したり、社内勉強会を主催したり、1on1とかしてメンバーと接したりと結構いろいろやりました。

もともと対人戦は苦手意識が強く、避けてきては居たんですけど、怯えながらも挑戦させてもらえて、実際それでフィードバックもらえてと本当に学びの多い環境でした。

どんな立場だったか

  • エンジニア
  • フロントエンドエンジニア
  • チームリーダー
  • メンター
  • 育成サポート
  • 採用サポート

どんなことをしてきたか

なんで転職するの?

結構いろいろがんばってきたつもりでは居たんですけど、まあ少し疲れたというか、自分の方向性がわからなくなって、かつ目指して登れるレイヤまではきちゃったかなというのが感触としてありました。

一歩引いて振り返ってみると、「あれ自分なにがしたいんだっけ?」「わからん」ってなることが多くて、でも今やってることが嫌だってわけではない。目的やチーム、人に貢献すること自体が目的ではあった。

30って年齢の節目を迎えるタイミングで、今一度自分のみのふりを考えてみようと思って、外に出始めたのがきっかけです。

次の会社について

ーーは、入社したら改めて。

今後どうしてきたいの

これから探していこうかなと。 まあまだ折り返し地点って感じでもないし。

謝辞

株式会社モバイルファクトリーをはじめ、関わってくれた方々に感謝を。 ほんと、8年前の自分では想像できないくらい成長していると思う。

恒例の

まあ恒例のって思って貼ったけど、技術書籍とかKindleで欲しいからあんまりリストに乗せるものがなくてな...

おまけ

  • 同期からキックボードをもらいました。ラーメンたべにいくの腰が軽くなりました
  • 選別にiTunesカードをいただきました。回します。

ReactNativeにNativeBaseを導入してUIを整える

概要

天気の情報を入れた、が! CloudsとかClearとか言われてもわけわからん! いつの天気!? みたいに思うのでとりあえずUIをそれっぽくしてみようと思った。

前回:

mizuki-r.hatenablog.com

情報設計

L2. いつ L1. 天候 L3. 気温, 湿度, 気圧 L4. 更新

対応フロー

  1. リファクタリング 1.1. 起動時に天気を取得する
  2. ワイヤーフレームの作成 2.1. ヘッダ 2.2. 天気アイコンの表示 2.3. 今日の天気レイアウト 2.4. 更新ボタンのレイアウト

実装調査

起動時初期化

ContainerでcomponentDidMount時にasyncAction発行すれば行けそう。

UI

NativeBase

他のMaterial系とかも探したけど、 ここ数ヶ月でメンテされてて、情報がありそうなフレームワークがぱっと見みつからなかった。

そういうの探すのにおすすめな記事とかあれば知りたい。 そういうの探すのにおすすめな記事とかあれば知りたい。(こういうのとか)

Comonents

まあこの辺使えばいけるんじゃないの?的なやつ。

実装

  • API通信が「取得」から「読み込み(自動)」「再読込(ユーザアクション)」に別れたことで、UseCase, Action, Reducerに変更が必要となった
    • めんどくさくてUseCaseだけ分けた
    • あとで違うインタラクションにしてくれって言われたときに困るかもしれない
      • ローディングの有無とか、表示の仕方とか
      • 困らないかもしれない
    • Viewから見て別れていれば一旦おk
      • いやこれ、絶対あとで「クソだろ」って思う
  • react-baseがコケた
    • Error: Unable to resolve module 'create-react-class'
  • NativeBaseでReactNativeのComponentを置き換え
  • NativeBaseでアイコン利用
    • type, name を指定するが、☓になる
    • 名前を変えても☓
    • react-native linkしてなかった
    • デフォルトはIonicons
  • ボタン+アイコンがいい感じの配置にならない
    • ドキュメントのコードとキャプチャが違う
    • サンプルを示してくれ!!!!

Error: Unable to resolve module create-react-class

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `create-react-class` from `/Users/mizuki/project/rnapp-weather/node_modules/native-base/dist/src/basic/Picker.android.js`: Module `create-react-class` does not exist in the Haste module map

インストールで解決。

$ npm install --save create-react-class

NativeBaseの利用

$ npm install --save native-base
$ react-native link

Android EmulatorのScreen shot

$ adb shell screencap -p /sdcard/screen.png
$ adb pull /sdcard/screen.png /tmp/screen.png
$ adb shell rm /sdcard/screen.png
$ open /tmp/screen.png

参考: MacでAndroid開発中に手軽にスクリーンショットを撮る

完成図

f:id:ry_mizuki:20180624224206p:plain

React Native に Reduxを加え、ロジックを実装する

概要

React Native入門シリーズその3。 Reduxを導入してAPI通信してViewに引き渡す。

前回: ReactNativeにTypeScriptを導入する - のらねこの気まま暮らし

APIについて

OpenWeather

アプリについて

今回試すことが主軸にあって、 「こういうView」っていう提案まで考えてない。よって実用的ではないものだが、アプリの構成について考える土台として雑に作る。

インタラクション

本来なら、今の天気を取得しつつ予報も出すべきだが前述の通り手抜きで対応する。

  1. ボタンを押したら、天気の読み込みが始まる。
  2. 天気の読み込みが完了したら、天気の情報を表示する。

View設計

  • 今の天気を取得するボタン
  • 天気の状態をそのまま表示

アーキテクチャ

アプリの構造を考えるぞい。

選定

  • Redux Way
  • Redux Way Arrange
  • Ducks

Redux Way系は役割でコードを分ける、Ducksは関心でコードを分ける。

個人的にクライアントの関心はViewの側面から見たActionとアプリ全体から見たStateに分けられると思っていて、そこを密結合することに懸念がある(実際、Vuexでも結構悩んだ)。

今回はReduxについて真剣に考えるより、React Nativeを知ることが目的なので複雑な悩みを抱えたくない。

しかし、Redux Wayは僕の感覚に則さない...

ということで感覚的にしっくり来るようにRedux WayをArrangeする。

Redux Way Arrange

View層

React Componentを配置する。 Container,Presentational,AppRootを管理する。

UseCase層

Viewから入力を受け取り、dispatchのタイミングを制御する。 いざ名乗ってみると違和感しかない。 Containerと対応する。

Action層

ActionCreator。

UserCaseで構築したデータをActionにパッキングする。 ここはもっと隠蔽できると嬉しい。

究極、s2sとか使って自動生成したい。

Store層

Redux Storeの初期化と、Reducerの定義を担う。 Reducer基本的にStoreからしか参照されないしっていうかStoreの一部だよね、の気持ち。

ReducerはViewではなく、アプリ内のドメインと対応する。 Stateはアプリにおける情報のドメイン

Service層

名前に悩んだけどまあとりあえず。

外部APIとの通信、アプリへの最適化を担う。 だいたい外部APIを使う場合(それが自前で用意したAPIだとしても)要求以上の実装がされがちなので、そういう本質的ではないが必要なことをまとめておく場所。

基本的にUseCaseからしか呼ばれない。

実装フロー

事前想定:

  1. 天気取得ボタンの作成
  2. 天気取得のUseCaseの作成
  3. Reducerの雛形
  4. OpenWeather API取得の実装
  5. UserCase内でAPI呼び出し
  6. weather用のReducerを定義
  7. ViewにReducerから取得したデータを表示

実際:

  1. React + Reduxの雛形作成
  2. ボタンの作成
  3. 天気取得のUseCaseの作成
  4. Actionの作成
  5. Reducerの作成
  6. 型の定義(Action, State, Props, etc)
  7. Weather用のReducerを定義
  8. ここでContantsが必要だと判断
  9. OpenWeather API取得の実装
  10. weatherのReducerに実データとローディングフラグを実装
  11. Viewに読み込み時の処理と天気表示を実装

つまったところ

  • connectの実装と型定義
  • Object.assignの引数の順番間違えた
  • OpenWeather APIの仕様調査と型定義

モジュールの変化

core

  • react-redux
  • redux
  • @types/react-redux
  • @types/redux

service

  • axios
  • qs
  • @types/qs

所感

TypeScriptの警告つぶしが結構面倒だった。 Reducer定義しないといけないことを知った。 OpenWeatherAPIの仕様以外と知らなくて手間取った。 土台ができちゃえばあとは継ぎ足しで行けるかなって思った。 あれ、ReactNativeってなんだっけ?

github.com

ReactNativeにTypeScriptを導入する

概要

前回の続きです。 できたてホヤホヤのプロジェクトにTypeScriptを導入する。

環境

  • react v16.3.1
  • react-native v0.55.2
  • react-native-cli v2.0.1

依存モジュールのインストール

$ npm install -D \
  typescript \
  node-libs-react-native \
  react-native-typescript-transformer \
  @types/react \
  @types/react-native \
  @types/jest
$ npm audit fix 

tsconfigの設定

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "ES2015",
    "jsx": "react-native",
    "rootDir": "./src",
    "strict": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "esModuleInterop": true,
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

CLIにTransformをフックする

const extraNodeModules = require('node-libs-react-native')

module.exports = {
  extraNodeModules,
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}

App.jsを書き換え

import { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
$ rm App.js

実行

$ npm run start
$ npm run android

初心者がReactNativeを使ってAndroidで起動できるようにするまでの記録

概要

諸事情でReactNative触る機会があるんだけど、 Nativeは経験が薄く、Reactもそんなにガッツリ触ってないのでこれを期に勉強しようと思ったのでまとめ。

実行環境

悲しいかな、High Sierraにできなかったんだこの端末...

入門準備

めんどくさいので今回はAndroidのみ。

Android

SDKMan

JDKや管理用にSDKMANを入れる。

Home - SDKMAN! the Software Development Kit Manager

$ curl -s "https://get.sdkman.io" | bash
$ source "$HOME/.sdkman/bin/sdkman-init.sh"

※このとき、tr, ttにshellでalias貼ってるとエラーになるので注意。

~/.bashrcを開くとSDKMANの初期化コードが含まれている。(えーーーー) zsh使いなのでzprofileに移す...

$ echo '
#THIS MUST BE AT THE END OF THE FILE FOR SDKMAN TO WORK!!!
export SDKMAN_DIR="/Users/mizuki/.sdkman"
[[ -s "/Users/mizuki/.sdkman/bin/sdkman-init.sh" ]] && source "/Users/mizuki/.sdkman/bin/sdkman-init.sh"
' >> ~/.zprofile

いや、よしんばbashはいいとしても、rcに書き込まないでくださいよ、こちとらgitで管理してんやぞ? profileあるやろ。なんで?

.zprofileはお使いのshellに置き換えてご利用ください。

$ sdk version

SDKMAN 5.5.13+272

JDKのインストール

$ sdk list java

一覧が出てくる。 今回は諸事情によって1.8が使いたい。

$ sdk install java 8.0.171-oracle
$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

ok

Android Studio

Download Android Studio and SDK tools  |  Android DevelopersからAndroidStudioをダウンロードしてくる。 (この時点での最新は3.1.3 for Mac

インストール類は時間かかるから先にやるのがおすすめ

ReactNativeのガイダンスに従ってインストールを進める。

  1. ウィザードが起動するので、Choose the type of setup you want for Andriod Studio のメッセージが出てきたらCustomを選択。
  2. Select UI Theme は好きなやつ
  3. SDK Components Setupは以下のものを選ぶ 3.1. Android SDK (チェック済み) 3.2. Android SDK Platform (チェック済み) 3.3. Performance (Intel ® HAXM) (チェック済み) 3.4. Android Virtual Device (チェックする)
  4. このさきは任意で

Android Virtual Deviceエミュレーターのやつ。

ウィザードが完了したら Welcom to Android Studio 画面に来るので、Configure から SDK Manager を起動。

なんかいい感じに選んでいれてく。

最後にANDROID_HOMEにパスを通す。

$ echo '
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
' >> ~/.zprofile

あとでadbとか使うからね。

ReactNative Projectのセットアップ

$ npm install -g create-react-native-app
$ create-react-native-app rnapp-weather

Node実行環境

$ ndenv install v10.5.0
$ ndnev local
$ ndenv rehash

# create-react-native-appで入ったやつを消
$ rm -rf node_modulesす
$ rm yarn.lock

# re:install
$ npm install
added 1302 packages from 787 contributors and audited 35887 packages in 55.633s
found 5 vulnerabilities (2 low, 2 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm 6で追加されたauditのレポート。 npm audit fixを使うと、解決策が提示されている場合は解決してくれる。

+ react-native-scripts@1.14.1
added 6 packages from 17 contributors, removed 82 packages and updated 4 packages in 12.801s
fixed 2 of 5 vulnerabilities in 35887 scanned packages
  2 vulnerabilities required manual review and could not be updated
  1 package update for 1 vuln involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or do it by hand)

一旦これでよしとしよう。

実行

$ npm start
10:20:11: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

Start script hangs without error when there are no available inotify watches · Issue #234 · react-community/create-react-native-app · GitHub

なるほど

$ sudo sysctl -w kern.maxfiles=5242880
$ sudo sysctl -w kern.maxfilesperproc=524288

リトライ

$ npm start
10:22:03: Starting packager...

okそう。

ejectの実行

このままだとReactNativeしかないのでNative使えるようにする

$ npm run eject

> rnapp-weather@0.1.0 eject /Users/mizuki/project/rnapp-weather
> react-native-scripts eject


We didn't find any uses of the Expo SDK in your project, so you should be fine to eject to
"Plain" React Native. (This check isn't very sophisticated, though.)

We strongly recommend that you read this document before you proceed:
  https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

Ejecting is permanent! Please be careful with your selection.

? How would you like to eject from create-react-native-app? React Native: I'd li
ke a regular React Native project.
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? Weather
? What should your Android Studio and Xcode projects be called? Weather

How would you like to eject from create-react-native-app?

そのままEnter

What should your app appear as on a user’s home screen?

Weather

What should your Android Studio and Xcode projects be called?

Weather

Android端末の接続

手元にないのでエミュレーターで。 ーーって思ったけどどこからDevice Manager起動するのかわからねえ...

仕方ないので新しくProject立ち上げる。 CLIとかどっからDevice Manager起動できひんの?

Virtual Devices起動できた、が、アイコン小さすぎてわからない。これは... 初心者辛くない...?

$ adb devices
List of devices attached
emulator-5554   device

接続を確認。

AndroidでReactNativeを実行

$ npm start

こっちでビルドして配信する。

別ターミナルを開いて、ビルドを実行。

$ npm run android

めったビルド走る。

わぁい赤ぁい

error: bundling failed: Error: Couldn't find preset "babel-preset-react-native-stage-0/decorator-support" relative to directory "/Users/mizuki/project/rnapp-weather"
diff --git a/.babelrc b/.babelrc
index 0f0c07d..57415c7 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
-    "babel-preset-react-native-stage-0/decorator-support"
+    "babel-preset-react-native"
   ],
   "env": {
     "development": {

うごいた

Hello World

しようとおもったけど疲れたので次にする。 hotreloadうごかん。

まとめ

導入で力尽きた

  • create-react-native-appしたらejectする
  • モジュール間のバージョン際なんてよくあること
  • emulatorはなにが起きてもおかしくないので強く心を保つ
  • hotreloadをする

3hくらいかかった。つかれた

github.com