SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact Native入門

静的型チェックを行うTypeScriptで品質を担保しよう

基礎からはじめるReact Native入門 第12回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ソースコードが大規模になってくると、データ型を定義して静的型チェックを行うツールを重宝するようになります。React Nativeでは、Microsoftが提供しているTypeScriptというプログラミング言語を利用することで、JavaScriptコードの中に型を記述することができます。Propsや変数、引数などに、どのように型を定義するのか、型を定義することでどんな恩恵が得られるのかを見ていきましょう。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15.4
  • Node.js 14.2.0/npm 6.14.4
  • expo-cli 3.20.9
  • expo 36.0.2(React Native 0.61)
  • React 16.9.0
  • TypeScript 3.9.2

複数人で開発を行う難しさ

 仕事としてアプリを作る場合、分業や引き継ぎなどをしていく内に、1つのコードベースに複数の人間が関わることになるのは、珍しいことではありません。後から入ってきた人でも作成の意図が読み取れるコードもあれば、なかなか意図が読み取れないコードもあるかもしれません。

 単独のコードでは意図が読み取りづらい例を見てみましょう。前回のメモアプリでデータの保存に使っていたsave関数は、リスト1の通りに定義されていました。

[リスト1]第2引数の型はDateかnumberかstringか
const save = async (text, createdAt) => {
  // (略)
};

 第2引数のcreatedAtには、どんな型の値が渡されるでしょうか。名前から日時を表していることは分かりますが、日時はDateでもnumberでもstringでも表現できます。どれが正しいかはこの関数の実装を読み、呼び出し元でどんな値を渡しているのかを見に行くことで、調べることができるでしょう。実装次第では少し広い範囲を調べることになるかもしれません。

 string型であることが容易に想像できる、第1引数のtextにも罠があります。呼び出し元の実装次第では、nullundefinedが渡されてくるかもしれません。呼び出し元の実装を熟読するか、この関数の中で丁寧に条件分岐を行い、文字列ではない値に対処できるようにしておく必要があるでしょう。

 コードベースが大きくなればなるほど、こういった手間はじわじわと開発効率や品質に影響を及ぼします。常に修正箇所の周辺コードを正しく読解できれば良いのですが、実際には、先入観や体調不良による見逃しがあったり、メンバーの経験不足があったりして考慮漏れは発生します。

静的型チェックでコードの意図を伝える

 こういった課題への対策の1つとして有効なのが、型注釈を追記したコードに対して実行前にスキャンをかけて、データ型の齟齬を発見しようとする仕組みである、静的型チェックという分野です。型注釈の例を挙げてみましょう(リスト2)。

[リスト2]型注釈でコードの意図を明示する
const save = async (text: string, createdAt: number) => {
  // (略)
};

 リスト1との違いとして、引数の右側にコロン区切りで : string: numberといったデータ型を明示しています。これが型注釈です。この型注釈の記述を頼りに、静的型チェックのツールでは「関数内でtextstring型として扱われているか」や「save関数を呼び出すとき、第2引数にnumber型を渡しているか」などのチェックを行います。

 こういったチェックをコードベースの一部ないし全体に行うことで、人間が目視で確認するべきコードの量を減らし、効率化や品質の向上を目指すことができます。

次のページ
TypeScriptとは

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact Native入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12432 2020/06/23 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング