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系のせい)
HTMLの話
buttonタブにクリックしたときのリアクション,関数を登録している
今回はEditボタン作ったけど,関数は用意していないのでまた今度(また今度はやらないフラグか!?)
liタグで行の要素として扱ってってしてる
Reactの話
thisでこのコンポーネント,propsで親,参照元の要素を取得
this.props.~~って書いたものは参照元(ToDoList.js)でパラメータとして教えないといけない
ToDoListオブジェクト
console.logはバグ取りの残り
HTMLの話
ulタグでこの中リストですよ〜ってしてる.さっきのliと連動してます
Reactの話
{...e}でlist要素の全部を子オブジェクトに教えてってしてて
オブジェクトごとにクリックした時の関数を登録してる.
(map関数使うときkeyが必要らしいけど,なくても大丈夫っぽいな(動作確認してます)>>ツールでwarningが出ていたので追加しました)
Appオブジェクト
長い,,,
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アカウントが出来たとかなんとか
メカ機構開発からサーバーアーキテクチャまで多くのことができるようになったけど
これで行動しないってのは世の中に対して不利益なんじゃないか,悪なんじゃないか,間違えなんじゃないかって思ってしまう
正しく生きたいと思うけど,起業したら就活でキャリアよりも優先した事柄を手放すことになるから怖い(自分の人柄の問題だけど)
こんなことを最後に書いたのは気圧が低いせいだな (今日は普通な気がするけど)
てか土曜日台風来るのか やめて,,,やめて〜
次回はGoogle Cloud Platform(GCP)でアプリをクラウドサーバーにアップしてみます
k8sも使ってみるかな