【React】文字ジャンプ率ジェネレーターを作るシリーズ始動！（環境構築編）

Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター！今回は初回ということで、既存のGitHubリポジトリをクローンして新規リポジトリを作る作業がどんな内容になるか記録しました。それではいきましょう！

【目次】

※参考：前回記事
【React】React + TypeScript + CSS in JSスターターキットを作る（アプリ作る人に俺はなる！） - クモのようにコツコツと

※参考：ReactでWebアプリを作るシリーズまとめ qiita.com

前回のおさらい

前回、Reactアプリ（React + TypeScript + CSS in JS環境）のスターターキットを作りました。

※参考：【React】React + TypeScript + CSS in JSスターターキットを作る（アプリ作る人に俺はなる！） - クモのようにコツコツと

今回からこれを元に実際のアプリを作っていきたく思います。

文字ジャンプ率ジェネレーターを作りたい（構想）

以前、文字の行長、行間、ジャンプ率についていろいろ検証した記事

※参考：【行長・行間・ジャンプ率】タイポグラフィ事始め（適度な箱組みとは） - クモのようにコツコツと

この時はFigmaを使って作った画面を画像ファイルに保存して掲載していた。

※参考：Figmaで完結する！Webサイト設計の流れ - クモのようにコツコツと

今回はブラウザ上の一画面で動的に行長、行間、ジャンプ率を変更するジェネレーターを作りたい。

---

以前、Tone.jsを使って動的にBPMを変えるビートプレイヤーを作った。

See the Pen tone.js-BeatPlayer by イイダリョウ (@i_ryo) on CodePen.

※参考：【Tone.js】いろいろなリズムが鳴らせるビート・プレイヤーを作った（BPM切り替え可能） - クモのようにコツコツと

これと似たような感じでinputタグ（range）を動かすと動的に変わるようなジェネレーターにしたい。

※参考：<input type="range"> - HTML: HyperText Markup Language | MDN

---

他にも過去のデザイン系の記事で当時、画像で表現していたものを動的に変更できるジェネレーターにしていきたい。

※参考：【デザインの基本】メリハリ、縦横比率、画面分割、タイポ、色相環、配色 まとめ - Qiita

Reactアプリのリポジトリをクローンする

前回と似た手順だが、まずはReactアプリのリポジトリをGitHubからクローンする。

まずリポジトリからクローン用のURLをコピーして

※参考：GitHub - ryo-i/react-app-started

git cloneコマンドでクローンする、と。

$ git clone https://github.com/ryo-i/react-app-started.git

---

おっと、同じ階層のフォルダ内に同名のフォルダがあるとこんな警告が…

fatal: destination path 'react-app-started' already exists and is not an empty directory.

致命的：宛先パス 'react-app-started'は既に存在し、空のディレクトリではありません。

---

最初からフォルダ名を変えてクローンしたい。クローン時に半角スペースでアプリ名を入れるといいようだ♪

※参考：git cloneしてきたプロジェクトの名前を変えてクローンしてくる方法 - Qiita

「jump-rate-generator」という名前にしよう。

$ git clone https://github.com/ryo-i/react-app-started.git jump-rate-generator

「jump-rate-generator」という名前でインストールされた！

npmパッケージをインストール

cdコマンドでアプリのフォルダに移動して

$ cd jump-rate-generator

npmパッケージをインストールする

$ npm install

「node_module」フォルダが追加された！

---

ローカルでアプリを起動

$ npm start

アプリが起動された！

まだURLも内容もスターターキットのまま

新規リポジトリにプッシュ

今後のために基本動作の手順をGitHubに記録したい。この時点でGitHubにコミットをプッシュしよう。

まず新規リポジトリを作成する。「jump-rate-generator」という名前にて

※参考：GitHub - ryo-i/jump-rate-generator

---

「.git」フォルダの「config」はreact-app-startedリポジトリと紐づいている

[remote "origin"]
    url = https://github.com/ryo-i/react-app-started.git
    fetch = +refs/heads/*:refs/remotes/origin/*

いったん「.git」フォルダを削除→再作成

$ git init

git remoteコマンドで「jump-rate-generator」リポジトリと紐づける

$ git remote add origin https://github.com/ryo-i/jump-rate-generator.git

「config」が変わった！

[remote "origin"]
    url = https://github.com/ryo-i/jump-rate-generator.git
    fetch = +refs/heads/*:refs/remotes/origin/*

---

あとはいつものようにコミットをプッシュする

$ git add .
git commit -m "ファイル一式アップ"
git push origin main

コミットがプッシュされた！

※参考：ファイル一式アップ · ryo-i/jump-rate-generator@956c41d · GitHub

README、ヘッダー、フッターのテキストを変更

「README.md」ファイルの内容を変更

# ジャンプ率ジェネレーター

文字ジャンプ率を動的に変えることができます

とりあえずタイトルと説明文だけ

※参考：タイトル変更 · ryo-i/jump-rate-generator@5ee67cf · GitHub

---

data.jsonでヘッダー、フッターのテキストを修正する

        "header": {
            "title":"ジャンプ率ジェネレーター",
            "text": "文字ジャンプ率を動的に変えることができます"
        },
    // 中略
        "footer": {
            "text":"©️jump-rate-generator"
        }

※参考：ヘッダーフッター変更 · ryo-i/jump-rate-generator@d54aab6 · GitHub

homepageのURLを変更

「package.json」のhomepageも変更する

  "homepage": "https://ryo-i.github.io/jump-rate-generator",

Control + Cでいったん閉じてから再起動

$ npm start

タイトルとURLが変わった！

※参考：パス名変更 · ryo-i/jump-rate-generator@36b5d9d · GitHub

GitHub Pagesにデプロイ

GitHub Pagesにもデプロイする

$ npm run deploy

---

GitHub Pagesでも表示された！

※参考：React App

---

GitHubのリポジトリに「gh-pages」ブランチ が作成されている

※参考：GitHub - ryo-i/jump-rate-generator at gh-pages

おまけ：TypeScriptは型推論だけでもメリットあり！

TypeScript環境はconst hoge: string = 'fuga';みたいに全ての変数に型を設定するイメージがあった。

しかしリファレンスを読むとこうある

あなたの書いたJavaScriptはTypeScriptです
TypeScriptが素晴らしい点は、型を利用するかどうかは、完全に任意（オプション）である、ということです。

型の設定は任意（オプション）である、と。

暗黙的な型推論(Type inference)
TypeScriptは、コーディングの生産性に対する影響をなるべく小さく抑えながら型の安全性を提供するために、可能な限り、型推論を行います。

かつ、暗黙的な型推論が働いてくれる、と。

※参考：なぜTypeScriptを使うのか？ - TypeScript Deep Dive 日本語版

---

実際に体験してみる。

まずletで変数testを設定し、1という数値を入れる。

let test = 1;

次にtestにaという文字列を入れてみると

test = 'a';

TypeScriptがエラーを表示した！

Type 'string' is not assignable to type 'number'. TS2322

最初に数値を入れたのだから、この変数は数値型だろう、と推測して、それと反する処理をエラーにしてくれたわけですな。（このTS2322などのエラーコードもエラー内容を調べる手がかりになる）

型推論、手軽でありながら安心感もあっていいなぁ♪（このテストコードは不要なので削除した）

最後に

ということで、今回はアプリの構想フェーズと環境構築編でした。あと、TypeScriptの型推論、便利ですね♪

環境構築の作業は今後、別のアプリを作成する時にも毎回共通な内容になると思うので、手順の記録を兼ねた一回になりました〜。

次回からは具体的な内容にようやく入っていきます。それではまた！

---

※参考：ReactでWebアプリを作るシリーズまとめ qiita.com