Reactでカウントアプリを作る[2022年版]

はじめに

qiita に

Reactでカウントアプリを作る - Qiita

と言う記事があって、コピペして今ふうに書き直してデプロイできたのでご紹介。

https://kalz2q.github.io/react-countapp/

ソースは

https://github.com/kalz2q/react-countapp/

で、ローカルで動かすにはこれを git clone して、cd して npm install , npm start すれば動きます。

直したところ

元記事では countApp と言うプロジェクト名でしたが、

npx create-react-app countApp --template typescript

としたら今はもうプロジェクト名に大文字はダメです、と言われました。react-countapp に変更。

元記事では React の Component を import して props でデータを管理していましたが、これだと型管理がめんどうなので今ふうに useState を使って props を使わないようにしてみたところ、エラーが消えた。

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const onIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const onDecrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return (
    <div>
      <div>{count}</div>
      <div>
        <button type="button" onClick={onIncrement}>
          +
        </button>
        <button type="button" onClick={onDecrement}>
          -
        </button>
      </div>
    </div>
  );
};
export default App;

感想

ほとんど Elm のコードのようにシンプルになりました。気持ちがよい。

TypeScript + React + GitHub で文字の回転をデプロイ

create react で作ったサンプルサイトでは React のロゴがくるくる回っている。 ロゴでなく、テキストを回すことが出来るかどうかの実験。出来た。

https://kalz2q.github.io/react-animate/

ソースは

https://github.com/kalz2q/react-animate

にあります。ローカルで動かすにはこれを git clone して、cd して npm install , npm start すれば動きます。

なにかデザイン的に使い道がありそう。

TypeScript + React + GitHub で三目並べ tic-tac-tow をデプロイ

React 本家のチュートリアルでマルバツ三目並べを作っていて、それの TypeScript バージョンをネットの記事を参考にしながらようやく動きました。遊んでみて下さい。

https://kalz2q.github.io/react-tic-tac-toe/

ソースは

https://github.com/kalz2q/react-tic-tac-toe/

にあります。ローカルで動かすにはこれを git clone して、cd して npm install , npm start すれば動きます。

主に

React公式チュートリアルをTypeScriptで(Hooks導入以後)

の記事をコピペしたのですが、環境の違いなどで出たエラーはすべて TypeScript と React が指摘してくれたので楽ちんでした。

記事にも書いてあったと思いますが、
1. TypeScript で型システムであること
2. React で class を使わずに済むようになったこと
でとてもわかり易くなったと思います。

TypeScript + React + GitHub について

今の考え

elm という言語があって、簡単にサイト(ページ)が作れる。
関数型で型チェックをしてくれるのでアイデアを適当に書くと、コンパイラーがエラーを出してくれてそれを直している内に出来上がる。
javascrip にコンパイルされる。
ところが!!!、少し慣れてくるとツールがない。
javascript で普通に出来ることをやるのにとってもめんどう。

で、react ですが、いろいろあった javascript ライブラリーのひとつで一番使われている。
typescript は javascript に型チェックを導入したもの。
と言うことは typescript と react を組み合わせれば理想的な環境が出来る。

ところが!!!、react の本家に行くと説明が jsx と言う記述方法で書かれるのを前提にしている。
と言うことは、これを typescript に翻訳しながら読まなければいけないと言うことか?

と思っていたのですが、

  1. jsx は javascript でサイトを書くのを簡単に書けるようにしたもの
  2. typescript は サイトの記述部分は jsx で書く
  3. 従って、typescript から入門して問題ない

なので、TypeScript + React + GitHub でアイデアをデプロイしながら学習を進める、という勉強方法を取りたいと思う。

TypeScript + React + GitHub で Hello World をデプロイ

前回はいいねボタンをデプロイしましたが、今日は Hello World をやってみました。

ハローワールド https://kalz2q.github.io/react-hello-world/

とりあえず問題なく出来たと思う。

データベースを使わない静的なサイトならばこれで十分ですね。簡単だし。

次は React 本家のチュートリアルで勉強して、もう少しい複雑なのをやってみよう。

TypeScript + React + GitHub でいいねボタンをデプロイ

Reactの初期ページをGitHub Pagesで公開(デプロイ)する方法

という記事がありました。

一方、別のところに

TypeScript 入門 Reactでいいねボタンを作ろう

と言う記事があって、

これらを組み合わせれば

いいねボタンが簡単に公開できるね!!!! と思いついてやってみたら出来ました。

いいねボタン https://kalz2q.github.io/react-likebutton/

ハートマークをクリックすると数字がカウントアップします。

  1. 具体的にはまずローカルで作って
  2. npx create-react-app リポジトリ名 --template typescript
  3. npm start で動くことを確認する
  4. 次に githubリポジトリを作り紐づける
  5. ローカルに戻って
  6. npm install gh-pages --save-dev
  7. package.jsonを編集し"homepage"と"scripts"配下の"deploy"を追加
  8. "homepage": "https://githubのアカウント名.github.io/リポジトリ名/",
  9. package.json の scripts に次の行を追加する。
  "scripts": {
    "deploy": "npm run build && gh-pages -d build",
  },
  1. npm run deploy
  2. 後始末: ローカルの内容を github で見れるようにするため
  3. git add . git commit git push して保存する

ロードバイクで転倒

ロードバイク歴も数十年になり、転倒もたくさん経験があるのですが、最近雨の日に歩道をゆっくり走っていて歩道の点字帯というのかな黄色いやつで滑って結構危険な転び方をしました。後遺症はないけれど頭から落ちた。

バイクは修理にだして、部品待ち状態です。今は数ヶ月かかるって。なのでつらつらこれからどうするか考えているところです。

歳も歳、なので、もう少し安全な乗り物にしたい。

ロードバイクのタイヤは24mmだったのですが、これで歩道のデコボコは危険。修理のついでに35mmにしたいと言ったら28mmまでが限界で、28mmでも結構違うということなのでこれは出来上がりを待って試してみよう。

ブレーキはリムブレーキの一種のキャリパーブレーキだったのですが、リムブレーキは雨の日は制動が効かない。そもそも雨の日にロードは自殺行為という説もあるけど、相当ゆっくり走っていたし、今回の事故の直接的な原因ではない。機械式でいいのでディスクブレーキにしたいが換装は無理みたい。

グラベルロードという砂利道でも走れるロードバイクが流行りだそうで、それにしてみようかと考えている。グラベルロードはタイヤ幅が35mm以上だし、今はディスクブレーキが普通みたいなので自分の希望に合っている。

今の考え。とりあえず修理を待つ。フレームを残して全取替えみたいな修理で10万円以上かかる。出来上がったら安全走行で100kmくらい走ってみる。安全に走れるようならそれで良いのだけれど少しでも危険なようだったらグラベルロードを物色する。

先日バイデン大統領が自転車で転んだというニュースの動画をみたらTREKクロスバイクで、クロスバイクなんて日本の高校生しか乗っていないと思っていたのでおどろいた。トウクリップがひっかかって転んでたね。止まっているときだったので怪我はなかったみたい。

自分の場合、クロスバイクに魅力を感じないのと、姿勢が固定されるので長時間乗れない。ドロップハンドルにしたい。