Sweet Brissie life

ブリスベンでのサトウキビ博士研究生活の甘くない備忘録

React Native + Expo アプリ開発・プログラミングを振り返って

React Native + Expoでのアプリ開発をようやく初めて公開までこぎつけたので、記録アプリ開発の反省に加えて、これを節目としてこれまでのアプリ開発・プログラミング全体を振り返っておきたいと思います。

 

 

Life Report

Life Report

  • Naoya Takeda
  • Lifestyle
  • Free

apps.apple.com

 

 

今回のReact Native + Expoでの記録アプリの開発から公開までの一連の流れや各種実装例は下記のこれまでの記事を参照していただければ幸いです。

React Native + Expo 記録アプリ① expo-sqlite + react-native-chart-kit - Sweet Brissie life

React Native + Expo 記録アプリ② incorporating Hooks - Sweet Brissie life

React Native + Expo 記録アプリ③ React Navigation v5 - Sweet Brissie life

React Native + Expo 記録アプリ④ react-native-chart-kit - Sweet Brissie life

React Native + Expo 記録アプリ⑤ FileSystem & Sharing for csv export - Sweet Brissie life

React Native + Expo - WindowsでアプリビルドからAppストア申請まで!【2020年3月時点】 - Sweet Brissie life

 

また、今回のアプリはソースコードも全公開していますので興味があればぜひ。

GitHub - tkd708/Life-Report

 

 

 

 

記録アプリ開発の振り返り

まずはこんな感じのことやってみたいな、というぼんやりしたイメージから、具体的に個々の機能や挙動やらに落とし込んでいく。抽象的で初歩的なステップだけど、そもそも何のためにその機能なりを実装するのか、という点に直結するかなり重要な部分だと思う。これがそのままUI/UXの話になるんだろうな...本当に必要な機能が絞られ、説明しなくても自明で、操作の手数も少なく分かりやすい設計であるべき。

 

ともかく、個別の機能まで具体的に落とし込めたら、調べればその実装方法、大体は特定のライブラリが出てくるはず。ただ、React Native + Expoの場合はExpoによるライブラリの制限がそこそこあるけれど。公式のドキュメントや、実装例を載せてるページを見つけて、まずは簡単な例から試してみる。そしてその実装例を元に自分用に書き換える。その過程でほとんどの場合エラーが返ってくるので、一つ一つエラーメッセージで検索して解決していく。そうするうちにだんだん使い方が分かって自分用に応用できるようになっていった。

 

ここで触れておくと、Reactも基本的にjsで書くことになるので結局jsに慣れ親しんでおく必要があるんだということを今回で特に痛感した。配列やオブジェクトやといったデータタイプ、展開、.mapや.filterなどの処理、条件分岐(aka.三項演算子)、 非同期処理などなど...React Nativeのライブラリの使い方以前に、ライブラリへのインプットデータの処理のために当然ながらこれらが必須なんだと。今回で大分改善されたけれど、まだちょこちょこ使い慣れてない部分があるので早めにマスターしたい。

 

そうやって、求める機能・挙動を具体化し、適したライブラリを試し、jsを踏まえて自分に必要な形に書いていく。このプロセスで、大体の機能は実装できた。でもこれだと分からないのは、アプリ全体の構造(コンポーネント化とか...)が処理速度や再利用性の面で問題がないか、効率的か、といった点。あと可読性なんかも含めて、デファクタリングはさすがに経験者に意見を仰がないと厳しかったな。ちなみに今回のHooks導入の際には、既に使いこなしている友人に聞いて理解を助けてもらった。やはりその場で疑問を解決しつつ模範例を見れると相当速く取り入れられる。個々のライブラリはともかく、より概念的なものやコーディングの所作みたいな部分は先人が特にいてほしいね。

 

まぁそれでも大体、自分で必要なものを学びながらアプリを形作っていくことはできるようになったと思う。公開までもっていくというのも初回は苦労するけど一度できるようになればあとは同じプロセスをなぞるだけだから、2回目以降は見通しもついてグッと楽になる。今回は練習台だったからかなり妥協してとりあえず出してしまったけれど、これからUI/UXの視点でももっとこだわったりヒアリングなんかもして、だんだん完成度を高めていきたいところ。

  

 

プログラミング全体の振り返り

もうちょっと俯瞰してプログラミング全般への取り組みも振り返っておく。

 

ひたすらチュートリアル

React Nativeに触り始めたのが去年の8月からなので半年強、ReactやJavaScript、HTML&CSSからだと去年の5月末から(懐かしきProgate)なので10か月も経過している。もともと研究でRを使ってきているので完全にプログラミング初心者というわけでもなく。というのを踏まえると、特にここ数か月では本当はもっと学習プロセスを加速しておきたかったな、というところ。

 

ほんとうに最初の最初はProgateやJS Primerなんかで基礎文法を実行してみるだけ、有料会員のタイミングとかもあって確かちょうど1か月くらいそうやっていたはず。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

JavaScript Primer - 迷わないための入門書 #jsprimer

 

そこからしばらくはひたすらチュートリアルをこなしていた。個々の機能やライブラリに注目したチュートリアルを実際に自分の環境で動かせることを確認していく。基本は写経だけど、それでもエラーが出てくるのでその度に対処していく中でそのコードの仕組みや書き方を理解していく感じ。それによって、少しずつ自分のツールとして手馴れていく感覚が掴める。でもこの時は模範例をなぞるだけで、全然自分でコードを組み立ていくことはできなかった(今も"ゼロから"は書いてないし、多分これからも完全に白紙から始めることはないだろう)。せいぜい2つ3つくらいのチュートリアルを同時に実装する、くらい。これにも2か月くらいかかっていた。

 

自分のオリジナルに突入

それからついに、自分オリジナルのWebページやアプリをUIと機能両面のデザインから開発するところまできた。これまでのチュートリアルをひたすらなぞっていくのと比べて、この段階の方が圧倒的に新しいことを覚えたりエラーを解決したりする力がついて、理解も深まったと実感した。やっぱり実践的に、アウトプットベースで必要なものを取り込んでいく方が結局インプットするにも効果的というのは言語学ぶのと一緒で、まさしくプログラミング”言語”なんだな、というところ。

 

はじめてチュートリアルから抜け出して自分のアプリ開発をしてみたものと比べても、React(Native)そのもの、JS、各種ライブラリ、UIなど全体的に理解も深まって使いこなせるようになってきてた(はず)。このサイクルをいかに早く回していくかがプログラマとしての序盤の成長に直結してるんじゃないかな、と想像してる。

{React Native} 単語帳アプリ GoogleAPI + unstated + AsyncStorage - Sweet Brissie life

 

とはいえ最初から自分のオリジナル作るのは厳しくて、とりあえずチュートリアルをある程度の数まねるというのは必要なプロセスだったと思う。それに前述のように全体の構造や効率性のようなものは個別の実装では分かりにくいので、実践を積んでいく中でも時々体系的な学びが必要なんだろうな、とも感じている。

 

それから、プログラミング学習に特有なものとして、初心者にとっての開発環境の壁、デプロイの壁という2つのハードルがあるように思われた。実際のコードとにらめっこするんじゃなく、自分のパソコンの機能や設定や、ソフトウェア・パッケージのバージョン、サーバーサイド的な作業に対応しなくちゃいけないのはコーディングと違った苦労だったと感じる。

  

学習速度

さてここで、冒頭の加速しておきたかったな、という点に戻ってくる。ここまでの学習プロセスは悪くなかったと思うのだけれど、もうちょっとテンポよく進めたかった。具体的に言えば、できれば同じ期間でもう一つのアプリ開発をやりきっていたかった。〇〇ヵ月取り組んだ~みたいなのは目安でしかなくて、大事なのは実際の蓄積量のはず。それも、同じところでのエラーに延々と時間を費やすのではなく、多様な機能実装を経験し、あらゆるエラーを乗り越えてくこと。

 

土日で時々がっつり取り組めることはあれど、大体は平日に1時間ちょいなんとか確保して取り掛かってるような現状で、一つのエラーに対処するだけで一日分の取り組み時間を溶かしてしまうこともザラだった。一日で1エラー対応くらいだったらまだしも、同じとこで一週間ストップするようなら、それはさすがに経験者に助言を求められたら良かったかな、と思う。じゃないとモチベ下がってくしね。すぐ頼るようじゃ力がつかないとはいえ、自己解決能力を高めるにもそれなりに経験値が必要で、もう少し助けを求めたら同じ段階に早くたどり着けたかな。あとはそもそもの投入時間と頻度。

 

そんなこんなで、時間はかかってしまったけど独学の下地がついてきたことは自分で評価してやりたい。一方で、ある一定以上詰まったら相談できる、そして定期的に自分の進捗に対して方向性を示してくれる、 そんな相談相手がいるのが理想的だなと感じる段階です。

 

 

今後のアプリ開発・プログラミングに向けて

プログラミング始めたばかりの当時は小さいWebサービス開発や案件受託による小遣い稼ぎ、研究との組み合わせやサイドプロジェクトからの事業化、そんなささやかな野望を抱いていたみたい。

Reactがんばるぞい - Sweet Brissie life

 

今もこの辺の動機は変わってないけれど、一年弱経ってもまだその段階には至ってないし、なんならまだ距離感も掴めてすらないというのには、ちょっと厳しさを感じざるを得ない。 できたらいいな、と呟くんじゃなくやっぱり行動指針にまで落とし込まないとね。ここまで継続できただけでも偉いけど。これからの一年で技術の向上、自身を売り込むこと、サイドプロジェクト発足の3点に取り組みたい。

 

取り扱える技術を増やす

React及びReact Nativeでのアプリケーション開発というのは変わらないにせよ、その中で取り扱える幅を広げたい 。よく聞く、直近では具体的には(あんま具体化されてないけど)サーバーサイドとUIのあたりを補強したい。

 

サーバーが絡むものとして、Googleやその他のAPIとかFirebaseなどのサーバーサービスもほんのり試したことはあるけれど、まだチュートリアルレベルから抜け出せていない。それにDockerとEC2とかも実は手を出してみたけど、まだ簡単なものですらきちんと形にできずしばらく放置してしまっている。何よりこういうそれっぽい単語からいじってみただけでサーバーサイドの何たるかを理解してない現状を改善したい。

 

UIについては見た目と操作性の二点。裏でどんなに素晴らしいコードが書かれていても、ぱっと見がダサいと印象悪い。どんなに高度な機能が搭載されていても、操作性が悪かったり複雑だったりすれば使ってもらえない。配置や配色、操作の手数や明確さなどのデザイン要素を学びながら、シンプルかつ見栄えの良いアプリを作れるようになりたい。

 

目安として、そんな高度なものでなくて構わないから、1-2か月に一つ公開くらいのペースでもう少しアプリ開発の数をこなして様々な技術を取り込んでいきたい。

 

自身の売り込み 

最初の受注から完璧なプログラマなんてきっといない、みんな仕事をこなす中で必要なスキルを身に着けていくんだ。と信じて、今の拙い自分でも売り出していこう。どのレベルまでならこなせるのか、受託するには何が必要なのか、断られながらでも見定めて学習の指針にしていかなくては。

 

一応クラウドソーシングやバイト案件みたいなものも見ているけれど正直技術的にもキャパ的にも今の自分でこなせそうに思えるのには遭遇していない。けど、少しずつ詰めなくてはならない距離が想像できるくらいにはなったかもしれない。比較的軽いものから応募し始めてみてもいいかな。

 

あとはこのブログ含め、自分のやってきていることとプログラミングに携わっている知人友人にアピールして、小さな案件でも紹介してもらえるようになろう。今年中には、Webであれスマホアプリであれ実際に案件受注し始めてるようになりたいね。

 

サイドプロジェクト

今回はとりあえずオリジナルのアプリを作って公開までもっていく、というところまでだったけれど。次はもっとしっかり告知して実際にユーザーに使ってもらい、ユーザー数や利用率をトラッキングしながら数字が向上するようサービス改善していく、そんなサイドプロジェクトまで実施したい。

 

どんなアプリを作ってみたいか、という開発者目線のアプリ開発ではなく。誰のなんの問題を解決するのか、それによって何を実現するのか、というマーケット志向のアプリ開発に挑戦してみたい。

 

まぁ、そんなことはこれまでもぼんやり考え続けてきたんだけど、やっぱりなかなかこれだ!と思えるアイデアに至るのは簡単じゃないね。技術取得や案件受注だったら既存のものか依頼者の要望をなぞっていけば良いけれど、これは実質スモールビジネスを自分で始めるようなものだから。それでも今年中にテーマを見出して低コストなものを開発・告知し始められていたら良いかな。

 

 

おわりに

これまでのアプリ開発やプログラミング全般でやってきたことを振り返り、今後どのように取り組んでいくべきか、自分なりにまとめてみました。まだまだぼんやりしているなぁという印象はあるものの、自分のプログラミング学習の一つのマイルストーンとして、考えを整理できたかなと思っています。

 

これからプログラミングをやってみようかな、という方の参考にでもなれば幸いです。

 

そしてこうした段階を既に乗り越えてきた経験者の皆さんからのアドバイスをいただけたらありがたい限りです。