ブログ内検索

テック

爆速コーディングを実現するVimを布教する記事【入門編】

vim-believer-cover.avif

どうも。身近な人が何のIDEを使っているのか最近興味津々なこうじです。

よくターミナルとかでVPSサーバーとかいじってたらよくVim(vi)使いますよね?サーバーといえばお前しかしない!っていうくらい使うはず。・・・使うんです!!

Vim自体ほとんど触ることないですし、なのであれって何がいいのか全くわからず、サーバー触るたびに「あれ、面倒だよなぁ・・・。」

と、考えていた事もありました。

こうじ
こうじ
まぁ、やってみないとほんとのところはわからないしな!

と、いつからか思い。思い切って今使っているIDEにVimプラグインを入れて「俺は絶対にVimしか使わないぞ!」と覚悟して使い始めたんです。

そしたら、もうなんていうかもう。ね。

いてくれてありがとう。Vim

と、なって今に至ります。

なので、今回は食わず嫌いさん達に向けたVim布教記事となります!

Vimとはなんぞや?

Vim(ヴィム)は、1991年に誕生した歴史あるテキストエディタです。

...なんて調べたら出てくる話は他の方にお譲りして、黒い画面で使うテキストエディタです。

こうじ
こうじ
あーあれね。よくわからんやつ!

って思い当たったものがあれば多分それです。

VPSでサーバーを触ったり、ターミナルなどでLinux系の黒い画面を開いたことがある人なら、一度は自分の意志とは裏腹に遭遇したことがあるんじゃないでしょうか?
そう、あの「謎の編集画面」です。

僕も最初は完全にトラウマでした。

当時はWindowsユーザーだったし、そこまで経験もなかったので、サーバーに入って黒い画面に入った段階で

こうじ
こうじ
ふむ。フォルダ移動は「cd」にょろにょろか。

みたいなそんな感じです。で、やっとお目当てのファイルに辿り着いてファイルを開こうとすると...

こうじ
こうじ
あれ?秀丸は使えないのか!ほほう。Vimとな。なるほどなるほど

「よし、ファイルを編集するぞ」と思って普通のメモ帳みたいに入力しようとするじゃないですか。するとこうなるわけです。

  • 文字がうまく打てない

  • ペーストしたらなんか変なことになる

  • 意図せず変な入力を繰り返す

  • Undo(⌘+Z)が効かない

などなど、画面がよくわからんことになった経験、絶対ありますよね(笑)。

「もう!これどうやって閉じるの!?」とパニックになって、ターミナルごと強制終了した人も多いはず。それが僕らの、Vimとの最初の出会いです。

Vimの何がいいのか?

そもそもVimの何がいいのか。何がそんなにエンジニアを惹きつけるのでしょうか。

ヴィマー男子
ヴィマー男子
Vimに慣れたらもう戻れない・・・
ヴィマー女子
ヴィマー女子
Vimの爆速がやばい!!
コーヒー女子
コーヒー女子
雪印コーヒーの中毒性がやばい!

などなど。ネットのエンジニア向け記事を見れば見るほど、熱狂的な声ばかり。

一般的に言われている(個人的感想)Vimでよく挙げられるメリットは以下の4つです。

マウスからの解放

これがVim最大のメリットと言っても過言じゃないと思います!

コードを書いている途中で、カーソルを移動させるために右手でマウスやトラックパッドを触る。

この手を動かす煩わしさと「数秒のロス」。
「手の移動」がなくなるだけで、タイピングのスピードが劇的に上がりますし、何より疲れも大分変わってくると思っています。

基本的に、やりたいと思う事は大体Vimコマンドで用意されていることが多いので、それらを駆使し、思考のスピードに指先が追いつく感覚は、一度味わうと病みつきになります。

どんなサーバー・環境にも最初から入っている

これもそう。ほんとそうなんですよね・・・。

世の中のほとんどのLinuxサーバーやMacには、最初からVim(またはvi)がインストールされています。

つまり、Vimの操作さえ覚えてしまえば、「急にサーバーに入って設定ファイルを直さなきゃいけない!」という時でも、自分のPCと全く同じ感覚でサクサク編集できるという最強のサバイバルスキルになります。

動作が羽のように軽くて爆速

昨今の高機能なエディタやIDE(統合開発環境)は便利ですが、起動に時間がかかったり、メモリを大量に消費したりしがちです。

Vimはターミナル上で動くため、動作が信じられないほど軽量です。
「ちょっとだけファイルを開いて1行だけ直したい」という時に、わざわざIDEやテキストエディターを開くのは手間です。

Vimに慣れたら、ちょっとした変更の場合そもそもターミナルを開いて、さっと開いてさっと保存して閉じると言うのが結構便利です!

こうじ
こうじ
と言いながらIDEのプラグインでしか使っていませんが

コマンドは慣れると覚えやすい

Vimのコマンドはかなり多く覚えるのが非常に大変に感じますが、実は「動詞」と「名詞」の組み合わせでできています。

例えば、「d(Delete=消す)」と「w(Word=単語)」を組み合わせれば「dw(1単語消す)」になります。

この法則を理解すると、日常的に使っているうちに、比較的頭に残りやすく、自然とコマンドを使用できるようになります!

俺がVimを使って何が変わったか

こうじ
こうじ
これの何がいいのか全くわからん。使いづらすぎる!俺はせっかくだからトラックパッドをフル活用するぜ!

正直、最初はそう思っていました。

しかし現在は・・・

こうじ
こうじ
もう、キーボード+マウスの生活には戻れんわ…

とまぁ、こんな感じです(笑)

ぶっちゃけた話、Webページのお問合せフォームを入力している時すら「なんでVimコマンドが使えないんだ!」ってストレスを感じるくらいには毒されています。

具体的に何が変わったのか?と、改めて聞かれると「何が変わったんだろう?」と思ってしまうのですが(笑)

ただ間違いなく言えるのは、自然とVimコマンド打っちゃうので、いろんなところにVimコマンドを打ち込んでしまうくらい生活の一部になっています。

個人的感想ですが、僕が主に恩恵を受けているのは以下の点です。

プロジェクト内のファイル移動がノーストレス

普通にタブを変えたい場合、こうじゃないでしょうか。

  1. マウスを開きたいタブにマウスカーソルを持っていく。

  2. マウスダウン!

もしくはショートカットを利用している人はもう少しスマートかもしれません。

もしVimならgt。これだけで右隣のタブに移動します。

「最初のタブに移動したいな!」そんな時は1gt。これだけでOK!
一番いいのはキーボードから一回手が離れないのが次の作業にスムーズに入れていいですよね。これは今回に限らず他のコマンドでもそうです。

ファイル内の移動も神速

たとえばファイル内検索・・・は、結構ショートカットもあるのであまり困らないかもしれませんが、人によってはメニューバーから検索をクリックして入力して・・・と言った手順を踏む場合、やはりマウスを操作する手が忙しくなってしまいますね。

Vimの場合は/の後に検索したい文字を打ってEnterすればそのまま検索文字に飛んでくれます!
そしてそのままnボタンを押せば次の候補にどんどこ飛んでくれるのでとても楽ちん!

定義の移動もお手のものです。参照したい関数にカーソルがある状態でgdと押すだけ。

これだけでIDEでプロジェクト管理がされている場合は定義のファイルを勝手に開いて参照してくれます!

こうじ
こうじ
gd はマジで神だと思った

意外と面倒な範囲選択

例えば

"I'm the coolest Saiyan."

っていう文字があったとするじゃないですか。これを選択する時っておそらく、大抵の人は「ダブルクォーテーションの左から右にマウスで選択する」だと思うんですよね。

IDEによっては区切りがなければダブルクリックで行けたりしますが、こういう場合は難しいです。

これも、Vimならvi"と打てば、ダブルクオーテーションの中だけ一瞬で選択できます!

こうじ
こうじ
ごめん。こっちの方が神だった

まずはこれだけ覚えればOK!絶対使う基本コマンド

膨大な便利コマンドがあるVimですが、最初から全部覚える必要は全くありません。まずは、この3つの基本だけ押さえれば、Vimという名のダンジョンで「生き残る」ことができます。

それから自分にとって必要なものから覚えていけばいいんです!

最大の違い「2つのモード」を理解しよう

Vimで文字が打てなくてパニックになる原因は、すべてこれです。Vimには大きく分けて2つの状態(モード)があります。

ノーマルモード(コマンドを打つ・移動するモード)

Vimを開いた直後は、必ずこのモードです。細い縦線ではなく、ちょっと太いバー見たいな縦線のカーソルです。


この状態ではキーボードのキーがすべて「操作ボタン」になっています。だから普通に文字を打とうとしても、入力されず変な動きをしてしまうんです。

入力モード(文字を打つモード)

普通のメモ帳のように文字を打ちたい時は、ノーマルモードで i (insert) を押します。すると画面の下に -- INSERT -- と表示され、文字が打てるようになります。

入力が終わったら、キーボードの左上にある Esc キーを押しましょう。これでまた「ノーマルモード」に戻ります。

「迷子になったらとりあえず Esc を連打する」。これだけ覚えておけば大丈夫です!

矢印キーは封印!移動は「h, j, k, l」

Vimの真骨頂は「ホームポジションから手を離さない」ことなので、もちろんカーソルの移動も矢印キーではありません。右手の人差し指から小指が置かれている場所で移動します。

キー 意味
h 左
j 下
k 上
l 右。小文字のエルです

FPSとかやってる人は比較的慣れやすそうな配置ですよね^^;

これは普通に使ってると、意外と指が覚えてくれて、自然と操作できるようになると思います!

もうターミナルごと消さなくていい!「保存と終了」

Vim初心者が最も恐れる「閉じられない問題」。
これも、ノーマルモード(Esc を押した状態)で魔法の呪文を打つだけで解決します。

キー 意味
:w 上書き保存
:q! 保存せずに強制終了(間違っちゃった時とかに便利)
:wq 保存して終了(よく使う)

コロン(:)を打つと、画面の一番下にカーソルが移動するので、そこにコマンドを打って Enter を押すだけです。もう、PCやターミナルごと強制終了して逃げる必要はありません!

俺的「やばば」なVim神コマンド4選

これから紹介する4つのコマンドは、「もうVimから逃げられない!」と、つい思ってしまうコマンドです!

こいつらのおかげで僕は「あ、もうマウスにはもう戻れないな」と思いました。実務でゴリゴリに恩恵を受けている、俺選!「神コマンド」たちです。

コードの海を溺れずに行き来する「gd」と「Ctrl+O」

特にIDEなどでVimプラグインを使っているなら、これだけで世界が変わります。いやマジでほんとに。

キー 意味
gd 「Go to Definition」
関数や変数の上で押すと、その「定義元」へ一瞬でジャンプします。
Ctrl + O ジャンプした履歴を「戻る」コマンドです。

「この関数、中で何やってるんだっけ?」と思ったらまず gd で飛びます。

そして中身を確認し終わったら Ctrl + O で元の作業場所へシュッと戻ってくる。これを、キーボードから一切手を離さずにファイル間を往復できるこの時短術はマジで気持ちいいです!

こうじ
こうじ
無駄に行ったり来たりしちゃうYO!

迷子になった時の救世主「zz」

ファイル内を激しくジャンプしたりスクロールしていると、「あれ?今カーソルどこだっけ?」と見失うことがよくあります。もしくは「あー、検索対象が下の方で、なんか視線的見づらい・・・。」そんなこともあるでしょう。

そんな時は迷わず zz と打ってください!

一瞬で「現在のカーソル位置が画面のど真ん中」に来るようにスクロールを調整してくれます。全体の構造を俯瞰して見直したい時にも地味に、いや、めちゃくちゃ重宝する縁の下の力持ちです。

キー 意味
zz カーソルが中央に来るようにスクロールされます。
zt カーソルが一番上に来るように調整されます。
zb カーソルが一番下に来るように調整されます。

めちゃくちゃ重宝!「/ (検索)」と「f (行内検索)」

目視で探して矢印キーで移動・・・なんてことはこいつらを覚えたらもう無くなります。

キー 意味
/ /(スラッシュ)を押した後に検索キーワードを入力すると、該当の場所までカーソルが飛んでくれます。正規表現も使えます!
? /(スラッシュ)の逆バージョンです。現在から上に向かって検索文字を探します。
f f の後に押した文字を探します。一文字限定。
そのあとは ; を押すと次の候補へ移動します。
F f の逆で今あるカーソルより前にある文字を探します。

「あそこに行きたい!」と思ったら、物理的に移動するのではなく「検索で飛ぶ」。これがスマートな神速移動です!

ちなみに/検索は普通にIDEにも備わっている事が多いですが、行内検索はマジで神だと思いました。

マウスのドラッグ選択を過去にする「viw」「vi"」

「ちょっと便利だよ」のレベルを超えて、僕が「マジで神コマンド」だと思っているのがこれです。 Vimには「テキストオブジェクト」という、人間の意図を汲み取ってくれる機能があります。

キー 意味
viw カーソルが単語の中のどこにあっても、その単語だけをピッタリ正確に選択してくれます。
vi" ダブルクォーテーションの中身だけを綺麗に選択してくれます。
たとえばダブルクオーテーションをシングルクオーテーションに変えればその範囲内だけを選択してくれます。
va" ダブルクォーテーションも含めて、綺麗に選択してくれます。

マウスでわざわざ単語の端から端までドラッグして、1文字足りなかったり余計なスペースまで選択しちゃったりするあのイライラ……それが「たった3回のタイピング」で完璧に終わるんです。

変数名や文字列の中身を書き換える時のスピードが、これで何倍にも跳ね上がります。

よくリンクタグのhrefの中身だけ変えたい時、あれ選択面倒ですよね。それが vi"s と押せばダブルクオーテーションの中だけを削除して入力モードになるので、そのまま好きな値を入力すればOK!

Vimのコマンドは「暗記」じゃない!「文法」を理解すれば一気に上達

「viw とか vi" って、いちいちアルファベット3つも暗記しなきゃいけないの?」とそういう考え方をしてしまったあなた!

それだと本当に暗記ゲーになってしまい、意味を理解しないとただの英語の羅列なので、ますます頭に入らないのは当然です!

実はこれ、一つのコマンドのように見えて、一文字一文字に意味があります。決して丸暗記しているわけではありません。

Vimの操作は「英語の文法」のように組み合わせて使う法則があるんです。

例えば vi" は、以下の3つのパーツに分解できます。

  • v (Visual) = 選択しろ(動詞)

  • i (inner) = 内側を(修飾語)

  • " (ダブルクォーテーション) = " " の(名詞・対象)

つまり「ダブルクォーテーションの内側を選択しろ」という命令文なんです。 この法則(文法)が分かると、一気に応用が利くようになります。

i (内側) を a (around: 周りを含めて) に変えると…?
ダブルクォーテーションそのものを含めて選択しろ、になります。

v (選択) を c (change: 変更) に変えると…?
単語の内側を消して入力モードに入れ(変更しろ)、になります。

このように「動詞(v, c, d, yなど)」+「範囲(i, a)」+「対象(w, ", ', (, { など)」をレゴブロックのように組み合わせるだけ。

この法則が腑に落ちると、飲み込みの早さが劇的に変わりますよ!

こうじ
こうじ
意味があると思って文字列を見ると、全然定着の仕方が変わりますよ!

他にも知っておくと便利な汎用コマンド一覧

編集・コピペ系

キー 意味 動作
dd Delete カーソルのある1行を切り取り(削除)
yy Yank カーソルのある1行をコピー
p / P Paste コピー(切り取り)したものを下(p) / 上(P)に貼り付け
C Change カーソル位置から行末までを消して入力モードへ
D Delete カーソル位置から行末までを削除
o / O Open カーソルの下(o) / 上(O)に空行を作って入力モードへ
u Undo 直前の操作を元に戻す(⌘+Zの代わり)
Ctrl + r Redo 元に戻した操作をやり直す

移動・ジャンプ系

キー 意味 動作
gg Go ファイルの一番上へ移動
Shift + g Go ファイルの一番下へ移動
{数字}gg - 指定した行番号へジャンプ(例:15ggで15行目へ)
Ctrl + d Down 半ページ分、下へスクロール
Ctrl + u Up 半ページ分、上へスクロール
gt / gT Go Tab 次(gt) / 前(gT)のタブへ移動

検索・置換系

キー 意味 意味
:%s/旧/新/g Substitute ファイル内の「旧」という文字をすべて「新」に一括置換
* - カーソルが乗っている単語をファイル内全検索

まだ使いこなせてないけど、覚えたら絶対「爆速」になる機能

僕も正直まだ、Vimを使いこなそうと頑張っている最中なので、「使いたいけど使いこなせていない」コマンドは結構あります。その中でも「これはマジで変わりそう!」というのを二つご紹介します!

単純作業を無双する!「マクロ機能 (q)」

  • 同じような修正を10行連続でやりたい

  • 特定のパターンのテキストを全部整形したい

といったルーチンワークの時。Vimには、自分のキーボード操作をそのまま録画して、何度も再生できる「マクロ」というチート機能があります。

コマンドは比較的簡単で、以下の手順で記録できます。

  1. q + 好きなアルファベット で録画開始

  2. いつも通りに操作をして、もう一度 q で録画終了

  3. @ + アルファベット で再生(例:10@a と打てば10回連続で一瞬で実行)

ただ、この機能、存在は知っているものの、いざ使おうとすると「えっと、ここで録画して…」と頭で考えてしまって、いざやってみると、ちょっと動作がずれて変な風に処理されてしまったり・・・、結局手作業で力技で乗り切ってしまうことが多いです(笑)。

ですが、毎回発生する繰り返し作業をこれに任せられるようになれば、絶対に化ける機能です。

こうじ
こうじ
一定のコマンドの流れを想定できる人は強そう

コピー上書きの悲劇を防ぐ「名前付きレジスタ ("ay)」

Vimを使い始めると、考え方の違いで必ず困惑する仕様があります。
それがコピペの考えた方です。

Vimを使用しない場合で行う場合だとこんな感じ

  1. 文字をコピーする

  2. ペースとしたい場所にペースト

  3. クリップボードに影響なし!

ただ、これがVimだとこういうことが起きます。

  1. 文字をコピー(ヤンク)する【y】

  2. ペーストしたい場所の文字を削除【d】

  3. ペースとすると、先ほど削除した文字がペーストされる!

そうなんです。今さっき消したはずの不要な文字がペーストされるんです。

こうじ
こうじ
最初は「あれ?設定間違ったかな?」とか誰かのせいにしてた(笑

Vimの場合は「消した文字(変更した文字)」も自動的にクリップボード(一時バッファ)に上書きしてしまう仕様なんです。

一般的なコピー&ペーストの感覚でいると「あれ!? さっきコピーしたやつが無くなってるじゃん!」と絶望します。

これを防ぐのが「名前付きレジスタ」という機能です。

  1. "ay :「a」という名前の引き出しにコピー(ヤンク)する

  2. "ap :「a」の引き出しからペーストする

もうちょっと細かく説明すると

  • 「"」がレジスタを使うためのスタートのコマンド

  • 「a」が選択する入れ物。これは「b」でもいいですし「5」でも問題ありません。キーボード上にあるどれかのキーを使います

  • 「y」でコピー(ヤンク)します。もちろん「d」に変えれば選択している文字列を消した状態でレジスタに突っ込めます

  • 「p」でペースト。もちろん「P」を押せば、カーソルの前にペーストできます

これを使えば、道中でどれだけ文字を消しても、指定した引き出しにしまっておいたコードは安全に守られます。

そして、普通のコピペと違うのは「コピーしておけるデータが一個だけではない」というのが一番嬉しいですね!

例えば、「a」「s」「d」とそれぞれよく使う文字を入れておけば必要に応じて呼び出せるので、毎回コピーし直す手間を省けます。

理屈はわかっていて実務でも使うんですが、いざという時に「えーっと、ダブルクォーテーションを押して、aを押して、y…」と、毎回少し悩みながら打ってしまいます。

このコマンドを自然と出せるようになれば、Vimの快適さはもっと上がるんだろうなぁと思います!

まとめ

新しいツールや操作方法を覚える時、どうしても「いつものやり方」に戻りたくなりますよね。それは当然だと思います。

だって、慣れている方法が「今の自分にとって最も効率が良い(ストレスがない)やり方」に決まってますからね。仕事が忙しい時ほど、生産性を落としたくなくてマウスに手が伸びてしまう気持ちは痛いほどわかります。

でもそこを、あえて「数日間の効率低下」を受け入れて、「未来の自分のための投資」だと思ってやってみてください!

Vimの操作に指が慣れた時に、最初に感じていた「指の動きに慣れないよぉ><」って思っていたのが嘘のように、使い心地が変わっていると思います!

もちろんこれは強制するものではありませんが、やらずに「今のやり方で十分!」と言うのと、しっかりやった上で「やっぱり俺には合わないからマウスでいいや」と判断するのは、エンジニアとしての経験値が全く違います。

本気でやってみて「あー、やっぱダメだわ」と思ったら、その時にいつものやり方に戻ればいいだけです。失うものは何もありません。

でも10分とかダメですよ?(笑)1週間くらいは触ってみてください!

僕は1ヶ月程で、違和感なく使えるようになりましたが、1週間でも十分「ちょっとぎこちなさは残るけど、これは・・・いいかも!」と思えるのには十分な期間です(個人的感想)

さぁ今すぐお使いのIDEにVimプラグインをインストールだ!

こうじ
こうじ
そのIDEにVimプラグインがあるかどうかは保証しないぃぃ!

関連記事

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。

lv-sl-error-cover.avif

Laravelでstorageの画像が表示されない件

Webアプリ(Laravel)をサーバー移動した際に画像が表示されなかった場合の備忘録です。

railx6sj-cover.avif

ssh接続エラー: Too many authentication failuresをどうにかする

SSH接続時に出現する「Too many authentication failures」のエラーの解決法についてご紹介。

kusanagi-sever-error-cover.avif

KUSANAGIでサイトが表示されない場合は初心にかえる

KUSANAGIサーバーでどうやっても希望のドメインがサイトから見れなかった場合に試してたい選択肢をご紹介。

kusanagi-laravel-cover.avif

「爆速KUSANAGI」に『爆速Laravel』をインストール

爆速WordPressで人気の高いKUSANAGIサーバーに、Laravelをインストールし、爆速で使って見ようという事になりました。


新着記事一覧

kindle-comic.png

無料で漫画を一気読み!Kindleで出産レポ・育児漫画などなど

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

apple-fitness-plus-cover.avif

体重乱高下アラフォーがApple Fitness+に行き着いた話

激しい体重の増減を繰り返したチョコザップユーザーが、コスパ最強の「Apple Fitness+」に乗り換えました。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

with-pomodoro-technique-cover.avif

「私のコトですか?」過集中&注意力散漫な人に刺さる!効率化ではなく“生存戦略”のポモドーロ術

集中力が「0か200」しかない人に朗報!ポモドーロ・テクニックが脳の暴走を止める最強の特効薬でした。

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。

lv-sl-error-cover.avif

Laravelでstorageの画像が表示されない件

Webアプリ(Laravel)をサーバー移動した際に画像が表示されなかった場合の備忘録です。