Vite で React の環境構築

2024-09-08
programming

はじめに

環境構築の記事を全面的に書き直しました。 違いは ESLint と Prettier を使用せず Biome を利用するようにしたことくらいです。

  • 使用する技術スタック
    • React
    • TypeScript
    • Vite
    • pnpm
    • Biome

目次

Node のインストール

asdf を利用して Node をインストールします。

Read more..

Emacs 小技集

2024-01-26
programming

自分のための覚書

使用頻度が低いため忘れやすい、でも覚えておくとチョット便利なやーつ

Tips

1
2
3
4
5
6
7

C-x r t string RET             # 複数行の先頭に文字列を挿入
M-x delete-trailing-whitespace # 行末の空白を削除
M-x toggle-truncate-lines      # 行の折り返しのオンオフ
M-g g RET 行番号               # 特定の行番号へジャンプ
M-y                            # キルリングのリスト
C-/                            # 取消 Undo
C-o                            # ハイライトシンボル

検索

1
2

M-x find-name-dired    # ワイルドカードでファイル名検索
M-x find-grep-dired    # ファイルの内容を検索

置換

1
2
3
4
5
6

M-x replace-string    # 一括置換
M-x query-replace     # 問い合わせ置換

タブ -> スペース置換
C-x h                 # 全選択して
M-x untabify          # タブをスペースに変換

ファイルのリネーム

1
2
3
4

C-x C-f RET    # Dired モードに入る
               # リネームしたいファイルで R
               # バッファにファイル名を打ち込んで RET
               # q で Dired から抜ける

文字コード

1
2

C-x RET r utf-8    # 文字化けしてる時(UTF-8のファイルなのにSJISで開いちゃった)
C-x RET f utf-8    # 文字化けしてない時(SJISのファイルをUTF-8で保存したいとき)
Read more..

Emacs に Rust の開発環境を整える

2023-02-18
programming

Rust の勉強を始めました。 Mac + Emacs に Rust の開発環境を整えたのでその備忘録です。

Rust のインストール

公式サイトに習い rustup ツールを使って Rust をインストールします。 rustup は Rust のバージョン管理と関連ツールの管理を行うことができるツールです。

Read more..

インストール済み VSCode 拡張機能一覧 2022-12 版

2022-12-13
programming

前回から1年が経ったので再度整理してみました。

2022年12月現在で65個（以下アルファベット順）

本記事は TechCommit AdventCalendar2022 13日目の記事です。

Read more..

「ビジネスエリートになるための 教養としての投資」を読んだ

2022-04-30
review

読んだ感想

一昔前に話題になった本で、レビューが高かったので気になって買っていました。 読んだ感想ですが、正直微妙でした。対象とする読者がよく分からなかったです。 タイトルから受けた印象では、投資をしたことがない人に対して投資とはどういうものか、読了したら投資を始めるきっかけとなる本というイメージを持っていました。 ですが、別にこれを読んでも投資しようというきっかけにはならないだろうと感じました。 また、投資歴がある人向けかというとそれもちょっと違う感じがします。投資したことがある人であれば多分物足りなく感じるかと。 この本読むくらいなら『金持ち父さん 貧乏父さん』の方がましですね。

Read more..

Xenv から asdf に移行する

2022-04-29
programming

きっかけ

anyenv 関係をキャッシュするというテクニックで zsh の起動を速くするという記事をみました。 自分は anyenv は使ってませんが、いくつかの Xenv 系を直接インストールしてバージョン管理をしていました。 asdf は速いというのと一つにまとめたいという思いがあったので、移行することにしました。

Read more..

Emacs に Neotree を導入する

2022-04-25
programming

Neotree をインストールしました。 straight を使っているので use-package と書くだけでインストールされます。 使い方は以下 elisp 見ればなんとなく分かるでしょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

;; ------------------------------------------------------------------
;; brief   : Neotree
;; note    : https://github.com/jaypei/emacs-neotree
;; ------------------------------------------------------------------
(use-package neotree
  :init
  (setq-default neo-keymap-style 'concise)
  (setq-default neo-show-hidden-files t)
  :config
  (setq neo-smart-open t)
  (setq neo-create-file-auto-open t)
  (setq neo-theme 'arrow)
  (bind-key "C-c C-o" 'neotree-toggle)
  (bind-key "RET" 'neotree-enter-hide neotree-mode-map)
  (bind-key "a" 'neotree-hidden-file-toggle neotree-mode-map)
  (bind-key "<left>" 'neotree-select-up-node neotree-mode-map)
  (bind-key "<right>" 'neotree-change-root neotree-mode-map))

;; Change neotree's font size
;; Tips from https://github.com/jaypei/emacs-neotree/issues/218
(defun neotree-text-scale ()
  "Text scale for neotree."
  (interactive)
  (text-scale-adjust 0)
  (text-scale-decrease 0.5)
  (message nil))
(add-hook 'neo-after-create-hook
          (lambda (_)
            (call-interactively 'neotree-text-scale)))

;; Hide neotree window after open file
;; Tips from https://github.com/jaypei/emacs-neotree/issues/77
(defun neo-open-file-hide (full-path &optional arg)
  "Open file and hiding neotree.
The description of FULL-PATH & ARG is in `neotree-enter'."
  (neo-global--select-mru-window arg)
  (find-file full-path)
  (neotree-hide))

(defun neotree-enter-hide (&optional arg)
  "Neo-open-file-hide if file, Neo-open-dir if dir.
The description of ARG is in `neo-buffer--execute'."
  (interactive "P")
  (neo-buffer--execute arg 'neo-open-file-hide 'neo-open-dir))
Read more..