布団の中にいたい

Elasticsearchいじったり、Androidアプリ書いたり。最近は数学の勉強が楽しくなってきました。

async/await で複数のAPIを非同期に処理する

一つの画面で複数のAPIを叩く時にだいぶ遅くなっていてハマったのでメモ。

最初はだいたい以下のように書いていたのですが、この場合だとrequest1の処理が完了 → request2の処理というように非同期で処理する意味があまりない形になっていました。

async function sample() {
    await request1(arg1);
    await request2(arg2);
}

なんとかならないかと思っていた所、async/awaitはPromiseを返すということがわかったので、Promise.allですべて実行する形にしてすべてが終了してから次の処理に進む形にした所、ある程度早くなりました。

Promise.allのドキュメントは以下。

Promise.all() - 複数のPromise関数を実行し、全ての結果を得る | JavaScriptリファレンス

変更したコードはだいたい以下のような感じ。

async function sample() {
  const reqs = [{
    request: req1
    args: arg1
  },{
    request: req2,
    args: arg2,
  }]

  await Promise.all(reqs.map(req => req.request(req.args)))
}

2018年のまとめ

今年も後数時間で終わるのでざっくりとした今年の振り返りをしようと思います。

主な出来事はだいたい以下の通り。 - 勉強会で久しぶりのLT - 転職 - 副業開始

勉強会で久しぶりのLT

学生の頃はちょっとした勉強会でたまにLTをしていたりしていたのですが、社会人になってほとんど勉強会に参加もしていませんでしたし、ましてやLTなんて全くしていませんでした。LTをすること自体を目的化してもいなかったので特段何かあるかわけではなかったのですが、社外のエンジニアと交流する機会を作りたいと思って登壇してきました。以下がその時の資料。

speakerdeck.com

goでOSSにコントリビュートしていきましょうというお話で、go歴浅めの人でもさっくりできる例をいくつか紹介しました。LT後に参加者の方から「私もコントリビュートしてみたくなりました!」と言われて少しうれしくなりました。

転職

実家の都合で急遽お金を稼がないと行けないのでまた転職しました。給与自体を上げることができればよかったんですが、会社の給与水準的に無理そうだったので交渉もあまりしないで早々に退職しました。前職自体は今でも最高の勤務環境だったのであまりやめたくなかったのですが今回ばかりはしょうがなく。

ちなみに転職して給与はそこそこ増えました。

副業

前述の通り、急遽お金が必要になったのと、大学に入り直そうと思っているので貯金するために副業をはじめました。周囲の人から「副業は休日が潰れるからしんどい」「休まる時間がない」と聞いていたので戦々恐々としていたのですが、いざやってみると普段あまり触らない技術について暇な時間に触れるのでとても楽しいです。加えて目的を達成するためにコードを書いているので自分の糧になっていると強く感じていることもあって満足度が非常に高いです。今の案件が終わるまでに次の案件を見つけられればいいな。

まとめ

これ意外でも詳細は書かないですが病院に通い詰めだったりで色々あった今年ですが概ね楽しくやれたかなと思っています。ここ数年は生活するだけでいっぱいいっぱいだったこともあって自分への投資を怠っていたように感じるので来年はちょっと我慢して自己投資の一年にしようかと考えています。合わせて自身の興味が分散していることも少々気になっているので、やることを選んでいこうかと思います。

typescriptでreact-navigationを使おうとしてversion違いでハマった

タイトル通り、画面遷移の実装のためにreact-navigationを使おうとしたのですがハマったのでメモ。

react-navigationは以下。 github.com

ハマった理由はシンプルで、react-navigationのstableはv3なのですが、react-navigationの型定義である@types/react-navigationがv2.13.0までしか対応していなかったのが原因。

何も知らない状態で適当にインストールしてたので、1,2時間ぐらいハマってました。馬鹿みたい。。。

とりあえず既存のreact-navigationを削除して以下を実行して、再起動したら動きました。

$ yarn add react-navigation@2.13.0
$ yarn add -D @types/react-navigation@2.13.0

react-native-splash-screenでSplashScreenを追加する

最近はFlutterで遊んでいることが多いのですが、ReactNativeを触らないといけない状況がやってきそうなので適当なアプリを一本実装しながら勉強しています。

そんな中でReactNativeで書いているアプリにSplashScreenを追加しようとして微妙にハマったのでメモ。

SplashScreenの追加自体は以下のライブラリを使用しました。star数も多いし有名だし安心。

github.com

基本的には以下のリンクに沿って実装していました。

medium.com

が、画像が表示されず適当に作ったViewの画面しか表示されなかったので公式のREADMEを確認したところ、どうやらObjective-C側で参照するヘッダーの名前が変わっている模様。なので以下のように変更したら画像が表示されました。

- #import "SplashScreen.h"
+ #import "RNSplashScreen.h"

...

- [SplashScreen show]
+ [RNSplashScreen show]

まとめ

ライブラリのREADMEも親切だし、mediumの記事も大変親切だったのでかなり楽にSplashScreenを追加できました。とりあえず公式のREADMEは最初に読んだほうがよいと反省。

おまけ

アプリのSplashScreenに乗っける画像を作るのが面倒くさかったので以下のサービスで自動生成しました。ライセンスをしっかり確認できていないので微妙に不安ですが、綺麗にな画像がすぐ出来て非常にありがたいです。

hatchful.shopify.com

Laravelでapp/User.phpを移動した際のエラーを消す

Laravelを触ることになったので少し遊んでみている所なのですが、app配下にあるUser.phpを移動した際に認証周りでハマったのでメモ。

app配下にModelsディレクトリを作成してそこに配置します。

今回出たエラーは以下。

{
    "exception": "ErrorException",
    "file": "/var/www/vendor/composer/ClassLoader.php",
    "line": 444,
    "message": "include(/var/www/vendor/composer/../../app/User.php): failed to open stream: No such file or directory",

// 以下省略

原因はconfig/auth.phpで設定しているUserProviderのモデルがApp\User::classになっていたことでした。これをnamespaceに合わせてApp\Models\Userにすれば問題なく動きました。

「Nuxt.jsビギナーズガイド」を読んだ

ちょっとした仕事でNuxt.jsを触ることになりそうだったので「Nuxt.jsビギナーズガイド」をサクッと読んでみました。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

本自体はタイトルに書かれているとおりにNuxt.jsの初心者向けの本ではあるのですが、対象読者としてはある程度Vue.jsを触ったことがあることを想定した形で書かれています。

ざっくり流れとしては、「Nuxt.jsとは」という話から始まり、Nuxt.jsを使った小規模な開発、中規模なアプリ開発、テスト、デプロイといった流れで話が進んでいきます。

感想

全体的に平易にかかれていて非常に分かりやすかったです。

個人的に読んでいて面白かった部分はNuxt.jsを利用するべきではない場面が書かれていたことでした。こういったフレームワークを解説するような本だと概ね使う上でのメリットが書かれているものですが、それに加えて利用するべきではない場面という形でデメリットも書かれているので、「流行っていて軽く触ってみて便利だから使ってみる」みたいな形で流されることもなくなるので素晴らしいと思いました。

上記に加えてサンプルコードも豊富ですし、テストの書き方も書かれているのである程度Vue.jsを使ったことがある人が読む分には素晴らしい本だと思いました。あと普段はReact/Reduxのコードを読んでいる機会が多いので、Vuexではこう書き方をするんだなという驚きもあって面白かったです。

flutterでfirebase authを利用する

flutterでfirebase authを利用するexampleを書いてみました。といってもメールアドレス認証のみですが。

github.com

肝になる部分は実際にfirebaseにリクエストを飛ばしている部分で以下です。 FirebaseAuth.instanceを使って、singinWithEmailAndPasswordでリクエストを投げてuserを引っ張ってきます。後はこれの呼び出し側でstateに突っ込むなり、別のページに渡すなりする感じですね。

final _auth = FirebaseAuth.instance;
Future<FirebaseUser> _signIn(String email, String password) async {
  final FirebaseUser user = await _auth.signInWithEmailAndPassword(
      email: email, password: password);
  return user;
}