しぐまろぐ

勉強したことや読んだ本について書きます。

8月にやったことと9月の抱負

はじめに

SE5年目のしぐまと申します。
2023年6月11日にHappiness Chainというプログラミングスクールに入会し、約2ヶ月半が経過しました。

入会の経緯については以下に書きました!

wsigma.hatenablog.com

8月が終わったので、8月の月報を作成しました。月報の区切りを入会日ではなく月毎にしたい*1ので、このタイミングでの更新になります。

8月11日〜8月31日にやったこと

Happiness Chainの課題

  • Web開発の基礎を学ぶ
    • Udemy動画
      • 残っていた4分の3くらい
  • GitHub Pages
    • GitHub PagesでのWebサイト公開
    • GitHub Pagesの使い方のブログを書く
  • Docker
    • Udemy Docker講座動画
      • 9割5分くらい

感想

『Web開発の基礎を学ぶ』のUdemy動画は、HTML, CSS, JavaScript, Git部分については良い復習になり、RubyRuby on Rails部分は良い予習になった。

Happiness Chainのロードマップでは何回かに分けて同じ言語の基礎をやることになる。これは一見無駄なようだが、かなり意図的にこのように仕組まれていると思う。重要なことは必然的に何度もやることになるし、講師や著者によって説明が違うので理解が進む。

Dockerは初めて取り組んだのでどうなるかと思ったが、Udemyの講座がわかりやすく、全然理解できない!というところはなかった。M1 Macによるエラーも少しあったが、すでに対処法が確立されていたので問題なかった。
今まではホストOS上に直接環境構築してきたので、Dockerでは簡単に環境構築し直せたり、別の環境に移したりできるのがとても魅力に感じた。

英語

今月末から英語も始めた。

今後のインプット教材に英語のみの動画教材があるし、エラー文や英語の公式ドキュメントを読めるようになるために、これから英語にも取り組む。

地道に発音、単語、基本的な文法をやっていく。発音できれば聞き取れるようになるし、基本的な文法というか構造が分かれば文章も読めるようになるはず!

9月にやること

Happiness Chainの課題

  • Docker
    • Udemy Docker講座動画の残り
    • インプット教材 2点
    • 課題
    • 任意のインプット教材
  • Ruby
    • プロを目指す人のためのRuby入門
    • アウトプット課題

抱負

Dockerはインプット教材があと2種類あるので、それで基礎を定着させて課題に挑戦する。
Rubyは言語そのものというより、コーディング能力向上のためにアウトプット課題中心で取り組みたい。

学習時間の目標は平日2時間、休日5時間として合計99時間は確保する。

英語

単語

  • 英単語クリティカル+
    • mikanを使って隙間時間に毎日最低50単語ずつやるのを習慣にする

基礎(Youtube動画)

基礎を掴むために隙間時間に見る。

基礎(テキスト使用)

  • 英文法入門10題ドリル
    • 2周
  • 英文法基礎10題ドリル
    • 1周目第34講まで
  • 英文法読解入門10題ドリル
    • 2周目第3講まで
  • 英語のハノン
    • 9/17から始めて習慣にする

発音・リスニング

抱負

目的は、技術系の動画を自動字幕ありで見られるようになることと、技術系のドキュメント・エラー文を読めるようになること。

そのために、基本的な単語・文法を身につける。
また、正しく発音できれば正しく聞き取れるようになるので、最初に発音を重点的に取り組んでからリスニングに進む。

*1:月間勉強時間もカウントしやすい、他人からも区切りがわかりやすいといった理由です

Happiness Chain入会2ヶ月目にやったこと

はじめに

SE5年目のしぐまと申します。
Happiness Chainというプログライミングスクールに入会し、早くも2ヶ月が経過しました。
入会2ヶ月目(2023/07/11〜2023/08/11)にやったことをまとめておきます。

入会の経緯については以下に書きました!

wsigma.hatenablog.com

2ヶ月目にやった課題

  • Linuxの復習
  • HTML/CSS
    • Udemy動画
      • 1ヶ月目に半分終えていたので途中から
    • アウトプット課題
      • 初級
      • 上級(任意)
  • Web開発の基礎を学ぶ
    • Udemy動画
      • 4分の1くらいまで

感想

こうしてリストアップしてみると思ったより色々やっていて驚いた。

アウトプット課題は最初に上級に挑戦したら全然歯が立たなかった。折よく初級課題がロードマップに追加されたのでそちらに先に挑戦したところ、コツを掴めた。
諦めずにコツコツ取り組み、わからないことはメンターに質問して課題をクリアするという良い経験になった。

悪かったこととしては、三連休の過ごし方がダメだった。
具体的にいうと、連休前日に油断して夜更かししたせいで生活リズムが崩れ、眠気がありやる気が出ない状態になってしまった。
対策として、22時半就寝・6時起床の朝型に切り替える。ダラダラして夜更かしをしたり、夜に悩みすぎて寝付けなくなるのを防げば、もっと有効に時間を使えるはず!

アウトプット課題の参考になった資料

アウトプット課題を進めるにあたり、特に参考になった記事と本をメモしておく。

グリッドレイアウトに関する記事

課題ではグリッドレイアウトを使用した。Gridの各エリアに名前をつけられることを、以下の記事で初めて知った。

qiita.com

もちろん名前をつけなくてもGridは指定できるが、名付けることで圧倒的に理解しやすくなるのでおすすめ。メンテナンスもしやすくなる。

HTML&CSSの本

他の受講生の方がお勧めされていたので手に取った本。

この本のおかげでイマイチ理解しきれていなかったflexboxのコツを掴めた。まだ5%くらいしか読んでいないが十分に元は取れたと思う。
HTML&CSSの初心者を抜け出した人が手元に置いておき、困ったときに参照するための一冊。

3ヶ月目の目標

  • Web開発の基礎を学ぶ
    • Udemy動画の完了
    • GitHub Pagesでのサイト公開
  • Docker
    • Udemy
    • インプット教材
    • 課題
  • Ruby
    • 『プロを目指す人のRuby入門』に入る

抱負

できればRubyまで行きたいが、Dockerは初めてなのでどれくらい詰まるか想像できない。
使用しているMacがM1で、Appleシリコンの場合エラーになりやすいという情報も目にしたことがあるので、それも不安。ただ、M1が出てからだいぶ経つから、もう対処法は確立されていそう。

あとは英語の勉強をそろそろ始めたい。検索して出てきたページが英語だったら反射的に閉じてしまう癖は直りつつあり、Google翻訳を使って読めるようにはなったが、英語のドキュメントを臆さず読めるようになりたいので。

この月報も、節目のタイミングでまとめて書こうとすると忘れていることも多いので、1ヶ月間通して少しずつメモをしていく方式にしてみる。

現役エンジニアがプログラミングスクールになぜ入ったか&1ヶ月目の感想

はじめに

2023年6月11日にHappiness Chainというプログラミングスクールに入会しました。
1ヶ月と少し経ったので、入会の経緯と今まで学習した内容についてまとめておきます。

自己紹介

略歴

現役のエンジニアであるにもかかわらず、なぜプログラミングスクールに入ったのか。それを説明するために、少し長いですが、まず自己紹介をさせてください。

関東在住の30代前半です。大学卒業後に長く引きこもっていたのですが、紆余曲折あって短期間の職業訓練を経てIT企業に拾っていただき、人よりかなり遅れて社会人デビュー。システムエンジニアとして働き始めて5年目になります。

現職の環境

現職の同僚は経験のある中途採用の方か、大学等でプログラミングをしっかり学んできた方ばかりで、私のように基礎能力が足りずに入ってきた人はほぼいません*1。メンターもいないし、コードレビューもありません。

そんな中でも日々経験を積み、一人前のエンジニアとして開発ができるようになりたいと思い、休日も自分で買った本や動画で勉強をしてきました。

ただ、会社では複数の言語を扱っており短期間で変わるので、あれもこれもやらなくてはと手を広げすぎた結果何も身に付かなかったり、そもそもこの教材ややり方であっているのか迷いが生じたりして、なかなか勉強を習慣にできませんでした。継続力のない自分のことも嫌になっていきました。

何をどうやって勉強すれば一人前のエンジニアになれるのかと、上司や先輩にも何度か相談しましたが、上述の通り基礎能力が足りずに入社した人が私しかいないので、あまり有効な回答は得られませんでした。

自信が付くかと思い応用情報技術者等の資格も取りましたが、コーディングの能力が上がるわけではありません*2

成長の実感が得られない

会社からはそれなりの評価を得られてはいますが、自分としては成長を実感できないまま時が流れ、いつしか無力感ばかりが深まっていきました。

現職の環境では、私はこれから大きく成長することは難しいと感じています。かといって実力がない状態で転職が上手くいくはずがない。もうどうしようもないと諦めかけていました。

Happiness Chainを知る

そんなある日、Qiitaで目にしたのがHappiness Chainを経て転職に成功された方の記事でした。

qiita.com

こちらの記事で初めてHappiness Chainを知りました。
正直に言うと、それまでプログラミングスクール業界全体にあまり良い印象を持っていませんでした。受講料が高額なのに3ヶ月くらいの短期間で卒業生を生み出してSES企業に売っているイメージでした。3ヶ月でプログラミングができるようになるなら誰も苦労しないです。

ですが、こちらの記事とホームページを見て、Happiness Chainはそんな悪徳プログラミングスクールとは全く違うことがわかりました*3

happiness-chain.com

カリキュラム

カリキュラムの一部

ホームページのカリキュラムの一覧を見ると、HTML&CSSJavaScriptRailsSQLといったフロントエンド・サーバサイドの基本をしっかり押さえています。最初の方には実務に必須のLinux、Gitもあります。しかも後半にはType Script・Reactなどのモダンな言語もあり、AWSまであります。

これらをすべて、いや半分でも身につけようと思ったら絶対に3ヶ月では無理です。
現役エンジニアでさえ、ここまでできる人は少ないのではないでしょうか。
だからこそ、Happiness Chainが現場で通用するエンジニアの輩出を本当に目指していることが伝わりました。

もしこのカリキュラムをすべてクリアできたら、私も目指していた一人前のエンジニアになれるかもしれないと希望が生まれました。

受講料の安さ

とはいえ、受講料60万とかだったらさすがに躊躇します。しかし、なんと月額3万5千円弱*4でした。お財布に優しくてありがたいですが、カリキュラムに対して安すぎて逆に戸惑いました。カリキュラムとして色々挙げているけど、実は中身がスカスカなのでは?と疑いました。

2週間くらい迷って他のスクールも探しました。ただ、やはり最初にスクールに入ろうと思ったきっかけがHappiness Chainだったことや、Go言語を学べるのが魅力だったことから、最終的に「まあ思ってたのと違ったらすぐ辞めればいいや」と思い切って入会しました。

入会後の感想

心配していたカリキュラムの中身ですが、想像以上に充実していました。きちんとこなせば本当に自分で一通りこなせるエンジニアになれると思います。むしろ、私がちゃんとついていけるかどうかの方が心配になりました。。
週20時間は取り組むつもりですが、1年以上かかることも覚悟しています。

他の受講生の方もモチベーションが高い方ばかりなので、早いペースを見て焦ることや、現役エンジニアなのに全然できていなくて恥ずかしくなることも正直あります。

けれど、そういったことを差し引いても、自分一人で悩んでいた時に比べて圧倒的に楽になりました。頑張っているのは自分一人ではないと感じられるし、目の前の課題を地道にクリアしていけば成長できるとわかっているからです。

今後も自分のペースで取り組み、できないことにきちんと向き合い、実力をつけていきたいです。

1ヶ月目にやったこと

ここからは入会後の1ヶ月に取り組んだことを振り返って、次の1ヶ月でやることを書いておきます。
1ヶ月目は、カリキュラムの一番初めから取り組み、以下を学びました。

  • 質問の仕方、アウトプットの仕方
  • Progateでのプログラミング体験
  • Markdown記法
  • Web技術の基本
  • VScodeの基本
  • VimLinuxの基本
  • Git & GitHub
  • HTML&CSSの基本

補足:現役エンジニアの取り組み方について

ちなみに、Happiness Chainの方針としては、現役エンジニアの場合は既知の内容を飛ばし、仕事で使う言語やツールから取り組んでも良いとされています。

私は基礎に抜けがある自覚があるため、一番初めの課題から全部やろうと決めました(課題の本や動画を見て、明らかに既知のはスキップしたり動画を倍速視聴したりはしています)。
1ヶ月取り組んできて、基礎的なことでも知らなかったことも多かったので、その決断は間違っていなかったと思います。

2ヶ月目にやること

  • ブラウザのデベロッパーツールの使い方
  • HTML&CSSのアウトプット課題
    • ロードマップ以外の本も使って知識を深める
  • HTML&CSSJavaScriptの教材

思った以上にHTML&CSSのアウトプット課題でつまづいてしまい、闇落ちしそうになりました。
ただ、ここを乗り越えたら絶対に成長できるし、調べてもわからなかったらメンターに相談できる安心感もあり、なんとか乗り越えられそうです。

2ヶ月目でDockerまで終わらせたいなと漠然と想像していましたが、あまり焦らずにしっかりHTML&CSSをやりたいと思います。

カリキュラム外でやりたいこと

2ヶ月くらいやればHappiness Chainでの学習習慣が定着すると思うので、3ヶ月目からは英語もやりたいなと思っています。
あとは、交友関係も広げたいので、そろそろ定期的に開かれるオンライン/オフラインミートアップにも参加して、他の受講生の方ともっとお話ししたいです。

*1:いましたが、みんな辞めていきました

*2:資格の性質上当然ですね

*3:こういうことを書くと嘘くさいな〜と思われるでしょうが、本心なので...

*4:私が入会した時のGoコースの価格です。コースによっても金額は変わります

GitHub Pagesでハマった。index.htmlが表示されない、CSSが反映されない...

はじめに

Github Pagesを使うと、自分で作成した静的なサイトを無料で簡単に公開することができます。
今回、HTML&CSSでできたサイトをアップしようとしたら、いくつか引っ掛かるポイントがありました。
簡単ですが、対処方法をメモしておきます。

Github Pagesへの公開方法について

リモートリポジトリにPushした後、対象のブランチのページを開いて「Settings」タブを開き、左メニューから「Pages」を選択する。
すると、GitHub Pageの設定ページが開くので、公開するブランチを選択して「Save」を押す。

GitHub Pageの設定ページ
公開の手順はこれだけ。「https://{アカウント名}.github.io/{リポジトリ名}」にアクセスすれば、作成したページにアクセスできる。

なお、Githubアカウントを持っていない人やリポジトリの作成方法がわからない人は、以下を参照。

prog-8.com

README.mdが表示される

index.htmlを公開したかったのだが、「https://{アカウント名}.github.io/{ブランチ名}」にアクセスしたところ、README.mdが表示されてしまった。
どうやら直下にREADME.mdがある場合はそちらが優先的に公開されてしまうようなので、以下を参考にしてREADME.mdを.github/*1以下に移動させて、再度commit & push。

qiita.com

CSSが反映されない

無事にindex.htmlが見られるようになった!と思ったら、今度はCSSが全く適用されていなかった。ローカルで確認した時は適用されていたので、Github pagesへの公開で上手くいっていないに違いない。
Github pages CSS 適用されない」で検索したらめちゃくちゃ出てきた。例えば以下のページなど。

daiblog923.com

どうやらCSS相対パスではなく絶対パスで指定する必要があるらしい。
つまり、CSS相対パスがもし「css/style.css」だとしたら、これを絶対パスhttps://{アカウント名}.github.io/{ブランチ名}/css/style.css」に書き直す必要がある。

絶対パスに書き直して、再度commit & push。

それでもCSSが反映されない

キャッシュの問題かと思ってスーパーリロードを行い、反映にラグがあるのかと思って1分待ったが、それでもCSSが反映されない。こういう時は大抵パスを間違えている。もう一度確認してみた。
index.htmlで指定したパスは「...css/style.css」と小文字なのに対し、実際のフォルダ名は「...CSS/style.css」と大文字になっていた。小文字が正しいので、フォルダ名の方を小文字に修正した。
これで再度commit...と思いきや、$ git statusをしても、修正があったフォルダとして「css」が出てこない。

なぜかGitがフォルダ名変更を認識してくれない

どうやらGitはデフォルトでは大文字・小文字を区別しないようで、だからフォルダ名を小文字に変更しても差分として検出してくれないようだ。

zenn.dev

対応方法としては、「$ git config core.ignorecase false」を設定して大文字・小文字が区別されるようにする。設定を変更したくない場合は、「$ git mv」を使用してファイル名の変更をGitにわからせる。

$ git mv CSS/style.css css/style.css

色々あったが、これでようやくCSSが反映された。。

*1:.github/はGithubリポジトリの設定値などを格納するディレクト

vimtutorの内容を元にvimの基本操作についてまとめてみた

はじめに

vimはエディターの一種です。マウスがなくても使用できるため、サーバを操作するときによく使用されています。多様なコマンドを使いこなせるととても便利なため、普段使いしているプログラマも多くいます。
しかし、そのコマンドの多さから初心者が使いこなすには少しハードルがあります。
そのハードルを超える手助けのため、vimには公式のチュートリアルが存在します。それが「vimtutor」です。Linuxで「$ vimtutor」と入力すれば簡単に始めることができます。
この記事では、vim初心者の方と記憶力が衰えつつある自分のために、vimtutorの内容を整理してまとめるものです。
なお、本記事は練習も兼ねてvimで書きました(VScodevim拡張機能を入れました)。

カーソル移動

カーソル移動は位置キーでも行えますが、位置キーがないキーボードもありますし、ホームポジションから指を移すことなく移動できた方が早いです。基本的にはh,j,k,lを使ってしましょう。

キー 移動方向
h
j
k
l

覚え方

h, l はキーボード上の左右と一致しているので覚えやすいですよね。ただ、問題は j, k です。これは実はJK(女子高生)のイントネーションと同じと考えると覚えやすいです。J↓K↑です。

ファイル内の移動

h, j, k, lで一応移動はできるのですが、何行にも及ぶファイルの場合は疲れてしまいますよね。そんなときに便利なコマンドを紹介します。

コマンド 説明
0 行頭へ移動
$ 行末へ移動
w 単語の末尾へ移動
gg ファイルの先頭へ移動
nG , :n ファイルのn行目へ移動
G ファイルの末尾へ移動
H 画面の最上行へ移動
L 画面の最下行へ移動
ctrl + b 前の画面へ移動
ctrl + f 次の画面へ移動

現在のファイルの行数は、Ctrl + gを押すと下側に表示されます。

ファイルの行数表示

モード

vimは入力と操作をキーボードだけで行いますので、「今入力されたhはカーソルを左に移動させるということなのか?それともhという文字を入力したいのか?」をvimに区別してもらうために、モードの切替を行います。
モードには以下の3種類があります。

モード 説明
Normal ファイル内の操作を行う
Insert ファイル内での入力を行う
Visual ファイル内での文字の選択を行う

このうちVisualモードについては後述することにして、この章ではNormalモードとInsertモードについて扱います。
vimを開いた時点ではNormalモードになっています。Normalモードでは先程紹介したカーソル移動や、後述する文字の編集・削除、ファイル内の検索、vimの起動終了などあらゆることを操作します。名前の通り、ノーマルな(通常の)操作はこのモードで行い、文字を入力したいときにInsertモードに切り替えます。切替は以下のコマンドで行えます。

コマンド 説明
i カーソル位置から入力
a カーソル位置の後ろから入力
I 行頭に移動してそこから入力
A 行末に移動してそこから入力
O カーソル位置の上に新しい行を作成し、行頭から入力
o カーソル位置の下に新しい行を作成し、行頭から入力

切替は必ず英数字入力モードに変更してから行ってください。日本語入力モードでiやaを押してもNormalモードに変更されません。

InsertモードからNormalモードに戻すには、Escキーを使います。モードは画面の左下に表示されます。

モードの表示

覚え方

iはinsert, aはappendの頭文字と考えると、入力した文字の挿入位置が前か後ろかわかりやすいと思います。それらを大文字にしたA, Iも前後は同じなので一緒に覚えられると思います。
問題はOとoですね。正直これはもう理屈ではないので、vimを繰り返し触っていく中で指に覚えさせるしかないです。vimの操作全般にいえることなんですけどね。

vimの起動、保存、終了

vimエディタでファイルを編集するには、ターミナルで以下のコマンドを実行します。

$ vim {ファイル名}

するとvimエディタが立ち上がってファイルの編集ができるようになります。
編集後に保存・終了を行うには、まず、Normalモードで「:」を押します。すると、画面最下部にカーソルが移動するので、そこで以下のコマンドを入力してENTERキーを押します。

コマンド 説明
:w 保存
:q 終了
:q! 保存されていない内容を破棄して強制的に終了
:wq | :x ZZ | 保存して終了
:wq! 強制的に保存して終了
:e [ファイル名] vimを終了せずに現在のファイルを閉じて他のファイルを開く(現在のファイルが編集済みの場合は警告が表示され他のファイルは開けない)
:e! [ファイル名] vimを終了せずに現在のファイルを閉じて他のファイルを開く(現在のファイルが編集済みの場合、最後に保存した状態に戻す)。ファイル名を指定しない場合は、単に現在のファイルを最後に保存した状態に戻す

編集終了

覚え方

wはwrite, qはquitだと考えると覚えやすいです。「やれ!」という感じで強制的にやらせる場合に!を付けます。

テキストの削除

削除は大きく分けて2種類のコマンドで実行できます。xとdです。xコマンドは1文字単位で削除を実行し、dコマンドは単語・行・カーソル位置から行末までなど色々な削除の仕方ができます。
まずは具体例を見ていきます。

例)This is a pen.という文章を対象に削除コマンドを試してみます。

  • Tにカーソルがある状態で「x」を押すと、Tが削除される
  • Tにカーソルがある状態で「3x」を押すと、Thiの3文字が削除される
  • Tにカーソルがある状態で「3dw」を押すと、"This is a "の3単語が削除され、カーソルはpに当たる
  • Tにカーソルがある状態で「3de」を押すと、"This is a"の3単語が削除され、カーソルはpの前の空白に当たる
  • aにカーソルがある状態で「d0」を押すと、aより前が全て削除される
  • aにカーソルがある状態で「d$」を押すと、aより後が全て削除される
  • 文章のどこかにカーソルがある状態で「dd」を押すと、行全体が削除される

規則性が見えてきたでしょうか?
実は上記の例では、コマンドと「モーション」を組み合わせて削除を実行しています。モーションは、何に対して働きかけるかを表しています。

モーション 説明
w カーソル位置から次の単語の直前まで
e カーソル位置からその単語の末尾まで
0 カーソル位置から行頭まで
$ カーソル位置から行末まで

コマンドは数字とも組み合わせられます。上記の例で挙げた「3dw」の場合は、カーソル位置から3つの単語とその次の単語の直前の空白まで削除され、「3de」の場合は、カーソル位置から3つの単語の末尾までが削除されるというわけです。

覚え方

まず、削除のコマンドであるdはdeleteの頭文字です。
モーションのwは「次のwordの直前まで」、eは「その単語のendまで」で覚えられますよね(ちょっと無理やりですが)。 0は0文字目、$はドルマークなので「終わっとる(ドル)」で終わりの文字だと語呂合わせで覚えましょう!!!

テキストの貼り付け

削除したテキストはpコマンドで貼り付けることができます。

コマンド 説明
P カーソル位置の左側もしくは上の行に貼り付け
p カーソル位置の右側もしくは下の行に貼り付け

また、yコマンドでテキストを削除せずにコピーすることができます。yコマンドでコピーしたテキストもpコマンドで貼り付けられます。
コピー、貼り付けのvimコマンドをWindowsのショートカットキーと対応させると、以下の通りです。

vimのコマンド Windowsショートカットキー 操作
y ctrl + c コピー(コピーしたテキストは削除しない)
d ctrl + x コピー(コピーしたテキストは削除する)
p ctrl + v 貼り付け

貼り付けも削除と同じくモーションと組み合わせて使用できます。

コマンド 説明
yw 単語のコピー
yy もしくは Y 行全体をコピー
nyy n行をコピー
y0 カーソル位置から行頭までコピー
y$ カーソル位置から行末までコピー

覚え方

貼り付けのpはpasteの頭文字です。よくコピペっていいますよね、あれの"ぺ"にあたるペーストのことです。Pとpの違いは、大文字なら上(左)、小文字なら下(右)と覚えるしかないです。(前述したOとoも同じです)
yはyank(ヤンク)の頭文字です。ペーストに比べるとなじみがない英単語ですね。「引っ張る」という意味らしいので、テキストを引っ張ってくるイメージでしょうか。

Visualモード

モードの章で飛ばしたVisualモードについて解説します。Visualモードでは文字列の範囲選択ができ、選択した範囲に対して何か操作を行います。
例えば、複数行をコピーする場合は、コピーしたい行の先頭で「v」を押してVisualモードに切り替えます。そのままカーソルを移動させ、コピーしたい行が全て選択状態になったら、「y」を押してコピーします。

Visualモードで選択
あとは、貼り付けたい場所に移動して「p」を押せば貼り付けられます。

置き換え

置き換えコマンドを使えばいちいちモードを切り替えて削除を入力を実行しなくて良く、楽です。
置き換えたい文字にカーソルが当たった状態で、1文字だけを置き換えるならr, 1文字以上を置き換えるならRを押すと置き換えを実行できます。

例)This is a pen.のpにカーソルが当たった状態でRを押すと置き換えできるようになります。入力が終わったら「Esc」を押してNormalモードに戻します。

覚え方

rはreplaceの頭文字です。

単語や行の変更

cコマンドとモーションを組み合わせると、単語や行の変更を行えます。
例えば、「cw」ならカーソル位置から単語の終わりまでを削除してInsertモードに切り替える、「c$」ならカーソル位置から行末までを削除してInsertモードに切り替えるといったことができます。
削除コマンドで同じようなことができるので覚えなくてもいいかなと思っています。

操作の取り消し

誤ってコマンドを実行してしまったときに取り消すのがuコマンドです。そして、uコマンドで取り消した操作を再実行するのがctrl + rです。
Windowsショートカットキーとの対応は以下の通りです。

vimのコマンド Windowsショートカットキー 操作
u ctrl + z 操作の取り消し
ctrl + r ctrl + y 取り消した操作の再実行

Windowsショートカットキーにはない操作ですが、vimでは「U」を押すと行全体の操作を取り消して元の状態に戻すことができます。

覚え方

uはundo(アンドゥ)の頭文字です。unは否定の接頭辞なので「doしない」ということですね。(do自体に「する」という意味があるので、「doしない」という言い方はおかしいのですが、イメージしやすいのであえてこの言い方をしています)
rはredoの頭文字です。reは繰り返しを表す接頭辞なので「再びdoする」ですね。rやRは既にコマンドとして使われているのでctrlキーと同時押しなのだと思います。

ファイル内の検索

Windowsでctrl + fで検索が行えるように、vimでもファイル内の検索が行えます。
/を入力すると、画面の下側に入力欄が現れるので、検索したい単語を入力します。ここでは例としてbashrcと入力しました。

bashrcで検索
ENTERキーを押すと、カーソル位置から一番近い検索結果へ移動します。
上方向の検索結果に移動するにはN, 下方向に移動するにはnを入力します。

コマンド 説明
? 上方向に検索を実行
/ 下方向に検索を実行
N カーソル位置より上の検索結果に移動
n カーソル位置より下の検索結果へ移動

検索したい単語に?や/が含まれる場合は、\を使ってエスケープしてください。
例えば、「/\/home」と入力すると「/home」が検索できます。

対応する括弧の検索

カーソルが括弧に当たった状態で「%」を押すと、その括弧に対応する括弧までカーソルが移動してくれます。
この機能はデバッグのときに対応を見つけてくれて便利です。例えば以下の場合、1行目の括弧で「%」を押すとカーソルが移動しないので、対応する括弧がないことがわかります。

class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

括弧は(, [, {のいずれでも、そして括弧が何重になっていても大丈夫です。

ファイル内の一括置換

置き換えについては前述しましたが、検索して一括置換する場合は、他に便利なコマンドがあります。
まず、ある行で文字列の一括置換を行いたいときのコマンドを見てみます。その行にカーソルを当てた状態で、以下のコマンドを入力します。

:s/{置換元文字列}/{置換後文字列}/g

最後のスラッシュの後に「g」があると、検索結果の置換元文字列を全て置き換えてくれます。「g」がなければ置換は1回だけです。また、「gc」とすると、検索結果を置き換えるかどうか確認を取りながら置き換えが行えます。
他にも、特定の範囲だけ置き換えたり、ファイル全体で置き換えをすることができます。

コマンド 説明
:s/{置換元文字列}/{置換後文字列}/g カーソル位置の行を対象に一括置換
:#,#s/{置換元文字列}/{置換後文字列}/g #行目から#行目までを対象に一括置換
:%s/{置換元文字列}/{置換後文字列}/g ファイル全体を対象に一括置換
:%s/{置換元文字列}/{置換後文字列}/gc ファイル全体の検索結果に対し、1つずつ確認を取りながら置換

外部コマンドの実行

vimエディタを使用中にvimから抜け出すことなく外部コマンドを実行することができます。
外部コマンドを実行するには、「:」を押して画面最下部にカーソルを移動させた後、「!」を押します。これらに続けて実行したいコマンドを入力し、ENTERキーを押すだけです。
例としてlsコマンドを実行してみましょう。

:! ls

実行結果が表示されたら、ENTERキーを押して結果の表示を終了できます。

外部ファイルへの書き込み

現在vimエディタで編集しているファイルを外部ファイルに書き込むには、以下を実行します。

:w {外部ファイル名}

例えば「:w test.txt」と入力すれば、現在編集しているファイルの内容がtest.txtへ書き込まれます。

選択範囲の外部ファイルへの書き込み

ファイル全体ではなく、選択した範囲のみを外部ファイルへ書き込むには、Visualモードを使用します。
まず、「v」を押してVisualモードへ切り替えて、外部ファイルへ書き込みたい部分を選択します。
その後、「:」を押すと、画面の最下部に「:'<,'>」が現れます。その後ろに「w {外部ファイル名}」を指定します。

選択範囲を外部ファイルへ書き込み

覚え方

他のファイルへの書き込みなので、writeの頭文字のwです。

外部ファイルの読み込み・書き出し

前の2章とは逆に、外部ファイルを読み込んで、現在編集中のファイルのカーソル行の下へ書き出すこともできます。

:r {外部ファイル名}

外部コマンドの実行結果を書き出すこともできます。例えば、lsコマンドの実行結果を書き出す場合のコマンドは以下の通りです。

:r !ls

覚え方

他のファイルを読み込むので、readの頭文字のrです。

オプション機能

vimエディタには便利なオプション機能が存在します。デフォルトでは無効になっているので、使用したい場合は設定が必要です。
オプション機能を設定するコマンドは以下の通りです。

コマンド 説明
:set {オプション名} オプションを設定する
:set no{オプション名} オプションの設定を解除する

オプションには以下があります。

オプション 説明
ic 検索時に大文字・小文字の違いを区別しない
nuber ファイルの行番号を表示
hlsearch 検索結果をハイライト表示

例えば、「:set hlsearch」と設定した後で「/ignore」と検索すると検索結果がハイライト表示されます。

検索結果のハイライト表示
ハイライト表示を解除したい場合は、「:set nohlsearch」とします。

覚え方

icはIgnore Caseの, hlsearchのhlは、highlightの頭文字です。

helpサイト

vimのヘルプを参照するには、vimエディタを起動した状態で「:help」を押します。すると、現在編集中のファイルのウィンドウとは別に、ヘルプウィンドウが立ち上がります。
ヘルプウィンドウへ切り替えるには、ctrl + wを押します。ヘルプウィンドウ内で検索を実行することもできます。
ヘルプウィンドウを閉じるには、「:q」と入力してENTERキーを押します。

参考

『プロになるためのWeb技術入門』を読んだので自分なりにポイントをまとめた

この記事について

『プロになるためのWeb技術入門』を読み、理解を深めるために自分なりに咀嚼した内容を記します。 この記事に出てくるポイントは以下の通りです。

リクエスト、レスポンスについて

あるユーザーが見たいサイトのリンクをクリックしたとしましょう。
ブラウザはクリックされたリンクに記されたURL(サイトの住所みたいなもの)を元にして、サーバに「このサイトの情報をください!」と要求します。
ユーザーからサーバに要求することをリクエスといいます。 これに対し、サーバがユーザーに返すサイトやサイトの情報のことを、レスポンスといいます。

リクエスト・レスポンス
なお、ユーザーは「サイトの情報をください」と依頼する人なので、クライアントとも呼ばれます。

URLについて

前項ではURLのことを"サイトの住所みたいなもの"と称しましたが、もう少し詳しく見ていきます。
例えば以下は、このブログのある記事のURLです。 https://wsigma.hatenablog.com/entry/2023/06/17/214105
このURLは3つの要素に分けることができます。

  • https://」スキーム
  • 「wsigma.hatenablog.com」:ホスト名
  • 「entry/2023以下」:パス名

スキームは、情報を得る手段を表します。
スキームで一番有名なのはhttpでしょう。httpsは、httpをよりsecure(セキュア・安全)にしたものです。
ホスト名は、その情報が存在するホスト(サーバ)の名前を表しています。
パス名は、そのサーバのどこに記事が格納されているかを表しています。

つまり、上記のURLをクリックするということは、「wsigma.hatenablog.com」というホスト名のサーバに、「entry/2023/06/17/214105」という記事を、「https」という手段でくれ、と要求しているということです。

プロトコルについて

前項で述べた通り、スキームは単にどのような手段で通信するか?を表しているに過ぎません。具体的な通信のルールはプロトコルで定めています。
ちなみに、スキーム名とプロトコル名は同じ場合もあります(http, https, ftpなど)が、全く別のものもあります。mailtoがその例です。

ポート番号について

プロトコルにはポート番号がセットで存在します。
ポート番号は、サーバの受付窓口の番号のようなものです。
代表的なプロトコルの場合は予めポート番号が決まっています。これをウェルノウンポートといいます。

ポート番号 プロトコル
20,21 ftp(ファイル転送)
80 HTTP
443 HTTPS

これにより、クライアントはサーバのどのポート番号にリクエストを送ればよいか迷わなくて良いことになります。 HTTPSの場合、443番のポート番号にリクエストを送れば、サーバはHTTPS通信だと認識し、HTTPSプロトコルに従って解釈して処理を行えるというわけです。

ウェルノウンポートの場合はポート番号が省略できるため、大抵のURLでは省略されています。先ほど挙げたURLでも省略していますが、ポート番号も含めて書いてみると以下のようになります。 https://wsigma.hatenablog.com:443/entry/2023/06/17/214105

ステートフル、ステートレスについて

ネットショップの画像

ここからは、ログイン認証があるお買い物サイトを例に、ステートフル、ステートレス、Cookie、セッションについて見ていきます。
なお、本来は安全に通信を行うためHTTPSを用いるべきですが、ここでは話を簡単にするため、HTTP通信を用いるものとします。
ユーザーがログインした後、商品をカートに入れるという状況を考えてみます。
商品がカートに入った時、サーバは"誰がカートに入れたのか"を認識する必要があります。そのためには、ユーザーがログインした時の認証情報をサーバに維持したまま処理を継続してもらえば良いわけです。こんなふうに。

ステートフルな通信
このように、以前の状態を保持したまま処理を行う方法を、ステートフルといいます。
ステートフルな通信はクライアントにとっては楽で、一見何の問題もなさそうに見えますが、そうでもありません。 上記の例はクライアントとサーバが一対一でしたが、クライアントの数が増えたら、サーバはクライアントごとに全ての手順を維持したまま処理を継続しなければいけなくなります。となると、クライアントが増加するたびにサーバの負荷が増大していきます。結果的に、クライアントの待ち時間も発生してしまうという事態になるでしょう。
このような理由もあり、HTTP通信はステートフルではなく、相手の状態を維持しないステートレスなやり方を取っています。つまり、サーバは直近のクライアントのリクエストに対してレスポンスを返すだけで、それ以前のやりとりについては維持しません。
しかしこれでは、困ったことになります。商品がカートに入った時、誰がカートに入れたのかわからないですよね。
誰がカートに入れたかわからない
どうにかして、ユーザーの認証情報を保持したままステートレスな通信を実現したい。そのためにできたのがCookieという仕組みです。

Cookie、セッションについて

ユーザーのログインが成功した時、サーバはレスポンスの一部として、ユーザーIDとパスワードを組み合わせたCookieを送ります。ブラウザはそのCookieを受け取り保存しておきます。

レスポンスでCookieを送る
次にユーザーが商品をカートに入れた時、リクエストの一部としてCookieを送ることで、サーバはクライアントを判別できることになります。
リクエストのときにCookieを渡す
これで一件落着!と思いきや、このやり方にはセキュリティ上の問題点があります。それは、Cookieは簡単に覗き見できるということです。第三者がクライアントとサーバの通信を盗み見してCookieを取得したら、簡単にクライアントになりすますことができてしまいます。
覗き見マン

そこで、ユーザーの認証情報を保持したまま、より安全にステートレスな通信を実現するための仕組みとして、セッションが生まれました。
ログイン認証後のレスポンスの時、サーバはCookieにユーザーIDとパスワードの代わりにセッションIDを入れます。そして、その後クライアントは、CookieにセッションIDを入れてリクエストします。セッションではクライアントの処理の流れをサーバ側で保持しているので、サーバはCookieに含まれるセッションIDを見て、必要な処理を行うことができるのです。

セッションを使ってユーザーの認証情報を保持する
なお、セッションIDは桁数の多いランダムな文字列ですので、他のユーザーと重複する恐れはありません。ただし、CookieにユーザーIDとパスワードをそのまま入れるよりは相対的に安全ですが、セッションID自体を盗まれる危険性もあり、絶対に安全というわけではありません。

【Linuxコマンド】直下にあるファイルを直下にあるディレクトリに移動させたい

結論

お急ぎの方のために結論から書きますと、以下のコマンドを実行すれば移動できます。

$ find . -type f | xargs -I@  mv @ {直下のディレクトリ名}/

解説

具体例を使いながら解説していきます。

ディレクトリ構成図

現在のディレクトリ構成が以下の通りだとします。

.
├ dest/
├ foo.json
├ hoge.md
├ sample1
├ sample2
...
├ sample100
└ test1.txt

やりたいこと

カレントディレクトリにある全てのファイルを、同じくカレントディレクトリ内にあるdestディレクトリに移動させたいです。

エラー

一つずつ手で移動させるのも面倒なので、以下のコマンドを実行したところ、エラーが出ました。

$ find . -type f | xargs mv dest/
mv: ./foo.json is not a directory

mvコマンドを実行するにあたり「foo.jsonディレクトリじゃない」と怒られています。

いやfoo.jsonがファイルなのは知っているよ。。どういうこと?

原因

調べてみると、原因はfindコマンドの実行結果が全てmvコマンドに渡されてしまうことにあるようです。

詳しく見て行きましょう。

まず試しにfindコマンド部分だけ実行してみると、ファイル名が全て表示されます。

$ find . -type f
./hoge.md
./foo.json
./test1.txt
./sample1
...

エラーでは、この出力結果をそのままmvコマンドに渡していました。

すると以下のように、ファイルを別のファイルに移動させようとしていると解釈されてしまいます。

mv ./sample ./foo.json

こんなことがしたいわけじゃないですよね。移動させたい先はdestディレクトリです。

解決方法

使用したのは、xargsコマンドのIオプションです。

Iオプションは「xargs -I@」のように設定すると、@部分に受け取った引数を配置してくれます。

つまり今回の場合は「xargs -I@ @ dest/」とすると、実行時に@をファイル名に置き換えてくれるんです!

もう一度結論

ここで、最初に結論で書いたコマンドをもう一度見てみます。

$ find . -type f | xargs -I@ mv @ dest/

もう何をやっているかわかりますよね。 findコマンドによって直下のファイル名が出力されます。 そして、出力されたファイル名が@部分に1つずつ入るので、内部では以下が実行されることになります!

mv ./hoge.md dest/
mv ./foo.json dest/
mv ./test1.txt dest/
mv ./sample1 dest/
...
mv ./sample100 dest/

無事に直下のファイルを全て直下のdestディレクトリに移動できました!

xargsコマンドのIオプションの補足

xargsコマンドのIオプションで指定する記号は@でなくても良いようです。

以下は{}を使用した場合の例です。

$ find . -type f | xargs -I{} mv {} dest/

参考