React Native のこれまでとこれから 2019年11月編 - KitchHike Tech Blog
Expo の登場、Airbnb の離脱、Hermes の発表。React Native の開発の歴史を振り返ります。React Native のコミュニティについても調べてみました。React Native には本体のレポジトリだけでなく、リリースについてのレポジトリや、コミュニティの会話のためのレポジトリがあったのが意外でした。 はじめに 業務委託でキッチハイクのアプリ開発をお手伝いしている、エンジニアの有吉です。キッチハイクチームは、モバイルアプリの開発をずっとReact Native で行ってきました。アプリの開発開始から2年半ほど経ったこのタイミングで、React Native のこれまでとこれからについて思いを馳せてみます。 React Native のこれまで 公式のBlog · React Native も参考にしつつ、過去の出来事の中で印象に残ったことを挙げてみます。Rea
React Native + Expoで1年以上運用したCTOが集まってみた 後編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！Expo に関わるCTO達の座談会、 前編は React Native や Expo の仕組みについて理解を深めながら、導入のメリットや eject の必要性など、1年以上運用してきたからこそ語れる話題で盛り上がりました。 tech.kitchhike.com 後編は、オープンソースコミュニティという視点を中心に、Expo のもつ可能性をさらに深掘りしていきたいと思います！ Expo を支える組織 温度感あるOSSコミュニティ、Expo Expo のメリット・デメリット復習 コミュニティへの関わり方と、今後の展望 We’re Hiring! Expo を支える組織 藤崎 祥見（以下、S）：改めて Expo の価値や導入のメリットを振り返りたいと思います。React Native を含めて、クロスプラットフォームという特徴は間違いなく、少人数でのネイ
AWS Systems Manager ( SSM ) でサーバーへのアクセスをより効率的に管理しよう - KitchHike Tech Blog
SSHの鍵管理は、セキュリティと利便性のトレードオフがある悩ましい問題です。AWSなど他サービスのアカウントが絡んでくるとなおさらです。今回はそんな悩みを、 AWS Systems Manager ( 旧称 SSM ) を使って、シンプルかつよりセキュアにしたお話をしたいと思います。 はじめに こんにちは。エンジニアの小川です。SSHの鍵管理はみなさんどのようにされているでしょうか？一般的には1ユーザーにつき、1つの秘密鍵 / 公開鍵のペアが常かと思います。ただ、この管理は厳密にしようとすると非常に悩ましい問題です。 キッチハイクではAWS Systems Managerが提供するSession Managerを使うことで、その悩みにひとつ道筋をつけることができました。今回はその導入によって、問題がどのように解決されたのか、導入手順も交えながらご紹介したいと思います。 注記 : AWS S
React Nativeアプリのサイズを35%減らした話 Android編 - KitchHike Tech Blog
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ではじめるオーソリ導入ガイド - KitchHike Tech Blog
この記事はStripe Advent Calendar 2019のDay 18となります。 聞いたことはあるけれど、機会がないとあまり馴染みのないクレジットカードのオーソリ。ですが、使ってみると非常に便利なしくみです。今回はStripeでのオーソリ決済の導入について、弊社キッチハイクの事例とともにご紹介いたします。 はじめに こんにちは。エンジニアの小川です。 キッチハイクでは今年、一部の決済にオーソリを導入しました。 クレジットカードのオーソリは、端的にいえば、カードの使用者(ユーザー)の与信枠の中から、決済額を一定期間確保しておく仕組みのことを指します。このオーソリ、導入することで、カードが有効かどうかを事前チェックできたり、キャンセルで発生する手間を減らせたりと非常にメリットの大きい仕組みでもあります。 しかし、名前は聞いたことはあっても、あまり馴染みがなく、どう使えばいいのかイメー
RN Features 2020年3月号 - React Native v0.62 注目機能Flipper, Re-architecture, Discord のパフォーマンス改善 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで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
RN Features 2020年4月号 - React Native で使えるクラッシュレポート, React Summit リモート開催, Expo SDK v37 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで 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 キャ
カードゲーム「HOPPIN' GARAGE」一部商品のカード不良と交換対応に関して カードゲーム「HOPPIN' GARAGE」をご支援いただいたパトロンの皆様 平素よりサッポロビールの商品をご愛飲賜り誠にありがとうございます。 また、このたびは、カードゲーム「HOPPIN' GARAGE」をクラウドファンディングサイト「CAMPFIRE」にてご支援いただき、心より御礼申し上げます。 現在一部のパトロンの方より、リターン品のカード枚数不足等の商品不良のご連絡をいただいております。 商品不良があった場合は、良品との交換対応を行いますので、「CAMPFIRE」のメッセージよりその旨をご連絡いただけますと幸いです。 一部のパトロンの皆様にはご迷惑をおかけしてしまい、心からお詫び申し上げます。 今後ともサッポロビールおよびHOPPIN' GARAGEの変わらぬご愛顧のほど、何卒よろしくお願い申し上
=== 2020/12/01 追記 === 続きを 実践 React Native 運用チェックシート に書きました。 === 追記終わり === この記事はReact Native Advent Calendar 2019の1日目の記事です。 キッチハイクのアプリはReact Nativeで開発を始め、3年ほど経ちました。初期リリース時には自動テストもなく、Firebaseライブラリも限定的に使うだけでした。プロダクションにリリースし、ノウハウが溜まってきて、いまReact Nativeで開発するならここを抑えておくぞ、というポイントをまとめたいと思います。 この記事では、これからReact Native でアプリ開発を始める方をメインの対象としていますが、すでに開発中の方にもメリットがあればと思います。キッチハイクアプリも最初から全てを入れていた訳ではなく、まだまだ導入したいライブラリ
こんにちは。エンジニアの小川です。 キッチハイクでは定期的に社内勉強会を開催しています。 私も先日「IAMのきほん」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景、IAMの学び方を補足したいと思います。 スライドはこちらです。 speakerdeck.com 発表の背景 発表の背景にはIAMを学ぶ上での第一歩がなかなかないのでは、という課題意識がありました。 IAMはAWSにおいてセキュリティを維持するうえで非常に重要でありながら、書籍などでまとまった分量が割かれていることはあまりないように感じています。 一方でIAMのアクセスキー / シークレットキーを奪われて、不正請求されてしまったなどのケースは後を絶ちません。 なんとなく扱いに不安を覚えながらも、どうしていいかわからずそのままになってしまう・・・、そんな状況になりやすいのではないか、と個人的には思
アプリをストアに公開後、半年に1回のペースでアップグレードを行ってきました。短いものだと1週間、長くて約2ヶ月かかってます。 0.46.2 -> 0.50.4 の思い出 初めてのアップグレードだったのでとにかく大変だった印象です。11月から着手して、クリスマスがすぎ、大晦日がすぎ、正月がすぎてもなかなかエラーが解消せず、先が見えない不安がありました。今でも覚えているのが、AIRMap(いまはreact-native-maps)とfbsdkです。AIRMapはAirbnbが開発していたライブラリでその名の通り地図表示なのですが、ネイティブ層のビルドエラーで苦しんだ記憶があります。かなりObjective-Cのソースコードを読みました。のちのAirbnbのReact Nativeやめる宣言により、ライブラリ開発がどうなるか心配だったのですが無事にReact Native Communityに移
RN Features 2021年2月号 - React Native iOSでの画像キャッシュの仕組み, JCenterのクローズ問題, Redux / Context API / Recoilのパフォーマンス比較 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで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コミュニティ 今回のブログ
託児室？名札にTwitterアイコン？アンチハラスメントポリシー？TokyoGirls.rb Meetup vol.2の工夫ポイントあれこれ #tokyogirlsrb - give IT a try
はじめに 去る2019年12月21日にTokyoGirls.rb Meetup vol.2を開催しました。 おかげさまでたくさんの方に参加していただき、イベントとしては大成功だったと思います😆 TokyoGirls.rb Meetupは基本的に「ふつうのRuby勉強会」なのですが、イベントを成功させるために運営としてあれこれ工夫を凝らした部分もあります。 そこで、このエントリではTokyoGirls.rb Meetup vol.2の運営上の工夫等をお伝えしていきます。 ありがたいことに、当日の会場はほぼ満席でした！ techplay.jp 【もくじ】 はじめに TokyoGirls.rb Meetupって何？ 今回の会場は株式会社SmartHRさま！ 会場の椅子を前後互い違いに並べてみました 託児室はイベント会場に併設されたキッズルームを使用させてもらいました 奥さんも大助かり？パパエン
(本記事はReact Native Advent Calendar 2020の7日目の記事です) 国内のReact Nativeで作られてるアプリをピックアップしました。 個人的に見聞きした+会社ウェブサイトなどで調査したもので、網羅されている訳ではないのでご了承下さい。 随時更新していきたいので、「これもReact Native製だよ！」とか、情報の誤りがあればコメントいただけると嬉しいです！ ※ 以下50音順 アングラーズ 釣果の記録アプリ。 ホーム画面はタイムライン形式になっており、好きな釣りスポットや釣り人(ユーザー)をフォローしておくと釣果情報が随時流れてきます。 アプリ版とWeb版がありますが、釣果の投稿はアプリから行います。 釣果投稿時は魚の写真だけでなく、サイズ、ルアー、タックルなど釣り人が気になりそうな情報を付加できます。 タイムライン、画像投稿などSNSの基本的な機能が
開発チームメンバーの全員が OSS 経験者。それぞれの向き合い方と得られた学び - KitchHike Tech Blog
はじめに キッチハイクエンジニアのタクです。先日react-native-appsflyerというリポジトリに不具合修正をコミットし、初めてマージされました。 キッチハイクの開発チームでは、普段利用しているOSSに対して、不具合を見つけたら可能な限りフィードバックやプルリクエストを送るように心がけています。メンバーの中には、OSSとして自分で作ったアイコンフォントを公開し、それがきっかけでGitHub Satelliteに登壇したデザイナーもいます。 今回は、開発チームのうち3名に焦点を当てて、エピソードを紹介しようと思います。 1: たとえ自分本位の修正でも、誰かの役に立てる まずは私自身の経験から紹介します。私はキッチハイクでアプリ開発を担当しています。他メンバーが業務の合間にOSSへフィードバックやプルリクエストを送っている中、私だけコミット経験がありませんでした。当時は開発元にフィ
RN Features 2020年6月号 - サンプル動画付きReact Native Gallery, State管理ライブラリRecoil, react-native-reanimeted - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！書籍 React Native が発売されましたね！ 自分はReact Native Meetup #10に参加して応募したところなんと当選しました！いま読んでいるので、来月のRN Featuresで取り上げたいですね〜。 はじめに React Native Meetup #10 React Native ライブラリのサンプル動画付きギャラリー アニメーション付きで Dark mode に変わるスケルトンアプリ react-native-reanimate v2-alphaでAndroidアニメーション遅い問題が解決？ Facebook製の新しいState管理ライブラリ「Recoil」 60FPS で動くスクロールボトムシートのライブラリ WinUI 3 と RNW (React
ドメインモデリングをやってみよう。社内勉強会で「ドメイン駆動設計」について発表しました - KitchHike Tech Blog
こんにちは。エンジニアの小川です。 キッチハイクでは定期的に社内勉強会を開催しています。 先日は「ドメイン駆動設計のはなし」というタイトルで私が発表させていただきました。 speakerdeck.com 本記事では発表スライドの補足として発表の概要と個人的な考えについて記したいと思います。 発表について ドメイン駆動設計(以下DDD)とは、エリック・エヴァンス「ドメイン駆動設計」で提唱されている手法に端を発する、ドメイン(システムの対象領域)知識のソフトウェアの反映に焦点をあてた設計手法です。 本発表ではこのDDDについて以下のようにお話ししました。 ドメイン駆動設計の概要 Ruby / Railsにおけるドメイン駆動設計 それを踏まえてDDDをキッチハイクとしてどのように進められるか Railsにおけるドメイン駆動設計 Railsでのドメイン駆動設計において、よく取り沙汰されるのがRai
RN Features 2021年9月号 - iOS 15, Android 12 に向けた準備, React Native バージョン 0.65.1 リリース, React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの1ヶ月 iOS 15, Android 12 に向けた準備 iOS 15 QuickType Bar Transparent Navigation Bar シミュレーター Android 12 Overscroll Effect Permission Updates React Nativeがマネージャー採用 React Nativeバージョンアップ情報 react-native 0.65.1 リリース react-native 0.66.0 の予習 React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック 定額制プログラミング教室テックジム「スマホアプリコース」を新設 React N
結局、どれがベストプラクティス？社内勉強会で「React コンポーネントのスタイリング手法」について発表しました - KitchHike Tech Blog
こんにちは、エンジニアのみほです！ キッチハイクでは定期的に社内勉強会を開催しています。 私も先日「React コンポーネントのスタイリング手法 これまでとこれから」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と個人的な考えを補足したいと思います。 スライドはこちらです。 speakerdeck.com 発表の背景 「デザインシステム」という言葉が浸透して久しいですが、よし、デザインシステムやるぞ！と意気込んだところで、技術選定をすんなり進めることはなかなか難しいと言えるのではないでしょうか。最近では Utility First (CSS) を掲げたライブラリも評価され、選択肢は決して少ないとはいえません。 時に様々な粒度で語られる「デザインシステム」ですが、そこに一貫している関心事は以下だと考えています。 コンポーネント指向にマッチした手段を採用した
PageSpeed 赤点から80点へ押し上げた道のりを Web Vitals 勉強法と取り組み方から振り返る - KitchHike Tech Blog
こんにちは！デザイナの狩野です。 今回は、キッチハイクのフロントエンドチームが取り組んだ自社サイトの PageSpeed Insights のスコアアップ施策についてご紹介します。 目次 目次 はじめに こんなひとにオススメ プロジェクトの進め方とうまくワークしたこと 1. まずは自学！そして経験者の話を聞く 2. スコアの仕組みを理解する 3. 目指すゴールと取り組むべき事項を明確にする 4. 「週一リリース、ふりかえり」 のサイクルの確立 取り組み結果 副次的に得られた効果 フロントエンドのより深い知識が身についた パフォーマンス改善の意義、本質を考えることができた もっとこうすればよかった... なこと ゴール設定時には、具体的な評価と併せてその先の実現したいイメージも考える 判断に迷ったときは有識者の力を借りる 外部に依存する改善項目を早い段階で見極める 今後に向けて まとめ 参考
RN Features 2021年4月号 - React Native製のプリンター制御SDK, Recoil 0.2.0 リリース, Sentryでパフォーマンス計測 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの近況 React Nativeアプリ 7つのベストプラクティス Sentryでパフォーマンス計測ができるようになった Recoil 0.2.0 Release Reactのベストプラクティスの提案をまとめた記事、Tao of React スター精密(株)がプリンター制御用SDKをRN向けに提供開始 今月の React Native ライブラリ紹介 React Native Hold Menu react-native-paper React Native Snap Carousel さいごに We're Hiring React Native Japanコミュニティの近況 次回 Meetup #12 は5/21(金)開催
先取りでAmazon Pay 新バージョン(v2)、 Amazon Pay CV2をサービスに組み込んだ話 - KitchHike Tech Blog
キッチハイクでは先ごろAmazon Pay 新バージョン(v2)であるAmazon Pay Checkout V2(以下Amazon Pay CV2)をいち早くサービスの一部決済に導入しました。今回はAmazon Pay CV2の概要と、導入にあたっての考慮ポイントについてご紹介します。 はじめに こんにちは。KitchHikeエンジニアの小川です。 キッチハイクでは先ごろAmazon Pay CV2をサービスの一部決済に導入しました。 Amazon Payは知っているけど、CV2？何それ？と思われたかもしれません。 Amazon Pay CV2はAmazon Payの新バージョン(v2)です。2020年11月現在、まだプレビュー版のステータスとなっています。検索でもあまり出てこないですし、まだまだ認知度としては低いと思われます。実際私自身も現行バージョンのAmazon Payを調査してい
コードを読んでやっと理解できた React の shouldComponentUpdate - KitchHike Tech Blog
PureComponent さえ使えばパフォーマンスを改善できるのか? パフォーマンスを改善したいとき、 PureComponent や React.memo を使うことがあると思います。しかし、 React の仕組みを理解していないと、 PureComponent などを使うだけでは不要な再レンダリングを制御できないことがあります。コードを読んで仕組みを正しく理解する大切さを改めて実感したので、知見を共有できればと思います。 はじめに こんにちは。 KitchHike エンジニアのタクです。 先日アプリの不具合調査で、不必要に再レンダリングが行われている箇所を発見しました。パフォーマンスへの懸念もあるため、不具合修正と一緒に再レンダリングを減らすような対応もすることにし、通常の Class コンポーネントから PureComponent へリファクタリングを行いました。その過程で Rea
RN Features 2021年3月号 - React Native 0.64 リリース, JSIを使った高速化の例, React Native コンポーネントライブラリの紹介 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの活動サマリー React Native 0.64 リリース Hermes opt-in on iOS Inline Requires enabled by default Hermes with Proxy Support React Nativeで機密性の高いユーザーデータを保存するためのアプローチ サンプルコード ユーザーデータを安全に保存するためのハイブリッドアプローチ 概要図 類似ライブラリについて OSSなReact Native アプリ Pix Stack JSIを使った高速化の例 高速な key-valueストレージ react-native-mmkv React Nativeアプリを50倍速く改善した方法
RN Features 2021年5月号 - React Native アプリのクリーンビルドコマンド, iOSでのHermesパフォーマンス, 決済サービス Stripe の React Native SDK - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの近況 React Native アプリのクリーンビルドコマンド React Native プロジェクトのクリーンアップを行うライブラリ iOSでのHermesパフォーマンス 決済サービス Stripe の React Native SDK stripe-react-native React Native でグラデーションを再現する キッチハイクのアプリ開発最前線 さいごに We're Hiring React Native Japanコミュニティの近況 React Native Meetup #12 LT大会！ が今週5/21(金)開催です。参加者100人以上！ stand.fm での放送 4/20 #14 BeatFit
RN Features 2020年5月号 - React Native v0.63の新機能、Shopifyの技術選定、 RNに対応したライブストリーミングSDK - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！ はじめに React Summit Remote Edition まとめ(前編) React.memoについて調べてみた React のパフォーマンスチューニングの基本戦略 PureComponentの登場 Function Componentの課題を解決する React.memo Hooks以降のチューニング React Native Apps がリニューアル あなたが知るべき4つのJavaScript デザインパターン RNに対応したライブストリーミングSDK bambuser Shopifyの技術選定 Shopifyの技術投資哲学 RN採用のねらい(ShopifyでのRN採用の狙いは一般的であり、特別変わった理由はない) RNを辞めたAirbnb、RNを採択したShopi
RN Features 2021年8月号 - React Native 0.65 のアナウンス、React Native EU 2021、Apple が iOSアプリ外での決済方法を提供 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの1ヶ月 React Native 公式ブログより8月3つの記事が公開 8/17 React Native 0.65 のアナウンス 8/19 React Native の2021年下半期 8/26 React Native's Many Platform Vision React Navigation v6.0 リリース Ｆ＆ＰジャパンがReact Nativeアプリをリリース レンダーがビジュアルでわかる記事 開発用アプリ、プロダクションアプリで異なる環境変数を管理 Recoil 0.4 release Configurable selector caches Transactions with multiple atom
RN Features 2021年12月号 - React Native アドベントカレンダー 2021, ニュースレター React Native Now, React Native で Liquid Swipe を実装するための4つの技術 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native アドベントカレンダー 2021 M1 Mac + Xcode 12.5.1でReact Native 0.65 アプリのビルド時に出たエラーと対応 React Native で Liquid Swipe を実装するための4つの技術 React Navigation (V6)の設計方針に関するTips ニュースレター React Native Now React Native Advent Calendar 2021 に記事を投稿しました React Native で Liquid Swipe を実装するための4つの技術 JavaScript製フルスタックフレームワーク Redwood.js SVGRを使ってsvgファイルをReactコンポーネント
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サッポロビールがビールを学ぶカードゲーム「HOPPIN' GARAGE」開発中！
実践 React Native 設計チェックシート - Qiita
社内勉強会でIAMの基本について話しました - KitchHike Tech Blog
実践 React Native 運用チェックシート - Qiita
国内のReact Nativeで作られてるアプリをピックアップ - Qiita