Macを購入して最速でSlidevアウトプット環境を整えた作業ログ

Posted at 2024-07-30

前提

2024年7月時点での情報です
Mac M3 Pro
OS: Sonoma14.5

スコープ外

Macの初期設定
Githubアカウントの作成

作業ログを残すと決める前に実施しちゃってました・・

VSCode

上記、公式サイトから、Mac版をダウンロードし、解凍してアプリケーションフォルダに入れる。
Launchpadから起動する。

Git

Gitインストール

ターミナルでgitと打って、入ってなければ以下ダイアログが出てくるので、インストールする。
※ 既に入ってる場合はusageが出るのでこの項はスルーしてください

Git noreply mail setting

※ 公開しているメールアドレスを持っている人はスルーしてください。

コミットログにプライベートなメールアドレスが残るのに抵抗ある人だけ、以下GitHubのEmail Settingのページから、noreply用のダミーアドレスを控えておく。

ページ下部の「Keep my email addresses private」のあたり、
数値+アカウント名@users.noreply.github.comで構成されるアドレスです。

Git 初期設定

以下コマンドで初期設定を行う。

% git config --global user.name 'ユーザー名'
% git config --global user.email '先ほど控えたnoreplyメールアドレス'

確認用のコマンドを打って、設定した内容が表示されていればOK。

% git config -l
user.name=ユーザー名
user.email=noreplyメールアドレス

Node.js / npm

Voltaインストール

Node.jsのバージョン管理ツール。
直接Node.jsのサイトからインストールしても良いですが、バージョン管理や切り替えが楽なので、これからセットアップする人は入れておくことをオススメします。
※ 今回はVoltaを選択してますが、その他お好みのバージョン管理ツールがあれば何でもOKです

上記、公式サイトに記載のコマンドを打ってインストールする。

% curl https://get.volta.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 10930  100 10930    0     0   7543      0  0:00:01  0:00:01 --:--:--  7548
  Installing latest version of Volta (1.1.1)
    Checking for existing Volta installation
    Fetching archive for macOS, version 1.1.1
######################################################################## 100.0%
    Creating directory layout
  Extracting Volta binaries and launchers
    Finished installation. Updating user profile settings.
Updating your Volta directory. This may take a few moments...
success: Setup complete. Open a new terminal to start using Volta!

Pathが通っていることを確認。

% cat .zshrc

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

Voltaがインストールされていることを確認。

% volta -v
1.1.1

Volta経由でNode.jsの最新安定バージョンを取得。

% volta install node
success: installed and set node@20.15.1 (with npm@10.7.0) as default

インストールされていることを確認。

% volta list all
⚡️ User toolchain:

    Node runtimes:
        v20.15.1 (default)

    Package managers:


    Packages:

nodeコマンドが使えることを確認。

% node -v
v20.15.1

npmコマンドが使えることを確認。

% npm -v
10.7.0

Slidev

上記、公式サイトに記載のコマンドを打ってセットアップする。
今回は「slidev-template」という名前で作成する。

% npm init slidev
Need to install the following packages:
create-slidev@0.49.17
Ok to proceed? (y) y


> npx
> create-slidev


  ●■▲
  Slidev Creator  v0.49.17

✔ Project name: … slidev-template
  Scaffolding project in slidev-template ...
  Done.

✔ Install and start it now? … yes
? Choose the package manager › - Use arrow-keys. Return to submit.
❯   npm
    yarn
    pnpm

セットアップが完了すると、サンプルのスライドアプリケーションが起動する。

  ●■▲
  Slidev  v0.49.17 

  theme       @slidev/theme-seriph
  css engine  unocss
  entry       /Users/xxx/xxx/slidev-template/slides.md

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  slides overview     > http://localhost:3030/overview/
  remote control      > pass --remote to enable

  shortcuts           > restart | open | edit | quit

ポップアップが出るのでChromeの起動を許可する。（最初だけ）