Zenn
📘

TypeScript いいねボタンを作ってみた

に公開
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

新しく始めるインターンシップでTypeScriptが必要そうだったので，Type Scriptについて勉強しています．
そこで、このType Scriptのイベントを通して，

  • その勉強での気づきとをまとめること
  • 自分の学習成果をアウトプットするための成果物を作ること
    を目標にまとめます．

TypeScript 勉強したこと

https://typescriptbook.jp/tutorials/react-like-button-tutorial
このサイトを少しずつ読みました．

1 TypeScript 基本のキ 実行環境構築

1.1 TypeScript関連ツールの整理

  • tsc typescriptファイルをjavascriptファイルにコンパイルする
  • Node.js　javascriptファイルを実行する
  • ts-node tscとNode.jsを繋ぐ

1.2 ts-nodeの実行構成

VSCodeでTypeScriptを実行したかったのですが，かなりの曲者でした．

1.2.1 問題の発端

  • VSCodeの実行ボタン（Code Runner）で .ts ファイルを実行しようとしたら、Unknown file extension ".ts" エラーが発生
  • ts-node --esm や node --loader ts-node/esm などのコマンドも試したが、うまく動かず SyntaxError
  • TypeScriptコードが .ts として認識されず、Node.js にそのまま渡っていた

1.2.2 問題の解決策

  • グローバルでts-codeが入っていたことが主要因．ローカルのnpxで動作させた
  • そこにCode Runnerが入っていたため，launch.jsonを無視して実行していた
    　→これからはF5で実行しよう！
launch.json
{
  "type": "node",
  "request": "launch",
  "name": "Run TS with ts-node",
  "program": "${file}",
  "runtimeExecutable": "npx",
  "runtimeArgs": ["ts-node"],
  "args": ["${file}"],
  "console": "integratedTerminal"
}

とりあえず色々あったけど，これからはCode Runnerとlaunch.jsを使い分けようと思います．一件落着．

2 Reactでいいねボタンを作ろう

2.1 Reactとは?

ウェブアプリケーションのUIを簡単に作るためのパッケージ(Facebook社)．
ReactはTypeScriptとセットで使われることが多いが，Reactが本当に優秀なUI作成パッケージだからです．
UI：User Interface いいねボタンなどのユーザとアプリの架け橋となる機能
TypeScriptだけでもUIを作ることは可能ですが，コードが煩雑になりがちで保守性が悪くなってしまう恐れがあります．

2.2 Reactの特徴

  • 仮想DOM(document object model)
  • 宣言的UI(cf. 命令的UI)
  • コンポーネントベース

2.3 Vite（ヴィート）

"超高速な開発用サーバーと、効率的な本番ビルドを提供するツール"
らしいです．
ViteはTypeScriptとJSXをデフォルトでサポート．

2.4 Vite + React

手順に従い，以下のひな形画面を表示完了．

import "./App.css";
 
function App() {
  return (
    <>
      <h1>TypeScriptはいいぞ</h1>
    </>
  );
}
 
export default App;


何でもできそうな気がしてきた．

2.5 tsxファイル,XMLファイルについて

閑話休題．

  • tsx : jsxに対応．jsの中でXMLをかけるようにしたファイル．XMLって音楽のソフトいじる時に出てくるけど、ここでも出てくるのか．
  • (補足)XML : Extensible Markup Language
  • MusescoreのXMLは「MusicXML」という仕様に従った、楽譜の構造を記述するためのXML．
  • XMLとHTMLは厳密には異なるが，似たようなものと考えてよい

2.6 関数を用意する

App.tsx
import "./App.css";
function App() {
  return (
    <>
      <LikeButton />
    </>
  );
}
function LikeButton() {
  return <span>いいねボタン予定地</span>;
}
export default App;
  • cssのクラスを割り当てるためにclassNameを設定
App.css
.likeButton {
  background-color: rgb(231, 76, 60);
  color: white;
  padding: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}


//アプリのディレクトリで
npm run dev

はえ～，すっごい．平安時代からタイムスリップしてきたみたいだ．頑張って環境構築した甲斐があったといえます．
JavaのSwingでボタンを作る経験をしたことがあるので，ActionListener的なことをするんだろうなーって思ってました．
↓javaでやるならこんな感じ．

LikeButton.java
import java.awt.event.*;
import javax.swing.*;

public class LikeButton {
    private static int count = 0;

    public static void main(String[] args) {
        JFrame frame = new JFrame("Like Button");
        JButton button = new JButton("Like");
        JLabel label = new JLabel("♥ 0");

        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                count++;
                label.setText("♥ " + count);
            }
        });

        JPanel panel = new JPanel();
        panel.add(button);
        panel.add(label);

        frame.add(panel);
        frame.setSize(800, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

javac LikeButton.java
java LikeButton


無事にボタンを押せるようになった．このボタン，どっかに着けて遊びたいな．
↓ちなみにjavaで作ったボタンはこれ．ダサすぎる．全く心が躍らない．

Discussion