30代からのプログラミング学び直し!

10年エンジニアやってるけどいまだになんもわからん

VSCode上でサクッとJavaScriptだけを動かしたいよ ~ Code Runnerを使う ~

JavaScript

JavaScriptで開発をしていると、サクッとコンソールでjsのサンプルコードだけ動かして動作確認したいことがありませんか？ 私はjsでガリガリビジネスロジックを書くことが多いので、よくあります。HTMLとかいらない。jsだけ動作確認させてくれ。

今まではChromeのコンソールでやっていましたが、ちっちゃくて書きにくいし整形できないしいまいちなので、VSCode上でできないかな〜と思って調べていたところ、理想を叶えてくれそうなプラグインがありました！

Code Runner です。

参考にさせていただきました： VSCodeで簡単にJavaScriptを実行する – 【VS Code】 | 株式会社CONFRAGE ITソリューション事業部

Code Runnerのインストール

  1. VSCodeの「拡張機能」からインストール
  2. JavaScriptファイルで右クリックして「Run Code」を実行

/bin/sh: node: command not found エラーを解消する

Node.jsのインストール（nodenv使用）

Run Codeを実行したら、/bin/sh: node: command not foundが出てしまいました。

そういえば、Node.jsをインストールしていなかったのでやっていきます。バージョン切り替えが容易なように、最初からnodenvを入れておくことにしました。

GitHub - nodenv/nodenv: Manage multiple NodeJS versions.

brew install nodenv
eval "$(nodenv init -)"

nodenvはインストールされたので、Node.jsを入れていきます。 node.js公式をみると Latest LTS Version: 20.11.1 と書いてあるので、最新のv20.11.1をインストールすることにしました。

nodenv install 20.11.1
# 確認
nodenv versions
  20.11.1
# とりあえずグローバルに設定
nodenv global 20.11.1
# 確認
node -v
v20.11.1

Node.jsはインストールできました。が、まだエラーが解消されない……。

シェルの設定ファイルに追加

nodenvのドキュメントに「このコマンドをシェルの設定ファイルに追加してね！」と書いてあるのにやっていなかったです。自分がどのシェルを使っているのか調べるところからやります。

echo $0
-zsh           # zshを使っている
# nodenvの初期化設定を追加
echo 'eval "$(nodenv init -)"' >> ~/.zshrc

ちなみに、.zshrcと.zprofileのどちらに書くべきか一瞬迷いましたが、結論、.zshrcに書いとけばいいようです。

これで端末起動時にNode.jsが使えるようになりました。が、まだエラーが解消されない……。

Code Runnerの設定

一瞬焦りましたが、こちらの記事に辿り着いて解決しました。

/bin/sh: node: command not found · Issue #355 · formulahendry/vscode-code-runner · GitHub

VSCodeの設定から、「Run In Terminal」を検索してチェックボックスをONにすると動くようになりました！settings.jsonに"code-runner.runInTerminal": trueが追加されます。

これによって、Code Runnerが「出力」タブではなく「ターミナル」内で実行されるようになるようです。（でも、出力タブで実行できている人もいる…。Node.jsのパスとか設定によるのかな……。）

便利！

ちょっと時間がかかりましたが、ようやく、Code Runnerが使えるようになりました。

いいぞ…いいぞ……

良きJavaScriptライフを送りたいです😎

PHP(Laravel)の開発用にVSCodeを整備しとこ〜

Laravel

新しいMacBook Airを手に入れたので、Laravelの開発ができるようにVSCodeを整備していきます。 前のPCでは、とりあえず何でもかんでも拡張機能を入れてよく分からなくなってしまったので、今回はきちんと理解しながら最小限の布陣にしたいと思っています。

やったこと

  • PHPの構文エラーを表示できるようにする
  • PHP(blade含む), JavaScript, HTMLの全てが自動整形されるようにコード整形ツールを入れる

PHPの構文エラーを表示

VSCode上でアプリケーションを開くと、さっそく以下のWarningが出たので、まずはこれを解消していきます。

PHP のインストールが見つからないため、検証できません。PHP 実行可能ファイルを構成するには、設定 'php.validate.executablePath' を使用します。

  1. 「設定を開く」をクリックして、settings.jsonを開く。

  2. php.validate.executablePath を設定する必要があるみたいだが、パスがわからないのでターミナルから調べる。

    which php
/opt/homebrew/bin/php

  3. settings.jsonに調べたパスを記載

    "php.validate.executablePath": "/opt/homebrew/bin/php",

これによって、PHPで間違った構文を書くとエラーで教えてくれるようになりました👌

コード整形ツールを入れる

PHP(blade含む)もJavaScriptもHTMLも整形したい！もちろん保存時に自動整形で。

いろいろ調べて試して、王道っぽいPrettierとPHP Intelephenseを使うことにしました。

Prettier : JavaScriptとHTMLを整形させるときに使う。PHPは整形できない。
PHP Intelephense：PHPを整形させるときに使う。JavaScriptとHTMLは整形できない。

という感じなので両方インストールする必要があるんですね。

参考にさせていただきました：【VS Code】PHPとHTMLを保存と同時に自動整形する方法 こちらのサイトが丁寧で分かりやすいので細かい説明は省きます。

やっていく
  1. 「拡張機能」からPrettierを検索してインストール
  2. 「拡張機能」からPHP Intelephenseを検索してインストール
  3. 「設定」で以下の2つを設定
    1. Editor: Default Formatter(デフォルトのフォーマッター)でPHP Intelephenseを選択
    2. Editor: Format On Save(保存時に自動整形) にチェックを入れる
PHPは整形されるけど、JavaScriptとHTMLは整形されない…

Editor: Default Formatter で PHP Intelephenseを選択したため、どうやらPrettierが機能していない。 いろいろ触ってたら以下の手順で解決できました。

  1. JavaScript, HTML（と検知されている）ファイル上で右クリックして「ドキュメントをフォーマット」を選択
  2. 規定のフォーマッタを選択するように言われるので、Prettierを選ぶ

これで無事、JavaScriptとHTMLも整形されるようになりました！ ちなみに、規定のフォーマッタは、ワークスペースの設定(.vscode/settings.json)に以下のように追加されていました。

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

だいたいの開発でこの設定を使いそうなので、私はユーザーの設定(~/Library/Application Support/Code/User/settings.json)の方にこの行をコピーしておきました。

おしまい！

以上の設定で、個人でLaravel開発をする分には当面困らないんじゃないかなと思っています。 ということで、現時点での私のVSCodeに入っている拡張機能はまだ4つ程です。シンプルイズベスト✨

Code Runnerについては、少し長くなりそうなので別記事にします。 今後も、いい感じの拡張機能に出会ったら記事にしていきたいと思います🐱

まっさらなMac(M2)でできるだけ短い手順でLaravel10の開発環境を動かすまで

Laravel

MacBookAir(M2)を買いました❣️

エンジニアをやっている分際で、自分のPCを5年くらい所持していなかった（iPadと会社支給のMacで満足していた）ので、とても久しぶりに新しいPCを触ります。ずっと欲しいと思っていたAirが、M3モデルの登場によってM2が少しお安くなったため、この機会を逃すまい！とついに購入しました。ちなみに、楽天リーベイツを経由してApple Storeで買ったら楽天ポイントが5000円くらいついてお得でした（還元率4%の場合）。

キラキラ✨

早速、Laravelの開発環境を構築していきます。なぜなら、現在Laravelを勉強中なので。 新しい端末で一から整備することは滅多にないので、貴重な機会です。

やりたいこと

  • 新しくてまっさらなMac(M2)にできるだけ簡潔にLaravel10の開発環境を整備する
  • Laravel Sail を使ってDocker上で動かす
  • ソースはGitHubからcloneする（古いPCからリモートリポジトリにpush済み）
  • グローバルインストールするツール類はとりあえず全部最新版でOK

まずはもろもろ必要なものをインストール

Docker Desktopインストール

とりあえずDockerは絶対使うのでインストールしておく。

Install Docker Desktop on Mac | Docker Docs

公式サイトから「Docker Desktop for Mac with Apple silicon」を選択してGUIでインストール。

homebrewインストール

Homebrew — The Missing Package Manager for macOS (or Linux)

ターミナルから、公式サイトのコマンドをコピペして実行。しばらく待つと、パスを通すため追加で2つコマンドを実行してね！と丁寧にコマンドを表示してくれるので、忘れずに実行する。homebrewさえあればとりあえず安心。

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /環境によるパス/.zprofile
 eval "$(/opt/homebrew/bin/brew shellenv)"
ターミナルアプリインストール

Warp: Your terminal, reimagined

これは完全に好みなので飛ばしていいですが、私はwarpを好んで使っているため、入れておく。以降のコマンドはwarpから実行する。

 brew install --cask warp
gitインストール

Git - Downloading Package

gitも絶対に使うので入れておく。

brew install git

人によっては、お好みのブラウザや開発ツールもインストールしておくといいですね。私はBraveとVSCodeを入れました。

GitHubからソースコードを手に入れる

GitHubからsshでソースコードをcloneしたいので、まずは鍵の作成＆登録

新しい SSH キーを生成して ssh-agent に追加する - GitHub Docs

公式サイトがとてもわかりやすいのでその通りにコマンドを打っていく。

ssh-keygen -t ed25519 -C "メールアドレス"
   # 全部EnterでもOK (パスフレーズ等はできるだけ設定した方がいいと思います)
eval "$(ssh-agent -s)"
touch ~/.ssh/config
vim ~/.ssh/config
  # vimで以下を記入
     Host github.com
     AddKeysToAgent yes
     UseKeychain yes
     IdentityFile ~/.ssh/id_ed25519
ssh-add --apple-use-keychain ~/.ssh/id_ed25519
GitHubに公開鍵を登録

GitHub アカウントへの新しい SSH キーの追加 - GitHub Docs

クリップボードに鍵をコピー。

pbcopy < ~/.ssh/id_ed25519.pub

GitHub上の「設定」から鍵を登録します。公式サイトの説明が丁寧。

git clone

ディレクトリに移動してから、git clone。

git clone git@github.com:リポジトリのSSH URL

これでソースコードを手に入れることができました。

Laravelを立ち上げるための準備

phpインストール

PHP: パッケージの使用 - Manual

とりあえず、phpの最新版をインストールする。

brew install php
# バージョン確認
php -v
  PHP 8.3.3 (cli) (built: Feb 13 2024 15:41:14) (NTS)

次に出てくるcomposerのインストールにphpが必要だったのでインストールしたのですが、どうやらhomebrewでもcomposerのインストールが可能だったようなので、そっちを使えばphpのインストールは必要なかった気がします…。あと、なにも考えず最新版をグローバルに入れてしまいましたが、今後バージョンの切り替えが必要になった時などはphpenv等を使った方が良さそうですね。(基本的にはDockerで開発するので、必要ないかもしれませんが…)

composerインストール

Composer

公式サイトの通りに、合計5つのコマンドを叩きます。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer
# バージョン確認
composer -V
    Composer version 2.7.1 2024-02-09 15:26:28
アプリケーションの準備

参考にさせていただきました: 【Laravel】git cloneしただけでは、php artisan serveできない #Git - Qiita

まずはcomposer installをして、vendorディレクトリを作成(必要なパッケージやライブラリをインストール)します。

cd プロジェクトのディレクトリ/
composer install

.envを作ったりキーを初期化したりします。

cp .env.example .env
php artisan key:generate

sailでDockerを立ち上げてみます。

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'    # エイリアスを設定しておく
sail up -d

localhostで動いた！これで無事に新しいMacでもLaravel開発ができるようになりました👏

感想

インストールするツールが多かったので、手順は多くなってしまった感じがしますが、エラー等で躓くこともなく、1時間程度で環境を整えることができました！コマンド一発でインストールできるものが多くて、本当に便利になりましたね〜〜。令和すごい。（昔は環境構築に四苦八苦していた記憶が…。） これからこのMacを使って色々勉強していこうと思っているので、楽しみです！🤩