クイックスタート

このハンズオンガイドでは、ReScript IntelliJ Plugin の初回体験を順を追って説明します。各ステップを実行し、期待される結果を確認してから次に進んでください。

前提条件

  • プラグインがインストール済みであること（インストールガイド）

  • rescript.json（または bsconfig.json）を含む ReScript プロジェクト

  • プロジェクトに @rescript/language-server がインストール済みであること（npm install -D @rescript/language-server）

ステップ 1: プロジェクトを開く

  1. File → Open → ReScript プロジェクトフォルダ（rescript.json を含むディレクトリ）を選択します

  2. IDE がプロジェクトをインデックスするまで数秒待ちます

期待される結果

  • Project ツリーに src/ フォルダと rescript.json が表示される

  • Project ツリーの .res と .resi ファイルの横に ReScript アイコンが表示される

  • 画面下部のステータスバーに "ReScript" とビルドステータスインジケータが表示される場合がある

トラブルシューティング

  • "Cannot find rescript.json": サブディレクトリではなく、プロジェクトのルートディレクトリを開いていることを確認してください

  • ファイルに ReScript アイコンが表示されない: プラグインが正しくインストールされていない可能性があります。Settings → Plugins で "ReScript" を検索してください

  • モノレポ構成: rescript.json がサブディレクトリにある場合、そのサブディレクトリをプロジェクトルートとして開くか、Language Server がワークスペースルートにホイストされていることを確認してください

ステップ 2: シンタックスハイライトの確認

Project ツリーから任意の .res ファイルを開きます。

期待される結果

  • キーワード（let, type, module, switch）が特定の色で表示される

  • 文字列がコードとは異なる色で表示される

  • コメント（// と /* */）が控えめな色で表示される

  • Language Server が動作している場合、追加のセマンティックカラーリング（モジュール名、バリアントコンストラクタなど）が表示される場合があります

トラブルシューティング

  • テキストがすべてプレーンな黒/白で表示される: ファイルが ReScript として認識されていない可能性があります。ファイル拡張子が .res または .resi であることを確認してください

  • 一部のハイライトのみ表示される: 最初の数秒間はこれが正常です。レイヤー 1（レクサー）のハイライトは即座に適用されます。レイヤー 2（セマンティック）のハイライトは Language Server の起動後に表示されます

ステップ 3: コード補完を試す

関数本体にカーソルを置いて入力を開始します。例えば、Js.log や Console. と入力してください。

Ctrl+Space（macOS では Cmd+Space）を押すと、手動で補完を呼び出せます。

期待される結果

  • コンテキストに応じた候補（関数、モジュール、変数）のポップアップが表示される

  • 各候補に型シグネチャが表示される

  • Postfix completion も試してみましょう: 値の後に .switch や .log と入力して Tab を押します

トラブルシューティング

  • 補完候補が表示されない: Language Server が動作していない可能性があります。ステータスバーの "ReScript" インジケータを確認してください

  • "Language server not found" 通知が表示される: npm install -D @rescript/language-server で Language Server をインストールし、IDE を再起動してください

  • キーワードのみ表示される: LSP ベースの補完には Language Server の実行が必要です。ネイティブの Postfix/Live Templates は Language Server なしで動作します

ステップ 4: Go to Definition でナビゲーション

Ctrl（macOS では Cmd）を押しながら任意のシンボル（関数名、モジュール名、型）をクリックします。Ctrl+B（Cmd+B）でも同様です。

期待される結果

  • エディタがシンボルの定義元にジャンプする（別ファイルでも可）

  • Alt+F7 でシンボルのすべての使用箇所を検索することもできます

  • Alt+O を押すと .res と .resi ファイルを切り替えられます

トラブルシューティング

  • Ctrl+Click しても何も起きない: Go to Definition には Language Server の実行が必要です。ステータスバーを確認してください

  • "Cannot find declaration": そのシンボルは外部ライブラリのものかもしれません。依存パッケージがインストールされていることを確認してください（npm install）

ステップ 5: 診断機能の確認

意図的に型エラーを導入してみましょう。例えば、string が期待される箇所で int の値に変更します。ファイルを保存するか、少し待ちます。

期待される結果

  • エラーのあるコードに赤い波線が表示される

  • 波線にマウスを合わせると、型の詳細を含むエラーメッセージが表示される

  • Problems パネル（Alt+6）にすべてのエラーと警告が一覧表示される

  • Error Lens が有効な場合、エラーメッセージが行末にインラインで表示される

トラブルシューティング

  • 波線が表示されない: ReScript のビルドウォッチャーが動作していない可能性があります。Run → Edit Configurations → ReScript → Build Watch で開始してください

  • エラーがすぐに消える: コードを修正した後は正常な動作です。Language Server はリアルタイムで診断を更新します

ステップ 6: コードのフォーマット

Ctrl+Alt+L（macOS では Cmd+Option+L）を押すと、現在のファイルをフォーマットできます。

期待される結果

  • rescript format を使用して、ReScript の標準スタイルに従ってファイルが再フォーマットされる

  • インデント、スペース、改行が自動的に調整される

トラブルシューティング

  • "Cannot find rescript binary": rescript CLI がプロジェクトの node_modules/.bin/ に存在する必要があります。npm install を実行して依存パッケージをインストールしてください

  • 変化が見られない: コードが既に正しくフォーマットされている可能性があります

ステップ 7: ビルドの実行

ReScript ビルドを実行するにはいくつかの方法があります:

  1. ガターアイコン: ファイル横のガターにある緑色の ▶ アイコンをクリックします

  2. 実行構成: Run → Edit Configurations → + → ReScript → "Build" または "Build Watch" を選択

  3. Run Anything: Ctrl を 2 回押して（ダブルタップ）rescript build と入力

期待される結果

  • 画面下部に Run ツールウィンドウが開き、ビルド出力が表示される

  • ステータスバーにコンパイル結果（成功/エラー数/警告数）が表示される

  • ビルドエラーがコンソール出力にクリック可能なリンクとして表示される

トラブルシューティング

  • Run Configurations に ReScript オプションがない: プロジェクトルートに rescript.json が存在することを確認してください

  • "rescript not found" でビルドが失敗する: npm install を実行して ReScript コンパイラをインストールしてください

ステップ 8: さらに探索する

基本的なワークフローを確認しました。さらに探索できる機能を紹介します:

ストラクチャービュー

Cmd+7 / Alt+7 を押すと、ファイル内のモジュール、関数、型のアウトラインを確認できます。

Live Templates

let + Tab、sw + Tab、comp + Tab と入力して、コードスニペットを展開できます。

Intentions

任意の式で Alt+Enter を押すとクイックアクションが表示されます: Some でラップ、@genType の追加など。

Find Usages

シンボル上で Alt+F7 を押すと、プロジェクト全体でそのシンボルが使用されているすべての箇所を確認できます。

次のステップ