react-hooks で ビジネス文書作成アプリを作る

理由は README

github.com

branch

仕事のスキルに活かすため、master 一本でやらずに feature ブランチを作る

dev.to

• feature/integrate-swagger
• feature/JIRA-1234
• feature/JIRA-1234_support-dark-theme

• こうやってつけるらしい

git checkout -b feature/centerize-all
Switched to a new branch 'feature/centerize-all'  
git branch
* feature/centerize-all 
master

• これで作成

 * [new branch]      head -> feature/centerize-all

• head に送って PR できるのを確認（この後めっちゃ revert した）

---

中央揃え

kei-s-lifehack.hatenablog.com

• 別の記事に分けた
• 100vh place-items: center center で実現した

Form の作成

rangle.io

• これを参考に作る

Wiring up the form submit handler is now trivial also:

import React, { useState } from "react";

export function NameForm(props) {
  const [name, setName] = useState("");
  
  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${name}`)
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Frirst Name:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

• これを変えて

import React, { useState } from 'react'
import '../styles/global.css'
export default function NameForm() {

  const [name, setName] = useState('their_name');

  const handleOnChange = (event) => {
    setName(event.target.value);
  }

  return (
    <div className='main'>
      <input 
        type="text"
        value={name}
        onChange={handleOnChange}
      />
      <div>output: お世話になっております {name} 様</div>
    </div>
  )
}

• こうしたら、無事に useState の力で即座に setName して html に書き込む 仕組みができた
• しかし input と output の マージンが大きい、この CSS じゃダメだ

• まぁ、完成は見えた

deploy

• stable/deploy-github-pages ブランチを作る

npm i gh-pages
added 509 packages from 182 contributors, removed 173 packages,
...  in 102.192s  
+ gh-pages@3.1.0 

• gh-pages でかい

kei-s-lifehack.hatenablog.com

• この記事の通りに deploy する

kaede0902.github.io

• 動いた

• JS 無効化する html escape のも react-hooks が勝手にやってくれてた

  const [theirName, setTheirName] = useState('theirName');
  const [myName, setMyName] = useState('myName');

  const handleTheirNameOnChange = (event) => {
    setTheirName(event.target.value);
  }
  const handleMyNameOnChange = (event) => {
    setMyName(event.target.value);
  }

• thier と my で setHoge, handle on change をの関数を作った

    <div className='main'>
      <input 
        type="text"
        value={theirName}
        onChange={handleTheirNameOnChange}
      />
      <input 
        type="text"
        value={myName}
        onChange={handleMyNameOnChange}
      />

• input 2つにそれぞれ連携させた

      <div>
        output: <br/>
        お世話になっております {theirName} 様 <br/>
        HOGE 大学の {myName} です <br/>
        以上、よろしくお願い申し上げます。
        HOGE 大学 {myName}
      </div>

• 出力部で それぞれの state を 出した

• 2つとも即時反映してしたに反映されるようにできた

4 input

• 相手と自分の組織を反映させるようにした

calender input

material-ui.com

• date picker があった！

import TextField from '@material-ui/core/TextField';
      <Box my={1}>
      <TextField
        label="面接予定時間03"
        type="datetime-local"
        value={mtgDateThree}
        onChange={ e => setMtgDateThree( e.target.value ) }
      />
      </Box>

• いい感じになった

kaede0902.github.io

できた！！！

favicon/logo

別記事で紹介

残りタスク

• 面談候補日を減らしたり増やしたりできるようにする
• 表示領域では T が出ないようにしたり、曜日が出るようにする
• copy to clipbord のボタンを作る

目標

Slack の /remind、時間の指定方法がかなり覚えづらいけど、Slack remind creator を知ってからずっとこれ使ってる。これあるだけでリマインダー設定の気軽さが段違いでめちゃくちゃ便利。
ただ便利故にいつまでたってもコマンド覚えられないので良いのか悪いのか😇https://t.co/7vsqFxJ7GL pic.twitter.com/1GrU2XQS9g

— potato4d / Takuma HANATANI (@potato4d) October 18, 2020

• この slack のコマンドジェネレーターみたいに、さくっとコピーできるようにしたい
• また、ビジネス提携文も選べるようにしたい