AI

「黒い画面」こわくない!ターミナル環境づくりを全部解説

📝 この記事について
前回の記事「AIと自動化でイベントを運営してみた話」の続きです。
今回は「どうやって環境を整えたか」を、まるちゃんと先生のかけ合いで解説します。
「ターミナルって何?」「Nodeって何者?」
という疑問をまるっと解消します!

先生、前回の記事でターミナルとかclasp(クラスプ)とか出てきたけど、
そもそも何なの?

まるちゃん
まるちゃん
ogita
ogita

だよね、急に専門用語が出てきたね。
まず全体の大きな地図から説明するね。
今回の環境づくりで登場するものはこれだけある:

名前一言で言うと
ターミナル(PowerShell)コマンドを入力する「黒い画面」※Windowsに初めから入ってる。
Node.js(ノード)ターミナルでプログラムを動かす「エンジン」
npm(エヌピーエム)ツールをインストールする「アプリストア」※Node.jsに付属
clasp(クラスプ)GoogleのプログラムをPCから操作する「リモコン」npmでインストール
Claude in ChromeAIがブラウザを操作できるようにするGoogleChromeの「拡張機能」

なんか5人も出てきた……。

まるちゃん
まるちゃん
ogita
ogita

大丈夫、それぞれの「役割」がわかれば怖くないよ。
ひとつずつ見ていこう!

ターミナル以外は初耳です。

まるちゃん
まるちゃん

1. ターミナル(PowerShell)って何?

ogita
ogita

Windowsでは「PowerShell(パワーシェル)」って呼ぶよ。
見た目はこんな感じ:

PS C:Usersogita>

パソコンに初めからあるやつですよね。
黒い画面に文字を打つという。
原始的ややつ。
こわい。

まるちゃん
まるちゃん
ogita
ogita

わかる(笑)。
でも仕組みはシンプル。
「コンピュータへの命令を文字で打ち込む場所」なんだよ。

コマンド、ですよね。英語の。

まるちゃん
まるちゃん
ogita
ogita

普段マウスでやっていることを、
文字(英語)で伝えてるだけ。

頑張って覚えます!

まるちゃん
まるちゃん
ogita
ogita

実際に入力するコマンドはそれほど多くないから大丈夫!

マウス操作ターミナルで同じことをすると
フォルダを開くcd フォルダ名
ファイル一覧を見るdir
アプリをインストールnpm install ツール名

あ、選んでダブルクリックみたいなことを「文字でやってる」んですね!

まるちゃん
まるちゃん
ogita
ogita

そう!
ターミナルが苦手な人は
「何をしているかわからない」
から怖いだけで、
やってることはいつもと同じなんだよ。

2. Node.js(ノード)って何?

Node.jsって何のためにインストールするんですか?

まるちゃん
まるちゃん
ogita
ogita

Node.jsは「JavaScriptをパソコン上で動かすエンジン」だよ。
もともとJavaScriptはブラウザの中でしか動かないもだから。

つまりNode.jsは中身はJavaScriptなわけですか?

まるちゃん
まるちゃん
ogita
ogita

いや、Node.jsはJavaScriptではないんだよ。
Node.jsをいれるとWebだけでなく
パソコン上でも動かせるようになるというものだんだ。

実行環境というやつですね。

まるちゃん
まるちゃん
ogita
ogita

まさにそれ。
Node.jsがあると、ブラウザなしでもJavaScriptのプログラムを実行できる。
今回使うclaspもJavaScriptで作られているから、Node.jsが必要なんだよ。

わかりました。

まるちゃん
まるちゃん

そもそもですが、claspを使うためにNode.jsを入れるんですよね。

まるちゃん
まるちゃん
ogita
ogita

そうだね。
たとえて言うとNode.jsは、鍋料理でいうところのコンロみたいな存在。

コンロ?

まるちゃん
まるちゃん
ogita
ogita

そう、鍋に冷たい水と野菜や肉の入っただけでは食べられないけど、
コンロ(Node.js)で鍋を温めることによって食べられる鍋料理(clasp)になるみたいな。

なんとなくイメージがわかってきました。
鍋とコンロのイメージですね。

まるちゃん
まるちゃん
ogita
ogita

うん、鍋料理(clasp)を作るために、まずコンロ(Node.js)を設置する感じ。
つまりclaspが鍋料理で、
Node.jsがコンロのイメージだよ。

なるほど
それでNodeとclaspがWebでしか実行できなかったGASを
パソコンでも実行できるようにするんですね。

まるちゃん
まるちゃん
ogita
ogita

そう、Nodeとclaspはセットで機能するって覚えておいて。

了解しました!

まるちゃん
まるちゃん

👉 https://nodejs.org にアクセスして「LTS」と書いてある方をダウンロード。LTSは「Long Term Support(長期サポート)」の略で安定版のこと。迷ったら必ずLTSを選ぼう。

node -v
▶ v24.15.0 と表示されれば成功!

3. npm(エヌピーエム)って何?

Node.jsをインストールしたら「npm」ってのも使えるようになりましたよね?

まるちゃん
まるちゃん
ogita
ogita

そうそう!npmはNode.jsについてくる「ツールのインストーラー」だよ。
スマホでいう「App Store」みたいなもの。

なるほど、そういうイメージでいろいろ追加できるんですね。

まるちゃん
まるちゃん
ogita
ogita

そうだね。
npmは世界中の開発者が作ったツールをコマンド1行でインストールできる。
Node.jsを入れたら自動でnpmも使えるようになるから、別々にインストールしなくてOK!

npm -v
▶ 11.12.1 と表示されれば成功!

Node.jsを入れたらnpmもセットでついてくるんですね、
了解です。

まるちゃん
まるちゃん

4. clasp(クラスプ)って何?

ogita
ogita

WindowsにNode.jsをインストールできたら、
準備に時間がかかったけど、いよいよ本題のclaspだよ。

インストール終わりました。
claspってなんですか?

まるちゃん
まるちゃん
ogita
ogita

claspは一言でいうと
GoogleのプログラムをPCから操作できるリモコン
といったイメージ。

なるほど、
Googleはインターネットからの操作が主ですからね。

まるちゃん
まるちゃん
ogita
ogita

そうだね。
普段GASを使うときはブラウザを開き、
スクリプトエディタを開いてコードを書くよね。

はい、実際にコード書くまで一苦労です。

まるちゃん
まるちゃん
ogita
ogita

でもclaspがあると、自分のPCのファイルを書き換えるだけでGoogleに自動で反映できる。

そっちの方が断然はやいですね!

まるちゃん
まるちゃん
方法GASを使う手順
claspなしブラウザ → スクリプトエディタ → 手でコード貼り付け → 保存
claspあり ✨PCのファイルを編集 → コマンド1行 → Googleに自動反映!

claspあると手間がぜんぜん違いますね!
しかもAIがファイルを書いてclaspが送る、ってなると……
ほぼ全自動じゃないですか!?

まるちゃん
まるちゃん
ogita
ogita

そういうこと!
それがゴールだよ。

ではnpmでclaspをインストールす方法を教えてください

まるちゃん
まるちゃん
ogita
ogita

OK!
書くコードはこれだけ

npm install -g @google/clasp

-g って何ですか?

まるちゃん
まるちゃん
ogita
ogita

いい質問!
-g は「global(グローバル)」の略。
「このパソコン全体で使えるようにインストールする」という意味だよ。

なるほど、、
-gがないと一部しか使えないってことですか?

まるちゃん
まるちゃん
ogita
ogita

そうだね。
-gなしだと今いるフォルダしかclaspを使えない形になるから、
使える範囲が狭まってしまう。
ツールを入れるときは基本-g(グローバル)をつけよう。

インストールするときは基本 -gですね!

まるちゃん
まるちゃん
clasp -v
▶ 3.3.0 と表示されれば成功!

5. claspでGoogleアカウントにログイン

ogita
ogita

claspをインストールしたら、
Googleアカウントとつなぐためにログインするよ。

clasp login

実行するとブラウザが開いてGoogleのログイン画面が出る。使いたいGoogleアカウントで「すべて選択」→「続行」を押すだけ。ターミナルに You are logged in as ○○@gmail.com. と表示されれば成功!

6. Apps Script APIを有効にする

claspを使おうとしたら
「Apps Script APIを有効にしてください」
って言われました!

まるちゃん
まるちゃん
ogita
ogita

これは最初の1回だけ必要な設定だよ。
こちらにアクセスしよう → https://script.google.com/home/usersettings
「Google Apps Script API」のトグルを「オン」にするだけ!

これも何のためにするんですか?

まるちゃん
まるちゃん
ogita
ogita

Googleが「外部のアプリ(clasp)から
GASを操作することを許可する」
スイッチを入れるってこと。

GASを使えるようにするためのGoogle側の関所を通すって感じですね

まるちゃん
まるちゃん
ogita
ogita

そうだね、デフォルトはオフになっているから
最初に一度ONにする必要があるんだよ。

なるほど

まるちゃん
まるちゃん
ogita
ogita

ONにしても反映まで2〜3分かかることがあるから、
エラーが出ても少し待ってから再試行してみてね。

はい!

まるちゃん
まるちゃん

7. Claude in Chrome って何?

ogita
ogita

Claude in Chrome(クロード イン クローム)は、
ChromeブラウザにAI(Claude)の機能を追加する
拡張機能(プラグイン)」だよ。

拡張機能って、Chromeに機能を足すやつですよね?

まるちゃん
まるちゃん
ogita
ogita

これを入れると、AIがブラウザを直接操作できるようになる。

AIが勝手にGoogleChromeを動かすんですか?
すごいけど、なんかこわい!

まるちゃん
まるちゃん
ogita
ogita

たしかに!
それを払しょくするにはまず仕組みを理解する必要があるよね。

どういったものなんですか?

まるちゃん
まるちゃん
ogita
ogita

Chrome in Claudeはね
ブラウザで行う
クリック操作と
文字や数字の入力と
ページ移動の操作を
を自動でやってくれるんだ。

やっぱり怖いです!

まるちゃん
まるちゃん
ogita
ogita

なんでも勝手にやるわけではなく、
指示したことだけやるので、
怖がらなくても大丈夫だよ。

指示したこと以外はしないんですね。

まるちゃん
まるちゃん
ogita
ogita

そう、自動運転ではなく部下みたいなイメージ。

部下ならなんとなく安心できます

まるちゃん
まるちゃん
ogita
ogita

そう、部下にChromeの操作をおねがいして、
むずかしいGASの操作を実行してもらおうってわけ。

なるほど!GASの操作を部下にやってもらうイメージですね!

まるちゃん
まるちゃん
ogita
ogita

そう!ChromeでGASを書く操作とAI (Cowork ※Claudeのデスクトップアプリ)の操作を部下に任せるイメージ。
自分でこの操作を毎回やるのは大変だからね。

はい、その操作はぜひ部下に任せたいです!

まるちゃん
まるちゃん
ogita
ogita

そうだよね。
Chrome in Claudeを入れればば、
部下がボタンクリック、テキスト入力、JavaScriptの実行まで
全部がやってくれる。

すごい、、

まるちゃん
まるちゃん
ogita
ogita

そのとおり!
今回はClaudeがスクリプトエディタを開いて、
コードを貼り付けて、実行ボタンを押す、
という操作を全部やってくれたんだよ。

全体の流れを整理:GASをPC上で動かす設定の構築

Stepやること方法
Step 1Node.jsをインストールnodejs.orgからダウンロード(LTS版)
Step 2claspをインストールnpm install -g @google/clasp
Step 3Googleアカウントにログインclasp login → ブラウザで許可
Step 4Apps Script APIをONにするscript.google.com/home/usersettingsで設定
Step 5Claude in ChromeをChromeに追加CoworkアプリからインストールOK
Step 6完成!あとはClaudeに任せるGASをPC上で動かせる環境ができた

ターミナルの画面でよくあるつまずきポイント

つまずき原因解決策
node -v と打っても何も出ないインストールが終わっていないnodejs.orgから再インストール
clasp と打っても「見つかりません」と出るターミナルを再起動していないターミナルを閉じて開き直す
clasp login でブラウザが開かないポートがふさがっているセキュリティソフトを一時オフ
clasp push で「APIを有効にして」と出るApps Script APIがOFFのままusersettingsでONにする
ONにしたのにまだエラーが出る反映に数分かかる2〜3分待って再度試す

まとめ

これって初心者でもできますか?

まるちゃん
まるちゃん
ogita
ogita

正直、どの初心者かによる。
基本的なパソコン操作に慣れている必要はあるね。

ですよね。仕事では毎日エクセルやワード使ってます。

まるちゃん
まるちゃん
ogita
ogita

うん、仕事で日常的にパソコンは使っているなら大丈夫。
プログラマーである必要はまったくない。
Step 1〜4は手順どおりにやればできるよ。

なるほど

まるちゃん
まるちゃん
ogita
ogita

ほんとうに難しいのは「何を作るか・何をClaudeに頼むか」で、
そこは目的とアイデアが大事。

AIにやってほしいことを明確に指示することが大事なんですね。

まるちゃん
まるちゃん
ogita
ogita

そうだね。
プログラムの知識がなくても、
「こういう仕組みにしたい」
というイメージを言葉で伝えられれば、
Claudeが実装を手伝ってくれる。

AIのサポートで一緒に作ってく感じですね!

まるちゃん
まるちゃん
ogita
ogita

まさにそれ!
「自分でプログラムを書く」より
「AIとチームで作る」スキルが大事になってきてると思う。

AIは友達!
こわくない!

まるちゃん
まるちゃん
ogita
ogita

その調子!

ogita
ogita

キュリオステーションでもそういった使い方をこれから伝えていきたいな。
次回は「開催判定を自動化する」仕組みづくりを解説するよ。
お楽しみに!

過去の記事検索

過去の記事検索

人気記事

人気の投稿 Best10 (月間)

-AI