見出し画像

グループ合同で React, iOS, Android に関するエンジニア勉強会を開催しました #Zaim

こんにちは、Zaim で iOS の開発を担当している @tx-temです。

今回は Zaim と同じくふうカンパニーグループの Da Vinci Studio の皆さんと合同で開催したエンジニア合同勉強会について、ご紹介します。

Zaim では普段から隔週で勉強会を開催していますが、今回は初めてグループ会社を巻き込んだ発表の場となりました。通常の勉強会とは発表の内容も異なり、新鮮で多くの知見を得られる貴重な機会でした。

Da Vinci Studio とは?

Da Vinci Studio はくふうカンパニーグループのデザイン・テクノロジー組織として 2018 年 11 月に設立された会社であり、「生活を賢く楽しくする」サービスの創出を、テクノロジーとデザインの力で支援するというミッションのもと、グループ内外の開発業務をサポートしています。

全員がエンジニアまたはデザイナーという、一風変わったチーム構成なのが特徴です。

サーバーサイドとアプリの得意分野でノウハウ交換

今回の合同勉強会は、グループ内のエンジニア同士の横の繋がりを深めようというのが目的の一つでした。グループ各社、技術的な得意分野に特色があるため、こういった場で交流を図り知識を共有していくことで、より良いサービス開発に繋がるとの期待があります。

Da Vinci Studio は React, TypeScript など、サーバーサイドやフロントエンドに強いメンバーが集まっています。一方で Zaim は Swift による iOS、Kotlin を中心とした Android の開発については知見が蓄積していました。

今後、Da Vinci Studio はアプリ開発を、Zaim はフロントエンド開発を強化していく方針です。技術的に困ったときに、お互い質問をしやすくしておく土壌を醸成しておきたいと考えました。

そこで、勉強会では Da Vinci Studio 側は React と CSS について、Zaim 側は iOS と Android について、それぞれ二名ずつがこれまでの開発の現状やトレンドを発表することにしたのです。

(1)React の基本

Da Vinci Studio の @tabyasu さんから、React の基本知識や開発で意識していることの共有がありました。

Web 開発の現場では、SPA (Single Page Application)が流行っています。

Da Vinci Studio で実際に採用するアーキテクチャとしては React + Redux + Redux-Saga という構成が多いようです。SPA は構築が進むにつれ、コンポーネント間の状態管理が難しくなります。その問題の解決に役立つのが Redux です。Redux を導入することで、Flux の思想にも基づいたキレイなデータフローを作成できます。

また、合わせて TypeScript や Gatsby の実装についての紹介もありました。

(2)CSS フレームワークの選定

続いては、Da Vinci Studio デザイナーの @ryoster さんによる CSS のフレームワークの選定や、トレンドについての発表です。

事前に Zaim から「社内で使う管理画面や、ユーザーが見るサービスサイド側の画面で、それぞれ適切な CSS フレームワークは何ですか?」という質問を投げていたので、それの回答という形でまとめてもらいました。

管理画面では、エンジニアのコストが低いものがおすすめとのこと。

一方で、ユーザー側の画面については銀の弾丸はなく、会社によって適切なものを選ぶのが重要です。デザイナーが社内にいるかどうかや、デザインを CSS に落とし込めるメンバーがいるかがフレームワーク選定の鍵になります。

例として、デザイナーがいて、かつデザインを CSS に置き換えられる人もいる場合は Evergreen。

デザイナーはいるものの、デザインを CSS に置き換えられる人がいない場合は Layout framework + styled-components を組み合わせるのがオススメとのこと。レスポンシブ対応や IE 対応など手間が掛かるものは、フレームワークに任せてしまおう、というアドバイスがありました。

(3)Zaim を支えるアプリ開発環境

次に、Zaim の @watura が Zaim の iOS アプリの開発環境について発表しました。

Zaim では、より快適で安全な開発が実現できるよう、さまざまなツールを導入しています。

SwiftGen による型安全
Sourcery による手間削減
Komondor で pre-commit hook 設定 
SwiftLint/SwiftFormat でコードの静的解析
Github template による Issue/PR の整形
Bitrise + fastlane による CI/CD の実行

Zaim の CI/CD 環境については @watura の note に詳しい情報があります。

(4)Android アプリ開発の現状とトレンド

最後は、Zaim の @ishikawy による Android のトレンドについての共有です。

Android は、各端末メーカーごとなどにカスタマイズされているため、OS のバージョンアップにうまく追随できないことがあるという苦労話が中心でした。ただ、少し前から Google が対象とする API レベルをなるべく最新にするよう期限を決めるようになったので、これを機に、対応が簡易化すると嬉しいと話していました。

現状、Google は「Kotlin ファースト」を掲げており、すでに Android 開発者の 50% 以上が Kotlin を利用しています。Kotlin は GitHub で最も早く成長している言語の一つですね。Zaim も、Java から Kotlin への置き換えをどんどん進めています。

終わりに

この後は懇親会で、さまざまなメンバーと技術や開発体制についてディスカッションしました。事前にあった「お互いの会社で聞いてみたいことはないか?」というアンケートをもとに、以下のようなスライドを表示しながら各メンバーが回答していくという流れで、非常に盛り上がり楽しかったです。

今後はエンジニアだけではなくデザイナーなど他職種も含めた勉強会も検討していますので、その際にはまた、ご紹介したいと思います。



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

13

tx-TEM

Zaim スタッフの頭の中

「もっと、お金に、楽しさを!」家計簿サービスを運営する株式会社 Zaim のスタッフたちが、どんな風にサービスに向き合い働いているかを綴る note です。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。