新しい技術を習得する際に心がけた事(ReactNative編)

0. はじめに

初めまして、小山田湧亮です。
現職の自社プロダクトがwebサイトとネイティブアプリでリリースされているところ、元々はwebサイトのバックエンド側を担当していたのですが、スキル不足からフロント側(主にネイティブアプリ)の改善要望に応えられない事をもどかしく感じていました。

そこで、jsもよくわからない状態から、2ヶ月ほどで、仕事としてネイティブアプリの改善要望にも応えられるように独学したので、その軌跡と実際に開発に取り掛かる際に気をつけていた事を以下にて記載していこうと思います！

特に、技術的なところを除いて、黒で強調しているところが、心掛けた事、気づいた事です。

1. ReactNativeでスマホアプリ開発に取り掛かるまでの軌跡

1.1 前提

まず、前提として、提供されていた情報は下記でした。
● 使用技術は、React, Redux, Typescript, ReactNative
● 本番環境の技術関連の情報として下記
● ● ReactNativeを使う際にはexpoを使う
● ● バックエンドがRailsなのでReactNativeとRailsを繋げるAPIが存在する

● 上記技術を習得する際に、先輩エンジニアに参考として最初に教えてもらった書籍は下記
● ● React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発
● ● Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
● ● 入門 React ―コンポーネントベースのWebフロントエンド開発
● ● React Native＋Expoではじめるスマホアプリ開発

次に、私の学習の指向性として最初に書籍をやるよりも簡易なwebコンテンツを先にやった方が比較的スムーズに学習が進められる事を知っていたので、最初は書籍ではなく簡易なwebコンテンツをやろうと考えていました。

また、学習した内容は簡易でもいいからPullRequestにまとめて、とにかく手を動かそうと思っていました。そして、初めて学ぶ知識に関しては最初は分からないが故に難しいと感じるものだと思っていたので、学習を進めていく上での難しいという感情に関してはあまり気にしないように心掛けていました。

1.2 最初の1ヶ月

上記の前提の上で、まず最初の1ヶ月は下記を1周しようと考えていました。
(1) progate
● js部分
● react部分

(2) reactチュートリアル
● 自作PullRequest(以下、PRと呼ぶ)

(3) reduxチュートリアル
(i) 環境構築
● create-react-appが勝手にやっている部分を知っておきたかった為
● ● npm, webpack, babel (あくまで参考)
● ● yarn, webpack, babel (あくまで参考)

(ii) 理解・実装
● カウントアプリ(参考)
● ● PR
● TODOアプリ(参考)
● ● PR

(4) APIサーバー経由でreact + reduxを使ったCRUD
(i) udemy
● PR

(5) 書籍: React、Angular、Vue.js、React Nativeを使って学ぶはじめてのフロントエンド開発
(i) typescript部分
(ii) APIサーバー部分をfirebaseで作成
(iii) 上記firebase + typescript + reactでselect, create実装
(iv) 上記firebase + react-native + reactでselect, create実装 (react-native run-ios, react-native run-androidの場合)
● ios
● android
● ● PR
● ● ● 色々調べたが、実機確認は断念。

1.3 最後の1ヶ月

最初の1ヶ月では理解よりも手を動かす事を優先していたのですが、予想よりも進捗が悪かったので、2ヶ月目は若干ペースを上げています。
しかし、一度網羅的に基礎的な事をやったので比較的スムーズに進みました。
下記にて基礎的な事を復習しつつ、応用的なものを行い、2ヶ月目は手を動かすのと同時に理解する事も意識していました。

(1) ReactNative導入(expo start の場合)
● udemy
● ● PR
● ● ● リリースは審査とか時間かかりそうだったので止めた。それ以外の実装部分はやった。

(2) react + redux 実践編 + α
● 書籍: React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
● ● redux 基礎 (第5章まで)
● ● ● PR
● ● redux 応用 (第10章)
● ● ● PR

● 電子書籍: TypeScriptで始めるつらくないReact開発 第2版 (参考PR)
● ● ざっくりとreact + redux + typescript部分 (だいたい分かるので)
● ● ● PR
● ● react + redux + typescript + redux-saga部分
● ● ● PR

(3) 電子書籍: React NativeとExpoで作るiOS・Androidアプリ開発入門 - これ一冊でストアリリースまで進める本格的入門書 を主に使用 (主にFlexBox, WebView, react-navigation, react-native-elementsを再度把握)。
● 電子書籍 1/3 : FlexBox, FlatList, WebViewなど基本的なコンポーネントの理解
● ● PR
● 電子書籍 2/3 : 主に、react-navigationの理解
● ● PR
● 電子書籍 3/3 : 主に、react-native-elementsの理解
● ● PR
● ● 書籍: React Native＋Expoではじめるスマホアプリ開発 も適宜参照。

2. ReactNativeでスマホアプリ開発に取り掛かってから

2.1 前提

上記を一通り終えた時点で、自社プロダクトのフロント側のコードを見た所、ある程度理解できたので、3ヶ月目から改修作業に入りました。

その際に、前提として自社プロダクトのフロント側がDucksというデザインパターンでディレクトリが切られている事やざっくりとした画面と機能の関連性などを教えてもらいました。

その上で、段階的に実務レベルでも対応できるようにしたかったので、下記の段階のうち、初級から中級レベルまで行けたら、実務レベルで対応できると判断するようにしました。

(1) 初級レベル
● フロント側の修正だけで収まるような、簡単な画面のテキスト変更など

(2) 中級レベル
● フロント側だけでなく、バックエンド側も含めた機能追加 (ex) 画面追加)など

(3) 上級レベル
● 基本的にweb上に存在する情報は英語が記載されており、情報源が少なく、英語の公式ドキュメントを解読しながら、独自で行うもの (ex) プッシュ通知機能の追加)など

2.2 初級レベル

上記の学習を行えば難なく対応できました。
3つぐらい、関連する要望を満たしたら中級レベルに挑戦してみました。

2.3 中級レベル

PRにて指摘はあるものの、根本的な間違いは犯さず、リファクタ観点での指摘が大部分を占めていました。このレベルも3つぐらい挑戦しました。
指摘を受けた結果、バックエンド側と同様にコードの責任の住み分けなどを意識する必要性を認識しました。

3. 最後に

今回、自社プロダクトを開発する事業会社に入って初めて、新しい技術を習得する機会がありましたが、この経験を通して、次回以降新たな技術を習得する際にも臆せず行える自信がつきました。

また、フロント側、バックエンド側と異なる領域であってもコードの責任の住み分けなど共通する部分があったりと新たな気づきもあったので、エンジニアとして経験が浅いうちは勝手に担当領域などを決めずどんどん挑戦していけたらなと思いました。

そして、以上を通じて、新たな技術を学ぶ前に、いつかやりたい技術に関する情報をどこかに逐一ストックしておく事で、新たな技術を新たに習得しやすくなる事に気づきました。
これは次回以降試していきたいと思います。

以上、比較的簡易な形ではありますが、私の観点で新しい技術を習得する際に心がけた事を記載しました。