【Happiness Chain Euforia - 2ヶ月目の振り返り】

【Happiness Chain Euforia - 2ヶ月目の振り返り】

HCEで学習した内容の、2ヶ月目の振り返りを記載します。

過去の振り返り

今月の振り返り

学習時間は56時間でした。

月の前半は良かったのですが、業務との兼ね合いもあり後半は学習時間が少なくなってしまいました。

コンスタントに学習時間を確保できるよう、工夫していきたいと思います。

月の最後の方に導入したポモドーロが感触良かったので、来月の振り返りの際に導入した効果の振り返りを記載しようと思います。

学習内容

  • Git ・ GitHub
  • HTML/CSS
    • Udemyでのインプット
    • グリッドデザイン・レスポンシブ対応のLPサイト模写
  • Docker
    • Udemyでのインプット

Gitは今までも業務で使っていたが、Gitの仕組みから学び直すことによって、動作の仕組みが理解できた。 いざというトラブル発生時等に役立てていきたい。

HTML/CSSはインプット課題をじっくりと取り組みすぎたことは反省したい。 しかし、その分アウトプット課題はスムーズに終わらせることができ、苦手意識があったが簡単なページであれば割とすんなり作成することができる自信がついた。

Dockerに関しては、業務で必要な知識をかいつまんで学んでいたので、改めて体系的に理解していきたい。 本格的なアプリケーションの開発環境を、自分で1からコンテナ化したことがなかったので、アウトプット課題に取り組んで理解を深めていきたい。

良かった点

  • 筋トレ・ストレッチ・散歩の習慣ができ、運動不足が解消されたこと
    • ゴルフも結構楽しかったので、ラウンドに出るとこまでは目指したい
  • 機能はまだ限られているが、Vimを違和感なく使えるようになったこと
  • ポモドーロでタスクに取り組んだところ、学習時間の確保が容易になった気がすること
    • 来月も引き続き実践してみて、効果を効果を確かめたい

改善すること

  • 課題のインプットに時間をかけすぎたこと
    • アウトプットをしない限り、技術が身に付くことはないのでインプットはスピーディーにやった方が良いと感じた

来月の目標

来月はSQL・Pythonのカリキュラムをやっていくことになるかと思うので、毎日コードをひたすら書いて、コーディングを身体で覚えるようにしたいです！

VSCode のNeovimプラグインのInsertモードで、Emacs風のキーバインドを使用する

表題通り、VSCode にNeovimプラグインを導入した状態で、 Insertモード中にEmacs風のキーバインドを使いたいと思い、以下のような設定をinit.vimに記述しました。

"Emacsキーバインド
inoremap <silent> <C-a> <Home>
inoremap <silent> <C-e> <End>
inoremap <silent> <C-h> <BS>
inoremap <silent> <C-d> <Del>

けど、全然想定通りに動かない・・・

ちょっと調べたところ、こんな記事を発見した。

VSCodeの拡張機能のVSCode NeoVimについて

Insertモードのキーバインドは、init.vimに記述してもダメなのね。

VSCodeのkeybindings.jsonに以下の記述を追加して解決！

{
"key": "ctrl+a",
"command": "cursorHome",
"when": "neovim.mode == insert && editorTextFocus"
},
{
"key": "ctrl+e",
"command": "cursorEnd",
"when": "neovim.mode == insert && editorTextFocus"
},
{
"key": "ctrl+h",
"command": "deleteLeft",
"when": "neovim.mode == insert && editorTextFocus"
},
{
"key": "ctrl+d",
"command": "deleteRight",
"when": "neovim.mode == insert && editorTextFocus"
},
{
"key": "ctrl+k",
"command": "deleteAllRight",
"when": "neovim.mode == insert && editorTextFocus"
},
{
"key": "ctrl+m",
"command": "type",
"args": { "text": "\n" },
"when": "neovim.mode == insert && editorTextFocus"
}

自分が使いたいものだけ記述しましたが、以下のドキュメントを参考にすれば、他にも色々と設定できそうです。

https://github.com/vscode-neovim/vscode-neovim

【Happiness Chain Euforia - 1ヶ月目の振り返り】

【Happiness Chain Euforia - 1ヶ月目の振り返り】

HCEで学習した内容の、1ヶ月目の振り返りを記載します。

学習を開始した経緯は以下。

今月の振り返り

学習時間は85時間を確保しました。

休日が多かった割には、お正月で何となく忙しかったりして、最低目標を達成したかな・・・くらいの学習時間に収まりました。

学習内容はプログラミングの前知識が多かったですが、大切な基礎の部分だと思うので、ロードマップ通りに一通り学習しました。

学習内容

  • 学習の準備（ロードマップを進めるに当たる前知識）
  • Progateをほぼ全て実施
  • Web技術の基本を学ぶ
    • 『プロになるためのWeb技術入門』を読んだ
  • テキストエディタ
  • Linux
  • Git ・ GitHub

良かった点

  • 初月からある程度の学習時間を確保できたこと
  • 学習に必要な色々な環境を整えたこと（内容は後述）

改善すること

  • 運動不足がひどいので、筋トレ・ストレッチを毎日やる
    • 家の近くに打ちっぱなしがあるので、ゴルフもやってみる（これは続くか？）
  • 学習時間をもう少し伸ばしたい。月に100hは確保したい
  • Vimのプラグインを入れたはいいものの、基本的な操作しかできないので、少しずつ使いこなしていく
    • ちょっと使ってみるだけでも、かなり便利な実感があるので、もっと使いこなしたい！

おまけ（学習の前準備）

ここからは、主に学習開始前の12月に主に実施した内容ですが、HCEの長ーいカリキュラムをやり通すために、自分なりに必要だと思った取り組みです。

学習時間の目標設定

スプレッドシートで管理表を作成し、以下のように学習時間の目標を立てました。 基本的には毎日学習を継続しているので、目安となる時間があると取り組みやすいかと思いました。

平日2.5h
休日5h
週おおよそ -> 22.5h

上記の通りに学習時間を確保すると、1/1 ~ 8/31の期間で800h程になることがわかりました。（土日祝日を加味）

カリキュラムの進捗はやってみないと見積もりがしづらいかと思いますが、 学習時間を確保することは何よりも重要かと思いますので、進捗・モチベーションの如何にかかわらず、継続的に学習を進めていきたいと思います。

身体の使い方（主に姿勢）

ロードマップを進めてみたところ、リモート勤務ということもあってか、 勤務時間 -> 業後の学習・・・と同じような姿勢でずっとPCに向かっていると、首・肩がバキバキになってしまいました。

整体に行ってみたものの、その場では治った気分になるものの、根本的に姿勢改善に取り組む必要を感じました。

一朝一夕には治らないかもしれませんが、色々みた中では以下の記事が参考になったので、身体の負担にならない姿勢を心掛けようと思います。

肩の力が抜けない人必見！正しく肩の力を抜く方法 – 鍼灸・接骨院 白澤堂HAKUTAKUDOU

姿勢を気を付けることに加え、1月の後半からは筋トレ・ストレッチといった運動も取り入れました。

デスク周りの環境

こんな感じに整備しました。

デスク周りも、かなり試行錯誤しましたが、 大きな変更はモニタとキーボードと椅子です。

34インチ曲面モニタと、分割キーボード、座り心地の良い椅子を揃えました。

湾曲ウルトラワイドモニター LG 34WQ75C-B をレビュー 34インチ/3440×1440/USB-C/IPS液晶/HDR/KVMスイッチ/PD 90W【おすすめ】｜Kohei Kimura | キムラコウヘイ

キーボードの購入

モニタと椅子はコストはかかるものの、設置するだけで済みましたが、 分割キーボードはまさに沼でした・・・学習開始前に用意して良かったです。

購入したのはこれ、keyball39です

Keyball39 | Shirogane Lab

遊舎工房で部品を揃え、秋葉原で工具を買い、悪戦苦闘しながら組み上げ、その後のキーマップ沼を抜け出すまでに、 合計1週間はかかりました。

沼に入門したきっかけは、この動画ですね・・・

【コレは凄い…！】分離式＆トラックボール搭載・究極キーボード keyball39 を使い倒す方法（iPadでも使える） - YouTube

正直1週間かけても、まだ改善の余地はあるくらい沼ですが、どうにか使いこなしていきたいと思います。

まとめ

思い返すと、本当に色々と購入して、この2ヶ月は人生最大の出費をしたと思います。

しかし、「これだけ投資してダメだったら、アプリ開発のエンジニアになるのはスッパリ諦めよう」と思えるくらいの覚悟は出来たので、 価値のある投資にしたいと思います！

Gitで怖いと思う私的ポイント

Gitで怖いと思う私的ポイント

Course: Git： もう怖くないGit！チーム開発で必要なGitを完全マスター | Udemyを受講したので、動画の内容を元に、普段自分がGitを使う上で怖いと感じるポイントをまとめてみる。

挙動が理解できない = 怖さに繋がると思うので、基本的な概念で理解の浅い部分もまとめてみた。

仕組みがよくわからない

  • Git以前のバージョン管理ツールは差分管理だった
    • コミットや、Pullの度に非常に時間がかかったみたい
  • Gitはスナップショットで管理する
    • バージョンの記録=コミット
  • ローカルは3つのエリアに分かれている
    • ワークツリー
    • ステージ
      • 一旦ステージングを噛ませることで、コミットするファイルを選択できる
    • リポジトリ
      • コミットした時点でスナップショットとしてリポジトリに保存される
  • ブランチはコミットIDを記録したポインタである
    • ブランチを切ると、コミットIDのポインタが切り替わる
    • マージすると、コミットIDのポインタが統合される
    • HEADには現在作業中のブランチが記載されており、ブランチへのポインタとして機能する

Gitのデータ管理方法がわからない

以下で理解する。

【Git&GitHub】Gitのデータ管理方法 Part1 - 未来エンジニア養成所Blog 【Git&GitHub】Gitのデータ管理方法 Part2 - 未来エンジニア養成所Blog

ローカルでの開発からリモートへの反映までの流れがわからない

VSCodeでの開発は以下のプラグインを利用すると便利

VSCodeでGitソース管理時におすすめのプラグイン3選！ | コードライク

  • Git History
    • コミット履歴の表示や検索などを行う
      • ブランチ・ファイル・行単位と、細かく見ていくときに使う
    • Git: View Historyでコミット履歴が表示される
      • あまり使わない？-> Git Graphの方が見やすいかも
    • Git: View File Historyでファイルのコミット履歴が表示される（右クリック）
    • Git: View Line Historyでファイルの行単位のコミット履歴が表示される（右クリック）
  • Git Graph
    • コミット履歴を綺麗に表示してくれる
    • Git Graph: View Git Graph(git log)を実行すると、コミット履歴が表示される
      • ブランチの分岐やマージがわかりやすい
      • ブランチの作成やマージもここから行える
  • Git Lens
    • Gitの機能のサポート
      • Gitタブ(ソース管理タブ)のサイドバー

コマンドを忘れたら、以下を参照する

Gitコマンドリファレンス～基本から応用まで～ #Git - Qiita

マージとリベースは何が違うのか

あなたはmerge派？rebase派？綺麗なGitログで実感したメリット - BIGLOBE Style ｜ BIGLOBEの「はたらく人」と「トガッた技術」

git pull と git pull –rebase の違いって？図を交えて説明します！ – KRAY Inc.

上記のブログが実例を伴って解説しており、わかりやすい。

あと、プッシュした後のリベースは基本的には禁忌であると念頭に置いておこう。

変更の取り消し方がよくわからない

gitでいろいろ取り消したい #Git - Qiita

設定がよくわからない

git config で色々確認できる

originってなんだ

  • リモートリポジトリの名前(ショートカット)
    • デフォルトではorigin
    • 任意の名前をつけることができる
      • 例えば、複数のリモートリポジトリを設定する場合など

設定の確認方法

Gitの設定をgit configで確認・変更 | note.nkmk.me

Linux講座のおさらいと覚書

Linuxコマンドのおさらい

もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう | Udemyを受講したので、Linuxの操作方法に関して、改めておさらい。

知らなかったり、あまり使っていなかったけど便利そうな操作をまとめておく。意外と忘れていることもあったりしたので、参考になりました。

bashショートカットキー

  • meta + f
    • 1単語進む
  • meta + b
    • 1単語戻る
  • ctrl + y
    • ヤンク
  • ctrl + u
    • カーソルのいる位置から行頭まで削除
  • ctrl + k
    • カーソルのいる位置から行末まで削除
  • ctrl + r
    • 履歴検索
      • ctrl + r
        • 一つ前の履歴を表示
      • ctrl + s
        • 一つ後の履歴を表示
      • ctrl + g
        • 履歴検索を終了
      • esc
        • 検索結果を表示したまま履歴検索を終了

コマンド

  • mkdir
  • rmdir
  • cp
  • find
    • find '[検索対象ディレクトリ]' -name '[検索文字列]' [検索アクション]
      • 検索対象ディレクトリ以下のファイル名が検索文字列に一致するファイルを検索。見つかったらアクションを実行する
      • 検索アクション(複数指定可能)
        • -print
          • 検索結果を表示（デフォルト）
        • -exec
          • 検索結果に対してコマンドを実行

その他重要事項

ハードリンクとシンボリックリンク

  • ディレクトリ
    • 所属するファイルのファイル名とinode番号の対応表を持っている、特殊なファイル（ファイルの実態は実はそこにはない）
  • inode（番号で管理されている）
    • ファイルの実体の保存場所を指し示す
    • その他色々な情報が入っている
  • ハードリンク
    • 元ファイルと同じinode番号を持つファイルを作成する
      • 元ファイルを削除しても同一のファイルにアクセスできる
      • ハードリンクを削除すると、元ファイルのリンク数が減る
        • リンク数が0になると、元ファイルが削除される
      • 使い道は巨大なファイルを複数の場所に配置したい場合など・・・あまりない
  • シンボリックリンク

標準入出力

ジョブとプロセス

  • プロセスは、プログラムの実行単位
  • ジョブは、複数のコマンドをまとめたもの
    • ジョブIDはシェルによって管理
  • nohup コマンド &
    • バックグラウンドでコマンドを実行する

プロになるためのWeb技術入門を読み、重要用語をまとめた

プロになるためのWeb技術入門を読み、重要用語をまとめた

Web開発の学習にあたり、全般的な知識を学ぶために、『プロになるためのWeb技術入門』――なぜ，あなたはWebシステムを開発できないのか：書籍案内｜技術評論社 を読んだので、重要用語を自分なりの言葉でまとめたい。

ステートフル・ステートレス

本書では、ステートフル・ステートレスという言葉が、ログイン状態を以下に保つか。という文脈において解説された。

HTTPは状態を持てないために、ログイン状態を保つことができない。そのため、ログイン状態を保つためには、クッキー・セッションという仕組みを用いる必要がある。

逆のステートフルの例としては、FTPが挙げられていた。

FTPにおいてファイルをやり取りをするリクエストを完結させるまでには、ID/パスワードを通知して許可を得てから、必要なやり取りを実施する必要がある。 一方で、HTTPにおける通信では基本的にリクエスト1つに対して、レスポンス1つが返ってくる。

ステートフルとレスでは一長一短があるが、認証が不要で、オーバーヘッド（本来目的とするの通信以外に発生するやり取り）が少ないHTTPは、WWWを実現するために考案された。

リクエスト・レスポンス・プロトコル

WWWを実現するためにステートレスなHTTPが考案されたが、HTTPはクライアントとサーバのやり取りの方法として用いられる。

HTTPのような情報のやり取りに関する取り決めをプロトコルといい、クライアントからサーバへの要求をリクエスト・サーバからクライアントへの返答をレスポンスという。

クッキー・セッション

ログイン状態を保つためには、クライアント側にログイン状態を保持する仕組みが必要である。

それがクッキーとセッションだ。クライアントとサーバ、つまりWebブラウザとWebサーバの間でやり取りされ、情報の交換を可能にしたのがクッキーである。

その仕組みは、WebサーバからWebブラウザにへHTTPレスポンスの中にクッキーを含めて送信する。Webブラウザはクッキーを保存しておき、次回以降のリクエストの際には、クッキーをHTTPリクエストの中に含めて送信するというものである。

しかし、クッキーを利用した情報のやり取りはHTTPのリクエストヘッダやレスポンスヘッダに含まれるため、情報が盗まれる可能性がある。そこで、セッションという仕組みが考案された。セッションとは、Webサーバ側で処理の進行状況を管理するための仕組みである

セッションは、Webサーバ側でセッションIDという一意なIDを発行し、IDごとに処理の進行状況をサーバ側に保存する。発行したIDをクッキーに保存してWebブラウザに送信する。

Webブラウザは、セッションIDを保存しておき、次回以降のリクエストの際には、セッションIDをHTTPリクエストの中に含めて送信する。サーバ側は、セッションIDをもとに、処理の進行状況を管理する。

サーバ側ではセッションIDごとに、処理の状況を随時管理する必要が生じるため、データの蓄積コストが増えるが、ブラウザとのやり取りの際には、セッションIDのみをやり取りするため、情報の漏洩を防ぐことができる。

ポート番号

TCP/IPでは、通信の相手を識別するためにIPアドレスを用いる。しかし、IPアドレスだけでは、どのアプリケーションと通信するのかを識別することができない。

そこで、アプリケーションを識別するためにポート番号が用いられる。ポート番号は、0から65535までの範囲で指定することができる。

情報を受け取る側のアプリケーションは、ポート番号を指定して待ち受け状態になる。情報を送信する側のアプリケーションは、ポート番号を指定して送信する。

アプリケーションごとにどのポート番号を使用するか指定する必要があるが、HTTPの場合は、80番ポートなど、よく使われるプロトコルには、デフォルトでポート番号が決められている。 このようなポート番号を、ウェルノウンポート番号という。

まとめ

ひとまず、重要な用語をまとめてみたが、実際にいくつかWebアプリケーションを作成してみないと、理解が深まらないと思う。

本書で紹介された内容を思い出しながら、これからの学習を進めていきたい。

Raycastを使いこなしたい

raycastを使いこなしたい

raycastは、macOSのランチャーアプリだ。

非常に多くの機能があるっぽいが、ここに記載した機能くらいは使いこなしていこうという思いを込めて、書き連ねていく。

proプランにすると色々と機能が解放されるが、GPT-4を速攻で起動できるというので、課金してみた。

確かにサクッと起動できる点はメリットだが、そんなに使うかな・・・まあ試してみます。

検索

Store

以下より色々ダウンロードできる。

https://www.raycast.com/store

  • カレンダーの表示
  • Color Picker
  • MyIP
  • Wi-Fi
  • Docker
  • Port manager
  • Deepcast
  • Installed Extensions

etc...

参考

RaycastのQuicklinkを使って、Google検索やPC作業を爆速化する