2018年3月20日

プログラミング

Switchを使ってみる 【これからはじめるReact Native】

目次

  1. はじめに
  2. Switchを使ってみる
  3. まとめ

はじめに

前回はローディング時のアクション、ActivityIndicatorコンポーネントの使い方をご紹介しました。
今回はSwitchコンポーネントを使ってみましょう。

Switchコンポーネントはその名の通り、スイッチボタンを作るコンポーネントです。
Switchのイメージ

今回はこのSwitchを使い、またONとOFFがわかるようにアラートも出すようにしてみます。

Switchを使ってみる

今回開発するイメージはこちらです。
スイッチがONになると、スイッチがONであることがアラート表示され、スイッチがOFFになるとそちらもアラート表示されます。
Switch

今までと同じように、Snack Expo を立ち上げましょう。
https://snack.expo.io/

こちらを実現しているExpoのコードはこちらです。

コードの解説

今回もコードのポイントを解説していきます。

import { Switch, Text, View, StyleSheet } from 'react-native';

こちらでSwitchコンポーネントをインポートしています。

  state = {
    switching: false
  }

stateの初期化処理です。
switchingfalseを初期値として設定しています。
これを後ほどSwitchコンポーネントの表示状態を表すvalueに設定します。

ちょっと一言

Switchのvalueについて、デフォルト値はfalseです。つまりここでのstate設定は本来不要です。
今回は、例えば今後デフォルト値をtrueにしたいなどの可能性も考える、またコードの可読性として初期値を明示することでわかりやすくなる、などの点から初期値設定をしています。

switchValue = (value) => {
  this.setState({ switching: value });
  const switchText = value ? 'ON' : 'OFF';
  alert(`今の状態はスイッチ${switchText}です`);
}

ここはスイッチボタンを押されて状態が変わった際に呼ばれるメソッドです。
this.setState({ switching: value }); でswitching に value を設定しています。
ここでの引数valueですが、後ほども解説しますが、スイッチの状態が入ってきます。

const switchText = value ? 'ON' : 'OFF';
こちらは前回解説したconstを使用し、switchTextという変数に値を設定しています。
value ? 'ON' : 'OFF'; の部分は三項演算子と呼ばれ、
条件 ? 'trueのときの出力:falseのときの出力という書き方で表されます。
つまり、今回の場合はvalueがtrueのときはON、falseのときはOFFが出力される為、どちらかの値が変数であるswitchTextに設定されるという処理です。

alert(`今の状態はスイッチ${switchText}です`);

こちらではスイッチの状態をアラートで表示していますが、ポイントはテンプレートリテラルを使用している点です。
テンプレートリテラルとは、バッククオート(`)で囲むことで文字列を表すことができることはもちろん、変数の表示や計算なども行うことができます
変数や計算式を出力する場合は、${変数} このように${} で囲みます。

POINT!!

テンプレートリテラルを使わず今回のアラートを表示させたい場合、alert("今の状態はスイッチ" + switchText + "です"); と表示させる必要があります。
特に複数の変数や計算式をまとめたい場合、+を使うとかなり複雑になる為、ぜひテンプレートリテラルを使ってみてください。

    const switching = this.state.switching

こちらではswitchingという変数にstateswitchingを設定しています。
敢えてstateを変数に設定しているのは前回の記事で解説しましたね。

 <Switch
  onValueChange = {this.switchValue}
  value={switching}
 />

最後はSwitchコンポーネントです。
onValueChange = {this.switchValue} はvalueの値が変わったタイミング際のイベントを設定します。
ここでは先述のswitchValue を呼び出しています。
そしてvalue = {switching} では、先程の変数で設定したstateswitchingを設定しています。

流れの振返り

今回は少し流れが複雑だったので、振返りをしましょう。

  1. まず初期化処理でstateswitchingfalseを代入する。
  2. stateswitchingの値をrender() 関数のswitching変数に代入する。
  3. Switchコンポーネントで、value に switching(false) が代入される。
  4. スイッチが押される
  5. SwitchコンポーネントのonValueChangeが発動し、stateswitchingtrueが代入され、ON用のアラートが表示される。
  6. Switchコンポーネントのvalueswitching(5で設定したstateswitching)が代入され、スイッチオンの表示がされる。

まとめ

スイッチは、例えばプッシュ通知のオンオフ設定など「オンとオフを切り替える処理」に多く使われます。
小さなパーツではありますがぜひ使いこなせるようにしてみてください。

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP