今日したこと 再インストールしたVSCodeの動作確認 昨日アンインストール、再インストール、拡張機能や初期設定をやり直したVSCodeの動作確認を、Reactでやりました。 この時の課題が、保存をかけるとフォーマット整形されて、無効にしてもそれがおこなわれることだったのですが、今回は無事きちんと整形が行われずに済んでよかったです。

メンタリング：21：10～22：13 今夜はメンターさんと１時間あまりのメンタリングを行いました。 Udemyの教材が増えて財布事情が厳しくなっている中、どうすればいいか。集中しすぎて夜0時を過ぎてしまうこと、XのDMから東京の企業からDMが来たがZOOMで面談すべきかどうか。様々なことを話しました。 特に最後の東京の会社とのweb面談に関して、メンターさんから「X上で29日間の積み上げを行っていること、Reactに関する愚痴をはいていること」などを話したうえで「DMを送ってきた会社は怪しいと思う」と言われました。 しかし、同時に「社会経験として面談をするのは悪くない」とも。 「1～2か月テストを行うと書かれていますが、どのようなことをするんですか？」「東京のIT事情はどうなっていますか？」「派遣された御社の社員はどのような仕事をしていますか？」など、様々な質問の提案をしていただいて「やっぱりプロのエンジニアは違うなあ」と思わされたのでした…。 あとは改めて行ったVSCodeの環境構築が上手くいったかどうかですね…。ちょっと不安です。

今日したこと VSCodeのアンインストール VSCodeの再インストール VSCodeの初期設定 読んだ記事 【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】 プログラミング作業を効率化するVS Codeの拡張機能30選 Visual Studio Codeをアンインストールする方法【Windows11】 金曜日に発生したエラーがそうやっても直らないため、結局VSCodeをアンインストール、再インストール、初期設定と拡張機能を追加することに。 一度VSCodeをアンインストールするとき、消さないといけないフォルダが2つもあるなんて思いもしなかったです。そしてフォルダの中のファイルは消したものの、フォルダは削除できず…。ああ。 そしてアンインストールの時間が長い！長すぎて何かしらのエラーが発生したのではないかと思っていました。アンインストールの間、パソコンがフリーズしていたからです。 ですがアンインストールは無事完了し、検索して初期設定を進め、インデントやJavaScriptに関するエラーを示す拡張機能、ESLintやLive Severなどといった拡張機能を入れて、デフォルトの文字を大きくして…。意外と拡張機能をたくさん入れていました。 果たしてReactをうまく進められるか…心配です。

今後の課題 React入門(youtube) 読んだ記事 React 18ではReactDOM.renderではなくcreateRootを使う https://iwb.jp/react-18-uses-createroot-instead-of-reactdom-render/ 今日は動画を見ながら、初めてReactのフォルダをいじりました。動画の通りにデフォルトのsrcディレクトリにあるファイルを全部削除、新たにApp.jsとindex.jsを作成し、動画の通りにコードを書きましたが…動画が古く、バージョンが現在の18のものとは異なるため、記事を参考にしてコードを動画のものとは違うコードに書き換えました。 また、保存をかけるとコード整形する機能のせいか、JSXの部分がHTMLに空白ができるといったエラーが発生しました。そこを直すために設定やコード整形に関する拡張機能を無効にしましたが、エラーは変わらずに保存をかけるとやはり空白ができます。 それとメンターさんから教えていただいて知ったのですが、npm startというコマンドはReactの全てのファイルを読み込むものなんですね！だからApp.jsのファイルでターミナルを開き、npm startをかけてもReactのページではindex.jsのエラーが出たんですね…。 果たしてReactで成果物はできるのか…？相変わらず自分の理解力に自信がありません。 問題が解決する日は来るのかな…？

今日したこと のび太君でもわかるReact入門(youtube) 今後の課題 React入門(youtube) 今日は朝から昨日の課題であるNode.jsの動作確認のため、コマンドプロンプト指示して作ったディレクトリとファイルに励んでいました。 メンターの方から昨日からヒントをいただいていたにも関わらず、自分が動作確認のためのディレクトリの理解にかなりの時間がかかってしまいまい、迷惑をかけて申し訳ない限りです。 「もしかして私、エンジニアに向いてない？」 こんなことを環境構築に成功した後も考えています…。

今日の課題 のび太君でもわかるReact入門(youtube) [windows]GitHub環境構築(プロゲート) 今日は日をまたいで学習しました。Node.jsの環境構築にいささか失敗したのではないかと思しき場面に遭遇したのですが、バージョン表示にはNode.jsもnpmも成功しました。 ただ、動画通りにはうまくいかず結局今日は「今日したこと」ではなく「今日の課題」とすることに。Node.jsの環境構築をする傍ら、git bashのインストールから、やはりこちらもコマンドを使いましたがgitを使ったレポジトリの作成完成には至らず。トホホ…。 コマンドがこれからの課題の1つになりました。

今日したこと Command Line 基礎編(プロゲート) volta(Node.jsバージョン管理ツール)　インストール 今日は初めてコマンドに関して初めて学びました。ディレクトリや移動が難しくて理解しにくい…。 コマンドは基本英語で展開されるため、英語を学びなおしたいなと思いました。

今日したこと React III（プロゲート） React IV（プロゲート） 記事 React Developer Tools(Qiita) Progate修了！コンストラクタやthisなど、JavaScriptの復習ともいえる内容でした。 すべて終えましたがReactを理解できたか不安です…。

今日したこと JavaScript演習 配列操作編(CODEPREP) React I（プロゲート） React II（プロゲート） 今日は初めてProgateでReactに触れました。 importやexport defaultsなどといったJavaScriptで触れたことが出てきて「おやおや？」と思っていたら,、呪文のようなReactのインポートやprepなる謎めいた言葉も初めて聞いて「あれ？」と感じて難しさを思い知りました。「thisによる継承」も出てきて基礎の大事さを思い知りました。ちなみに配列と思しきものを見て「だから配列が大事なんだ！」と、配列がなぜ課題として出てきたのかを知らしめられました。 React思ったより難しい…。

JavaScript入門 ES6編(CODEPREP) JavaScript演習 配列操作編(CODEPREP)（途中まで） 配列操作が思いのほか難しくて２問程度しか解けませんでした！ どうやったら配列をうまく使いこなせるようになりますか？

動画 小学生でもわかるasync/await/Promise入門【JavaScript講座】(youtube) 【JavaScript】非同期処理を完全に理解する（初心者向け）Asynchronous JavaScript Course For Beginners(youtube) 記事 Fetch APIでデーターを取得しながらPromiseとasyc/awaitを学んだまとめ 非同期処理というものを今回初めて知りました。私が学んでいたJSはES6だったため、ES8で新たに登場したasyncやawaitで関数の処理を待たせることができると知って意外でした！！！ JavaScriptも日々進歩しているんですね…。

模写コーディング 頭痛がする状況でやったためか、煮詰まってしまいヒントをいただいたにも関わらず「ソースコードを見ていいですか？」って言ってしまいました。 反省！

10/2 約3時間 模写コーディング(HTML&CSSが終わった後の課題) ドットインストールとprogateが終わった後に課されたレベル1の模写コーディングでしたが、実際にやろうとすると上手くいかず、3時間ほど費やしても3/1ほどしか終わらず……。 もう一度ドットインストールからやり直した方がいいのかな🧐

動画 【初心者向け】Google Chromeの検証ツール（デベロッパーツール）使い方解説！【HTML・CSS コーディング】(youtube) https://www.youtube.com/watch?v=4yJSMcMfMVI CSSの詳細度について学ぼう(youtube) https://www.youtube.com/watch?v=ucZtUPY8w-s 記事 リセットCSSを導入しよう(記事) https://webdesign-trends.net/entry/8137 order https://developer.mozilla.org/ja/docs/Web/CSS/order Flexbox Froggy の解答例 https://skipdream.com/programming/exhibit/column02annex01/index.html ゲーム FLEXBOX FROGGY 久しぶりのHTML＆CSSをやり、最後のゲームの最高レベルは答えの参考例を見て突破するという力業でした！ 「本当に私、HTMLとCSSを理解してる？」 そんなことを今も思っています。リセットCSSも数年前に使ったことはありますが、使い方によって種類があること自体知りませんでしたから…。 で、動画のデベロッパーツールは好きなアニメの公式サイトのCSSやHTMLをいじりながら実際にいじっていましたが、そのサイト自体JSが複数使われていた上にCSSが1000行以上書かれていてビビりました。まさかこのサイトを１人で全部やったわけじゃないよね…？ 基礎のHTML＆CSSですがかなり奥が深い！そんなことを思っていました。

10/1　20分 記事 ExpressとNextjsでtodoを作る https://blog-phi-nine-26.vercel.app/kind/app1 Twitterで知り合ったフォロワーさんの記事を共有いただいたので読んでみました。 expressを用いてサーバーサイドのNode.jsとReactをつなぐ手順がいかに手がかかるか、大変かを知りました。 それにしてもReactNativeとReactは別物だったんですか！まずはそこに驚かされました。で、ReactNativeの場合だとexpoを使ってサーバーサイドと接続するんですね！なかなか違う…。

ドットインストール JavaScript入門 文字列操作編 JavaScript入門 日時操作編 記事 console.logに文字色やスタイルを適用する方法を解説！ https://qumeru.com/magazine/371 JavaScriptのconsole.logの使い方を初心者向けに解説！ https://qumeru.com/magazine/372 【JavaScript】substring(), slice(), substr()の違い https://www.motokis-brain.com/article/53 Date.prototype.toDateString() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString Number.prototype.toLocaleString() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString UNIX時間 https://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93 Date.prototype.getTime() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime JavaScriptでゼロパディングする（文字列を埋める）メソッド【padStart、padEnd】 https://hatoblog.net/js-methods-padstart-padend/ 明日が集団面接会の中、「1時間だけ…」と思っていたら28分オーバーしていました。 UNIX時間は以前から聞いていたのですが、これは1970年1月1日0時から始まっている、コンピューター上の時間ととらえています。 たとえばパソコンやスマホの時間表示はUNIX時間を参考にしていると思っています。 substringとsliceの違いはいまいちわからないのですが、両方ともだいたい同じで（開始位置、空白なら何文字空白にするか）なんですけど、マイナスになった場合、substringは0として扱い、sliceは後ろからの数値として扱うんですね！ これはある意味新しい発見です！！！ あ、新しい発見といえばもう1つ。 Date.prototype.toDateString()とNumber.prototype.toLocaleString()の違いが判らなかったんですが、前者はコンソールされた日付や時間を年と月、日付にして表示する関数、後者は数値として表示されたものを文字に直す関数なんですね…！ 多分Number.prototype.toLocaleString()の方が使用頻度は高そうですね…。 あと、最後にconsole.logはコンソール上で色を付けることができるんですね！これも新しい発見の1つです！ 最後に、よかったら明日の集団面接会が上手くいくように応援してください🙏

ドットインストール JavaScript入門 データ構造編 JavaScript入門 数値操作編 記事 Array.prototype.map() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map 【JavaScript】「分割代入」について https://qiita.com/kamijodev/items/ca007a264a3a0f1d1c8b 【JavaScript】「スプレッド構文」と「レスト構文」について https://qiita.com/kamijodev/items/89543ca267ac9ad51529 JavaScriptスプレッド構文の基本的な仕組みと使い方 https://kinsta.com/jp/knowledgebase/spread-operator-javascript/ 配列の要素を順に取得する https://www.javadrive.jp/javascript/array/index10.html 昨日より30分ほど学習時間は少ないですが、学んだことは同じくらい多かったです。 まずforEachの使い方が微妙にわかりませんでした。アロー関数を使うとはいうものの、新しい引数を作ってそっちから配列を呼び出しているし…。いや、もしかして新しく配列を作り直しているのか？今も正直わかりません。 ただ、スプレッド構文とネスト構文の違いはうっすらと分かったような気がします。スプレッド構文は複数の配列を呼び出す構文、ネスト構文は複数の配列を１つに集約した構文…ですかね？ ほかにもMath.randomやMath.floorといった聞いたことがある構文を聞いて「懐かし～」と思ってました笑 ですが、分割代入は最後まで分かりませんでした！

ドットインストール はじめてのJavaScript JavaScript入門 基礎文法編 JavaScript入門 関数編 記事 do...while文を使った繰り返し処理 https://www.javadrive.jp/javascript/for/index7.html ダイアログを表示する(window.alert,window.prompt,window.confirm) https://www.javadrive.jp/javascript/webpage/index1.html continue文の使い方 https://www.javadrive.jp/javascript/for/index10.html 早期リターンを書こう https://zenn.dev/media_engine/articles/early_return JavaScriptの巻き上げとは？変数と関数での動作 https://dev-k.hatenablog.com/entry/javascript-hoisting-dev-k do文を今回初めて知りました。そこで調べてみたのですが、do文は最低でも1回は繰り返し処理をする式なんですね！ また、prompt関数（？）が久しぶりすぎてこちらも調べました。正式には「window.prompt」というそうですが、「window」の部分は省略しても構わないということを知ってお揃いています。確か数年前は省略しなかった気がするので…。 あとは「return」を使って、ネストを省略する早期リターンや、break文とcontinue文（breakは処理を止める、continueは最初の処理に戻る）などを知りましたが、結局関数の巻き上げはわかりませんでした…。

🔸記事 【CSS】orderでflexアイテムを並び替える方法を解説 https://zero-plus.io/media/css-order-how-to-use/ CSSでよく見かける【flex:1】を分かりやすく解説 https://miyattiblog.com/explanation-of-flex-property/ 🔸仕事 記事執筆 🔸就活 面接問答作成 今日は仕事と面接問答執筆と、今まで分からなかったflexとorderの違いを改めて知るために記事を読みました。 仕事は記事執筆で疲れ、面接問答執筆は一部chatGPTを用いながらあらゆる視点で問答を執筆し、最後にしたflexとorderの違いを調べるのが癒しになりました。 flex:1の場合、元々「flex-grow: 1;」、「flex-shrink: 1;」、「flex-basis: 0;」を同時に表示した意味になるそうです。 一方のorder:1はflexコンテナ(親要素)のボックスの並びを指定するプロパティで、真ん中を「1」として、マイナスから値をつけてボックスの位置を指定することができるのだそうです。 似ているようで全く違うのですね！

ドットインストール 実践！アプリのランディングページを模写しよう chatGPTのCSSをちょっといじってみた https://karie2021.github.io/FizzBuzzGame/ ふと深夜に何げなく「chatGPTの精度を知りたい」と思って以下の条件を出してFizzBuzzゲームのコードを出してもらうことに。 命令：HTMLとCSSとJavaScriptを使って以下のゲームを作って。 条件 1.3の倍数が出たら”Fizz”、5の倍数が出たら”Buzz”、両方に当てはまらなかったら”Default”を出す。 2.ボタンを押すと、JavaScriptでランダム関数を使って数字が出る。 3.ランダムで出た数字で１の条件を判断する。 するとリンク先のコードを出してゲームを作ってくれました。setTimeout関数を使ってボタンを押した後にゆとりを持たせようとも考えましたが、時間がなくて諦めました。トホホ……。

アロー関数式を使って関数を定義する https://www.javadrive.jp/javascript/function/index9.html オブジェクトを作成する https://www.javadrive.jp/javascript/object/index2.html 【JavaScript】 コンストラクターとは？関数とは違うのか？ https://note.affi-sapo-sv.com/js-constructor.php アロー関数に関して→オブジェクトリテラル→コンストラクターの順に気になって読みました。 アロー関数と普通の関数宣言の違いとしては、functionを事前に宣言しない関数がアロー関数のことかな、と理解しつつ文章で使われている「オブジェクトリテラルって何だ？」となって更に「コンストラクタって何だっけ」とどんどん深掘りして検索して何度も読みました。 それぞれ分かりやすく書かれていて、特にオブジェクトに関してはわかった気になりました。

9/18　１時間48分 ドットインストール 詳解CSS メディアクエリー編 実践！ポートフォリオサイトを模写しよう 記事 【CSS】margin:autoとtext-align:centerの違いと使い分け https://csshtml.work/margin-text-align-difference/ 【CSS】flexで両端、左右に分ける方法【3つ以上も可能】 https://csshtml.work/flex-space-between/ ポートフォリオの模写編で、模写は「上下の端はpadding-topとpadding-bottomで、中身はmargin-topを使うといい」という考えを初めて知りました。 この考えを使うことで、模写がしやすくなりますね。 また、margin:0 とtext-alignの違いにも触れました。 margin: 0は要素の中のボックスを移動するもの、padding: 0は要素自体を移動する値であることに、改めて驚きました。 これらは基本ですね、忘れないようにしたいです。

今日は家族が倒れて家事を頑張ったので学習をお休み。 そのかわり、記事を読んで少しでも勉強するようにすることにしました。 記事はフロントエンドをやる上で必須な知識を8選したものです。 ReactとNext.jsの関係が意外すぎて面白かったです😂 Reactって元はFBの会社が作ったフレームワークだったんですね！ そしてそれを参考にしたのがNext.jsだったという……。 プロの方なら常識なのかもしれませんが、学び始めて2週間前後の人間はこれを知って「おおっ！！」と脳内でびっくりしたんですよ……！！！ 記事を読むだけでも勉強になりますね。 明日こそは頑張って勉強しよう！ https://zenn.dev/nameless_sn/articles/frontend-masternote

Progate JavaScript Ⅴ JavaScript Ⅵ JavaScript Ⅶ 記事 JavaScriptのアロー関数、コールバック関数を理解する https://qiita.com/Naoyuk/items/47f69aac5b76856bec38 JavaScriptの関数【関数宣言,アロー関数,無名関数,即時関数,コールバック関数,高階関数】 https://zenn.dev/horitomo/articles/4fd98cf4156ccf 今日はやっとProgateでJavaScriptをすべて終えることができました。 JavaScriptには様々な関数がありますが、find関数（？）やパックといったものが存在することに驚きました。 「えっ？！パックなんてそんなものがあるの？」 初めて触れたときは本当にびっくりマークで脳内が支配された感じです……。 import X from "Z" 上のようなimportが多くて本当に「びっくり」としか言えないです…。なんというか、英語に似ているなといった感じです。 そこでアロー関数とコールバック関数の違いも分からなかったので記事を読んで調べてみましたが、アロー関数は「function」を使わず、省略して関数が書ける、コールバック関数は関数を呼びだす関数という認識なのですが合っていますかね…？

今日は約2週間ぶりのメンターさんとのメンタリングをGoogle meetでしました。 今日はprogateでJavaScriptを終えて、アロー関数とコールバック関数の違いがわからなかったんで調べてみました。しかし、それでもイマイチ分からなくてコールバック関数のことを「関数を呼び出す関数」と勘違いしていまう有様😭 でもメンタリングで「コールバック関数は呼び出される関数」だと例を挙げて教えていただきました。 イメージだと「親が子(コールバック関数)を呼び出す感じ」だそうです。 分かりやすい例で分かりやすくて、予定が30分だったのがいつの間にか1時間になっていました😅