STUDY_LOG_KOTA

IoT, Webプログラミングなどの学習記録をします。

gitメモ_clone / branch / fetch / merge / pull / push / diff / log/add + commit / stash // GitLens /

git 関連の用法メモです
ユースケースと、参考にした外部サイトをメモします

注意:
 ・環境依存、バージョン依存など考慮してませんのでご承知おきください
 ・通知なしに記事内容修正します
 ・リンク切れなどご指摘感謝します

コマンド別

clone: githubからレポジトリのコピー

ユースケース
 ・github上のプロジェクトのクローンを作成する 使い方:
 git clone URL
参考サイト:
  無し

branch: オリジナル(master)起点の編集履歴を管理

ユースケース
 ・新規機能の実装作業の履歴を、オリジナル(master) を起点に行う
 ・複数機能の実装、デバッグを並行して行う際、それぞれの影響が競合することを避けたい時
参考サイト:
ブランチとは|サル先生のGit入門【プロジェクト管理ツールBacklog】

fetch : リモートレポジトリの変更内容をローカルレポジトリに保存

ユースケース
 ・リモートレポジトリ上の変更を確認したい、けどmarge(pull)したくない時
 ・リモートレポジトリ上の変更内容を、ローカルとdiffして確認したい時

参考サイト:
【初心者向け】git fetch、git merge、git pullの違いについて - Qiita

merge

ユースケース
 ・fetchした結果をローカルレポジトリに反映する
参考サイト:
 ・

pull: = fetch + marge

ユースケース
 ・fetch + merge をまとめてしたい時。 参考サイト:

push: ローカルの更新をレポジトリにアップロード

ユースケース
参考サイト:

diff: 差分確認

ユースケース
 ・ファイル間 / branch間 / fetchしたリモートレポジトリとの差分確認
参考サイト:
 

log: commitのログ確認

ユースケース
 ・fetchしたリモートレポジトリの変更内容確認( git log origin/master ) 参考サイト:

stash: commit未満の復元ポイント作成

ユースケース
 ・実験的に変更を加えたいが、作業後はもとにもどしたい時
 ・お酒を飲んで黄昏れながらコーディングする変態さん
  ※休日に飲みながらコーディングするプログラマが散見される...
参考サイト:
 ・

GitLens: VSCode用 差分確認拡張機能

ユースケース
 ・diff コマンドで差分を追うのに限界を感じた時
 ・リモートレポジトリでの変更をちまちま手作業でマージしたい時の目視確認
参考サイト:
 

逆引き

ローカルの成果物 をリモートに push する

ユースケース
 ・ローカルでの作業成果物をシェアする時(完成/未完成問わず)
使い方:
 1) git add .  // 後にpushしたいファイルをセットする. " . " はカレントのファイル全部
 2) git commit -m 'message' // add でセットしたものをバージョンとして残す。 -m でコメント残すこと。
 3) git push // commit したものを リモートレポジトリにアップロード

React Crash Course for Biginners 2021 - 前半の感想

f:id:kota_ly:20220201231121p:plain

はじめに

Youtubeで公開されている、無料のReact講座を受講してみました。
1時間30分ほどで前半のプロジェクトが終わったので、ここまで何をしたか勉強記録します。

この講義を受けると、こんな流れで進むんだと言うことが伝われば嬉しいですが、私自身の記憶整理にすぎないので、色々お許しください。

講義動画はこちら

www.youtube.com

コメント欄に講義の目次が載っていますので、こちらに従って記事を書きます。

タイムスタンプ

Introduction 00:00

爽やかなエンジニアのお兄さんとご対面。格好いいな〜。

What is React 00:27

リアクトは大きく3つの特徴がある。

1)ReactはClient-side JavaScript library
 モダンなJavaScriptを拡張するためのライブラリ。ユーザーサイドの意味するところは、JavaScriptとHTMLがユーザーのブラウザにロードされたあとは、サーバと通信することなくユーザで独立して動作します。

2)Reactiveなインタフェースを提供する
 一般的なウェブサイトは、何かリンクをクリックするとHTMLをダウンロードして、新しいページが表示されます。つまりリクエストし、レスポンスする作業が発生します。Reactは違って、まるでスマホアプリのようにページの切り替えやUIの操作が行え、素晴らしいユーザーエクスペリエンスを与えます。 なぜならユーザサイドで独立して動いているから。

3)Declarative, component focused approach
コンポーネントを一度作れば、流用可能なエレメントとして自由に使うことができる。
次の画像は今回の講義で作ったToDoアプリ。タスクが3つ並んでますが、コンポーネントを3個記述しているだけです。

<Todo text='Learn React' />  
<Todo text='Master React' />  

... のように。

First React Code 04:15

今回ゴールとするプログラムの全貌をざっくり説明。

Building SPAs 11:40

Widget:ReactはWEBページに埋め込む形で使うことができます
SPA:1つのHTMLファイルと、それを操作するJavaScriptで操作するSingle Page Applicationが作れます。
今回の講義は、SPAを作ります。

React Alternatives 13:41

Reactの他にも、"Angular"、"Vue.js"などが有名なフレームワークとして存在し、それぞれの特徴を説明しています。Reactは、UIの操作のみに特化したフレームワークで、弱点もあります。

Creating a React Project 16:48

Reactのプロジェクトを作成します。
・Node.jsのインストール (私はすでに学習したのでインストール済み)
・Reactのプロジェクト作成 の順で行います。

プロジェクト作成は、"npx create-react-app project-name" で行います。

Setting Up a Code Editor 25:03

上記で作ったプロジェクトには不要なファイルがたくさんあるので削除します。

コードエディタは、Visual Studio Codeを推奨されます。 また、テキストエディタVS CODEで設定することができ、次のエディタを入れています。いきなり使っているのでその恩恵はわかりませんが、先生と同じ表記になるでしょうから入れるのが無難です。
f:id:kota_ly:20220201235640p:plain

Diving Into the Created Project 28:07

srcディレクトリに3つのファイル(App.js、index.css、index.js)だけ残りますが、この中でも記述の整理をします。そしてはじめの動作確認として、Helloを出力します。
JSXで記述するので、JSXとは何か、その説明もあります。

f:id:kota_ly:20220201235449p:plain

How React Works & Understanding Components 34:38

メインスクリプトの「index.js」にて、Reactがどのように動いているのかを説明してます。
importでの読み込み処理、 ReactDOM.render(, ....) でのHTMLへのレンダリング処理についてです。

More About Components & Styling with CSS Classes 42:15

Hello を出力した箇所をJSXの記述で拡張していきます。 "h1"タグや、"div", "button"を使って記述します。このように一般的なDOM記述ができます。これらを "build-in component"と読んでます。
build-in component と、自分で作った own component で違いがあるのが Props の章で大事なので頭の片隅においておきます。

Building & Reusing Another Component 47:50

前の章で、ToDoリストのリストが1個だけ表示できます。これを量産するとき、誤ってもHTMLをたくさんコピペするなんてことはしてはいけません。Todoという名前の関数コンポーネントを作成して、簡単に量産することができることを学びます。
具体的には、〈Todo /〉'と記述すると、一つのToDoリストが表示できます。

<Todo />  
<Todo />

と書くと、リストが2個出てきます。

Pros & Dynamic Content 55:09

値の受け渡しについて学びます。Todoリストをコンポーネント化することで量産が可能になりましたが、これでは同じ名前のTodoしか作れません。
そこで、あたいの受け渡しをするために "Props"を学びます。

Handling Events 1:00:27

まず、Deleteボタンを押すと console.log()でコンソール画面に文字が出る確認をします。

Adding More Components 1:07:07

Deleteボタンを押すと、オーバーレイ表示で削除を本当にするのかの確認画面が出るように新しいコンポーネントを作成します。

しかし問題が発生します。ボタンを押すと確認画面が出ますが、どこを押しても画面が消えてくれません。それは、確認画面上での操作を状態管理していないためです。状態管理をするにも工夫がいります。

Introducing State 1:12:48

import { useState } from 'react'  で、状態管理を行うための useState関数を取り込みます。
useStateを使うことで、表示をする、しないといった管理ができるようになります。
また、useStateのことをReact Hooksと呼ぶようです。

次のように変数に設定を行って使います。
const [ modalIsOpen, setModalIsOpen ] = useState(false);

2つの変数を定義する必要があるそうです。 setModalIsOpenは、true, falseなど値を書き換えるのに使います。 modalIsOpenは、 true状態か、false状態かの判定処理に使用します。
どうしてこういうことをするのかはよくわかっていません。。別途勉強。

Event Props 1:21:07

確認画面のオーバーレイ表示をするコンポーネント Modal.js は状態管理によって表示判定ができるようになりました。しかし、このままだと確認画面で押されたボタンを押しても、表示を無効にする関数が実行できません。

    function closeModalHandler(){
        setModalIsOpen(false);
    }

閉じれるようにするために、Modal という作ったコンポーネントに props経由でcloseModalHandler()関数のポインタを受け渡しする仕組みを作ります。
Todoコンポーネント上にある、オーバーレイを表示する処理が次の文です。

            { modalIsOpen && (
                <Modal onCancel={closeModalHandler} onConfirm={closeModalHandler}/>
            )}
            { modalIsOpen && <Backdrop onClick={closeModalHandler} />}

onCancel={closeModalHandler} というのが、Cancelボタンを押されたときに処理する関数のポインタをpropsで渡す処理です。 Modalコンポーネントを見ると、 function Modal(props){}で受け取ってます。

ボタンに埋め込まれている処理は次の一文。(JSXです)

<button className='btn btn--alt' onClick={cancelHandler}>Cancel</button>

Cancelボタンを押すと、cancelHandler関数が実行されます。その処理は次の通り。

    function cancelHandler() {
        props.onCancel();
    }

props.onCancel()です。props経由で受け取った、 closeModalHandlerを間接的に実行しています。
結果的に、Modalを表示する state は falseになり、表示が消えます。

まとめと次回

ここまでは、コンポーネントの作り方、状態管理、propsの使い方などを学びました。
次回からはもっとディープなことをやりますと言ってました。章的には次のように続きます。

Adding Routing 1:28:15
Adding Links & Navigation 1:45:07
CSS Modules 1:50:28
Outputting Lists 1:56:14
Adding More Components´2:02:04
Props Children 2:11:52
Adding a Form 2:20:31
Getting User Input & Handling Form Submission 2:29:30
Preparing the App for HTTP 2:39:15
Sending a Post Request 2:46:07
Navigating Programmatically 2:51:25
Getting Started with Fetching Data 2:55:07
useEffect 3:04:32
Introducing React Context´3:14:40
Context Logic & Different Ways of Updating State 3:25:43
Using Context in Components 3:31:37
More Context Usage 3:43:48
Summary 3:50:42

ルーティング?!SPAじゃなくなるのでしょうか? ううん、直近SPAしか実用する予定がなければ、端折りたいです。

先生が明るくて受けてて楽しい授業なので、継続していこうと思います。

Reactについて理解したこと・・・その1

f:id:kota_ly:20220126003310p:plain

学んだこと

マークアップ+ロジックからReact要素へ

最も基本的なウェブ開発は、HTML、JavaScriptの開発ですが、HTMLのようなものをマークアップJavaScriptのように動的な処理を行うものを、ロジックと呼ぶようです。

先日まで学んでいた、Node.js + Ejs も例外ではなく、テンプレートと、それをレンダリングしたり動的な処理をするJavaScriptで構成されてました。

Reactはコンポーネント(React 要素:React Element)という、マークアップとロジックの両方の役割を持つものを作るそう。
バニラのReactは、 React.createElement()でDOMのタグや、タグに持たせるアドレスなどを指定して生成するよう。

このあたりの解説は、下記サイトを参考にさせていただきました。

react.keicode.com

DOMの生成

作ったReact要素は ReactDOM.render() でHTMLに変換されます。 Ejsみたいにテンプレートをレンダリングするのではなく、JavaScriptからHTMLが生成されるという点においてすごくパワフルな感じがします。

JSXとは

Reactの公式で学習をしようとしたところ、突如として「JSXの導入」という章が出てきました。JSXはJavaScript構文の拡張版で、Reactと合わせて使用しますとのこと。素のReactでは普通開発せず、JSXを使うそうです。

まだこれから読むのですが、JSXを使うとこういう差があるという記事が次のサイト様にあります。

react.keicode.com

素のReactと違って、ロジックとマークアップ疎結合してるんだというのがよく分かる書き方になりました。

まとめ

素のReactのイメージと、なぜJSXを使うのか?雰囲気がわかりました。
公式の目次に従いつつ、逐一情報を調べて行こうと思います。

残業のせいでこんな進捗でした。明日こそは…うう。

JavaScript「再」入門 - Getting Started - React

f:id:kota_ly:20220126003310p:plain

前置き

 『React』を始めるにあたって、最新の情報を学べる書籍はなかなか無いようです。すでにReactを触ってる方と会話ができるレベルまでどうしても行きたいので、公式サイトを漁ってみました。

記事本文

公式が親切 - Getting Startedを参照してみた

reactの公式ページにアクセスして、情報収集を試みました。以下サイトです。

ja.reactjs.org

アクセスすると、Reactを学習するための手順が割と丁寧に書かれていました。学び方は2つから選べて、
 1)チュートリアルから学ぶ (ツール入れて動かしながらゲームを作る)  2)ガイドから学ぶ(文字ベースで理解しながら)

私は、習うか慣れるかでいうと、習いたいので2)を選択。 すると、前提知識としてJavaScriptの理解度を確認されました。
わからないことが多々あったので、一通り確認をしました。 以下のサイトです。細かい解説は端折られてますが、わからなければリンク先に飛べるようになってます。親切でびっくり。

developer.mozilla.org

JavaScript「再」入門 感想

そこそこ長い1ページでしたが、一通り動作確認などもしながらやり終えました。理解が怪しいところもありますが、一通りなめれたので良かったです。 読み終えてから気づいたのですが、次のように書いてありました。

補足

このガイドでは時折比較的新しい JavaScript の構文を例の中で使用しています。ここ数年 JavaScript を使った仕事をしていなかったという場合は、この 3 点を理解すればだいたい理解したことになるでしょう。

その3点は以下の内容です。長い1ページのJavaScript入門を読む中で、この3点は抑えれたのでJavaScriptの理解はある程度できた!と思います。

gist.github.com

次回

具体的なガイドラインに目を通していこうと思います。 次の目次で説明があるようです。

  1. Hello World
  2. JSX の導入
  3. 要素のレンダー
  4. コンポーネントと props
  5. state とライフサイクル
  6. イベント処理
  7. 条件付きレンダー
  8. リストと key
  9. フォーム
  10. state のリフトアップ
  11. コンポジション vs 継承
  12. React の流儀

考え込まず、サクサク読むということを明日できればいいなと思っています。

以上

Node.js超入門 5章-6章 - SQL検索活用/バリデーション/サニタイズ

f:id:kota_ly:20220111002628p:plain

前置き

 前回は、SQLの基本CRUD(=Create, Read, Update, Delete)を試しました。
 今回は、SQLの検索機能 whereのプチ応用を動作確認し、6章に入りました。6章では、バリデーションと、サニタイズを学びました。

記事本文

SQL検索機能 whereの活用

前回、データベースから特定のレコードを取り出すために、where を活用する例を学びました。

const q = "select * from mydata where id = ?";
db.get(q, (err, row) => {......} );

このような書き方です。 この id = ? は完全一致を見る処理でしたが、他にも" !=, <, <=, >, >="などの条件式が使えることを学びました。

加えてワイルドカードが使える『LIKE検索』があります。

select * from mydata where mail like "%.gmail.com""

などとすると、gmail.comのメールアドレスのみを抽出可能。

バリデーション

入力された値が正しいことをチェックする機能です。 パッケージとして『Express Validator』を活用した事例をななめ読みしました。

例えば、年齢を入力するフォームに文字列などが入っていたら、再入力を求める必要があります。処理の流れは次のとおりです。
1)フォームの値を javascriptで受け取る
2)バリデーションで値のチェック
3-1)正しければデータベースに記録
3-2)問題があれば、エラーメッセージを返す。フォームには入力中の文字を返してあげる。(全部再入力させなくて済むように)

詳細は割愛しますが、次のような書き方ができるようです。

router.post('/add', [
      check('name', NAME は必ず入力してください。').notEmpty(),
      check('mail', 'MAIL はメールアドレスを記入してください。').isEmail()
], (req, res, next) => { .....}

.isEmail(), .isInit().... など便利なものがあって、自動でチェックできます。

サニタイズ(悪用防止)

入力フォームにHTMLのコード(DOM)や、Javascriptを入れる悪人に対処する方法があることを学びました。
ejsはHTMLのテンプレートに値を埋め込むレンダリング処理をしますが、HTMLやJavascriptを埋め込んだらそのまま動いてしまいますから、防ぐ必要があるそうです。
とか動いてしまいますよね。

防ぐ方法はいたって簡単で .escape() メソッドをつけるだけです。上記のプログラムにサニタイズを追加すると次のようになります。

router.post('/add', [
      check('name', NAME は必ず入力してください。').notEmpty().escape(),
      check('mail', 'MAIL はメールアドレスを記入してください。').isEmail().excape()
], (req, res, next) => { .....}

また、入力データに条件をつける .check() も学びました。生年月日の入力フォームで未来など指定するとエラーが出たりする処理ですね。
私が使ってる釣りの釣果記録アプリだと、魚を釣った時間が釣行開始時間、釣行終了時間の間にないとエラーが出たりします。そういう処理を作り込む必要があるのですね…。

次回

SQLデータベースについて学ぼうと思います。軽い入門書をkindleで探してみます。

Node.js超入門 5章 - SQLの基本『CRUD』

f:id:kota_ly:20220111002628p:plain

前置き

 前回は、データベースを「DB Browser for SQLite」で作成してアクセスするまでお試ししました。

 今回は、SQLの基本CRUD(=Create, Read, Update, Delete)を試しました。
 CRUDの各種動作、データベース処理の勘所の順で学んだことをメモします。

記事本文

Create(新規作成)の動作

既存のデータベースにレコードを追加する処理がCreateです。

f:id:kota_ly:20220121210257j:plain

/add にアクセスすると、フォームが出てきます。テーブルはフィールドとして「ID、名前、アドレス、年齢」がありますが、サンプルに従ってID以外の入力フォームを作っています。
設定すると次のように入力したレコードが追加されます。(beforeの写真がなくて差分がわからないですがすみません)

f:id:kota_ly:20220121210541j:plain

Read(読み込み)の動作

読み込み動作です。 全データをオブジェクトに丸々読み出すということは前回やりました。
しかし今回は、クエリパラメータで指定したIDのデータのみを検索して取り出しました。 /read?id=1 と指定すると、データベースからオブジェクトに取り出して、ejsでレンダリングして表示します。

f:id:kota_ly:20220121210653p:plain

ここらへんから、SQLの強みが垣間見えました。データベースから抜き出すところの処理は下記のような感じです。
定数 q に入れている文がSQLの文法のようです。 テーブル"mydata"から id を検索します。
アルゴリズムとかの理解が苦手なので、何が起きてるのか知らなきゃいけない?などドキドキしますが、一旦スルーします汗)

const q = "select * from mydata where id = ?";
db.get(q, [id], (err, row) => {
    // rowにオブジェクトが渡されるので、テンプレート(.ejs)に渡してレンダリング
}

これはIDだけですが、AND、OR、MAX、MINなど条件を組み合わせてデータを取り出せるようです。

Update(更新)の動作

次に更新です。 サンプルのGUI操作は、よくあるウェブサービスの個人情報の変更画面のようでワクワクします。
クエリーパラメータでIDを指定してアクセスし、フォームにデータベースからレコードを読み出します。そのフォーム上で新しい情報を修正し、SQLのupdate文で更新します。

下の画像が更新する内容で、Modifyの _modをつけて見ました。

f:id:kota_ly:20220121211924p:plain

次のように更新された結果が表示されます。 変なレコードが増えてるのは気にしないでください。

f:id:kota_ly:20220121212619p:plain

プログラムは下記のとおりです。
where id のところを書き忘れると、全レコードが書き換わるそうです。恐ろしい。

 const q = "update mydata set name = ?, mail = ?, age = ? where id = ?";
 db.serialize(() => {
        db.run(q, nm, ml, ag, id);
});

Delete(削除)の動作

最後の削除処理です。 クエリーでIDを指定してアクセスすると、次のような画面になります。
これは、 Read で学んだ処理と同じです。

f:id:kota_ly:20220121213008p:plain

そして、削除を押すと…。

f:id:kota_ly:20220121213157p:plain

消えました!

感想と疑問点

サンプルプログラムが長くて時間がかかりました。お陰でJavascript、ejs、フォーム、クエリーなど色々染み付いてきました。
疑問は、細かい話ですがフィールドのIDについてです。Createをしたときに実はIDを指定していません。最後のIDから勝手にインクリメントされて追加されました。
・一番大きいIDを調べて自動でインクリメントしている?(フィールドが番号とは限らず不思議)
・レコード数+1をしている?(Delete処理のあとに、もう一度データを追加したところ、IDがインクリメントされた)

次回

SQL言語について学習を進めたいですが、次の節「バリデーション」が技術的に大切そうです。目だけ通したいと思っています。
これを持って、この書籍は終わりたいと思います。

それでは、ヒラメを釣ってきます。 日曜日、続きがんばります。

Node.js超入門 5章 - SQLite3 データベース作成 / sqlite3モジュールで読み込み

f:id:kota_ly:20220111002628p:plain

前置き

 5章「データベースを使おう!」が始まりました。

 ここではSQLite3というデータベースで、データベースへのアクセス方法、値のチェック方法(バリデーション)について学びます。

 本日は、データベース作成、データベースへのアクセスまで行いました。

もくじ

 5−1)SQLデータベースとは
 5−2)データベース作成(DB Browser for SQLite3)
 5−3)データベースへのアクセスと表示
 5−4)次回

記事本文

SQLデータベースとは

SQL言語対応か否か
 SQLはデータベースにアクセスするための言語です。SQLはなにかの略語ではないそうです。もともとSEQUEL(structured english query language)として開発をしていたそうですが、IBMが先にSEQUELという言葉を違う用途で使ってたので商標問題を避けるためにSQLとしたそうです。

 SQL言語以外に、様々なデータを高速に扱える非SQLがあるということも書かれていました。

ーサーバ型とローカル型
 今回はローカルにデータベースを起き、アクセスをするローカル型で試しました。

ーデータベースの構造
 データベースは扱うデータを事前に定義するそうです。受けた印象は構造体のようなイメージです。
 言葉としては「データベース、テーブル、カラム、レコード、フィールド」を覚えました。

データベースの作成

ーDB Browser for SQLite3でデータベース作成
 次図のようにデータベースを作成しました。

 f:id:kota_ly:20220119005447p:plain

 4人分のレコードを持ったアドレス帳のようなものです。
 え、ツールで作るのと思いましたが、SQL言語を学ぶ敷居を下げるための図らいでしょうか。わかりませんが、お陰で言葉を覚えることに集中できました。

データベースへのアクセスと表示

ーrequire sqlite3モジュール
sqlite3モジュールでデータベースへアクセスし、レンダリングした様子がこちらです。

f:id:kota_ly:20220119010126p:plain

sqlite3モジュールの機能を使って次の手順で表示までを行いました。
1)Databaseオブジェクトの取得
 ・・・const db = new sqlite3.Database('ファイル名')
2)Databaseオブジェクトのシリアライズ
 ・・・なくても動くけど大量のデータでは必須らしい
3)レコードをすべて or 一つづつ取り出す
 ・・・db.all(クエリー文, 取り出したあとの処理)
 ・・・db.each(クエリー文, 関数1, 関数2)
上の図は、db.all()で取り出したオブジェクトをfor文で回して出力しています。db.each()の場合、レコード単位でオブジェクトを取得するようです。
 {id: 1, name: kota, mail : .......} のような単位です。

次に学ぶこと

ー データベースの基本「CRUD」とは? です。
Create(新規保存)
Read(読み込み)
Update(更新)
Delete(削除)
 以上の略だそうです。略語でホッとしました。

パラパラページをめくると、結構長いサンプルプログラムがずらずらと書いてあります。もしかすると、明日、明後日、かかってしまうかも。

読んでいただきありがとうございました。
本日はここまで