Tech

ReactNative開発のスタート、シミュレータでのデバッグ

投稿日:2019年5月23日 更新日:

はじめに

こんにちは、nukkyです。
今回は前回ReactNativeの開発環境を作成したので、開発の基礎としてシミュレータでの確認と初期画面の表示を少し変更してみたいと思います。
※キャプチャはiOSのシミュレータになります。

前回の記事はこちら
ReactNative環境構築[Android/iOS]

改めてシミュレータの起動

ターミナルで前回作成したプロジェクトのディレクトリを開き、上記のコマンドでiOSのシミュレータが起動します。

表示内容を変更してみる

シミュレータで表示されている初期画面の内容を変更してみます。

App.js

作成したプロジェクトの直下に「App.js」というファイルがあります。
これが現在起動時に表示される画面のソースになります。
今後開発で新しいソースを増やしていくと思いますが、最初に読み込まれるソースはこの「App.js」になりますので、基本はこちらに画面遷移などを追加していくことになります。

表示テキストの変更

では早速「App.js」の内容を変更し、表示テキストの変更を行います。

現在画面に表示されている以下の内容を、

となっている箇所を定番の「Hello, World!」に変更します。

シミュレータの更新「command + R」

ここで変更を確認するためにシミュレータの更新を行います。その際いちいち「react-native run-ios」をしなくても、jsの更新だけであれば「command + R」で更新を行うことができます。早速シミュレータで「command + R」を実行してみます。1行目の表示が変更されました!

デバッグメニュー

実際シミュレータで起動してみた人や、最初のスクリーンショットをみると「Press Cmd+R to reload, Cmd+D or shake for dev menu」と親切に更新とデバッグメニューについて表示されています。そこでデバッグメニューについて簡単に紹介したいと思います。

Realod

「Realod」は、「command + R」による機能と同様で、主にReactNativeプロジェクト内の、JavaScriptコードの変更を適用するために使用します。

Debug JS Remotely

「Debug JS Remotely」は、ブラウザのデベロッパーツールを利用してアプリケーションをデバッグするために使用します。
こちらに関してはまた別の記事で紹介したいと思います。

Enable Live Reload

「Live Reload」を有効にすると、JSコードの変更を検知すると、自動で再起動(Realod)されるようになります。
毎回「Realod」を押す手間が省けますが、わずか一行の修正でもアプリケーションが勝手に再起動されるようになります。

Start Systrace(iOSのみ)

iOS版のアプリケーション用に、プロセスに関するプロファイリングを行うためのツールのようです。
Used for starting Android marker based profiling tool.
引用:https://www.tutorialspoint.com/react_native/react_native_debugging.htm
なお、予め以下のようにコード内に埋め込んでおく必要があるようです。

こちらも詳細は別記事にしたいと思います。

Enable Hot Reload

「Hot Reload」は、アプリの状態を維持した上でJSコードの変更が反映されます。いちいち初期画面に戻されることもありませんので、とても重宝する機能ではないかと思います。

Toggle Inspector

「Toggle Inspector」は、UIパーツの調査に最適なツールです。ボタンやテキストなどの、マージンやパディング、要素そのもののサイズなどを調査することができます。

Show Perf Monitor

パフォーマンスモニタを、それぞれアプリの画面上に表示します。メモリ使用量などが分かります。

 

さいごに

これで開発における準備は整ったかと思います。次回は画面遷移やViewの配置など、アプリケーション開発の基本的な処理を実装していこうと思います。

 

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)  React.js&Next.js超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ReactNativeデータ永続化

1 はじめに2 データ永続化の方法3 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

UserNotificationsの使い方について

1 はじめに2 UserNotificationsフレームワーク3 基本実装3.1 デリゲートの設定3.2 ユーザー許可3.3 デバイストークン取得後3.4 バックグラウンドで通知受信3.5 フォアグ ...

[Unity] Terrain(地形)を使ってみた

1 はじめに2 Terrainの追加方法3 Terrainの使い方4 Create Neighbor Terrain5 Paint Terrain5.1 Raise or Lower Terrain5 ...

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

MLKitで使えるTensorflow Liteについて調べてみた

1 はじめに2 そもそもTensorflowとは3 そしてTensorflow Liteとは4 Tensorflowの環境構築4.1 pyenv, pyenv-virtualenvをインストール4.2 ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年5月
 1234
567891011
12131415161718
19202122232425
262728293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。