サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
saburesan.hatenablog.com
最近自社のアプリ(iOS,Swift/Android, Kotlin)をReactNative化しているので使ってみた雑感など。 導入のきっかけ 自社アプリのiOS(Swift)とAndroid(Kotlin)は私が一人で作って運用しています。 なんで一人かというと社内でアプリをかけるのは私しかいないからです。 そんなわけで、新しい機能の追加や修正などは2つのプロジェクトを触らなければならなくて非常に手間がかかるんですよ。 そんなわけでちょっと開発が落ち着いたのを見計らって巷で話題(?)のReactNativeを調べ始めたのがきっかけです。 ちなみにJavascriptはほぼ初心者です。 調査段階でのメリット iOS, Androidでコードの共通化ができる(100%ではない) iOS, Androidのネイティブコードを呼び出すことができる(既存のコードを再利用できる?) Rectをベー
github.com 何も言わずに入れて欲しい。 react-native-debuggerはReact Native公式のChrome Debuggerを元に作られたデバッグツールです。 Reduxを利用している場合に力を発揮します。 というかRedux使ってないと旨味無いかもです… でもRedux入れてるなら絶対使って欲しい。 とりあえずスクリーンショット載せます。 まだ試した機能は多くないでですが、使った感じで利点をならべるとすると Action, Stateの可視化が素晴らしい 時系列順にAction、Stateのログが取れる 任意のタイミングのActionによるStateのDiffが取れる 任意のタイミングのActionまで状態を戻すことができる Debugger上でActionを発行できる こんな感じです。 時系列順にAction、Stateのログが取れる。StateのDiff
とくにハマった訳ではないですがやらかしそうなミスだなぁと思ったので。 Kotlin Android ExtensinsとはViewの参照を自動で作ってくれるAndroidのためのPluginです。 kotlinlang.org findViewByIdしなくてもID名から自動で参照を作ってくれるので非常に便利です。 使い方 app以下のbuild.gradleに apply plugin: 'kotlin-android-extensions' を追加するだけ。 仕組み Kotlin側ではR.id.xxxのxxxでViewへアクセスできるので、thisがViewクラスまたはサブクラスの場合、そのViewに対してxxxのIDをfindViewByIdをしているだけです。 Javaにデコンパイルするとこんな感じ ViewPager var7 = (ViewPager)this.findView
【追記】 本人から確定ツイートありました。 If you use Twitter Lite you're now using a web app rendered by React Native for Web— Nicolas (@necolas) September 29, 2017 https://mobile.twitter.com/home ちょっと前にTwitterLiteがリリースされました。 なんでもProgressive Web App(PWA)対応したとかで話題になってました。 はじめてのプログレッシブ ウェブアプリ | Web | Google Developers 気になってソースを少し見てみたのですが、なんだかReactNativeWebを使っているのでは??というソースを少し見かけました。 写真のreact-native-xxxってやつですね。 JSのソ
私がReactNativeを使ってアプリを開発するときの環境や初期設定です。 Visual Studio Code ESLint インストール エディタにPluginをインストール ReactNative用の設定を追記 Flow プラグインのインストール エラー対処 Visual Studio Code Visual Studio Code - Visual Studio 1ヶ月前位にAtomから乗り換えました。 最初に変えた理由は何となくエディタを変えたかったので(笑) とりあえず使ってみるとすごく快適に使えました。 Atomから乗り換えて一番よかったのは、エディタの設定です。 atomはインストールしたパッケージの設定変更や、エディタ自体の設定変更が面倒(だと個人てきには思っていて)。 VSCodeは上記設定画面からエディタの設定とインストールしたパッケージの設定が行えます。 また、設
最近は仕事でも個人でもReact Nativeでの開発がメインになっており、かなり知識が溜まってきました。 で、だいぶiOSとAndroidに最適化したUIの構成ができるようになってきたのでメモ程度に残します。 OSごとのUIの分け方 ReactNativeは標準で幾つかiOS, Androidの処理を分ける機能があります。 リファレンス貼っときます。 facebook.github.io ファイルごと分割する ReactNativeの標準機能でXXX.ios.jsとXXX.android.jsという規則でファイル名を付けて import XXX from './XXX'; const XXX = require('./XXX'); とするとiOSの時はXXX.ios.jsを、Androidの時はXXX.android.jsを自動でインポートしてくれます。 例えば、エラーをユーザに通知する
*2017年1月15日現在ではRedashのGoogleAnalytics対応はαバージョンということになっているので、今後方法が変わるかもしれません。 Google Developer Consoleでプロジェクトを作成 console.developers.google.com サービスアカウントキーを登録する 左側のナビゲーションの「認証情報」→「認証情報を作成」→「サービスアカウントキー」を選択します。 「サービスアカウント」は「新しいサービスアカウント」を選びます。 サービスアカウント名を入力してキーはJSONにして「作成」を押してサービスアカウントの作成は完了です。 この時サービスアカウントIDはメモしておきましょう。 また、JSONファイルがダウンロードされますが、これもRedash連携の時に必要です。 Google Analyticsにサービスアカウントを登録する 連携させ
Javascriptでちゃんとテスト書いてますか? 私は書いてないです。 テストはあんまり書いたことないです(ドン引き Javascriptのテストは全く書いたことないです(ドンッ!! 今仕事で開発しているアプリはReactNativeなんですが、 やっぱスクリプト言語だと実行時までミスがわからないので怖いですね…。 もう怯えながらリリースするのは嫌なんだ… というわけで、テストを導入してます。 ちなみにESLintとflowは導入してます。 Jest テストライブラリはJestを採用しました。 facebook.github.io 理由は、 ReactNativeは最初からJestの環境が整っている。 構文がシンプルで簡単(テスト初心者でも使えそう。 Fluxの実装にReduxを使っているが、Jestでのテスト方法が公式にある。 という感じです。 プロジェクトを作る とりあえず、新規RN
このページを最初にブックマークしてみませんか?
『saburesan.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く