React Native ~JavaScriptによるiOS/Androidアプリ開発の実践~ 第二章まとめ

前回はこちら

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践~ 第一章まとめ

さて、今回は二章をざっと追っていきます。

2-1

TypeScriptの説明ですね。今やフロントの開発では必須のTypeScript

TSを導入するメリットはもう様々な記事や書籍で既出なのでここでは割愛させていただきます。

まあ、僕も最近勉強したばかりなのでまるで使いこなせていませんが・・・

ただバックエンドとAPIを通信するときに受け取るJSONの型をモデルファイルなどで指定しておくと、それ自体がドキュメントになりえるのでそれだけでも導入するメリットがあると思っています。

2-2

TSの構文をざっと追っていきます。

TSを実際に触ってみたい方はこちらのサイトが良いかもしれません。

TypeScript Playground

基本的な型は多くの人が頭に入ってると思います。

個人的に理解に苦しんだのがジェネリクス。

型引数を使用したシステムらしいがRubyしか書いてこなかった筆者には謎of謎。

よく使う場面はuseStateかなあ。

const [ count, setCount] = useState<number>(0)  

こんな感じにかくとcountnumber型にできる。

あとよく使うのが(よく使う設計がそもそも良いのかわからないけど)

https://typescript-jp.gitbook.io/deep-dive/type-system/typeguard

これ読んでもらったら一発なんだけど引数のオブジェクトの型に応じて処理を変えたい時の実装方法が載ってる。

サンプルコードまんまだけど

/**  
 * Just some interfaces  
 */  
interface Foo {  
    foo: number;  
    common: string;  
}  

interface Bar {  
    bar: number;  
    common: string;  
}  

/**  
 * User Defined Type Guard!  
 */  
function isFoo(arg: any): arg is Foo {  
    return arg.foo !== undefined;  
}  

/**  
 * Sample usage of the User Defined Type Guard  
 */  
function doStuff(arg: Foo | Bar) {  
    if (isFoo(arg)) {  
        console.log(arg.foo); // OK  
        console.log(arg.bar); // Error!  
    }  
    else {  
        console.log(arg.foo); // Error!  
        console.log(arg.bar); // OK  
    }  
}  

doStuff({ foo: 123, common: '123' });  
doStuff({ bar: 123, common: '123' });  

引数のオブジェクトに任意のプロパティがあるかどうかわからない時オブジェクトの型判定の関数を作って処理の中でその関数に食わせてif elseで条件分岐するって方法。

これが便利なんだなあ。

やっぱnullundefinedに対して処理を呼んでエラーが発生したんじゃなんのためのTSだ!って話なので。

あ、紹介し忘れてたけどそもそもTSの設定(tsconfig.json)ってどうしたらいいの?って人はこれ読むといいかも。

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に

2-3

ES6の解説ですね。いやあ、良い時代に生まれたもんです。

特に解説するとこはなさそう。

letconstの使い分けとarrow functionさえかければなんとかなる!

async awaitは難しくてよくわからん。雰囲気で使ってる。Promiseのシンタックスシュガーらしい。

最後に

https://twitter.com/Katsukiniwa

こんなスポーツ系のサービスを一緒に開発したい人は僕のTwitterにDMください!

必ず返信します!

SportsLab | 最新のデータに基づいた最高のスポーツのニュースをあなたに