はてなブックマーク

SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before

WheneverというOSSにPull Requestを送り、マージされた話 キッチハイクでインターンを始めて、135日。 エンジニア人生初、オープンソースにPull Request（プルリクエスト）を送りました。 GitHubにあるOSSコミュニティは「特別なコミッターたちが集う、別世界」。そう眺めていただけの私が、勇気をもって踏み出してみると、そこには文字通りの「開かれたコミュニティ」がありました。 OSSコミュニティは、手の届かない存在？ みなさんは、OSS開発についてどう思っていますか？ 「数多のすばらしいコミットのおかげで、日々開発できています！」「特別な技術がないと、関われない」…こんなイメージを抱く方、少なくないと思います。すごく、分かります。 OSS コミッターは遠い存在、というイメージ イラスト素材はぴよたそ様 そんな私がこのたび、OSS開発に貢献するというビッグイベント

はじめに こんにちは。KitchHikeエンジニアの小川です。 Webアプリケーション開発において、コードベースが大きくなってくると、よく問題になるものの一つが表示ロジックの重複ではないでしょうか。知らず知らずのうちにビューに同じようなロジックが増えて、コードの見通しが悪くなってくるのです。 KitchHikeのコードにもその兆候が見られはじめたので、対策として ViewModel パターンを取り入れています。このパターンを適用することで、表示ロジックを集約し、コードのメンテナンス性を向上させることができました。 ViewModel は、そんなに凝ったことをしているわけではないのですが、コードをすっきりさせる上ではかなり強力なパターンです。 今回はこの ViewModel について、実際の使い方を含めご紹介したいと思います。 ViewModelとは? 一言でいえばビューに関連するロジックを

こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.

Railsのコールバックが辛いって本当？実際にハマって、学んだこと チーム開発での経験は、一人で開発していた時とは全く別ものでした。Railsのコールバックは、 書いた本人ではなく他のメンバーが辛くなる ことが多いということを実体験を通して学びました。コールバックで苦しんだ経験を実際のシーンを元に書いてみました。 はじめに こんにちは。KitchHikeインターンエンジニアのタクです。 社員エンジニアの方から「Active Recordのコールバックは使い方を気をつけよう。」という趣旨のことを、入った頃から何回も言われていました。しかし、開発経験の浅い自分にはなぜ気をつけないといけないのかあまりピンときていませんでした。 たしかにインターネット上にはアンチコールバックの記事が多いのですが、どの記事を読んでも実体験がないからか、心から納得することはできませんでした。 「なぜそんなにもコールバ

Firebase Dynamic LinksをReact Nativeアプリに組み込むために調査したDeep Links（ディープリンク）の歴史を記事にしました。 はじめに こんにちは。KitchHikeインターンエンジニアのタクです。 スマートフォンでリンクをタップすると、アプリが起動してアプリ内のコンテンツへ遷移したことはありませんか？ メールやWebサイトのリンクからアプリを起動させて画面遷移させる技術を Deep Linking (ディープリンキング) といい、実現するリンクのことを Deep Links (ディープリンク)といいます。アプリの普及と共にディープリンクは広く使われるようになりましたが、実装には煩雑な手順と設定が残っており、開発者にとって悩みの種になっているかもしれません。 Firebase Dynamic Linksを導入すると、ディープリンクを実現する上でのURL

データ可視化ツール、どれがいいんだろう？ BI / データ可視化ツールは商用やOSS問わず、近年とても選択肢が増えています。どのツールも非常に魅力的で逆にどれを選ぼうか迷ってしまう方も多いのではないでしょうか。 本記事ではキッチハイクがその中からMetabaseを選択した理由を書いていきます。 はじめに こんにちは！キッチハイク インターンエンジニアの薬師寺です。 キッチハイクでは、データ可視化 / BIツールとしてMetabaseを導入しています。チーム全員が可視化されたデータにアクセスでき、同時にデータを分析できる環境を整えています。 Metabaseとは Metabaseは、OSSのデータ可視化 / BIツールのひとつです。 https://github.com/metabase/metabase フロントエンドはReact, サーバーサイドはClojureで書かれています。 Met

B-Tree・カーディナリティ・実行計画・オプティマイザ・プロファイラ データベースのインデックス・チューニングで出てくる用語は、O/Rマッパーに慣れていると聞きなれない言葉かもしれません。 本記事では用語を解説しながら、RailsとMongoidでのインデックス・チューニングの一歩として基本的な手順をご紹介します。 はじめに こんにちは。KitchHikeエンジニアの小川です。 Railsのようなフルスタックフレームワークを使っていると、データベースを気にする機会はだいぶ減るのではないでしょうか。ActiveRecordのようなO/Rマッパーが上手く抽象化してくれるおかげで、生のSQLを書く必要はほとんどなくなりました。 一方でその抽象化は、データベースを見えにくくしているともいえます。データベースを直接見る機会が減ってしまうことで、知らず知らずのうちにトラブルの原因となっていることも少

Expo の登場、Airbnb の離脱、Hermes の発表。React Native の開発の歴史を振り返ります。React Native のコミュニティについても調べてみました。React Native には本体のレポジトリだけでなく、リリースについてのレポジトリや、コミュニティの会話のためのレポジトリがあったのが意外でした。 はじめに 業務委託でキッチハイクのアプリ開発をお手伝いしている、エンジニアの有吉です。キッチハイクチームは、モバイルアプリの開発をずっとReact Native で行ってきました。アプリの開発開始から2年半ほど経ったこのタイミングで、React Native のこれまでとこれからについて思いを馳せてみます。 React Native のこれまで 公式のBlog · React Native も参考にしつつ、過去の出来事の中で印象に残ったことを挙げてみます。Rea

こんにちは、エンジニアの Miho です！Expo に関わるCTO達の座談会、 前編は React Native や Expo の仕組みについて理解を深めながら、導入のメリットや eject の必要性など、1年以上運用してきたからこそ語れる話題で盛り上がりました。 tech.kitchhike.com 後編は、オープンソースコミュニティという視点を中心に、Expo のもつ可能性をさらに深掘りしていきたいと思います！ Expo を支える組織 温度感あるOSSコミュニティ、Expo Expo のメリット・デメリット復習 コミュニティへの関わり方と、今後の展望 We’re Hiring! Expo を支える組織 藤崎 祥見（以下、S）：改めて Expo の価値や導入のメリットを振り返りたいと思います。React Native を含めて、クロスプラットフォームという特徴は間違いなく、少人数でのネイ

SSHの鍵管理は、セキュリティと利便性のトレードオフがある悩ましい問題です。AWSなど他サービスのアカウントが絡んでくるとなおさらです。今回はそんな悩みを、 AWS Systems Manager ( 旧称 SSM ) を使って、シンプルかつよりセキュアにしたお話をしたいと思います。 はじめに こんにちは。エンジニアの小川です。SSHの鍵管理はみなさんどのようにされているでしょうか？一般的には1ユーザーにつき、1つの秘密鍵 / 公開鍵のペアが常かと思います。ただ、この管理は厳密にしようとすると非常に悩ましい問題です。 キッチハイクではAWS Systems Managerが提供するSession Managerを使うことで、その悩みにひとつ道筋をつけることができました。今回はその導入によって、問題がどのように解決されたのか、導入手順も交えながらご紹介したいと思います。 注記 : AWS S

CTOの Shoken です。キッチハイクアプリはReact Nativeで開発を始めて3年目に入りました。アプリのサイズは開発を続けるうちに大きくなっていってしまいます。この記事では React Native アプリが、どのファイルでサイズが大きくなっているかの分析と、Androidでアプリのダウンロードサイズを減らした方法を紹介します。 サマリ キッチハイクアプリでは JS Bundle は 3.4 MB 、フォントは 48 MB だった。 Androidはビルド時の最適化オプションとApp Bundleにすることでサイズが 35% 減った。80.6 MB -> 66.8 MB サマリ JS Bundle のサイズを調べる react-native-bundle-visualizer を使った JS Bundle の構成を確認する Android Studio APK Analyzer

この記事はStripe Advent Calendar 2019のDay 18となります。 聞いたことはあるけれど、機会がないとあまり馴染みのないクレジットカードのオーソリ。ですが、使ってみると非常に便利なしくみです。今回はStripeでのオーソリ決済の導入について、弊社キッチハイクの事例とともにご紹介いたします。 はじめに こんにちは。エンジニアの小川です。 キッチハイクでは今年、一部の決済にオーソリを導入しました。 クレジットカードのオーソリは、端的にいえば、カードの使用者(ユーザー)の与信枠の中から、決済額を一定期間確保しておく仕組みのことを指します。このオーソリ、導入することで、カードが有効かどうかを事前チェックできたり、キャンセルで発生する手間を減らせたりと非常にメリットの大きい仕組みでもあります。 しかし、名前は聞いたことはあっても、あまり馴染みがなく、どう使えばいいのかイメー

モバイルアプリにテストを導入する前に キッチハイク エンジニアの薬師寺です。 キッチハイクではReact Nativeアプリにテストを導入するにあたり、 テストライブラリの選定と、テストでは何を意識すればいいのかということを考えてきました。 今回の記事では、モバイルアプリのテストで考慮すべき点と、テストライブラリを比較して得た情報を紹介します。 モバイルアプリにテストを導入する前に ソフトウェアのテストピラミッド モバイルアプリのテストピラミッドを築くのは難しい シミュレータと実機での環境差分 アニメーション・インタラクションなどのUI部分の差分 ネイティブ層の一部のテストが困難な箇所 テスト導入のため、テストフレームワークの比較 テストランナーとE2Eテストフレームワークの関係図 比較表 テストランナーを選ぶ jest mocha AVA E2Eテストのライブラリを選ぶ Appium D

はじめに キッチハイクのエンジニアメンバーでReact Native の気になるニュースを持ち寄ってみました！ はじめに ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASE開発チームブログ Flutter vs Native vs React-Native: Examining performance Discord のパフォーマンス改善 Flipper で React Native アプリの DX を改善しよう Flipper の主な機能の紹介 React Nativeの Re-architectureについて ロードマップ さいごに We're Hiring ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASE開発チームブログ https://devblog.t

こんにちは。デザイナーの羽野です。KitchHike では Web プロダクトのデザインとコーディングを担当しています。最近は React Native に手を出し始めました。Web の知識が活かせるのでなかなか楽しいです。 さて、デザインの際は Sketch を使っているのですが、恐らく知らない方はもういないんじゃないでしょうか。Sketch の便利さを語ろうとしたらそれだけでひとつ記事が書けてしまいますが、便利さのひとつにプラグインを活用した拡張性の高さが挙げられます。 というわけで、今回は Sketch を使うにあたってぜひとも入れておきたいプラグインを厳選して紹介したいと思います。必須系プラグインに的を絞ってあるので、Sketch 初心者の方はぜひ入れてみてくださいね。 Runner http://sketchrunner.com/ Sketch はデフォルトでも便利ですが、使って

React Nativeのオープンソースアプリから学ぶ CTOの Shoken です。キッチハイクアプリはReact Nativeで開発を始めて1年半ほど経ちます。その間、オープンソースで公開されているReact Nativeのアプリを参考に学びながら、開発を進めてきました。この記事では、詳細なコードを読む前に行っているチェックポイントと、オープンソースで公開されているReact Nativeアプリを紹介します。 React Nativeのオープンソースアプリから学ぶ ソースコードリーディング前のチェックポイント READMEの次に読むのは package.json React Native, Reactのバージョン 使用ライブラリが自分たちのものと近いか 型チェック テストツール コンポーネントカタログ ライブラリ構成の比較表 アプリのライブラリ構成の特徴 Rocket.Chat REA

今年5月にJCB対応が発表されたStripe。導入 / 移行に関心をお持ちの方も多いのではないでしょうか。 キッチハイクでは今年の夏にStripeへ決済を移行しました。今回はその移行の事例紹介と、そこで得た学びを共有したいと思います。 はじめに こんにちは。エンジニアの小川です。 キッチハイクでは今年の6月から7月にかけて以前利用していた決済サービスからStripeへと移行しました。 Stripeは今年の5月にJCB対応が発表され、注目されている方は多いのではないでしょうか。 ただ、その注目度と比較して、ネット上には導入事例のレポートがまだまだ少ないように感じます。そんな中での一助として、今回はキッチハイクでの移行の事例とそこで得た学びをご紹介させていただきたいと思います。 はじめに Stripeへの移行のきっかけ Stripeを選んだ理由 サービスへの信頼感があること 移行しやすいこと

良いアプリを作るために、良いコードを読む。 CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0からReact Nativeでアプリ開発を始めました。この記事では、React Nativeアプリ開発のベストプラクティスを見つけるためのソースコード探索手法と、コードリーディングのポイントを紹介します。 良いアプリを作るために、良いコードを読む。 React Nativeアプリのソースコードの探し方 ReactNativeNewsのShowcase, React Native Appsから探す F8 2017 PxView React Docs ( React公式ドキュメント ) から探す react-nativeリポジトリのRNTesterを読む ライブラリのサンプルアプリのコードを読む コードリーディングのポイント ディレクトリ構成 使用している

コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des

はじめに キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！ RN Features 初のリモート編集号です！ はじめに クラッシュレポートライブラリ Bugsnag React Native Bubble Select React NativeでApp StateとEvent Listenerを使う React NativeでAndroid、iOS、Webを1つのプロジェクトで共存させてみた AsyncStorageでデータを保存するならデータ量よりもアクセス回数を気にしよう React カンファレンス、 React Summitがリモート開催 Hermesがインストールサイズを120MB -> 18MBにした Expo SDK v37 が利用可能に さいごに We're Hiring クラッシュレポートライブラリ Bugsnag キャ

2022年9月追記: 2022年10月31日をもって、OracleがWerckerのサービス提供を終了するとのことです。 Important Notice: Wercker service will be shutdown on October 31st, 2022 . We recommend you to use OCI DevOps service. Thank you for using Wercker. はじめに こんにちは！KitchHikeインターンエンジニアの薬師寺です。 主にサーバーサイド、特にテストやミドルウェア周りに関わっております。 KitchHikeでは、検索にElasticsearch、CIサービスとしてWerckerを使用しています。私のミッションはWerckerでElasticsearchのテスト環境を整えることでした。 まずはWeb上でドキュメントなどを読

こんにちは。デザイナーのひのたん @featherplain です。2018年6月12日 ~ 13日の2日間に渡って開催された、GitHub Satellite Tokyo の Community セッションに登壇させていただきました。 私は人前で話すのはニガテな方です。でも、ステージの上でプレゼンをするのと、ただ話すのとでは大きな差があります。 プレゼンは準備と練習ができるので、やり方しだいでは「伝わるプレゼン」ができるようになります。過去に何回か登壇する機会があったものの、実に2年ぶりの登壇 & しかも主催が GitHub の大舞台！！ということでかなり入念に準備をして臨みました。そのおかげで登壇に向けたノウハウがかなり溜まってきたので、プレゼンに向けて、どんな準備をしたのかをご紹介したいと思います。スライドは記事の最後に掲載しているので、よかったら見てみてくださいね。 目次 準備編

こんにちは！エンジニアの Miho です。 2019/06/18 に開催された ReactNativeにゆかりのあるスタートアップが集う会に、弊社CTOである @shoken0x が登壇いたしました。記念すべき第5回は、普段よりも4倍近くの参加者が集う「半年に一度の大規模会」となりました！ 今回はCTOの登壇内容を中心に、当日の盛り上がりをお伝えしたいと思います。 はじめに ReactNativeにゆかりのあるスタートアップが集う会、とは？ その名の通り、React Native に関わっているスタートアップのエンジニアから、これから始めようかな...と思っている個人開発者も大歓迎！なイベントです。React Native でのアプリ開発が3年目を迎えたキッチハイクですが、我々開発メンバーも複数回に渡り参加させてもらっています。 【LT】Detoxの紹介 キッチハイクはモバイルアプリのテス

こんにちは。エンジニアの小川です。 キッチハイクでは定期的に社内勉強会を開催しています。 私も先日「IAMのきほん」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景、IAMの学び方を補足したいと思います。 スライドはこちらです。 speakerdeck.com 発表の背景 発表の背景にはIAMを学ぶ上での第一歩がなかなかないのでは、という課題意識がありました。 IAMはAWSにおいてセキュリティを維持するうえで非常に重要でありながら、書籍などでまとまった分量が割かれていることはあまりないように感じています。 一方でIAMのアクセスキー / シークレットキーを奪われて、不正請求されてしまったなどのケースは後を絶ちません。 なんとなく扱いに不安を覚えながらも、どうしていいかわからずそのままになってしまう・・・、そんな状況になりやすいのではないか、と個人的には思

こんにちは。KitchHikeエンジニアの小川です。 KitchHikeのアプリがつい先日リリースされました！ 私は主にサーバサイドのAPI設計・開発を担当していたのですが、今回はその中で特に気を配った、意図しないレスポンスを防ぐためのAPI設計の取り組みについてご紹介したいと思います。 なお、本エントリはFood Service Engineers Meetup #3、第6回スタートアップRails勉強会にて発表した内容を整理したものです。併せてご参照いただければと思います。 意図せぬレスポンス問題 API開発でよくぶつかる問題のひとつは、APIのレスポンスに意図しないデータ項目が含まれてしまうことです。たとえば user リソースをレスポンスとして返すケースを考えてみましょう。 Railsの場合、最もお手軽にjsonレスポンスを返すなら as_json でしょう。ここはひとつ、何も考え

はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティ React Nativeでの画像キャッシュの仕組み(iOS) React Native 0.64 と 0.63.5 JCenter のクローズによる影響 Redux・Context API・Recoil のパフォーマンス比較 Wix社のDetox運用ノウハウ リアルタイムエンゲージメントのプラットフォーム "Agora.io" Quoraの質問: 「ReactではなくFlutterを選択する理由は何ですか？」 中国生まれのReact用UIフレームワーク "Ant Design" アニメーションライブラリGSAPがすごいらしい さいごに We're Hiring React Native Japanコミュニティ 今回のブログ

2019/3/22に開催されたRails Developers Meetup 2019に「7年目を迎えたRailsアプリケーションの傾向と対策」というタイトルで小川が登壇させていただきました。今回は発表にあたって考えていたことや、スライドに盛り込めなかった補足の内容についてご紹介させていただきたいと思います。 はじめに エンジニアの小川です。去る3/22にRails Developers Meetup2019にて「7年目を迎えたRailsアプリケーションの傾向と対策」というタイトルで発表をさせていただきました。 スライドは以下となります speakerdeck.com 発表内容は、キッチハイクで数年開発をしてきた中で、試行錯誤しながら取り入れてきたRailsのレールから「ちょっと外れた」パターンについての紹介でした。 今回の記事では、上記の発表内容について考えていたことや、スライドに盛り込