React Nativeハイブリッドアプリへの挑戦 ~ Part2: 導入/Bridge ~ - スタディサプリ Product Team Blog
本エントリは3部作のPart2となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1からすっかり時間が空いてしまい恐縮ですが引き続き弊社のReact Nativeハイブリッドアプリの取り組みについて語っていければと思います。 段階的なインテグレーション 前回のエントリでmonorepoへの移行とCIの整備について語りましたが、今回は実際にどの様にインテグレーションを進めていったかについて説明していきます。 新しい技術を採用するに辺り、ビッグバンリリースを避け段階的に導入を試みていくアプローチの方がリスクを避け柔軟に対応できると考えています。ですので一気に再構築プロジェクトを発令するのではなく、ある機能をリニューアルする際にその画面のみReact Nativeで書いてみ
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
React Native for Webをプロダクションで使ってみました - agri-note inside
こんにちは、モバイルチームの中川[twitter:@nkzn]です。 5月22日にプレスリリースがあった提携で紹介されていたアプリでは、React Native及びReact Native for Webを採用しています。こちらについて技術的な側面から（当たり障りのない範囲で*1）事例を紹介します。 経緯 5/22に、農業総合研究所さんとの業務提携契約が公開されました。 www.agri-note.jp 農業総合研究所さんは、7000件以上の農家さんから野菜を集荷し、全国各地のスーパーなどに設置された直売コーナー「農家の直売所」に野菜を出荷している、農産物の流通・販売・コンサルティングを手がける農業ベンチャーです。 （上記のスクリーンショットは2018年7月18日現在のものです） www.nousouken.co.jp 今回の業務提携により、共同でシステム開発を行っていくことになりました。
Reactのデザインパターン Compound Components - Qiita
コンポーネント指向での開発も割と枯れてきて、昨年から海外ではいわゆるデザインパターンに名前がついて紹介されることが多くなってきました。 この記事ではその内の一つ、Compound Componentsを紹介いたします。 またタイトルに「Reactの」とついてますが、実装例がReactなだけでコンポーネント指向であれば他のUIライブラリでも考え方は流用可能です。 完成した実装はここに置きました。 https://codesandbox.io/s/104lvmynj4 参考 Ryan Florence - Compound Components Advanced React Component Patterns Compound Componentsとは はじめに Compound という言葉ですが直訳だと動詞で 混ぜ合わせる という意味です。実際の実装は混ぜ合わせるというよりは「組み合わせる
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
React NativeをWebに持ってくることの意味 - ナカザンドットネット
ブラウザはGUIアプリケーションプラットフォームではない Flexboxについて React DOMはGUIアプリケーションフレームワークではない React NativeはGUIアプリケーションプラットフォームの抽象である React Native for Webがブラウザに持ち込んだもの コンポーネントが便利 スタイル周りも良い感じ TouchableOpacityでタップ表現もラクラク 他にもいろいろあるけど プロダクション事例が強すぎる 作者のnecolasも語ってた まとめ 余談：React系のアプリケーションフレームワーク React Native for Webは、React NativeをWebに持ち込む試みです。 しばしば、こういった試みに対して「わけがわからない」「本末転倒である」といった意見を見かけますが、筆者は妥当な試みであるという印象を持っています。ちょっと頭の中
Oculus Go で React 360 の開発をはじめられる
Oculus Go を買った https://note.mu/jgs/n/nd31e52697614 ちなみに、この FANBOX の記事で NetflixVR は左上の Void theater というところからゴロ寝追従モードに入ってくれることをコメントで教えてもらったので快適になりました Oculus Go にはそれなりなブラウザが搭載されていることを Oculus GoのブラウザについてのWeb開発者目線からのまとめ - Qiita を読んで知ったので、WebVR はどんなもんかと見物するために買ったといっても過言ではない だいたいの流れは上述の記事通りなのだけど、いくつかハマったので記しておく まずは Oculus Go を開発者モードにする これは UE4 Oculus GoでVRアプリの開発を開始するまでの方法 - Let's Enjoy Unreal Engine ここに詳
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
ReactとAngular、使うならどっち？ JavaScriptギークが6つの視点で徹底比較 - エンジニアHub｜Webエンジニアのキャリアを考える！
ReactとAngular、どちらを選ぶべきか？ 使用するJavaScriptフレームワークを選ぶ際、この2つはよく比較対象に挙がります。しかし、両者の特徴をよく理解していなければ、選定は困難でしょう。 今回は、両フレームワークが具体的にどんな強みを持っているのかを、Reactの専門家 小林徹さんとAngularの専門家 稲富駿さんに解説してもらいました。両フレームワークの設計思想から使用において考慮すべき点、今後実装される予定の機能まで、利用者が気になるポイントを網羅しています。 JavaScriptギークである2人のノウハウ、ぜひ選定の参考にしてください！
フロントエンドのコンポーネント設計に立ち向かう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
React v16.3 changes - blog.koba04.com
React v16.3.0 がリリースされました。 ※4/4 にバグフィックスを含む v16.3.1 がリリースされています このバージョンでは、基本的には v17 で有効化される非同期レンダリングへの対応が中心になっています。変更点は多いですが、ほとんどが機能追加であり破壊的な変更はないため、v16.2 から v16.3 へのアップグレードは比較的簡単じゃないかなと思います。 https://reactjs.org/blog/2018/03/29/react-v-16-3.html 当初の予定からはかなり延びたため、直前に発表された React Suspense の機能も入れるのかと思いましたが入りませんでした。まだ最終的な API は決まってないようなので今後に期待。 React Suspense については、v16.3 と関係ないので今回は省略します。 https://reactjs
JavaScript: Reduxが必要なとき/不要なとき（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ
Megasloto: Destinasi Terbaik untuk Petualangan Tanpa Batas
Megasloto: Destinasi Terbaik untuk Petualangan Tanpa Batas Dalam dunia yang penuh dengan kesibukan dan tekanan, mencari hiburan yang sederhana dan menyenangkan bisa menjadi tantangan. Megasloto hadir sebagai agen resmi paling tepercaya di Indonesia, menawarkan pengalaman pendaftaran dan akses permainan slot yang bebas dari segala kerumitan yang biasa menyesakkan. Dengan hanya beberapa langkah sede
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以前 React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うテーマで発表した内容に、加筆修正して記事にしてみました。2年半くらい取り組んで見ての結果や感想をシェアできればと思います。 対象読者 SPA の開発に興味がある方 最近の WEB フロントエンド開発に興味がある方 ある程度 React や Redux を触ったことがある方、触りたい方 目的 具体的な実装例をもとに知見を共有し、Web 開発の役に立ててほしい おかしな実装や、もっと良い方法があれば、教えてほしい 内容 コードベースでの実装例の紹介
React Beginner Question Thread ⚛
Hey folks! My name is Dan, and I work on the React team. I really like the idea of semi-regular “beginner threads” where people can ask simple questions without getting judged. This seems like a great community so I thought: can we try this here? 🙂 We run a thread like this on Reddit but to be honest I'm finding Reddit hard to use and very impersonal so I don't hang out there much. The rules are
React Nativeハイブリッドアプリケーション開発ことはじめ - tomoima525's blog
こちらはReact Nativeアドベントカレンダー 19日目の記事になります。 ここ1、2年でReact Nativeによるアプリ開発はますます盛んになっていますが、一方でNativeと組み合わせたとハイブリッドアプリケーション開発はまだ発展途上です。 React Nativeの公式ドキュメントにもIntegrating with existing appという項目がありますが、あっさりと書かれている上に鮮度がお世辞にも高くありません。 しかしながら、FacebookやAirbnbなど大企業がハイブリッドアプリケーションを積極的に導入していることや、Nativeアプリを部分的にリプレイスできる利便性から、今後も採用が増える分野と考えられます。本記事ではハイブリッドアプリを開発した自分の経験から、プロコンや実装の基本についてまとめました。 ハイブリッドアプリケーションの良い点/難しい点 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Redux テスト考察 - Qiita
High Performance Redux Apps