【初心者向け】Typescriptで作れるアプリ3選｜おすすめの書籍も紹介

この記事の要点

  • TypeScriptはJavaScriptの上位互換言語
  • TypeScriptを使えば、初心者でも「いいね！」ボタンやTODOリスト、電卓アプリなどが作れる
  • JavaScriptをある程度使える人はそれほど苦労せず習得できるが、初心者の場合いきなりTypeScriptを始めると学習コストが高くなる

TypeScriptは、JavaScriptの上位互換言語です。

以前、TypeScriptの特徴や、JavaScriptとの違いについて詳しくご紹介していました。

TypeScriptの副業探しは困難！?将来性やJavaScriptとの違いとは？

TypeScriptを使うことで、さまざまなアプリケーションを作ることができます。

この記事では、TypeScriptの初心者でも簡単に作れるプログラムの例として、

  • 「いいね！」ボタン
  • TODOリスト
  • 電卓アプリ

の作り方、さらにおすすめの書籍についてご紹介します。

typescriptとは

TypeScriptとは、Microsoftによって開発されたオープンソースのプログラミング言語です。

世界で最もポピュラーなプログラミング言語と言えばJavaScriptですが、TypeScriptはJavaScriptの上位互換言語と言えます。

TypeScriptは世界中で大人気！

プログラミング言語のトレンドを発表している「Top languages over the years」2021年のレポートによると、TypeScriptは第4位にランクインしており、近年人気が高まっていることを示しています。

TypeScriptのメリットとデメリット

Typescriptのメリットとデメリットについてご紹介します。

TypeScriptのメリット

TypeScriptは世界的に人気なので、使うことによってさまざまなメリットがあります。

JavaScriptを使えれば学習コストが低い

一般的に、プログラミング言語を習得するためには、数か月という時間が必要です。

しかしTypeScriptはJavaScriptと互換性が高いため、JavaScriptをある程度使いこなせている人であれば、それほど苦労せず習得できます。

コンパイルによって実行前にエラーが分かる

JavaScriptと異なり、TypeScriptは実行前に必ずコンパイルをしてJSファイルに変換する作業が必要です。

そのため、構文的なエラーがあればコンパイル時に分かり、実行前にある程度のバグを洗い出すことができます。

可読性が高い

名称に「Type」と付くように、TypeScriptは「型」に特化したプログラミング言語です。

JavaScriptには型の概念がありませんが、TypeScriptは変数宣言などの際に必ず型を指定しなければなりません。

このような仕様のため、プログラムコードは可読性が高いものになり、第三者が読みやすいのが特徴です。

情報収集が容易

TypeScriptはとても人気があるため、世界中のさまざまな言語でTypeScriptに関する議論が活発に行われています。

ドキュメントやコミュニティも豊富で、困ったことや分からないことがあっても情報収集が容易である点がメリットです。

TypeScriptのデメリット

メリットがある一方で、当然TypeScriptを利用するデメリットも存在します。

日本語で読める情報が少ない

TypeScriptの情報はWeb上に数多く存在しますが、その多くは英語のものであり、日本語ドキュメントはまだまだ少ないのが現状です。

翻訳だけではカバーしきれない部分があり、難しいと感じてしまうかもしれません。

しかし、TypeScriptは今後も成長を続けると見込まれるため、日本語ドキュメントも徐々に増加していくことが期待されます。

まったくの未経験者には学習コストが高い

TypeScriptはJavaScriptの上位互換であるため、まったくのプログラミング初心者がいきなりTypeScriptを始めると学習コストが高くなります。

初心者はまずJavaScriptの学習から始め、ある程度使えるようになってからTypeScriptを始めるとよいでしょう。

バージョン管理が必要

TypeScriptはコンパイルによってJavaScriptに変換されます。

そのため、開発現場においてはTypeScript、JavaScript双方のバージョン管理が必要になります。

プログラミング言語は常に進化しており、バージョンが異なれば使える機能がまったく異なることもあります。

特に大規模開発においては、どちらかのバージョンが異なることによって、プログラムが正常に稼働しなくなる場合もあります。

そのため、開発メンバー全員がTypeScript、JavaScript双方のバージョンを完全に合わせておかなければならないのです。

TypeScriptで作れるもの、サービス例

TypeScriptで初心者でも簡単に作れるもの、そして実際にTypeScriptを使って作られたサービスについてご紹介します。

Reactを使った「いいねボタン」

TypeScriptは優れたエコシステムを有しており、さまざまなプログラム言語や実行環境、ライブラリと連携することができます。

今回はそのなかでもReact（リアクト）という人気のフレームワークを利用して、SNSやブログでよく見かける「いいねボタン」を作るプログラムをご紹介します。

最初に環境構築が必要です。

  • Node.js　･･･実行環境
  • npm　･･･Node.jsのパッケージ管理システム
  • yarn　･･･JavaScriptのパッケージマネージャ
  • プログラミングのためのエディター

実際のプログラムは以下のようになっています。

App.tsx

import React, { useState } from "react"; //ReactのuseState関数を読み込む（★追記）
import './App.css'; //CSSファイルを読み込む

function App() {
  return (
    <div className="App">
      <header className="App-header">  
        <LikeButton />
      </header>
    </div>
  );
}

//Reactでは自分で定義した関数名をタグとして使用できます
function LikeButton() {
  const [count, setCount] = useState(0); //ReactのuseState関数でカウント数を保持
  const handleClick = () => {
    setCount(count + 1); //countを1ずつカウントアップ
  };
  return (
    <span className="likeButton" onClick={handleClick}>{count} いいね</span>
    );
  }

App.css

export default App;

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

/* いいねボタン用*/
.likeButton {
  background-color: rgb(231, 76, 60);
  color: white;
  padding: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

ベースとなるReactのプロジェクト構成やファイルは、「npx create-react-app」コマンドで自動生成しています。

そのため、全体のファイル構成などを特に気にすることなくても、必要な処理を追記するだけでプログラムが完成するのです。

上の例では、実際にコーディングした箇所は、太字で書かれた部分のみです。

TypeScriptとReactを連携させると、定義した関数（function）をタグとして使えるようになります。

上の例では「LikeButton」という関数を定義し、のような形でタグとして使用しています。

動画を見ながら実際に作ってみよう！

Youtubeなどの無料動画でTypeScriptのアプリケーションを学習できます。

TypeScript＋Reactを利用してアプリケーションを作る動画をご紹介します。

実際に手を動かしながら学習してみましょう。

TypeScript＋ReactでTodoリストを作る

TypeScriptとReactでTodoリストを作るチュートリアル動画です。

動画に沿って手を動かすことによって、初心者も詰まることなくTodoリストが完成します。

Reactについての知識があることを前提に進められるので、「まだReactを触ったことがない」という人は、視聴前に軽く学習しておくことをおすすめします。

TypeScript＋Reactで電卓アプリを作る

Reactの公式サイトでサンプルとして紹介されている電卓アプリをTypeScriptで作ってみようというチュートリアル動画です。

プログラムを実際にどのように作りこんでいくかがリアルに体験できる、前後編の動画になっています。

初心者は進むペースがやや早いと感じるかもしれませんが、少しずつ止めながら手を進めていくとよいでしょう。

TypeScriptで作られているサービス

TypeScriptは、MicrosoftとGoogleの標準開発言語になっているほか、BMWやVMWareなどの大企業でも導入されています。

日本における導入事例としては、以下のようなサービスがあげられます。

  • BIZREACH
  • ベネッセiキャリア
  • Postfor
  • LINE NEWS

近年ではTypeScriptを習得しフロントエンド分野に乗り出すエンジニアも増加傾向です。

そのため、TypeScriptで作られるサービスは今後も増えていくことが予想されます。

TypeScript初心者におすすめの書籍2選

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

amazonで見る

TypeScript特有の「型」に関する基礎的な内容とその応用はもちろん、エラー処理の方法や非同期プログラミング、既存のJavaScriptプロジェクトをTypeScriptに移行する方法まで、幅広い内容を学習することができます。

初心者はもちろん、TypeScriptを使ったことのあるプログラマーにもおススメです。

TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語

amazonで見る

「JavaScript中級者にわかりやすいよう」に作られたTypeScriptの入門書。

1つ1つの項目を「XXをしてみよう」という形で独立させることで、初心者にも理解しやすく解説されています。

Javaなどオブジェクト言語を使ったことのある人には特に理解しやすい入門書です。

まとめ

JavaScriptの上位互換言語であるTypeScriptを使えば、さまざまなアプリケーションを作ることができます。

今回ご紹介したのは初心者向けの簡単なものですが、TypeScriptのスキルが上達すれば、さらに幅広いアプリケーション作成も可能です。

将来性の高いTypeScriptを使いこなし、フロントエンドエンジニアとして活躍の場を広げていきましょう。