React Native

menu事業部 フロントエンドエンジニアの午菴です。 先日、AppleからApp Store Connectへのアップロード要件にXcode 15でビルドしていることが追加され、Expo SDKのバージョンを49から50へ更新する必要がありました。 menuはbare workflowで開発しており、更新作業はほとんど手動で行う必要があります。今回は更新手順と得た学びについて書いていきます 更新手順 [前提: 現環境の主要ライブラリとバージョン] - expo: v49.0.22 ★ - react: v18.2.0 - react-native: v0.72.6 - redux: v4.0.…

最近新しい趣味を始めようと、前々から欲しかった車を買いました。 みなさんこんにちは、ソリューション技術部の隈本(クマモト)です。 今回は弊社でも新しい試みであるReact Nativeのお話です。 React Nativeを触ったことあるみなさんは、その中でもスタイリングについてどのようにされていますか？ サンプルコードによくあるようにコンポーネント内にスタイルを記述しますか？それともスタイル用のファイルを用意しますか？それともウルトラCな方法で記述してますか？ もしウルトラCをご存知の方がいれば教えてください。 今回私がReact Nativeの案件を進めるにあたり、実際に対応したスタイリン…

こんにちは。KENTEMでエンジニアをしているK.Kです。 今回は、私が所属する 遠隔臨場 SiteLive プロジェクトで、 モバイルアプリのフレームワークを変更せざるを得ない状況になりアプリを作り直した話を紹介します。 最後に、React Nativeを使ってみた感想も少し触れさせていただきました。 背景 事件 フレームワーク選び 開発期間の短縮 学習コストの低減 拡張性の確保 React Nativeを使ってみて デバッグ実行の問題 OSSライブラリの多用問題 このプロジェクトで感じたこと おわりに 背景 当時、弊社のモバイルアプリはXamarinを使った開発が多く、共通化された処理を使…

大変ご無沙汰しております、今年度もあと少しです。この記事ではAutoReserveでのCLS改善についてお話します。 Web高速化シリーズ第2弾となります、第1弾「メンバーを巻き込み、分析基盤を整える」も併せてご覧ください。 CLSはきちんと改善を行えば必ず満点の25点を取ることができる、Page Speed Insightsの中でもある意味特別な指標です。CLS以外の指標は「~するまでの”時間”」を示しますが、CLSだけは「1画面のなかでコンテンツがずれた”総量”」を示しているためです。秒数を削るのはある程度限界がありますが、「コンテンツがずれないようにする」のはほぼ完璧に対応することができ…

最近あるサービスのスマートフォンアプリに新機能を追加している。 そのアプリではAndroidネイティブ、iOSネイティブ、WebView、React Nativeの4種類の画面から構成されている。APIはREST APIとGraphQL APIの2種類がある。一見するとどこでどの技術を使っているのかわからないので、仕様を決めるためのコミュニケーションで誤解を生んだり、何度も同じ確認をするコストがかかっている。 この問題をどうしたら解決できるのだろうか。 根本的には APIの統合や、React Native を採用をやめてシンプルな構成にするというような採用技術の見直しとリファクタリングが必要だ…

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoの公式チュートリアルをやっていきたいと思います。 プロジェクトの作成 Download assets Install dependencies アプリの実行 コードの編集 テキストの文字色の変更 イメージの表示 ImageViewerコンポーネント Buttonコンポーネント PhotoButtonコンポーネント 画像の選択 まとめ 仲間募集 プロジェクトの作成 StickerSmashプロジェクトを作成しましょう。 npx create-expo-app StickerSmash && cd StickerSm…

電通国際情報サービス、オープンイノベーションラボの比嘉康雄です。 今回は、Expoに入門します。 Expo とは、開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより Web アプリケーションの開発体験に近づけたものです。 expo cliのインストール Expo Goのインストール プロジェクトの作成 QRコードの読み取り アプリの修正 まとめ 仲間募集 expo cliのインストール expo cliは、下記のようにして、npxでインストールするようです。 npx expo -h 実行すると下記のように言…

Expo は、React Native を使用したモバイルアプリ開発を構築するためのフレームワークです。Expoにより、開発者はネイティブコードを書く事なく、JavaScript のみでアプリを構築できる為、開発プロセスを大きく短縮できます。 Expo の特徴 簡単なモバイルアプリ開発 Expo は初心者にも触れやすいよう設計されています。コマンドを完成させるのに React Native の詳細な知識を必要とせず、Expoの CLI を使用するだけで開発を始めることができます。 Expo SDK Expo は広い範囲の SDK (ソフトウェアデベロプメントキット)を提供しており、下記のような…

React Native は、JavaScriptとReactを使用してモバイルアプリケーションを構築するためのフレームワークです。Facebook（現: Meta）が開発し、2015年にオープンソース化されました。このフレームワークを使用することで、iOSとAndroidの両プラットフォームに対応するアプリを、1つのコードベースから構築できます。 本記事では、React Nativeの特徴、仕組み、利点、使用例、そしてその未来について解説します。 React Native の基本概念 React Native は、以下のような特徴を持つフレームワークです： クロスプラットフォーム開発: 1つ…

この記事は、 NTT Communications Advent Calendar 2024 4日目の記事です。 はじめに この記事はコミュニケーション&アプリケーションサービス部でビジネスdアプリを開発している木村、立木、富田、西谷の共同執筆です。 今回は、NTTコミュニケーションズで提供するモバイルアプリ、「ビジネスdアプリ」のアーキテクチャに焦点を当て、サーバレスサービスをどのように活用しているかを2回にわたって紹介します。 この記事（前編）では、開発背景やサーバレスサービスを活用したアーキテクチャの概要を中心に解説します。後編では、具体的な運用やCI/CDの仕組みに焦点を当てる予定です…

グローバルなレストラン予約サービス、AutoReserveの開発をしているjavascripterです。 今回は、ハローでのautoreserve.comのアーキテクチャの変遷についてお話しします。 概要 AutoReserveは最初Next.jsで構築され、その後SPAに移行し、最終的に再びNext.jsに戻るという珍しい技術選択をしています。 この記事では、各アーキテクチャの移行の背景と、大規模アプリケーションの段階的移行の実践について解説します。 AutoReserveについて AutoReserveは世界中のレストランの予約が可能なグローバルサービスです。iOS・Android・Web…

はじめに 昨年に引き続き、今年もFlutterのカンファレンス、FlutterKaigi2024に参加してきました。 今年は11月21日と22日の2日間にわたり開催され、例年以上に多くのセッションに参加することができました。 会場は有明セントラルタワーホール＆カンファレンスで、セッションは2つのホールで行われました。スポンサーブースも2箇所に設置され、会場は非常に賑やかでした。 今年もFlutter製でFlutterkaigiのアプリが作成されており、リポジトリが公開されているのでこちらからも多くの学びが得られそうです。 github.com どのセッションも非常に学びが多く素晴らしいものでし…

アプリ開発に必要なものというか環境と言語なんですけど。 iOSとAndroidで違うのだるすぎ～！と思って調べたら両方をまとめて開発できるクロスプラットフォームなるものがあるみたいです。 そりゃみんなだるいですもんね。そりゃそうじゃ。(iOSが独自ライン突っ走ろうとするから…) それで調べてたんですけど、まあAndroid studioとかは0円で入れられたので、 知識さえあればあとは開発しやすいかなと。 あとざっと見たところ、FlutterがC言語も使えるみたいで、ゲーム開発系でしょうか。 ちょっとワクワクしました。ReactnativeもJava script以外にC言語、Pythonなど…

クリエイターにおける工数管理と利益体質化 mocopi VRアプリによるVRChat向けモーションキャプチャ精度向上 Amazon Aurora Serverless v2の最小キャパシティ0対応 OpenAIによるブラウザ開発と検索市場参入 ウェブフォント最適化とパフォーマンス向上 MacBook Pro (16インチ、2024年モデル) のM4チップ性能比較 GitHub ActionsにおけるNxとLarger runnerを用いたコスト最適化 Googleの量子コンピューターエラー訂正AI「AlphaQubit」 Amazon CloudFrontアクセスログのログフォーマットと送信先…

Microsoft Windows 365の新発表 REALFORCE RC1キーボードレビュー Microsoft 365 Copilotの新機能 外部モニター配置によるレイアウト問題 iOS 18.1の新機能 React Native開発の現状 Microsoft Flight Simulator 2024 非同期タスクのメトリクス収集 dbtを用いたデータパイプライン構築 エンジニアリングマネージャーのキャリアパス SLO導入事例 Microsoft Windows 365の新発表 マイクロソフトはクラウドPC専用シンクライアント「Windows 365 Link」を発表し、2025年4…

こんにちは！2024新卒menu事業部フロントエンドエンジニアの櫻井です。 今回は、新卒研修で行われたハッカソン研修と開発したプロダクト『Trip Connect』をご紹介いたします！ 研修の概要 ハッカソンの概要 N1の悩み プロダクト概要『Trip Connect』 機能① カードの作成 機能紹介② 行きたい場所の投票機能 機能紹介③ カードを繋げて1日のスケジュールを作成 技術的なお話 フロントエンド：Next.js バックエンド：Firebase API ： Google Maps API 発表プレゼンの様子 業務で生かされていること 最後に 研修の概要 研修の概要はオウンドメディアの…

? アニメ ハイキュー ハイキューセカンドシーズン 見終わった ハイキュー!! TO THE TOP 13話までみた 見ている。面白い。ほぼ一気見している。 ? 読書 塩の街を読み終えた /evesquare-read-books/塩の街 ? 見た記事 アメリカのZ世代女子の間で今、流行っているのは｢読書会｣ ｢フィクションであれノンフィクションであれ、文学作品について語り合うことは、相手のことをもっと知って、個人的なつながりを築いたり、絆を深めるための素晴らしい方法です｣とフォードさんは語った。 性別・年代別 独学資格ガイド 独学で資格を色々とってる人のサイト。資格に関する様々な情報が記載さ…

? 近況 React Nativeをすごく触っている LambdaとSQSみたいなことがgcpでもできるみたい。cloud functions on firebase?cloud functionsと何が違うんだみたいな。。 ローカルでのセットアップでどっちが簡単かなーって試している awsならsam,gcpならfirebaseで構築できるcliで 仕事はフルタイムでPCを触っていて、家戻ってからも夜中までReact Nativeを触っているから頭いたい。画面の見過ぎか座りすぎである。 最近雨っぽいのもあるかもしれない。 佐川から荷物が届くってLINEで来たんだけど、19-21時まで拘束される…

ことば 自分は「無知の力」は時に有用だと思っている。 知りすぎると動けなくなるからだ。 知らないのは悪いことではない。 「学んでからやる」ではなく、「試行錯誤しながら学ぶ」が良い。 https://blog.craftz.dog/tech-stack-lessons-from-my-7-year-indie-dev-journey-596e71b483ce デザインシステム https://react-spectrum.adobe.com/react-aria/index.html Adobeのデザインシステム？？ React Native react-nativeでpnpm,yarnなど使っ…