WebでToDoアプリを作ってみた～ローカル環境編～

これからはwebアプリの時代（？）ということで，webアプリの勉強としてToDoアプリを作ってみました．

web系のHello Worldは掲示板かToDoっぽいな

作ったのはこんな感じ

日付を英語にしたい　gifで表示したい！！

使ったのはNode.js + React，言語としてはJavaScript

JavaScriptは初めて使ってみたけど，なんとなくオブジェクト指向って感じがしたりPythonでCUIによるモジュール追加とかをしていたから困らなかった．

プログラムやフレームワークは1つ学習すれば他の学習コストが低減すると思う．

Node.jsとは

自分の復習として

フロントエンド（画面に表示されているやつ）＞＞HTML（内容）+CSS（レイアウト）+JavaScript（動き）で構成

バックエンド（掲示板やTodoなら文章や画像を管理していたり，いろんなところから表示するためのデータを集めてくれるやつ，サーバーエンド）＞＞PHP or Java or Python or ...

とまぁ，バックエンド言語いろいろありすぎ問題やフロントエンジニアでもサーバー側をやりたい（学習コスト減らしたい）問題からサーバー側もJavaScript(JS)で書こうとなって

Node.jsが誕生しました

シングルスレッドで複数の処理ができるとか軽量とかのメリットがあります（一応ハードウェア系のブログなのでほどほどにしておきます）

Reactとは

Facebookが作ったJSライブラリでサーバー側からUIを操作できるやつ（サーバーサイドレンダリング(SSR)）

React-nativeやElectronを使ってデスクトップやモバイルアプリが作れる（らしい）

まだ勉強中なので勘弁して，，，

プログラム解説

まずは図解

複数のTodoオブジェをToDoListでまとめて， ToDoListとMakeToDoをAppオブジェにまとめて，indexに表示する

indexってのが，ユーザーがブラウザ（Chromeとか）で見るページで，node.jsを使ってサーバーサイドでスクリプトを書き換えているイメージ

ToDoオブジェクト

いや大文字と小文字混ぜるのやめよう．オブジェクトってクラスってイメージだから（C系のせい）

import React, { Component } from 'react';
import './ToDo.css';

export default class ToDo extends Component {

  render() {
    return(
      <li className='todo'>
        <div>
          <span>{this.props.content}</span>
          <button id={this.props.id} onClick={this.props.onClickEditListener}>Edit!!</button>
        </div>
        <div>
          <span>{this.props.deadline}</span>
          <button id={this.props.id} onClick={this.props.onClickCompleteListener}>Complete!!</button>
        </div>
      </li>)
    }
  }

HTMLの話

buttonタブにクリックしたときのリアクション，関数を登録している

今回はEditボタン作ったけど，関数は用意していないのでまた今度（また今度はやらないフラグか！？）

liタグで行の要素として扱ってってしてる

Reactの話

thisでこのコンポーネント，propsで親，参照元の要素を取得

this.props.~~って書いたものは参照元（ToDoList.js）でパラメータとして教えないといけない

ToDoListオブジェクト

import React, { Component } from 'react';
import ToDo from './ToDo';

export default class ToDoList extends Component {

  render() {
    console.log(this.props.list)
    const html = this.props.list.map((e) => {
      return(
        <ToDo
　　　　　　key={e.id}
          {...e}
          onClickCompleteListener={this.props.onClickCompleteListener}
          onClickEditListener={this.props.onClickEditListener}
        />)
    })
    console.log(html)
    return(
      <ul>
        {html}
      </ul>
    )
  }
}

console.logはバグ取りの残り

HTMLの話

ulタグでこの中リストですよ〜ってしてる．さっきのliと連動してます

Reactの話

{...e}でlist要素の全部を子オブジェクトに教えてってしてて

オブジェクトごとにクリックした時の関数を登録してる．

（map関数使うときkeyが必要らしいけど，なくても大丈夫っぽいな（動作確認してます）＞＞ツールでwarningが出ていたので追加しました）

Appオブジェクト

長い，，，

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MakeToDo from './MakeToDo';
import ToDoList from './ToDoList';

export default　class App extends Component {

  constructor() {
    super()
    this.state={
      list: [],
    }
  }

  render() {
    return (
      <div className="App">
        <h1>What to do ?</h1>
        <ToDoList
        list={this.state.list}
        onClickCompleteListener={(e) => this.onClickCompleteListener(e)}
        onClickEditListener={(e) => this.onClickEditListener(e)}
        />
        <MakeToDo
        onSubmitListener={(e) => this.onSubmitListener(e)}
        />
      </div>
    )
  }

  onSubmitListener(e) {
    e.preventDefault();
    const id = this.setIdByDate();
    const content = e.target.content.value;
    const deadline = e.target.deadline.value;
    const new_list = this.state.list.slice()

    new_list.push({
      id: id,
      content: content,
      deadline: deadline
    });

    this.setState({
      list:new_list
    })
    e.target.content.value = '';
    e.target.deadline.value = '';
  }

  onClickCompleteListener(e) {
    e.preventDefault();
    const new_list = this.state.list.slice();
    const index=this.state.list.findIndex(element=>element.id==e.target.id)
    new_list.splice(index, 1);
    this.setState({
      list:new_list
    })
  }

  onClickEditListener(e) {
    e.preventDefault();

  }

  setIdByDate(){
    const date = new Date()
    return date.getTime()
  }
}

HTMLの話はいいかな

Reactの話

constructor()でToDoを書いていく配列を初期化

<ToDoListとか<MakeToDoとかで，表示しながら，オブジェクトに関数とか表示するものを教えてる

App.jsで関数とかToDoリストを管理しています

onSubmit関数

idは時間を使ってどんなことがあっても一つ一つを識別できるようにしてます

contentとdeadlineは内容と期限なんだけど

e.targetはonSubmitを呼んだ要素，つまりMakeToDoの<form>を指していて

その中の"name"=contentとdeadlineの値(value)を引っ張ってきてます

あとは今の配列コピーして，新しいの追加して，オブジェクトの要素stateに登録してます．

最後に入力したところを綺麗にしましょう．

onClickCompleteListener関数

各ToDoオブジェクトにこの関数が登録してあるんだけど，どのToDoが呼んだのか分からないといけない．

そこでindex=~~って処理をしてます

Appで記録しているlistの中でid(element.id)がe.target（呼んだ要素，ToDoの<button>）が持つidと一致するのを探して，一致したらインデックスを返します

elementはlist配列の一つの要素として働く．

ToDo.jsを見てもらうとわかるんだけど，<button>でidを登録していて，これによってどのToDoオブジェか分かる仕組み

MakeToDoオブジェクト

HTMLがメインなやつだから下のソースファイル見ておくれ，，，

ソースコードはgithub

github.com

最近本田圭佑選手のGitHubアカウントが出来たとかなんとか

メカ機構開発からサーバーアーキテクチャまで多くのことができるようになったけど

これで行動しないってのは世の中に対して不利益なんじゃないか，悪なんじゃないか，間違えなんじゃないかって思ってしまう

正しく生きたいと思うけど，起業したら就活でキャリアよりも優先した事柄を手放すことになるから怖い（自分の人柄の問題だけど）

 こんなことを最後に書いたのは気圧が低いせいだな （今日は普通な気がするけど）

てか土曜日台風来るのか　やめて，，，やめて〜

次回はGoogle Cloud Platform(GCP)でアプリをクラウドサーバーにアップしてみます

k8sも使ってみるかな