no-image

ReactNativeとTypeScriptとAtomicDesignでTodoアプリを作った

この度、仕事としてReactNativeをバリバリ開発することになったので、 その勉強がてらTodoアプリを作ってみました。

経緯

Reactでアプリを作ってみたりしてたこともあり、ReactNativeでアプリを開発するベンチャーに働かせてもらえることになったので、その練習のためになにか作ってみようと思いました。

React、Reduxの概要は知っているものの、ReactNativeやTypeScript、AtomicDesignなど、 大規模アプリの設計や、効率的なデバッグ作業のための思想やツールを学ぶ必要が出てきました。

列挙するとキリがないのですが、それらの使い方やそもそもそれを使う必要があるのかを考察するためにも自分で作って見る必要があると感じました。

ReactNativeの教材を探しているとUdemyのものがあったので、これを利用してReactNativeの概要を知ろうと思いました。

しかし、ただ作るだけではもったいないので、この動画内では紹介されていないものも積極的に使ってみました。 今回、完成したものがこちらです。 みんな大好きToDoアプリです。

コードはGihubで公開しています。
【参考】mrsekut/react-native-base-templates at todoApp

上述した動画では4つのアプリを作ってみようとのことなので、1つずつ作ってみることにしました。

その1つ目がこのToDoアプリです。
最初から思いつく全部のツールを導入するのは大変なので、重要そうなものから順々に入れていくことにしました。

少し注意なのですが、上のgithubで公開しているコードはちゃんと動きますがtsのエラーを消しきれていません。
できるだけ消したのですが、すでに次のアプリの制作に取り掛かっているので、そちらの開発と勉強を優先しています。

これを作るにあたって導入、勉強したもの

  • TypeScript
  • storybook
  • prettier
  • tslint
  • styled-components-ts
  • AtomiDesign
  • package.json
  • async storage

簡単に一つずつ見ていきます。

TypeScript

JavaScriptに型を導入したMS製のプログラミング言語です。
僕はこれまでJSとPythonという思っきし動的型付けの言語ばかり触っていたので型を付けるのは現在進行系で苦労しています。

まだ、恩恵をすごく受けているわけではないですが、良い機会だと思ってゴリゴリ書いています。
TSを書く上で、型や型定義ファイルなどの概念の理解や、コンパイルの設定に対する理解が必要になりました。

 

  • 型定義ファイル
  • tsconfigの設定

【参考】ReactNativeにTypescriptを導入する | mrsekutの備忘録

Storybook

ReactやVueなどコンポーネント指向の開発の場合に重宝します。
コンポーネントごとに開発ができ、作ったものをカタログのように参照することができます。

【参考】ReactNativeにStorybookを導入する | mrsekutの備忘録

styled-components-ts

styled-componentsでスタイルを追加していますが、TypeScriptと併用するとコンパイルエラーが出ることがあるので、 それに対処するためのツールです。

【参考】ReactNativeにstyled-components-tsを導入する | mrsekutの備忘録

コード整形

コード整形のためにprettierと、tsのlinterとしてtslintを導入しました。
これらの使い道や設定方法、エディタとの連携を知る必要がありました。
これのおかげで、少々雑にコードを書いても保存時に自動で整形してくれたり、 エラーをしてしくれるのでたいへん助かっています。

【参考】きじせいさくちゅうです

AtomicDesgin

これはツールではなく、設計方法です。
再利用性を高めて、ファイルが煩雑にならないように工夫しながらコンポーネントを作成していく方法を学びました。
これは有名な設計方法の中の一つですが、開発を進めているとなかなか理想通りにはできないみたいで、 調べているといろいろ、「こんなふうに工夫しました」という記事に出会います。
それらも参考にしつつ、自分たちの設計と相性の良いものを模索していきたいです。

【参考】きじせいさくちゅうです(未定)

node.jsに対する理解

これまでReactで開発をしていたのですが、monacaのおかげか、なぜかpackage.jsonを全く意識しないまま進めていました。
今後、開発を進めていくに当たり必須の知識となるのは目に見えているのでこの機会に勉強しました。

AsyncStorage

これはReactNativeで用意されているものの一つです。
WebでいうLocalStorageのようなものですね。
ドキュメントを読めば簡単に使えました。
内部の仕組みをいまいち理解していないので、今後 ReactNativeのドキュメントはもちろんのこと内部のコードも見ていく必要が出てきそうだと感じました。

所感

いろいろと知らないことが多すぎるので、どこから調べたらいいのか苦労しました。
こういうのの難しいところは、 「TypeScript」の記事はたくさんある 「ReactNative」の記事はたくさんある でも、「TypeScript+ReactNative」の記事は少ない、というようなことが頻繁に起こることです。
まだこの2つの組み合わせならたくさんあるのですが、3つ組み合わせて調べたり、マイナーなものも絡んでくるともう大変です。

わからないことがあったときの僕の情報の取得する順番は大まかに、

  1. とりあえず日本語記事を探す
  2. 英語記事を探す
  3. 公式のドキュメントを読む
  4. Githubのissueを読む
  5. Githubでそれらを組み合わせているコードを読む
  6. issueを立てる。質問をする。

てな感じです。

多分このあと(もしくはもっと手前に)、「内部のコードを読む」というのも必要になってくると思います。
すでに英語は絶対に避けては通れないものとなりました。
英語は苦手なのですが、ひいひい言いながら頑張って読んでます。
意外と大学受験時の勉強が効いてて、「よく頑張ったな高3のときのぼく!えらい!」と度々思います。

今後

勉強を動画内で紹介されていたのはGithubのAPIを使ったリポジトリ検索アプリです。
さらに様々な設計思想やツールを取り入れつつ、開発してみようと思います。
もう結構導入してるやんってなるかもですが、まだまだめちゃくちゃ少ないです Reduxは?ページ遷移は?デバッグは?テストは? まだまだ勉強しなければいけないことがたくさんありそうです。

知れば知るほど、「自分はまだまだなぁ」と思えてきますね。
奥が深くて楽しいです。