React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
Chart.jsなどのWeb用のJSライブラリをReact Nativeで使う - ぴよログ
React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓ JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊 とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。 WebにもJSのチャート系ライブラリはいくつかあります。例えば有償のHighchartsなんかはかなり協力です。これから登場するChart.jsのようにMITライセンスのものもあります。 そういったWebのライブラリを使ったほうが案外良い結果になることもあるかも、という提言として今回の例を紹介してみます。 React NativeにはWebViewがあるため、Javascriptを有効にした状態で通常のWeb
React NativeでMarkdownを表示する方法をいくつか比較してみた - PIYO - Tech & Life -
GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemottyでもMarkdownのような記法を一部サポートしています。 WebでMarkdownを扱うにはMarkdown形式の文字列をサーバーサイドなりクライアントサイドでHTML化して表示するだけなのでとても簡単です。また、 ただのHTMLなのでCSSにより見た目もかなり柔軟に変えることができます。 ではReact Nativeアプリではどうしたらいいだろうか、というのが最近の課題です。実はRemottyのモバイルアプリでちょっとしたマークダウン的なものをどのように表示すべきなのかというのは悩んでいて、現状では開発した当時一番マシかなと思ったものを使っています。 Markdownを表示するためにライブラリ（または標準コンポーネント）を使います。使い方には大き
MobXでTodoアプリ[Part1] MobX導入まで - PIYO - Tech & Life -
3部作のPart1です。 MobXでTodoアプリ[Part1] MobX導入までMobXでTodoアプリ[Part2] データを保存してみるMobXでTodoアプリ[Part3] Storeをデバッグしてみる以前も書いたように、ここ1年ほどReact Nativeによるアプリ開発を時々行っています。凝ったアプリでなければ割とサクッと作れるのが良いです。 さてReact Native（というかReact）単体だとデータ管理が面倒、バケツリレーが云々という話がよくあります。その問題に対応すべく色々なFluxなフレームワークが存在していて、中でもReduxがよく使われるようになったという流れが2年前ぐらいにあったと記憶しています。 そういう流れで僕もReduxを使ってアプリ開発をしていましたが、ここ数ヶ月MobXというのをよく聞くようになりました。データ管理の用途だったらMobXで十分だよとい
![MobXでTodoアプリ[Part1] MobX導入まで - PIYO - Tech & Life -](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf9dc72e3f5a831c21b79dda771b7692abd8544b/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fy_i9fp87K99TSZkeLX2ZqCVu9aZ_itzXBB_AI90I1mycnWj72EQPc8YAlSOhDnWqOR-Tq2TNtMf1dIIwIB41o-tEjMH1Ahn90cPMyM-T83elsZBhs66peHCP2VfVWTT4R0OYwI65EU58kiApaDCGtXZLbQpBpg8mw4amb_Pu0o83H9sPVmkb8vDO08dFJoAeBghTwl0RJZFBzLPAvEo1yySRpKa1haI95sy4tF0fQD3H0VZF7yenhWdUvJtHk86DqtZGGZxA1KDPKFQ0MGBn6Q6vM785kgN1rWzWHxjmehqWLagVnwbhhBSukD-6rTB00p714JTqnff0BIK411edZRmzPaCaPzEbeM_i6WmbR6LcWPn-J5U7qn2O5GFjTpNF8ef0gvqD0dww9pNYC6yU1aFoyac9A1BVBzCHO5OoUgOVqn3PzE0fIv_J4twqGMYW2X34-yi11r2ZLbw9bbBGbz4lsuWSoGAyrMPvdwOPGG9eFn5MsLIK_-fMRmSDGeaDTi4yBa4-jw2xAy4HSi1VBSZkThJEuqm8nQdjd1u1Fz2cAtg2rVAdOfomS7FmFR_3i8UxLTUtNtU55U9Yc5wLwtZDOYz80cMG3PEP5g-5sYTEsOQ-fhil_IVIzdI-TCO2bmvTsvO0EwcM9SZXjZnEDFMANWVUPGfq3g%3Dw1200-h630-no)
【随時更新】2018年にReact Nativeを始める人におすすめ26選 - Qiita
ちょうど1年くらいにReact Nativeでちょっとしたアプリを作っていたのですが、最近はめっきり離れてしまっていました。Reactもv16になり、少し開発環境も変化しているかなと思っていたら・・・結構変わっていました。 React Native Showcaseを見ると、FacebookやInstagramはもとよりAirbnb, Skype, Tesla, Walmart, Wix, UberEATSなど日本でも有名な企業やサービスの採用が目立っています。 showcase 今回は良く使いそうなツール・コンポーネント・サービスを集めてみました。 随時更新もしていきたいと思います！ 1. Expo https://expo.io/ ExpoはReact Nativeの開発をサポートするツールです。 主に以下を提供してくれています。 Expo XDE、Expo exp Expo Modu
React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話 - PIYO - Tech & Life -
前置き僕が所属しているソニックガーデンではRemottyというツールを自社で開発し、普段の業務に使っています。リモートワークをするためにオフィスと言ってもいいような場所で、業務中は常にオンラインとなり、リアルタイムチャット（対面の会話の代替）とトピックベースの掲示板（メールなど非同期コミュニケーションの代替）の両方を備えたオフィスとなるようなツールです。 https://www.remotty.net/オフィスにいられない間にもチャットや掲示板に反応できるように、iOSとandroidそれぞれにネイティブアプリのクライアントアプリがあり、それぞれを別の開発者が担当していました。iOS版はその当時新卒2年目だった若者が作ったものを僕が引き継ぐ形でメンテしていました。 もともと自社向けに開発していたプロダクトではありますが、働き方改革の流れなどの関係もあってここ1年〜2年ぐらいの間に有償で使っ
[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita
[React Native入門完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 この記事で説明する事 React Native採用に係る意思決定の話 atom + eslint + flowによるIDE風開発環境 line by lineによるプロジェクト作成方法とリリース方法 デバッグ方法やtips集、補助ツールの使い方 React Nativeとは Facebookがオープソースとして開発するReact.jsの思想の一つである「Learn once, Write everywhere」（元ネタはもちろんJavaのWrite once, Run anywhere）を体現した、Facebookが開発主体となるプロジェクトの一つで、要はJavascriptとReactフレームワーク1つでモバイルアプリ（iosとAndroid）を作れる、といった代物です
![[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd8432893c7bb0d7c1100348e2d1c5ff6bb8ae41/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCUmVhY3QlMjBOYXRpdmUlRTUlODUlQTUlRTklOTYlODAlRTUlQUUlOEMlRTUlODUlQTglRTclODklODglNUQlRTMlODAlOEMlRTMlODElODQlRTMlODElOEQlRTMlODElQUElRTMlODIlOEElRTMlODMlODclRTMlODMlQkMlRTMlODMlODglRTMlODAlOEQlRTMlODElQUUlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTJSZWFjdCUyME5hdGl2ZSVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5NyVFMyU4MSU5RiVFNyU5RiVBNSVFOCVBNiU4QiVFMyU4MiU5MiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MSVCRSVFMyU4MSU5OSVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yzg4Nzg0NmQwM2I0NmE0OWI1YjljZDQ5N2UwMGNjZTY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29nb3RhbmFrYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjRiZDU0YWRmMDJhMWI2NmFhYzE4OTBlOThkNDY5MWM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dda33fbe74e8524cb2321b6da1f8834d5)
React Native / 複数要素の同時タップをハンドリングしたい時
ボタン2つ押したら何かする、みたいな時です。 Touchable TouchableHighlight は同時に2つタップするということができないみたい。 片方タップしたらもう片方は反応しなかった。 class MyComponent extends Component { constructor(props) { super(props); this.state = { text1: 'text 1', text2: 'text 2', text3: 'text 3' }; } render() { return ( <View> <TouchableHighlight onPress={() => { this.setState({ text1: 'touch started' }); }}> <Text>{this.state.text1}</Text> </TouchableHig
「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査 | ログミーBusiness
リクルートテクノロジーズ主催のITエンジニアのスキルアップ・キャリア形成のための勉強会「RECRUIT Technologies NIGHT」。複数回にわたり、リクルートのエンジニア環境やリアルな技術開発・運用について解説します。第5回のテーマは、「リクルート流フロントエンド開発」です。鎌倉正也氏の講演は「フロントエンドエンジニアが React Native を触ってみた話」。React Nativeの調査を通して得られた知見を紹介しました。 React Nativeとは？鎌倉正也（以下、鎌倉）：それでは、始めさせていただきます。「フロントエンドエンジニアがReact Nativeを触ってみた」というタイトルで発表させていただきます。鎌倉と申します。 まずは、自己紹介なんですけれども。普段はフロントエンドエンジニアとして、ReactとかReduxとか使って、Webアプリを使っております。今
ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート - Qiita
はじめに 個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。 今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。 あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも
React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」
今月の13日と14日に米カリフォルニア州のサンタクララでReact Conf 2017というReactのカンファレンスが行われました。このタイミングで発表されたのが、今回紹介する「create-react-native-app」です。Reactの「create-react-app」と同様コマンド一発でReact Nativeアプリの開発環境を構築してくれるツールです。これは、これまでなかなか手の出しにくかったReact Nativeアプリの開発を大きく変えてくれる画期的なツールとなるでしょう。今回はこの「create-react-native-app」の使い方を紹介したいと思います。 create-react-native-appとはReact Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブア
create-react-native-app触ってみた！！ - Qiita
create-react-native-appが出た カルフォルニアで開かれたReact Conf 2017に合わせてcreate-react-native-appが出たっぽいので早速触ってみました 僕のReactNative歴はハンズオン行ってそのあとチュートリアルで遊んだくらいです create-react-native-appとは FacebookとExpoによるReactにおけるCreate React AppのReact Native版みたいな感じです https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html https://github.com/react-community/create-react-native-app#philosophy
【React Native】良さげなコンポーネント紹介 - Qiita
React Native Advent Calender12/24への投稿記事です！ メリークリスマス 色々なコンポーネントがありますが、探すのって大変ですよね・・・・。 それに探しても探し切れなかったりなどなど。なので面白そう、あるいはすごそう、使ってみたことあるなどなどのコンポーネント紹介していきます！ また、こっちの方がよいぞー！これとかどう？などなどあればお教えいただけますと幸いです！ react-native-router-flux 名の知れたルーティングライブラリ。react-routerライクな書き方で使うことができます。 tabだってアニメーションだってできてしまう万能な子。 Sceneを使ってルーティングを定義します。そして戻るアクションやスワイプバックは自動実装。 tabについても書くだけでタブ遷移の仕組みも実装してくれます。 如何せんドキュメントがよくわからなくてソー
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？ - Qiita
最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn once, write anywhere"でレバレッジが効いていて、 優秀なWeb技術者(React)がアプリ開発に渡りやすかった ナレッジがたまり易いチーム構造に変えることができた ため、置き換えコス
Facebookの競合他社はReact.jsが使えない？
React v16リリースと共にMITライセンスへ https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#mit-licensed 16系だけでなく、すぐに移行できない人向けに、15系の主要バージョンもMITライセンスに変更されました。 2017/09/24追記 近日リリース予定のReact v16にて、ライセンスをBSD + PatentsからMITに変更予定とのPOSTがありました。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 但しまだGitHubでLICENSE*ファイルの変更やPATENTS
ClojureScriptとReact NativeによるiOSアプリ開発 - Qiita
はじめに iOSアプリ開発の主流は，Objective-CやSwiftを用いたネイティブアプリ開発です．HTML5を用いたCordovaや，UnityからiOSエクスポートするといった方法もあります．そのような中，Facebookの発表した[React Native][react-native]では，Virtual DOMで大きな注目を浴びたReact.jsと同様のスタイルでJavaScriptを記述することで，iOSアプリ開発を行うことができます． 一方で，Clojureの文法で記述したコードをJavaScriptにコンパイルするClojureScriptの世界では，[Om][om]と呼ばれるReact.jsラッパーが人気です．React.jsの仕組みはイミュータブルであることを根幹においているClojureと非常に相性が良いといわれています． React.jsのような仕組みを使えるRe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Navigation | React Navigation
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Swift および Objective-C を使用した iOS メモリー管理で絶対に失敗しないための 7 つのヒント