のらねこの気まま暮らし

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

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

React+Redux覚書

概要

React+Reduxを使ってアプリを書く機会があったが、 どちらもちゃんと触ったのは年単位昔なので思い出すために軽くコードを書いてみた。

ーーやつの備忘録。

こういうことを思ってこうしたいなって気持ちになったという記録。

基本構成

environment

  • Docker node:10.4.0-alpine

dependencies

  • react 16.4.1
  • react-redux 5.0.7
  • redux 4.0.0

devDependencies

  • babel-loader 7.1.4
  • babel-preset-react 6.24.1
  • webpack 4.12.9

基礎知識

  • React
  • Redux
    • connect
    • state
    • reducer
  • Component
    • Provider
    • Container
    • Presentational

所感

もともとSyntagme作るときに、Reduxのコードは読んでいたので一度読み直せば「あーはいはい」って感じだった。

ただ、当時思ったActionCreatorの扱いでやっぱり戸惑う。

ActionCreatorは、 * dispatchするオブジェクトを作る * 複雑なdispatchを隠蔽する

の役割があると感じていて、 その2つを共存させることに抵抗がある。

できれば役割わけたいなぁと。

もしかしたらMiddlewareがいい感じに隠蔽してくれるのかも知れないが、 初心者にはその歴史的経緯をさっくり理解するにはReduxの世界は広すぎる。

再設計

というわけで腹落ちする程度まで掘り下げた。

ディレクトリ構成

- src
  +- index.js
  +- views/
  | +- components/
  | +- containers/
  | | +- Home.jsx
  | +- App.jsx 
  +- usecase
  | +- home.js
  +- actions/
  | +- index.js
  +- store/
    +- index.js
    +- reducers/

index.js

  • App.jsxのマウント
  • アプリケーション全体の初期化処理

Views

React Componentを押し込める場所。 汎用的なものだけではなく、画面構成全部を含むので、Viewって名前空間にした。

App.jsx

  • Providerの構築
  • Redux Storeとの接続

Containers

  • Container Componentの置き場
  • Presentationalを一つ以上組み合わせる
  • ViewとUseCase, Stateを接続する

Components

  • Presentational Component
  • コンテキスト持っちゃ駄目よ
  • 小規模ならこれでいいけど、Componentの数が増えてきたらAtomic-Designとかをベースに分割したほうがいいかもしれない
    • が、必要ないならしないほうが無難

UseCase

  • 独自定義
  • 着想はAlminから
  • view ← 何らかのイベント → action の中間処理を担う
    • fluxで言うところのActionCreator
    • view側からの入力のハンドル
    • アプリの外側とのコミュニケーション
    • dispatchのタイミングのハンドル
  • 基本的にはContainerと対応する

Actions

  • Actionオブジェクトの作成
  • 程よい切り方がわからないけど機能単位で切るのがいいのかなぁ

Store

Redux Storeの定義。

index

  • createStoreの実行
    • reducer, initialState, middlewareの構築

initial-state

  • 初期Stateの定義

reducers

  • reducerの定義
  • 基本的にはアプリケーションにおける情報設計単位でファイルを切る
    • 必ずしも画面と対にはならない
    • 複数の画面で同じデータを使い回すことがある
    • 領域をビジネスロジックに基づいて区切るという意味で、ドメイン設計に近い

まとめ

  • React+Reduxで最低限腹落ちする構成を考えた