「基礎からはじめるReact Native入門」連載一覧
-
2020/08/17リリース用のアプリファイルを用意しよう
アプリができあがったら、ストアにリリース（公開）して、世界中の人に使ってもらいましょう。これまではデフォルトの設定のままで開発を行ってきましたが、リリースをする場合は、アプリのID、アプリ名、アプリのアイコン、スプラッシュ画面など、設定するべきものがいくつかあります。Androidアプリ開発やiOSアプリ開発のお作法を元にしているものの、JSONやJavaScriptで設定を記述していくスタイルはExpo独自のものです。どんな設定をすればよいのか、学んでいきましょう。
-
2020/06/23静的型チェックを行うTypeScriptで品質を担保しよう
ソースコードが大規模になってくると、データ型を定義して静的型チェックを行うツールを重宝するようになります。React Nativeでは、Microsoftが提供しているTypeScriptというプログラミング言語を利用することで、JavaScriptコードの中に型を記述することができます。Propsや変数、引数などに、どのように型を定義するのか、型を定義することでどんな恩恵が得られるのかを見ていきましょう。
-
2020/06/08React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用
前回に引き続き、メモアプリの作成を行います。メモを作成・保存する機構を作りながら、画面遷移やデータの永続化について学んでいきましょう。
-
2020/05/20React Nativeでメモアプリを作ろう～セットアップと表示
今回と次回の2回に分けて、メモアプリを作りながら、React Nativeでユーザーの入力を受け付けるほか、データを保存し、保存してあるデータを表示する方法について解説します。これまで解説してきたことを総合的に活用しながら、実践的なアプリ開発を行います。
-
2020/04/23React Navigationで画面遷移を実現する
今回はReact Nativeにおける画面遷移の方法を解説します。モバイル向けのアプリはパソコン向けのアプリとは違い、1画面あたりの役割や情報量を減らして、画面遷移をたくさん行うように設計することが多くなりがちです。そのため、画面遷移ライブラリは重要な役割を担っています。サードパーティの画面遷移ライブラリで人気のものはいくつかありますが、今回はReact Navigationを採用して、複数の画面遷移パターンについて解説していきます。
-
2020/03/19UIライブラリで美しいデザインを手軽に利用する
前回はスタイルでコンポーネントを装飾する方法を学びましたが、見栄えするデザインのコンポーネントを自分で作るのは大変です。今回は、サードパーティ製のコンポーネントセットとして、React Native Paperというライブラリを紹介します。React Native Paperはモバイルアプリ開発に役立つ、ヘッダーやフッター、フォームといったUIを提供しています。また、AndroidとiOSによって自動で見た目が変わる機能もあり、各プラットフォームらしい見た目を作ることもできます。品質の高いアプ...
-
2020/02/17React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントをレイアウトする
前回に続いて、React Nativeにおけるスタイルの使い方として、コンポーネントをレイアウト（配置）する方法を解説します。装飾と同じく、レイアウトについてもCSSの機能を踏襲しており、ブラウザの世界でたたき上げられてきた方法で柔軟にレイアウトを組めます。
-
2019/12/17React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントを装飾する
React Nativeにおけるスタイルの使い方として、コンポーネントを装飾する方法を解説します。React Nativeで使用できるスタイルは、CSSをベースにしているので、CSSに関する知識があれば比較的容易に習得することができます。ただ、WebブラウザのReactにおけるスタイルよりも書き方の選択肢が狭まっている部分もあるので、React Nativeらしい書き方を学んでいきましょう。
-
2019/10/24React Hooksの使い方を学ぼう～関数コンポーネントの状態管理を行う
前回は、クラスコンポーネントで状態管理やライフサイクルを利用する方法について解説しましたが、関数コンポーネントでも同様の機能を実現することができます。今回は、Reactのバージョン16.8から導入された、関数コンポーネントを拡張するための機能群であるReact Hooksについて、基礎的な使い方を解説します。
-
2019/10/15Reactの基本を学ぼう～コンポーネントで動的な状態管理
前回は、Reactコンポーネントの構成要素であるJSXやpropsについて解説しました。今回は、それらを動的な状態管理によって更新する方法について解説していきます。状態の更新は、コンポーネントのライフサイクルや、ユーザー操作のイベントを起点として行われるので、これらを交えた具体例についても解説します。
-
2019/08/23Reactの基本を学ぼう～コンポーネントの仕組みと作り方
React Nativeでは、ReactというJavaScript向けのUI状態管理ライブラリを使用します。Reactを用いることで、ブラウザ向けのアプリもモバイル向けのアプリも作ることができますが、その使い方はほとんど同じです。今回は、一度使い方を覚えてしまえばさまざまなプラットフォームに向けてUIを書くことができる、Reactの基本について学んでいきましょう。
-
2019/02/27ExpoではじめるReact Native開発環境の構築
今回はReact Nativeを使ったアプリの作成と実行までの流れを解説します。React Nativeの仕組みはよくできたものですが、そのまま扱おうとすると必要な知識が多岐にわたってしまい大変です。本記事では、React Nativeを簡単に扱えるように抽象化されたツール「Expo」を使います。ReactやJavaScriptによるWebアプリ開発では、よくある形でのセットアップになります。
-
2018/12/26React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どうい...
