Reactでアプリ制作の道のり　〜初日〜

1日目（今日は2日目・・・）までの進捗の記録。

まずはここまでの経緯となにしてるのか、念の為に書き留めます。

経緯

学歴なく、経験もなく、単純にやりたいという一心でプログラミング言語を勉強し始め、
いよいよ仕事にしたいなと考えて具現化に至りました。

環境

Mac M1
Reactは確か17?
でWebpackを使用
（なんでこうしているのか自分でもよくわかりませんが、自分の環境でReact構築できたものをgithubに載せ、それからクローンして使用しています。）
https://github.com/shiori-111/React-env
（これはど素人がネットを参考に作成したものです。CSSなどはなく、簡素なものです）
あとCSSが読み込めず、不慣れなstyled componentを使用

あまり勉強してこなかった（というか容量が悪い）ことを晒し、
二度と同じ過ちをしないための戒めと、
私も初めて！という方の希望となればいいなと思います。。。
そしてこれ関連の投稿は今後何度も修正が入りますのでご了承ください。

いざ実践
↓↓↓

1日目の進捗

• 1. アプリの作り方（というかReactどんなだっけ？）となり、MicrosoftのラーニングセンターでReactの復習
  2. 目的を確認（今回作成したいのは「◯○」のようなもの）
  3. 円の描き方
  4. CSS組み込み（できなかった）
  5. styled componentsに変更
  6. 円とその上に乗るハンドル部分の描画や位置関係に大苦戦

詳細について

—————————————————————————————-
1.Microsoftのラーニングセンター

progate以外のツールを使用することを考えておりませんでしたが、
こんなにも優れたものが無料で提供されているんですね！（おどろき！）
https://learn.microsoft.com/ja-jp/training/paths/react/

スタートアップの環境が整っており、即始められます！
多分なにもわからなくても、昔の自分に教えたいくらい・・・

ただ、最後？らへんにある無茶振りが、
果たしてあーいうことだったのか不明ではありますが。
なんとなく達成感があったのでgithubに残しました。
https://github.com/shiori-111/MicrosoftLearning

2.目的の確認

これはあくまでもお示しするために用意した項目ですが・・・
あるものをWebアプリで作成します。
恐らく、まだこの世に誕生してないか、普及してないだけか、なものなのであえて伏せています、、

3.円の描き方

長いことプログラミング言語を勉強していますが、
CSSで円を描くなんて1ミリも考えつきませんでした・・・
初めて知り、とても驚きました(^ ^;)
そしてコードも単純でビビりました。

4.CSSをReactに組み込む

円を書くなら必要だと思い、Microsoftのラーニングでさっきやったやつ！！！
と意気込んだのも虚しく、
なにかとエラーが表示されにっちもさっちもになり、、、
そもそもCSSなんで組み込むの〜と調べてみると。
他にも色々種類があり、その中でも一番書きやすく、扱いやすいやつがいました。

5.それがstyled components

らしいんですが、初見だとやはりわからない！！！
ただでさえ基本もおぼつきませんが、
たしかにシンプルだけど、
私の書き方が良くないのか、
縦に長いと正直見にくいな（読む気失せるな）と感じてしまいました。

6.円などの描画に大苦戦

円を描けることも知らない人は、
円以外のものの書き方も、位置の指定もできません。
結局なんとなく形になった時点で眠りにつくことに（おやすみなさい）

次回はもう少し見やすくできるようWordpressも勉強しなくてはですね！
では🖐️