Webのこと１ミリもしらんけどReactでWebアプリを作る

https://ja.reactjs.org/tutorial/tutorial.html
とりあえずこれやっていく。

やったあ！俺が勝者だ！

とりあえず一通りやった　正直何もわからんのでまたあした一周してから別のチュートリアルもやってみる。

https://zenn.dev/likr/articles/6be53ca64f29aa035f07
これやる（大学の教材らしい）
教材ということは今の大学生はわりかしプログラミングできるってことなのか（拡大解釈）

そういえば目標書いてなかった
タルコフで使える弾丸一覧表を作る　とりあえず動けばヨシ程度
余裕があったらグラフを生成したりしたい
期間は今日から１週間までには作りたい　まじで何もわからんけどどうにかなるやろ（）

目標の追記
作ったら必ず公開する。みんなに使ってもらえることはとても嬉しいので・・・

ちょっと前にASDFってやつを入れたのは覚えてるけどこれどうやってつかうかわからねえ
航空自衛隊みたいな名前だなってことしかわからん

土曜日の余暇がスライドして日曜になったのでやる

コンソールで打たなくてもVSCodeで直接サーバー起動できた　便利～

そんなAPIあるの？　あるわ・・・

Dog API
BirdAPIも誰か作ってくれ

Bulma便利やな～　クラス名を記述すればそのスタイルになるらしい
デザイン作るの大変だと思ってたけどこれはありがたい

動かなくなったぞ？？？？

npm ERR! code ENOENTってなんだ？

package.jsonの"dev"を右クリックして起動すると開くには開くけどjsxがよみこまれてないっぽい

とりあえず今のディレクトリは触らず別ディレクトリでもう一度チュートリアルをやってみよう

npm ERR!のやつはディレクトリ指定を間違えてただけだったが、引き続きjsxが読み込まれない

helloworldは読み込まれるけど犬画像になると読み込まれないなー

ついにはhelloworldすら読み込まれなく・・・

必殺最初からやるを発動しよう

チュートリアル蘇生させた

最初からやり直したらキチンと動くようになった　一安心

とりあえずここまでできた。（更新周りが動かなかった）
明日またやるか・・・ただ知識としては少し取っ掛かりができそうなくらいな程度蓄積された感じはある

冷静に考えたけど今タルコフアプリ作るのにAPIはいらないわ　犬サイトはタルコフアプリ完成させてからもう一度取り組む

今日はbulmaで見た目を作っていく

とりあえず参考になりそうなサイトをピックアップしてく
https://laboradian.com/bulma-sample-page/

https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55

あと本当にざっくりした図

備考：弾丸の種類は２６種（そのうち３種は固定機関銃等の入手不可なものやステータスが意味をなさないもの）
２×１２で並べていこうかな～

今回のレイアウトでそのまま作ってしまう可能性が高いのでReactも用意しておく
package.jsonを作るために

$ npm init -y

reactを用意するために

$ npm install react react-dom

viteも用意するので

$ npm install --save-dev vite @vitejs/plugin-react

今回のレイアウト作成のキモとなるbulmaをインストール

$ npm install bulma

package.jsonの中を

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.3.2",
    "vite": "^2.9.9"
  }
}

とする。ついでにMarkdown記法の練習もしておく（かっこよくてつい・・・）

途中までは犬ギャラリーと同じなので省略。

いいんじゃね～か～～？？？？？？

とりあえず見た目はヨシ・・・

わかったこと
htmlのタグの一部（table,list,button)
bulmaの使い方の一部

課題
何故かスマホ用位の幅になってしまってる。
要素をたくさん並べるためには？
テーブルを動的に生成するためには？

所感
大分想定と違う形になってますが、目に見える成果として出るのは嬉しいですね　このままと完成までもっていきたい

時間あんまないけどやる　今日の目標はテーブルをキチンと作ることです

https://ralacode.com/blog/post/react-table/
参考にするサイト

jQueryなら数行てテーブルが組めるよ！って書いてあって、Reactの微妙に苦手なのかな・・・と思うポイントだと思った

もうちょいいい方法ないか探そう

https://qiita.com/ozora/items/33e00dcaca372db04560
ここで紹介されてるmaterial UIよさそう

目が痛すぎるので休む。
今日の成果
ライブラリを知れた
次の課題
テーブルを作る

テーブルさえできればとりあえず公開できるんだよな・・・がんばろう

うーーーん　テーブルまわりが何もわからない・・・。　困ってしまった。

MUIってやつを使えば良さそうだけど、MUI使ってる人はほぼ全員typescript使ってるんだよな・・・
TS環境をつくればいいんだろうけど・・・　また悪夢の環境構築のスタートは勘弁だ

""完成させる""という目標がある限り、とりあえず６日でも手垢のついたJavascriptで走り切ったほうがいいのは間違いないので、Typescriptの環境構築と、MUIの組み合わせは次の課題で保留としよう
今はReactTableで乗り切ることにする

前回のReacttableの記事をもう一度やってみる

ドツボに嵌りそうになったとき、ここに書くのが一番の解決策になりつつある（実際何考えてるかを客観視しやすくて便利（？））

すごくマヌケな問題だとは思うんですが、英字キーボードで左シフトを小指を立てた状態で押してたら痛みが走るようになったので、ホームポジションをみなおしたほうが良さそう

とりあえず全部書いて見たけどうごかねーな・・・

テーブル機能がここまでハードル高いとは

ちょっとここから先は助けを呼ぼう

今日の進歩
自力じゃ無理な状態なのがよ～くわかった
完全にスタックしたときは基礎的なHTMLやCSSのことでも勉強してるのがよさそう（知識０すぎるので）

あとそろそろGitを使いたい　残り２０分はGitの使い方でもみとく

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics
とりあえずテーブルまわりを教えてもらえるまでは基礎を固めていく。先に実践、後に学習するという逆順勉強法です（？）

始めてからもう１２日も経ってるのか・・・
書いてない期間のやってたこと
・Typescript環境にしました
・それによりReactTableからMUIに変更しました
・Gitで草をはやしました

目標の下方修正
・タルコフのアモチャートアプリをワイプ後１週間までに作りたい

今日はJSで書かれたコードをTSにコンバートしていきます

コミットしてもGitに草生えないのなんでだ？

サンプルでこれだけ見た目のいいテーブルが提供されてるの強すぎる

今日の成果
Gitのコントリビュートがキチンと反映されるようにした（gitのemailsに隠したいとき用のEmailアドレスが提供されてるらしい　それをgit config --global user.email で変更すればよい）
MUIを試した

明日やること
https://iij.github.io/bootcamp/frontend/react/#コンポーネントを作成してみる
TSに移行したので一応チュートリアルをこなす。

やる

やった
今日の進歩
https://zenn.dev/ynakamura/articles/e562376735d398
これをみてPropとStateの概念を理解した（知り合いに解説していただきました　感謝）

export type TableEntry = {
  id : number;
  name : string;
  damage : number;
}

type Props = {
  entries : TableEntry[];
};

export default function DataTable(props:Props) {

こんな感じにPropsを宣言して、その中にデータを入れるための型として、さらにTableEntryという型を作り、TableEntry内にデータを格納するようにした。

過去のコミットログを無理やり変えた反動でリポジトリがおかしなことになっていたので作り直した

めちゃくちゃ細くなってしまったが、とにかくボタンを押したら表にデータが入るようになった。

この３日間タルコフのワイプ後の変更要素を調べていました　これはタルコフのアプリ開発に必要なこと・・・（言い訳）
ただやっぱりゲームをやっていると「この弾丸どの程度のダメージだっけな・・・」ってなるのでレスポンシブに表示できるものがほしいってなったので、やっぱり不便を味わうというのは大事かもしれない

とりあえず今日の進歩です

Mapの概念を手に入れました（連想配列というらしいですね）
それを利用して名前でデータを取り出せるようになりました
正規表現でデータを整形する方法を学びました

配列型の文字列を引数にしたので、種類を跨いだ比較もできるようにしました。（ただし機能としては未実装、散布図を生成するときに使います）

直近の課題としては
のこりの弾種を用意する
レイアウトをキチンと作る

更にその後の課題として
レスポンスが悪いのを改善する
散布図を作る

この辺をやっていきたいですね

とりあえずやってたこと
ヘッダーとフッダーの追加
MUIを全く理解できてないのでこの2つを追加するだけでもかなり苦労してる。レイアウトも左によってしまっているし・・・。（親要素が左によってしまってるからなのはわかってるが）
まさかこんなレイアウトでどん詰まりするとはおもわなかった

あ～！できた！！！！！！！！！！！！！！
keen-naiad-1d3923.netlify.app

https://keen-naiad-1d3923.netlify.app/
リンク貼れてなかった

１２月１４日から１月４日までの３週間の総まとめ
・特に前提条件なくても３週間でWebアプリは作れる
・とはいっても多少勉強したほうが楽そう（HTMLとCSS）
・Gitマジ便利　誰かに教わるときにリポジトリぶん投げればどうにかなる
・とにかく知識無いときはチュートリアルやっとけ

これからやりたいこと
つくったアプリに散布図をつける
アイテム毎のアイコンを用意する
新しいアプリをつくる（スプラトゥーンのギア計算機か、タルコフの貫通シミュレーターとか）
とりあえずMDNのチュートリアルで必要そうな知識をつける
https://developer.mozilla.org/ja/docs/Learn/Front-end_web_developer
後はアルゴリズム周りも知っておきたいですね

Webのこと１ミリもしらんけどReactでWebアプリを作る

～完～