にゃっつ@WEB制作エンジニアになる！

WEBデザイン大好き！4歳児双子男女を育てるママ！ 6年前に辞めたWEBの世界に戻りたく、猛勉強中！HTML/CSS/Javascriptをメインに学習中。最終目標はWebGLでのWEBデザインをする事！！漫画、アニメ、ダイビングが好き。#もりけん塾

学習ブログ：

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

おはようございます！

本日からもりけん塾に入塾させて頂きました✨

「JavaScriptなら任せろ！」と言えるように、
これからコツコツ積み上げます。

これからどうぞよろしくお願い致します。

@terrace_tech
#もりけん塾

[【公式】ピッコマ @piccoma_jp]

💗━━━━━━━━━━💗
好きな人と入れ替わった⁉️
あなたならどうする❓
💗━━━━━━━━━━💗

🍫応募方法🍫
1️⃣@piccoma_jp をフォロー
2️⃣回答を選択
【戻る方法を考える】→いいね❤️
【新たな生活を楽しんでみる】→リポスト🔄
2/12迄⏰

抽選で #ピッコマ 1,000コイン/ポイントが当たる❗💗━━━━━━━━━━💗
好きな人と入れ替わった⁉️
あなたならどうする❓
💗━━━━━━━━━━💗

🍫応募方法🍫
1️⃣@piccoma_jp をフォロー
2️⃣回答を選択
【戻る方法を考える】→いいね❤️
【新たな生活を楽しんでみる】→リポスト🔄
2/12迄⏰

抽選で #ピッコマ 1,000コイン/ポイントが当たる❗️

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今日の朝もく
✅言語チャレンジ10

mapとentries組み合わせれば解けそすというところまできた！！
まだ配列メソッドの組み合わせの発想がほんと足りない。。。

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅ 言語チャレンジ10

配列がほんと苦手なので克服したい・・・
特に多次元・・・
ただ前よりは少しイメージが湧くようになったのは半歩前進した気がする。

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

朝もく
✅ 課題21
引き続きcssをTailwind CSSに置き換え

先月全く学習に時間を取ることができず、
今すっごく焦ってる・・・
健康に気をつけつつ、
毎日10分でも隙間時間見つけて続ける！

#もりけん塾
@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅ tailwindcssのカスタマイズ

’@apply’で好きなクラス名でtailwindcssのクラスを集めたクラスを作成できることを知った！
＠applyをうまく使えばhtmlも長くならないし、慣れるとすごく便利かも。

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

昨日やった事
✅ 言語チャレンジ9　Approve
✅ viteのPrettierを導入、build時のアウトプットの設定

viteに完璧に移行してしまおうと思い、
週末は設定について調べました。

viteとtailwindcssでデザインカンプからコーディングをしてみる。

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

週末やった事
✅ tailwindcssを導入
✅言語チャレンジ8　Aprrove

言語チャレンジは難しく考える必要なかった！！
という感じで頭を柔らかくしたいとつくづく思う。。。。

tailwindcssをviteで導入。

nodeのバージョンで導入躓いたけど、
うまく動かせた！
#もりけん塾　@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

createDocumentFragment今一度見直す！
https://t.co/jjwnjlFlAm

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

週末やった事
✅課題20修正
課題20を@sae_prog さんと @chihiro7029 さんにレビュー頂きました！🙇‍♀️
ループの部分比較している配列のkeyが一致しているから、余計なループがあることに気づかせていただき、自分の頭固かったなと💦
tableの構造に沿った処理入れる事など勉強になりました✨
#もりけん塾

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今日やった事
✅課題20PR

codesandBoxで少しハマったけどなんとかPRできた！
最初findを使っていたけど、使う場合はreturnするほうががベター？と出たので、forEachに書き換えPR!!

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題20
作成した表をブラウザに表示する関数作成から、スタイルの調整等。
昨日のコードのリファクタリング��試みたけど、
配列とオブジェクトデータのkeyを照らし合わせて一致したら値を取得する方法が他で思い浮かばない💦

#もりけん塾　@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今日やっ���事
✅課題20
表の項目とデータのkeyが一致したら、セルの作成と値を入れ込む関数なんとかできた！！😂
けどこれでもかというぐらいループさせてるので、こらからリファクタリングする！！

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

GA4に置き換えるの中々大変💦
なかなか動かなくて困ってたら、
const使えなくて、varにしないといけないという罠だったw

constに慣れて、var使う事にもやっとしてしまう😅

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題20
データの取得、メインのテーブル作成関数は終わったけど、
取得したデータを見出しの項目（変数）と一致したら、セルに入れる部分の関数に悩み中。

配列少しは慣れたけど、
まだパッと書くことができない💦
書いて書いて配列に慣れないとな💦💦

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

週末やった事
✅ 課題20
課題20でやることを書き出すしから、jsonデータの作成まで。
表の項目部分をjsonに持たせるか悩んだけど、
jsonはあくまでもユーザーデー��のみで、それを加工するのが今回の課題と思い、JSの中に変数で持たせることに。

#もりけん塾
@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

課題19を@ruby443n さんと@chihiro7029 さんにみて頂��ました！

autoplayIDの変数letをオブジェクト化してアクセスする方法を教えて頂きました！

レビュー読んでて、今までレビューして貰った事が活かせて来ているかなと少し自信が持てました😆

#もりけん塾　@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題19の修正

タブボタンのイベントをタブモジュールに入れられるように考える。
記事数が0の時にタブを表示する様条件文を書いているので、
そこで関数実行したらと思いついたところで、子供が起きてきた。

夜起きれる体力残して日中過ごせれば。。

#もりけん塾 @terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題19PR
✅課題17のブログ

やっとPR出せました！！
あとはブログを少し書き進めました。
明日には公開する！！

#もりけん塾　@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題19
昨日できなかった部分がようやく解決した！
Promise.allの返ってきた結果、配列の処理が間違ってただけだった！
分割代入でそれぞれの結果を引数使って関数に渡し、解決。

後はいらないlogがないかチェックしてPRするのみ😂

#もりけん塾　@terrace_tech

[にゃっつ@WEB制作エンジニアになる！ @nyattsu72]

今朝やった事
✅課題19
動いたけど、tryの中で処理しないと動かないので、
原因を10分間だけ探りました。
連日寝坊😭

Promise.allを変数化して、
tryの中で.thenで繋げて処理しているのが悪い気がする。。。
もう一度Promise.allを調べ直す！

#もりけん塾　@terrace_tech

https://t.co/XjfYA4wQvI