Webのこと１ミリもしらんけどReactでWebアプリを作る
xmiyabixとりあえずこれやっていく。
xmiyabix
やったあ！俺が勝者だ！
xmiyabixとりあえず一通りやった 正直何もわからんのでまたあした一周してから別のチュートリアルもやってみる。
xmiyabix
これやる（大学の教材らしい）
教材ということは今の大学生はわりかしプログラミングできるってことなのか（拡大解釈）
xmiyabixそういえば目標書いてなかった
タルコフで使える弾丸一覧表を作る とりあえず動けばヨシ程度
余裕があったらグラフを生成したりしたい
期間は今日から１週間までには作りたい まじで何もわからんけどどうにかなるやろ（）
xmiyabix目標の追記
作ったら必ず公開する。みんなに使ってもらえることはとても嬉しいので・・・
xmiyabixちょっと前にASDFってやつを入れたのは覚えてるけどこれどうやってつかうかわからねえ
航空自衛隊みたいな名前だなってことしかわからん
xmiyabix土曜日の余暇がスライドして日曜になったのでやる
xmiyabixコンソールで打たなくてもVSCodeで直接サーバー起動できた 便利～
xmiyabix
そんなAPIあるの？ あるわ・・・
xmiyabix
Dog API
BirdAPIも誰か作ってくれ
xmiyabix
Bulma便利やな～ クラス名を記述すればそのスタイルになるらしい
デザイン作るの大変だと思ってたけどこれはありがたい
xmiyabix動かなくなったぞ？？？？
xmiyabixnpm ERR! code ENOENTってなんだ？
xmiyabixpackage.jsonの"dev"を右クリックして起動すると開くには開くけどjsxがよみこまれてないっぽい
xmiyabixとりあえず今のディレクトリは触らず別ディレクトリでもう一度チュートリアルをやってみよう
xmiyabixnpm ERR!のやつはディレクトリ指定を間違えてただけだったが、引き続きjsxが読み込まれない
xmiyabixhelloworldは読み込まれるけど犬画像になると読み込まれないなー
xmiyabixついにはhelloworldすら読み込まれなく・・・
xmiyabix必殺最初からやるを発動しよう
xmiyabixチュートリアル蘇生させた
xmiyabix最初からやり直したらキチンと動くようになった 一安心
xmiyabix
とりあえずここまでできた。（更新周りが動かなかった）
明日またやるか・・・ただ知識としては少し取っ掛かりができそうなくらいな程度蓄積された感じはある
xmiyabix冷静に考えたけど今タルコフアプリ作るのにAPIはいらないわ 犬サイトはタルコフアプリ完成させてからもう一度取り組む
xmiyabix今日はbulmaで見た目を作っていく
xmiyabixとりあえず参考になりそうなサイトをピックアップしてく
xmiyabix
あと本当にざっくりした図
xmiyabix備考：弾丸の種類は２６種（そのうち３種は固定機関銃等の入手不可なものやステータスが意味をなさないもの）
２×１２で並べていこうかな～
xmiyabix今回のレイアウトでそのまま作ってしまう可能性が高いので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記法の練習もしておく（かっこよくてつい・・・）
xmiyabix途中までは犬ギャラリーと同じなので省略。
xmiyabix
いいんじゃね～か～～？？？？？？
xmiyabix
とりあえず見た目はヨシ・・・
xmiyabixわかったこと
htmlのタグの一部（table,list,button)
bulmaの使い方の一部
課題
何故かスマホ用位の幅になってしまってる。
要素をたくさん並べるためには？
テーブルを動的に生成するためには？
所感
大分想定と違う形になってますが、目に見える成果として出るのは嬉しいですね このままと完成までもっていきたい
xmiyabix時間あんまないけどやる 今日の目標はテーブルをキチンと作ることです
xmiyabix参考にするサイト
xmiyabixjQueryなら数行てテーブルが組めるよ！って書いてあって、Reactの微妙に苦手なのかな・・・と思うポイントだと思った
xmiyabixもうちょいいい方法ないか探そう
xmiyabixここで紹介されてるmaterial UIよさそう
xmiyabix目が痛すぎるので休む。
今日の成果
ライブラリを知れた
次の課題
テーブルを作る
テーブルさえできればとりあえず公開できるんだよな・・・がんばろう
xmiyabixうーーーん テーブルまわりが何もわからない・・・。 困ってしまった。
xmiyabixMUIってやつを使えば良さそうだけど、MUI使ってる人はほぼ全員typescript使ってるんだよな・・・
TS環境をつくればいいんだろうけど・・・ また悪夢の環境構築のスタートは勘弁だ
xmiyabix""完成させる""という目標がある限り、とりあえず６日でも手垢のついたJavascriptで走り切ったほうがいいのは間違いないので、Typescriptの環境構築と、MUIの組み合わせは次の課題で保留としよう
今はReactTableで乗り切ることにする
xmiyabix前回のReacttableの記事をもう一度やってみる
xmiyabixドツボに嵌りそうになったとき、ここに書くのが一番の解決策になりつつある（実際何考えてるかを客観視しやすくて便利（？））
xmiyabixすごくマヌケな問題だとは思うんですが、英字キーボードで左シフトを小指を立てた状態で押してたら痛みが走るようになったので、ホームポジションをみなおしたほうが良さそう
xmiyabixとりあえず全部書いて見たけどうごかねーな・・・
xmiyabixテーブル機能がここまでハードル高いとは
xmiyabixちょっとここから先は助けを呼ぼう
xmiyabix今日の進歩
自力じゃ無理な状態なのがよ～くわかった
完全にスタックしたときは基礎的なHTMLやCSSのことでも勉強してるのがよさそう（知識０すぎるので）
あとそろそろGitを使いたい 残り２０分はGitの使い方でもみとく
xmiyabixとりあえずテーブルまわりを教えてもらえるまでは基礎を固めていく。先に実践、後に学習するという逆順勉強法です（？）
xmiyabix始めてからもう１２日も経ってるのか・・・
書いてない期間のやってたこと
・Typescript環境にしました
・それによりReactTableからMUIに変更しました
・Gitで草をはやしました
目標の下方修正
・タルコフのアモチャートアプリをワイプ後１週間までに作りたい
xmiyabix今日はJSで書かれたコードをTSにコンバートしていきます
xmiyabixコミットしてもGitに草生えないのなんでだ？
xmiyabix
サンプルでこれだけ見た目のいいテーブルが提供されてるの強すぎる
xmiyabix今日の成果
Gitのコントリビュートがキチンと反映されるようにした（gitのemailsに隠したいとき用のEmailアドレスが提供されてるらしい それをgit config --global user.email で変更すればよい）
MUIを試した
明日やること TSに移行したので一応チュートリアルをこなす。
xmiyabixやる
xmiyabixやった
今日の進歩
これをみてPropとStateの概念を理解した（知り合いに解説していただきました 感謝）
export type TableEntry = {
id : number;
name : string;
damage : number;
}
type Props = {
entries : TableEntry[];
};
export default function DataTable(props:Props) {
こんな感じにPropsを宣言して、その中にデータを入れるための型として、さらにTableEntryという型を作り、TableEntry内にデータを格納するようにした。
過去のコミットログを無理やり変えた反動でリポジトリがおかしなことになっていたので作り直した
xmiyabix
めちゃくちゃ細くなってしまったが、とにかくボタンを押したら表にデータが入るようになった。
xmiyabixこの３日間タルコフのワイプ後の変更要素を調べていました これはタルコフのアプリ開発に必要なこと・・・（言い訳）
ただやっぱりゲームをやっていると「この弾丸どの程度のダメージだっけな・・・」ってなるのでレスポンシブに表示できるものがほしいってなったので、やっぱり不便を味わうというのは大事かもしれない
xmiyabix
とりあえず今日の進歩です
Mapの概念を手に入れました（連想配列というらしいですね）
それを利用して名前でデータを取り出せるようになりました
正規表現でデータを整形する方法を学びました
配列型の文字列を引数にしたので、種類を跨いだ比較もできるようにしました。（ただし機能としては未実装、散布図を生成するときに使います）
直近の課題としては
のこりの弾種を用意する
レイアウトをキチンと作る
更にその後の課題として
レスポンスが悪いのを改善する
散布図を作る
この辺をやっていきたいですね
xmiyabixとりあえずやってたこと
ヘッダーとフッダーの追加
MUIを全く理解できてないのでこの2つを追加するだけでもかなり苦労してる。レイアウトも左によってしまっているし・・・。（親要素が左によってしまってるからなのはわかってるが）
まさかこんなレイアウトでどん詰まりするとはおもわなかった
xmiyabixあ～！できた！！！！！！！！！！！！！！
keen-naiad-1d3923.netlify.app
xmiyabixリンク貼れてなかった
xmiyabix１２月１４日から１月４日までの３週間の総まとめ
・特に前提条件なくても３週間でWebアプリは作れる
・とはいっても多少勉強したほうが楽そう（HTMLとCSS）
・Gitマジ便利 誰かに教わるときにリポジトリぶん投げればどうにかなる
・とにかく知識無いときはチュートリアルやっとけ
xmiyabixこれからやりたいこと
つくったアプリに散布図をつける
アイテム毎のアイコンを用意する
新しいアプリをつくる（スプラトゥーンのギア計算機か、タルコフの貫通シミュレーターとか）
とりあえずMDNのチュートリアルで必要そうな知識をつける
後はアルゴリズム周りも知っておきたいですね
xmiyabixWebのこと１ミリもしらんけどReactでWebアプリを作る
～完～