こんにちは、キッチハイクのtaiseiです！ キッチハイクでは定期的に社内勉強会を開催しています。 私も先日「最初にしりたい Tailwind CSS」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と要点のまとめを補足したいと思います。 スライドはこちらです。 speakerdeck.com 発表の背景 私は数多くある CSS フレームワークの中で、なぜ今 Tailwind CSS がここまで注目を浴びているのかに興味がありました。Tailwind CSS のインプットをしっかりとするまでは、「HTML の class に直接スタイルを当てることができる CSS フレームワーク」くらいの認識でいましたが、それだけの理由でここまで人気が出るとは思いませんでした。 今回、社内で「Tailwind CSS を聞いたことはあるけれど、実際何が良いのかはあまり良く

こんにちは。エンジニアの小川です。 キッチハイクでは定期的に社内勉強会を開催しています。 先日は「ドメイン駆動設計のはなし」というタイトルで私が発表させていただきました。 speakerdeck.com 本記事では発表スライドの補足として発表の概要と個人的な考えについて記したいと思います。 発表について ドメイン駆動設計(以下DDD)とは、エリック・エヴァンス「ドメイン駆動設計」で提唱されている手法に端を発する、ドメイン(システムの対象領域)知識のソフトウェアの反映に焦点をあてた設計手法です。 本発表ではこのDDDについて以下のようにお話ししました。 ドメイン駆動設計の概要 Ruby / Railsにおけるドメイン駆動設計 それを踏まえてDDDをキッチハイクとしてどのように進められるか Railsにおけるドメイン駆動設計 Railsでのドメイン駆動設計において、よく取り沙汰されるのがRai

こんにちは、エンジニアのみほです！ キッチハイクでは定期的に社内勉強会を開催しています。 私も先日「React コンポーネントのスタイリング手法 これまでとこれから」というタイトルで発表をいたしました。 今回は発表スライドの共有とともに、発表の背景と個人的な考えを補足したいと思います。 スライドはこちらです。 speakerdeck.com 発表の背景 「デザインシステム」という言葉が浸透して久しいですが、よし、デザインシステムやるぞ！と意気込んだところで、技術選定をすんなり進めることはなかなか難しいと言えるのではないでしょうか。最近では Utility First (CSS) を掲げたライブラリも評価され、選択肢は決して少ないとはいえません。 時に様々な粒度で語られる「デザインシステム」ですが、そこに一貫している関心事は以下だと考えています。 コンポーネント指向にマッチした手段を採用した

こんにちは！デザイナの狩野です。 キッチハイクでは定期的に社内勉強会を開催しています。 先日は私が発表担当となり、「一歩ふみこむHTML&CSS」というタイトルで発表を行いました。 今回はそのときの発表スライドの共有と、発表に至った背景を記事にします。 スライドはこちらです。 speakerdeck.com 発表の背景 Web開発に興味が湧き、手始めにHTML, CSSの勉強から始めてみた、という方は多いのではないでしょうか。 私も、本格的にWebデザイナとして働き始めることを決めたとき、一番最初にお世話になったのはProgateのHTML/CSSコースでした。 ただ、一番最初に触れるケースが多いために、初心者の方でも難なく学習を進めていけるよう詳細は省いた形で学びを進めていくカリキュラムとなっている場合が多い言語であるとも思っています。 「とりあえず書ける」状態に最短距離でたどり着けてし

こんにちは！デザイナの狩野です。 今回は、キッチハイクのフロントエンドチームが取り組んだ自社サイトの PageSpeed Insights のスコアアップ施策についてご紹介します。 目次 目次 はじめに こんなひとにオススメ プロジェクトの進め方とうまくワークしたこと 1. まずは自学！そして経験者の話を聞く 2. スコアの仕組みを理解する 3. 目指すゴールと取り組むべき事項を明確にする 4. 「週一リリース、ふりかえり」 のサイクルの確立 取り組み結果 副次的に得られた効果 フロントエンドのより深い知識が身についた パフォーマンス改善の意義、本質を考えることができた もっとこうすればよかった... なこと ゴール設定時には、具体的な評価と併せてその先の実現したいイメージも考える 判断に迷ったときは有識者の力を借りる 外部に依存する改善項目を早い段階で見極める 今後に向けて まとめ 参考

こんにちは！デザイナの狩野です。 今回は、キッチハイクのフロントエンドチームが取り組んだ自社サイトの PageSpeed Insights のスコアアップ施策についてご紹介します。 目次 目次 はじめに こんなひとにオススメ プロジェクトの進め方とうまくワークしたこと 1. まずは自学！そして経験者の話を聞く 2. スコアの仕組みを理解する 3. 目指すゴールと取り組むべき事項を明確にする 4. 「週一リリース、ふりかえり」 のサイクルの確立 取り組み結果 副次的に得られた効果 フロントエンドのより深い知識が身についた パフォーマンス改善の意義、本質を考えることができた もっとこうすればよかった... なこと ゴール設定時には、具体的な評価と併せてその先の実現したいイメージも考える 判断に迷ったときは有識者の力を借りる 外部に依存する改善項目を早い段階で見極める 今後に向けて まとめ 参考

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

PureComponent さえ使えばパフォーマンスを改善できるのか? パフォーマンスを改善したいとき、 PureComponent や React.memo を使うことがあると思います。しかし、 React の仕組みを理解していないと、 PureComponent などを使うだけでは不要な再レンダリングを制御できないことがあります。コードを読んで仕組みを正しく理解する大切さを改めて実感したので、知見を共有できればと思います。 はじめに こんにちは。 KitchHike エンジニアのタクです。 先日アプリの不具合調査で、不必要に再レンダリングが行われている箇所を発見しました。パフォーマンスへの懸念もあるため、不具合修正と一緒に再レンダリングを減らすような対応もすることにし、通常の Class コンポーネントから PureComponent へリファクタリングを行いました。その過程で Rea

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

キッチハイクでは先ごろ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 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

はじめに 最近、React Native Meets SwiftUI - Better Programming - Medium という記事が目に止まりました。今回はこの記事について調べてみました。React Native でSwitfUI のコンポーネントを利用する話です。 このトピックについて調べることにしたのは、純粋に技術的な興味からです。プロダクト開発的には、コストをかけてまでReact Native アプリからSwiftUI を使いたい場面は今の時点ではほぼ無いでしょう。ただし技術者としては、連携の仕組みを知っておくと他で何かの役に立つことがあるかもしれません。 今回調べてみて分かったのは、React Naive からSwiftUI を利用する方法は、一部はReact Native やSwiftUI のドキュメントに記載されている要素によって実現され、残りは独自の実装によって実現

はじめに キッチハイクのエンジニアメンバーで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

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

はじめに キッチハイクエンジニアのタクです。先日react-native-appsflyerというリポジトリに不具合修正をコミットし、初めてマージされました。 キッチハイクの開発チームでは、普段利用しているOSSに対して、不具合を見つけたら可能な限りフィードバックやプルリクエストを送るように心がけています。メンバーの中には、OSSとして自分で作ったアイコンフォントを公開し、それがきっかけでGitHub Satelliteに登壇したデザイナーもいます。 今回は、開発チームのうち3名に焦点を当てて、エピソードを紹介しようと思います。 1: たとえ自分本位の修正でも、誰かの役に立てる まずは私自身の経験から紹介します。私はキッチハイクでアプリ開発を担当しています。他メンバーが業務の合間にOSSへフィードバックやプルリクエストを送っている中、私だけコミット経験がありませんでした。当時は開発元にフィ

地図アプリで目的地までの経路を検索したり、場所を活用したゲームや SNS など、位置情報を利用したアプリは生活の中で当たり前になりました。 本記事では、React Native で位置情報を取得 / 追跡してアプリに地図表示する方法を、サンプルアプリを作りつつ紹介したいと思います。 ※今回 React Native 公式の Geolocation を用いるので、 Expo についての内容は含みません🙏 イントロダクション Ract Native 位置情報に必要な概念 Geolocation Location (Expoを使用する場合) Geolocation とは React Native の Geolocation は、Webアプリケーションで位置情報を取得する際に利用される Geolocation Web のアプリ拡張 API です。 Geolocation Web APIは、W3C

この記事はReact Native Advent Calendar 2019の18日目の記事です。 はじめに こんにちは、React Nativeでアプリ開発をしている @tamago3keran です。 私が所属する会社で開発しているアプリに、Lottieというライブラリを使って、アニメーションを実装していたりします。 Lottieの良さを紹介したり、導入方法を紹介する記事はよく見かけるので、今回はLottieを使ってアニメーションを実装したときに苦労したことを書こうと思います！ 想定読者 Lottieの仕組みがわかっている人（ Lottieについて知りたい方はこちらをご参考ください ） React NativeアプリにLottieを使ってアニメーションを実装しようとしている人 React NativeアプリにLottieを使ってアニメーションを実装する際の注意点を知りたい人 Lotti

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

デザインからReact Native, React のコードを生成するツール「BuilderX」を使ってみたUIDesignsketchReactreactnative この記事は React Native Advent Calendar 2019の4日目の記事です。 はじめに こんにちは、React Native でアプリ開発をしている@ariiyu です。 最近、React Native 向けのデザインツールに BuilderX というものがあると知りました。 UIデザインの作業をするだけでReact コンポーネントのコードも出来上がるツールということで、上手く使うことができればフロントエンドのデザインや実装が捗りそうです。 BuilderX についての情報はまだあまり見当たらないので、今回調べて少し使ってみました。 BuilderX とは https://builderx.io Bu

=== 2020/12/01 追記 === 続きを 実践 React Native 運用チェックシート に書きました。 === 追記終わり === この記事はReact Native Advent Calendar 2019の1日目の記事です。 キッチハイクのアプリはReact Nativeで開発を始め、3年ほど経ちました。初期リリース時には自動テストもなく、Firebaseライブラリも限定的に使うだけでした。プロダクションにリリースし、ノウハウが溜まってきて、いまReact Nativeで開発するならここを抑えておくぞ、というポイントをまとめたいと思います。 この記事では、これからReact Native でアプリ開発を始める方をメインの対象としていますが、すでに開発中の方にもメリットがあればと思います。キッチハイクアプリも最初から全てを入れていた訳ではなく、まだまだ導入したいライブラリ