ReactNativeでTodoアプリを作ってみた

ReactNativeでTodoアプリを作ってみた

Web系エンジニアもiosアプリとか作りたい

フロント周りのスキルが欲しいと思い、以前Vue.jsに少し手を出したのですが、制作したのはWebサイトなのでPCでの用途がメインになります。

Vue.jsであってもデザイン用フレームワークの「Vuetify」でPCとスマホに両対応させることはできました。

SPA(シングルページアプリケーション)で読み込み回数も少なく、

動きがなめらかなので、

PHPで作成したアプリケーションとの違いは感じられたのですが、

やはりベースはWebなので

「ブラウザでWebページを閲覧してい感覚」が残ってしまいました。

日常的に「iPhone」を使っていて、アプリはよく利用するので

「UIの滑らかさ」というのか「アプリっぽさ」というのに魅力は感じていました。

そこで、iosアプリを開発するにあたって

「Swift」を本格的に学習するかどうかで迷いましたが、

Webに慣れきってしまった自分からすると

学習コストが少し高い

と感じて先送りにしてきました。

アプリの学習コストが高いと感じる理由

webエンジニアがページを構築する際に特に意識するのが

HTMLCSSになりますが、

アプリの画面作成時にその考え方が流用出来ないというのは

大きな障壁の一つかと思います。

Webで画面を作るときは、

HTMLタグにclass属性を付与してCSSを定義するれば

大抵のUIパーツは思うようにカスタマイズできます。

それに対して、アプリで画面を作ろうと思うと

UIパーツのタグの種類と呼び出し方を覚えることから始まるのでHTMLとCSSの概念はあまり役に立ちません。

Web系エンジニアこそReactNative

先に今回作成したアプリを紹介します。

https://apps.apple.com/jp/app/smart-todo/id1534562455?ign-mpt=uo%3D4

アイコンもスクリーンショットもダサダサですが、中身はしっかりとしたTODOアプリに仕上がっています。

主な機能

  • 「TODO」データの登録、更新、削除
  • 「TODO」ごとに「詳細情報」や「画像」を登録
  • カテゴリを登録と「TODO」を作成したカテゴリ別に振り分ける機能

もちろん、登録・更新したデータはアプリを終了しても再び立ち上げた時に前のまま残っている状態を維持しています。

この辺はReact Native独自の「Redux」という機能を使っています。

柔軟なアプリ設計のポイントになるのはRedux

アプリの醍醐味といえばスマホのローカルデータベース内に情報を保持しておき、その情報を呼びたい画面で参照したり、更新したり、削除したりとデータの編集ができることです。

「Swift」の場合は「UserDefault」というkey-value式のDBに値を保存することで半永続的にデータを保持し続けることができます。

ReactNativeの場合はこれと同じ概念で「store」というものが存在します。

この「store」に半永続的にデータを保持させる一連の仕組みを「Redux」といいます。

「Redux」はデータ操作の流れを「一方向」に限定し、余計なバグを生みにくくする仕組みだと認識しています。

これは「ReactNative」に限らず、最近のWebアプリケーション内のデータ保持の仕組みとして主流になりつつある考え方なので、ここで習得しておくに値する技術でした。(Vue.jsでいえば、Vuex、AngularでいえばNgRx)

ストレスなく実装できたこと

ReactNativeのコードブロックはHTMLとCSSの考え方を採用されていて、配置したタグのstyle属性に対して、CSSのようにパラメータを指定すればパーツを可変させたり動かしたりすることができます。

これはWeb従事者からすると大きなメリットで、HTMLでページを作る感覚でスマホページを生成することができます。

更に、CSSのレイアウトのロジックと同じファイル内にロジック部分の処理とHTMLチックなコードブロックを合わせて書く仕組みになっています。

「コンポーネント」というパーツ単位でファイルを管理する形で、Vue.jsの考え方とよく似ている印象でした。

まとめ

Web系エンジニアがアプリ開発を始める際に習得しておいて損は無いと思う技術に「ReactNative」を挙げました。

その理由としては以下の内容があります。

  • Webの考え方をベースにおきながらネイティブアプリの画面構築ができる。(HTMLとCSS)
  • 「Redux」という最近の主流であるstore管理の仕組みをアプリ開発をしながら学ぶことができる。(アプリに飽きた場合は「ReactNative」の考え方の元になった、本家の「React」にシフトすることができる。)

更に、ReactNativeは

クロスプラットフォームフレームワーク

といって「ios」と「Android」の開発を同時並行で行うことができます。

細かくはいくつか制約がありますが、2大プラットフォームに同時にリリースできるのは作業の簡略化ができてメリットが大きいと思います

僕と同じく

アプリ開発を始めてみたいけど、ネイティブ言語はとっかかりにくい

と感じている方には是非、ReactNativeを始めてみて頂きたいです

コメントを残す