Claude Code時代のアプリ開発手法
Claude Codeによる開発体験の変化 みなさんClaude Code使っていますか？ Clineやそのフォーク、Cursorなどが群雄割拠していたところからここ1ヶ月くらいで急激に話題の中心に躍り出たClaude Codeですが、便利なツールという評価を超えて、これまでの開発フローを一新しうる可能性を持ったツールだと思います。 特に、与えられたタスクを分解して様々なツールを使いながら順に機能を実装していく様子は経験を積んだエンジニアのやり方そのものです。 CLIベースのツールであることの利点として動かすコンピューターを選ばないので、公式のGitHub Actions連携をすれば手元に開発環境がなくてもIssueやPull Requestのチャットで会話をしながら開発を進めることまでできてしまいます。 Claude Codeとアプリ開発の相性 そうはいっても、Claude Codeをう
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
Five years of React Native at Shopify (2025) - Shopify
Five years ago, we announced that React Native (RN) is the future of mobile at Shopify. Today, we are excited to share the progress we've made, lessons learned, and what the future holds. To recap, we decided to switch to RN for 3 main reasons: Write it once - Stop building the same features twice, once on iOS and once on Android Talent portability - Enable devs to work fluently across iOS, Androi
Expoに関する詳しい内容は2日目の記事で紹介します。 仕組み React NativeはReactのコンポーネントをネイティブのプラットフォームコンポーネントにブリッジします。例えば以下のようなReactコードは import { View, Text } from 'react-native'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { f
今、React Nativeがアツいらしい
なんだか最近React Nativeに関する投稿が増えている気がしますね。 筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。 React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半： React Nativeがいかに盛り上がってい
Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを？」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で
Appium初心者が、ReactNativeアプリを自動テストする試みの一部始終(随時更新) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事の目的 弊社 (リプレックス株式会社) の関わっているプロダクトで、ReactNativeを使って作ったアプリがあるのですが、保守工数の削減のためにE2Eテストの自動化にチャレンジしてみることにしました。その際の技術選定の経緯なども含め、メモとして残すために書いています。 単なる殴り書きではなく、これからスマホアプリのE2Eテストの自動化を始めたい方が読む時に参考になる資料としても使えるように心がけて書いていこうとおもいます。 E2Eテストとは E2Eテストとは、 end to end test (エンドツーエンドテスト) の略で
Home | NativeWind
Overview What is NativeWind? Do you like using Tailwind CSS to style your apps? This helps you do that in React Native. NativeWind is not a component library, it's a styling library. If you're looking for component libraries that support NativeWind, see Component Libraries. NativeWind makes sure you're using the best styling engine for any given platform (e.g. CSS StyleSheet on web and StyleSheet
Flutter vs. React Native in 2024 — Detailed Analysis Flutter and React Native are two leading tools for cross platform app development that cut development time for iOS and Android devices. Learn about their differences and the best use cases for each. What Is Flutter?Flutter is an open-source user interface (UI) software development kit released by Google in 2018. Flutter lets you build cross-pla
React & React Native Components & Patternscopy-paste components & patterns crafted with Tailwind CSS (NativeWind) May 15, 2023The Power of Positive ThinkingDiscover how the power of positive thinking can transform your life, boost your confidence, and help you overcome challenges. Explore practical tips and techniques to cultivate a positive mindset for greater happiness and success.
はじめに 今回の記事では、モバイルアプリ開発として有名なフレームワークである「Flutter」と「React Native」両方の特徴、決定的な違いを徹底解説する。 2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。 両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。 本記事の対象読者 モバイルアプリ開発で生計を立てているプログラマー Flutter、React Native両者の特徴を知りたい人 モバイルアプリ開発案件を検討中で技術選定をされている人 本記事のタイトルが気
With the release of 0.71, React Native is investing in the TypeScript experience with the following changes: New app template is TypeScript by default TypeScript declarations shipped with React Native React Native documentation is TypeScript First In this post we’ll cover what these changes mean for you as a TypeScript or Flow user. New App Template is TypeScript By Default Starting with 0.71, wh
はじめに はじめまして、株式会社ハローで業務委託として開発をしている@0906kokiです。 今回の記事では、React Nativeで開発されているAutoReserve for Restaurantsで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するAutoReserve for Restaurantsは、React Nativeで開発されております。 今回、AutoReserve for RestaurantsにE2Eを導入した目的に関しては、以下のような点が挙げられます。 手動テストの場合、テストをスキップ or 見逃していたケースがあったので、毎回網羅的にテストできるようにし、QAの質を上げたい 頻繁に本番デプロイできるようにする コミットごとにテストできるようにすることで、QAを待たず事前
We are excited to release a new version of React Native, 0.70.0. This version comes with several improvements like a new unified configuration for Codegen, Hermes as default engine, and full CMake support for Android builds along with a refresh of the documentation for the New Architecture. Read on to learn more! Sections New Architecture’s New Documentation Hermes as default engine A new unified
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
Fast & Performant React Native List No more blank cells Swap from FlatList in seconds. Get instant performance. Similar props. Instant performance. Even with the similar props as the React Native FlatList, FlashList recycles components under the hood to maximize performance. <FlashList renderItem={({ item }) => { return <TweetCell item={item} />; }} estimatedItemSize={50} data={tweets} />;
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店向け予約グルメアプリで、現在はiOS / Android / ウェブにサービスを展開しています。 元々はReact Native製のネイティブアプリのみ展開していましたが、ユーザ獲得の面でウェブ版が必要となったため、 追加でウェブ版を実装し、現在の3プラットフォームでの展開に至ります。 最初の技術選定 ウェブ版の最初のバージョンでは、フレームワークとしてNext.jsを採用しました。Reactで書け、SEOのた
Amazon Kindle UI is switching from Java to React Native - Good e-Reader
Amazon has been employing Java for their entire UI for the Kindle since they started making them in 2007. In the past year, the company has been dramatically changing the home screen and user interface. Many people are upset about the changes, since it effects their reading flow. Do you know the real reason why they have constantly been changing all aspects of the Kindle? This is because they are
Expo の仕組みと使い方をメモしていく記事
これは iOS アプリを開発しながら Expo について調べたことを自分用にまとめておく記事です。 Expo とは Expo はクロスプラットフォーム（iOS/Android/Web）で React Native アプリを開発するための便利機能を集めたプラットフォーム。 素の React Native プロジェクトと比較して若干の制約があるが、 Expo SDK が提供する様々な機能を使えたり開発環境の整備が簡単というメリットがある。Expo は Expo SDK, Expo CLI, Expo Go, EAS と呼ばれる4種類のツールで構成されている。 Expo SDK Expo でアプリを作るために必要なあれこれを集めたパッケージ。 開発に使われているリポジトリは主に以下のディレクトリで構成されている。 packages: Expo の API を提供するためのソースコード（ネイティブ
The React Native team has announced that the new architecture will be rolled out in 2022. Checkout their full blog here. “2022 is going to be the year of the New Architecture in open source” Since the release is just around the corner, this is a good time to understand what changes are taking place under the hood and how they might affect your React Native App. This article aims to cover the most
Expoでの開発からejectした場合にNotificationsを使用できないことを考慮し、素のReactNativeプロジェクト（といっても、Expo Bare Workflow）で、FCM（Firebase Cloud Messaging）を使ってPush通知を送る手順を確認しました。 事前準備および前提条件 ReactNativeプロジェクト この記事ではExpoプロジェクトを作成後、app.jsonのexpo.ios.bundleIdentifierおよびexpo.android.packageを最低限入力した後にexpo ejectしBare Workflowを選択した状態のプロジェクトを前提としています。 もちろんExpoを通さず作成したReactNativeプロジェクトでも問題はないと思いますが確認していません。 また、FCMの導入に関連しないビルドエラーの解決方法等は記載
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コンポーネント
GitHub - Shopify/react-native-skia: High-performance React Native Graphics using Skia
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tamagui
Core A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 24Kb. Static A smart optimizer that makes your app fast with partial analysis, extracts CSS, flattens your tree, and removes code. Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other.
2025React Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template2024New Architecture is hereReact Native 0.76 - New Architecture by default, React Native DevTools, and moreReact Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, a
NINNO Tech Fest #2でしゃべったLTです https://ninno-tech-fest.connpass.com/event/226029/
Faster, faster!人々がアプリを十分に楽しんで使うためには、アプリからできる限り摩擦を取り除くことが重要です。 React Nativeは、JavaScriptとReactを使って、マルチプラットフォームのモバイルアプリを素早く構築できるフレームワークです。そのおかげで、私はInkdropというアプリのモバイル版を作ることができました。エンドツーエンドの暗号化でデバイス間で同期するMarkdownノートアプリです。このアーキテクチャのおかげで、私はこのアプリを素早く構築することができ、ElectronJSで構築したデスクトップ版のコードベースの多くを再利用することで簡単に維持することができました。これは素晴らしいことです。React Nativeには大いに助けられましたが、特に画像を扱う際のパフォーマンスの低さには苦労しました。最悪の場合、7MBの画像をダウンロード、復号化、そ
React Native と事業速度について React Native Matsuri で喋りました | DevelopersIO
10/02 に開催された React Native Matsuri で登壇してきました。当日のセッションは動画で公開されています。私は 1:49:41 から喋っています。 喋ったときの資料を主張をまとめるために調査した内容とともに公開しています。 当日は 30 分だったので、主張のみを伝えるので精一杯でした。この記事では削ぎ落とした内容も含めて、資料を振り返ってみます。 なぜ英語の資料にしたのか React Native Matsuri は React Native をテーマとした、はじめての日本初の大規模カンファレンスです。日本で開催されているカンファレンスならば資料も日本語で書くべきだと思ったのですが、日本の React Native コミュニティがどういったことを考えているのか発信するセッションがひとつくらいあってもいいだろう、ということで英語で書きました。 メタ分析の対象企業 メタ
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
React Native Matsuri 2021 で登壇した資料です https://reactnative-matsuri.com/ja
Enter description here
React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
Hyperledger Fabricの成長、成熟を振り返る / Looking back history of Hyperledger Fabric
2024React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and moreUse a framework to build React Native appsReact Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Suppo
概要 react-native-firebaseを組み込んだアプリでプッシュ通知を行う際の作業メモ。 具体的なソース実装よりは、権限設定などの事務的な内容多め。 前提として、react-native-firebaseと関連モジュール(/coreとか/messagingとか)はインストール済み(+pod installやAppDelegate.mの追記)で、GoogleService-Info.plistやgoogle-service.jsonはネイティブディレクトリに組み込み済みとする。 ※要するにreact-native-firebaseのイントロダクションは終わっている前提 【iOS】Apple Developersでやること 【Certificates, Identifiers & Profiles】から【Identifiers】のメニューを選択し、対象のアプリのIdentifier
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
Preparing Your App for iOS 15 and Android 12 · React Native
2024React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and moreUse a framework to build React Native appsReact Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Suppo
2025React Native 0.78 - React 19 and moreReact Native Core Contributor Summit 2024 RecapReact Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template2024New Architecture is hereReact Native 0.76 - New Architecture by default, React Native DevTools, and moreReact Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, a
React Nativeで作ったスマホアプリにAdmob（広告）とRevenue Cat（課金）を使ってマネタイズする
【2025年3月15日改訂】React Nativeを使ってアプリを作った際、マネタイズの方法としてよく検討される「広告収益」と「課金」について、AdmobとRevenueCatを使った実装や設定方法を解説します。※ExpoのManaged Workflowでも課金処理が実装できるようになりました。expo dev clientの設定などが必要ですが、この本では解説しませんのでご注意ください。なお、サンプルアプリはManaged Workflowで実装しております。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeとはなにか。採用のメリットとデメリット
Ubieが2024年にReact Nativeを選ぶ理由
Flutter vs. React Native in 2024
gluestack: React & React Native Components & Patterns
【徹底比較】Flutter VS React Native
First-class Support for TypeScript · React Native
React NativeとExpoを活用したネイティブビルド不要のE2Eテストの導入 - Hello Tech
Announcing React Native 0.70 · React Native
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
FlashList - super fast list for react native
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
なぜNext.jsをやめたのか？ - Hello Tech
Deep dive into React Native’s New Architecture
ReactNativeアプリでFCM通知メッセージを使う - Qiita
Toward Hermes being the Default · React Native
React Nativeエコシステム概論 / react-native ecosystem
React Native製アプリをJSIモジュールを使って50倍高速化した話
react-native-rearchitecture-2021
React Native for Webのこれまでから読み解くReact GUIのこれから
React Native Matsuri 2021
Announcing React Native 0.66 · React Native
react-native-firebaseでmessagingを使う時にやる作業メモ
React Native's Many Platform Vision · React Native