GitHub💍④〜プルに6時間もかけてしまった😅〜

ープルをする！！ー

●まずはREADME.mdを編集し、GitHub上で直接コミットを作ります

README.md編集後（メンバーを追加）⇓

コミット完了後の、リモートリポジトリの状態⇓

リモートリポジトリに、GitHub上で完了した「README.mdにメンバー一覧を追加」というコミットがあることを確認できました！

●次はローカルリポジトリにコミットがあるかを確認をします

（確認のやり方はカーソルから抜粋）⇓

ということなので、実際にコマンドを打ってみました⇓

すると、結果は…⇓

実行しても何も表示されなかったので、「README.mdにメンバー一覧を追加」というコミットはローカルリポジトリには無いことが確認できます😉

（リモートリポジトリの方が１コミット進んでいる状態だから）

●ここからは、リモートリポジトリ上のコミットを、ローカルリポジトリにダウンロードしていきます

プルしたいブランチ(今回はmaster)にチェックアウト

あれれ、エラーが出てしまいました💦

色々と操作をしすぎたからかもしれません💦

原因はこれだそうです…

さらに具体的に聞くと…

だそうです😅

とりあえず分からないところはカーソルをフル活用しながら順番に進めると、コミットメッセージを入力するためのエディタが開いたので、コミットメッセージを入力しマージコミットを完了させ、なんとかgit pullコマンドを実行できました😤

プルを実行⇓

念のため、リモートリポジトリ上のコミットがローカルリポジトリに反映されているかを確認します💡

リモートリポジトリの最新のコミット履歴⇓

ローカルリポジトリのコミット履歴⇓

リモートリポジトリの最新コミットのハッシュ値とメッセージがローカルリポジトリにあるため、反映ができました～！！！！！！！！！！！！！！！！！！！！！

ちまみに、プルを実行し終えるまでにかかった時間は6時間笑

色々と操作しすぎて分からなくなり、間違えすぎて何度も途方に暮れていました😅

先程のリポジトリの履歴を見ると、リモートリポジトリにはないコミットが、ローカルリポジトリにいくつかあるので、いかに無駄な作業をやっていたかよく分かります笑

後で修正しよう笑

ですが、今思うと根気強く最後までやり切って良かったって本当に思います💡

実際現場に入ったら今回のことよりも苦戦することはいっぱいあるでしょうし、リサーチ力と問題解決力をもっと高めなきゃ‼︎とさらにやる気が出ました‼︎

この調子で夜も続けて勉強を頑張ります☺️

GitHub💍③～プッシュ編〜＜おまけ＞何かの本で『人の幸福は、○○をすることで得られる』って書いてあったけど、本当にそうだね！！※宗教じゃないよ

今日は早めに起きて朝活つもりだったのに目が覚めたら８時！！💦💦

少し寝過ぎてしまいました😭

家のことを済ませ、午前中に銀行へ行って手続きをし、通っているフェイシャルサロンへ💡

いつもお世話になっているスタッフの方が今日お誕生日なので、銀行で手続きが終わるのを待っている間に近くにケーキ屋がないかを検索…

たまたま銀行から15分程の場所にケーキ屋があったので、銀行の用事を済ませてからすぐにケーキ屋へ寄って、サロンへ向かいました

着いてすぐにプレゼントをし、美味しそうないちごタルトを見てとても喜んでもらえました😊

ホールショートケーキもあったのでどっちにしようが迷いましたが、スタッフの方はいちごがすごく大好きなようで、夜はいちごタルトをご家族と召し上がっている写真を送ってくれ、どこのケーキ屋で買ったのか教えてほしいと言われたので想像以上の反応で私まで嬉しくなります✨✨笑

この時に思い出したのですが、私が過去に読んだ本の中に、

『人の幸福は、貢献をすることで得られる』

と書いてありました

また、尊敬している経営者YouTuberの方は、

『プレゼントをすることで人は幸せな気持ちになれる』

とおっしゃっていました

今日の出来事で、誰かを喜ばせることはお金でいくら出しても絶対に感じることができない貴重な体験だと感じます😊

昨日もプレゼントは何にしようかすごく迷っていました笑

LINEギフトで高級牛肉にしようか…

それともAmazonギフトにして好きなものを買ってもらおうか…

銀行に着くまで考え、本当に勘ですが、ケーキを買って直接渡した方が喜ぶんじゃないかとふと思ったんです💡

スタッフの方がご家族と一緒に食べるためにもうケーキを買ってしまっているんじゃないかと少しヒヤヒヤしましたが、忙しくてケーキを買う時間がなくて今年はケーキは無しでお祝いをするつもりだったと聞いた時は心の中でガッツポーズ✨笑

（ちなみに、昨日はご家族でしゃぶしゃぶを食べたみたいで高級牛肉選ばなくて良かったと思っています笑）

こうやってプレゼントを選ぶときに、何をあげたら喜んでくれるかなあと考える時間はすごく好きで、普段から会える人は、その人のことをよく観察とかをしています😊

たまにチョイスを外して思っていたのと違う反応の時もありますが、プレゼントをしたことは自己満なので気にしないようにしています笑

私は今まで、どんなことが合っても目の前の人と一生懸命向き合い、見返りを求めずに無性に与え続ける方たちに沢山出会ってきました

そのような方たちの周りには自然と人が集まっているんですよね😊

私は何度も失敗を繰り返し沢山の方たちに迷惑をかけてきましたが、時には厳しく時には優しく、見捨てずに関わっていただけたことに心から感謝しています

幸せ者です😭✨

前職では役職を持ち責任を任せられる立場でありましたが、トラブルがあっても乗り越えられたのは、今まで出会った方たちからの学びを生かせたからだと身に染みて何度も感じました✨

これからも、与えられるのではなく与える、応援してもう側ではなく応援をする側、喜ばせる精神を大事にして、エンジニアへ転職したらギブ＆テイクではなく、ギブ＆ギブでサービスを作ります😆

今日もGitHubの続きです！！

ープッシュをする！！ー

コマンドを使って操作⇓

プッシュした後のブラウザ⇓

プッシュをしたことで、ローカルリポジトリで編集した箇所をリモートリポジトリに反映できました😊

短いですが、今日はここまでにして早めに寝ます！！

GitHub💍②〜フォーク、クローン、チェックアウト、ブランチ作成、マージ編〜

昨日の続きでGitHubを進めます！！😤

ーフォークしてからクローン！！ー

フォーク

• 他の人のプロジェクトを自分のアカウントにコピーすること
• これにより、元のプロジェクトとは別に、自分が管理できるコピーができる

クローン

• 他の人のプロジェクトを自分のコンピュータにコピーすること
• これにより、そのプロジェクトを自分のローカル環境で利用できる

簡単に言えば、

• フォークはオンラインで管理するためのコピー
• クローンは自分のコンピュータで使うためのコピー

フォーク⇓

クローン⇓

ー新規ブランチを作ってコミットする！！ー

チェックアウト

• 指定したブランチやコミットに切り替えること
• 作業ディレクトリ内のファイルを指定した時点と同じ状態にできる
• ブランチを移動する時は、チェックアウトを使う

masterブランチ⇓

profileブランチ⇓

profileブランチを新規作成し、profileブランチでhtmlを編集💡

ステージ→コミットをしたら、profileブランチからmasterブランチへ移動し(masterブランチは最初から存在する)、htmlの編集がmasterは影響を受けていないことを上の画像のように確認ができました😉

こうやって状況に応じてブランチを作ることでmasterブランチに影響を与えることなく安心して開発ができるんですね😊

ーマージをするー

コマンドに慣れるためにも、VScodeのターミナルを使ってマージをします！！

masterブランチをチェックアウトし、profileブランチをマージしたことで...

profileブランチの変更を、masterブランチに取り込むことができました😆

マージした後のmasterブランチ⇓

書籍ではSource Treeのツールで説明をしていたので、分からないところはカーソルを駆使しながら書籍と並行してVScodeで進められました✨

ChatGPTやカーソルがあるおかげで本当に勉強ができています！！

神です！！😭✨

では、今日はここまでにして明日もGitHubの続きをします😉

JavaScript学習🌸〜非同期処理～ ⇒ Gitへ進めます😉

Udemyで『非同期処理』の続きをします😉

最近『API』と『Fetch API』を勉強したおかげで、コールバック関数やpromiseの概念を復習をしながら進めていきました(^^)

非同期処理はすぐに理解できる内容ではないとUdemy講師がおっしゃっていましたが、実際に学んでみると本当に難しい😅

3割程はなんとなく分かってきたかなあという感覚です💡

非同期処理は実践を重ねて理解するものだと思うので、今のタイミングではあまり追求せずに先へ進めます

少し時間がかかりましたがJavascriptを一通り学習をしたので、YouTubeの動画を使って『Git』に突入です😆

ーGit用語まとめー（最低限の用語をまとめました）

ブランチ

異なる作業の流れやバージョンを分岐して管理するための機能

プログラムやウェブサイトを作るときに、それぞれの作業を整理するための仕組みみたいなもの

フェッチ

リモートリポジトリ（オンラインでコードを保存・共有する場所）の変更をローカルのリポジトリに取り込むこと

コミット

プロジェクトの変更を保存する操作

プロジェクトの歴史がコミットごとに記録されて、過去の状態に戻ったり、変更の経緯を確認したりすることができる

マージ

複数の流れを一つにまとめること

新しい機能を追加するために作ったブランチや、バグ修正のために作ったブランチの変更が安定して動くことが確認できたら、それらの変更をメインのプログラムに統合（マージ）することができる

コンフリクト

同じ部分に複数の変更があって、それをうまく組み合わせるのが難しい状態のこと

対処⇒

①ファイルの内容を修正　

②<<，==，>>の記号を削除

プッシュ

データをGit上（リモートリポジトリ）に反映すること

プル

プッシュしたデータの変更内容をリモートリポジトリからを引っ張ってきて、ローカルリポジトリに取り込むこと

フェッチとプルの違い

フェッチ...リモートリポジトリから最新の情報を取得するだけで、ローカルのブランチには変更を統合しない

プル...リモートから情報を取得し、それをローカルのブランチにも自動的に統合する

簡単に言えば、フェッチは取ってくるだけで、プルは取ってきて統合もできる

プルリクエスト

コードの変更や新機能を提案する方法で、他の開発者がそれを確認してプロジェクトに統合する時に使う

自分が変更を取り込んでもらうように提案すること

イメージが掴めてきたら、以前読んだこちらの本で『Git』を勉強します😉

まずは、

『SourceTree』のインストールから！

リポジトリを作る！！

ファイルの変更　→　ステージ　→　コミット！！

SSH接続の設定！！

この本に従ってSourceTreeでGitの基本操作を勉強しました！

私がこれから作るアプリの開発環境はUbuntuなので、設定をする時にローカル上のUbuntuで秘密鍵を作り、前に登録をしたGithubで公開鍵を作りました✨

（公開鍵と秘密鍵の作り方ですがページ数の関係で本では説明されておらず、載っていたサイトの説明に沿って進めましたが分かりづらく、時間がかかったのでとても苦戦をしました😅）

公開鍵と秘密鍵をUbuntuというOSで作ったため、Windowsにインストールした『SourceTree』が使えないので、Gitを標準サポートしていてプラグイン(拡張機能)が豊富なVisual Studio Code のAI版エディタ(Cursor)を使っていきます😉

そろそろ眠いので勉強はここまで！！

今日は午前中から雪が降りかなり積もってきたので１日中家にこもっていました笑

明日もこもる１日になりそうです😶

JavaScript学習🌸〜DOM操作、復習編～

銀行や役所などに行くために午前中は出かけていましたが、思っていたより時間がかかってしまい今日勉強を始められたのが15時からになってしまいました😅

まずは、YouTubeで『DOM操作』について復習です

以前にドットインストールで『DOM操作』の学習していましたが、理解が浅いままどんどん次へ進めていたので、分からないことを未完了したままにしないためにChat GPTも活用しながら最低限のメソッドや概念を中心に改めて学びます✨

DOM操作メソッドまとめ

• getElementById...IDで指定されたWebページの部品(要素)を見つける命令
• getElemenstByIdClassName...指定したクラス名を持つすべての要素を見つける命令
• addEventListener...ボタンなどの部品がクリックされたときに何をするか決める命令
• toggle...remove(削除)とadd(追加)を切り替える

夕方からは家のことを諸々やり、最近届いた昇降テーブルを設置しました💡

明日こそは、『非同期処理』を進めます😉

JavaScript学習🌸〜APIとfetchAPI編〜Node.jsで簡単な天気アプリ制作

Udemyでfetch APIについてさらに詳しく勉強をしました😌

XMLの作り方を流し見をし、promiseをサポートしていないことを知る

⇓

fetchを実際に作る

⇓

YouTube動画で、Node.jsで天気アプリを作る

という順番で進めます✨

fetchで勉強したことを簡単にまとめます💡

fetch

fetchはWebAPIにリクエストを送り、データを取得するためのJavaScriptの関数。

簡単に言えば、fetch APIを使うときは、データを取得するのが終わるまで待ってくれるpromiseがあって、もし何か問題があればエラーを捕まえてくれるcatchがある！

🌸promise

promiseは「これから何か作業をするよ」という約束みたいなもの。

作業がうまくいったら、「はい、できたよ！」と教えてくれて、何か問題があったら、「ごめんね、うまくいかなかったよ」と教えてくれるようなもの。

fetchをすると、サーバーからデータが届くまで待って、その後に何かをすることを約束してくれる。

🌸then

何かの作業が終わったあとに、次に何をするかを決めるために使うもの。

fetchを使って情報を取ってきた後に、その情報を使って何かをするときにthenを使う

🌸catch
キャッチは、もし何かがうまくいかなかったときに、そのエラーをキャッチ（捕まえる）する手段。
エラーが起きたら、catchで指定した処理をする。

（「ここで問題があったよ」と教えてくれる役割をする）

🌸asyncとawaitの違い

- async

「この関数は特別で、時間がかかるかもしれないよ」と教えてくれるマーク。

これがついてる関数は、他のことをしながら待てる。
- await

「ここでちょっと待ってね」という合図で、asyncでマークされた関数の中で使う。

これを使うと、その部分で時間がかかる作業が終わるまで、ちゃんと待ってくれる。

🌸try

プログラムで何かを試してみるときに使う部分。

この中に書かれたコードは、エラーが起きる可能性があるけど、もしエラーが起きたら、プログラムが止まらないようにしたいときに使う。

もしtryブロックの中で何か問題が起きたら、プログラムはすぐにcatchブロックに移動する。

そしてcatchブロックが、その問題をどうにかするためのコードを実行する。

今回はローカル上のみに出力しました😆

近々ローカル上でサーバーをつなげ、HTMLやCSSでレイアウトをしてアプリケーションを作っていきます😉

明日は、『非同期処理』を進めていきます！！

JavaScript学習🌸〜APIとfetchAPI編〜PostmanでAPIのテスト

一昨日と昨日でAPIを中心に勉強をしました😌

私なりに簡単にまとめてみます✨

API  

クライアントとサーバーの仲介役。

ソフトウェア同士がやり取りするための、プログラミングで使うルールやコマンドの集まり。

APIを使うことで、ソフトウェアを組み合わせて新しい機能を実現することができる。

用途：

データを取得・送信したり、他のプログラムと連携するために使われる。

例：

お店のWebサイトでは、天気予報を表示する機能を実現したい時に、

天気予報を提供するAPIを利用することで、天気予報のデータを取得し、Webサイトに表示することができる。

APIを利用することで、お店のWebサイトに天気予報の機能を追加することができる。

fetchAPI

JavaScriptでHTTPリクエストを送信するためのAPI。

WebブラウザがWebサーバーにデータを送信するための方法。

使い方：

“fetch()"・メソッドを使ってウェブの情報を取ってくる。

特徴：

データが取れるまで待ってくれる優れもの。

例：JavaScriptを使ってWebブラウザからデータを取ってくるための機能

APIのGetとPostの違い

get :

情報を取得するときに使う

使い方 :

データはURLに入力をする

例 :

ウェブページや写真を見る時、お店の商品を見る時にGETを使う

Post :

新しいデータの作成や更新 (何かを追加したり変更したりする)

使い方 :　

フォームに名前やメッセージなどのデータを書いて送る

例 :　

オンラインでゲームのハイスコアを送ったり、コメントを書いたりする時にPOSTを使う

YouTubeやUdemyの講座でAPIの概念を理解したところで、実際にPostmanを使ってAPIでテストをします‼︎

できれば講座通りにスムーズにいきたいところでしたが、そんな簡単にうまくはいかず...

Postmanの使い方を習得するのに3時間程かかってしまいました😅

時間かかり過ぎた...

ターミナルを使い、Javascriptでコードを打ち、Postmanでテストをするとここでエラー💦

レスポンスデータが返ってこず、講師のコードを確認しましたがJavaScriptのコードを見ても打ち間違いはなく、Chat GPTに聞いても確認した箇所は問題がなかったため原因が分からず全く進められませんでした😭

パスタさんに連絡を取り私のパソコンを遠隔操作をして頂いたところ、すぐに解決😶

原因は、サーバーが起動していなかったというだけでした😅

JavaScriptで機能を追加・修正をしたら　node app.js 　を打たないと追加したコードが反映されないため毎回サーバーを再起動しないといけなかったようです😅

これを解決するのにまた3時間かかってしまいました😱

ですがこれも勉強です💡笑

同じことを繰り返さないよう今回のエラーはしっかりログを記録します😉

約2日かかってしまいましたが、APIのテストをできました😆

今日もAPIを中心に勉強✨

Node.jsでAPIを使って天気予報アプリを作ります！！