日本語プログラミング言語の開発者体験を上げるために考えたこと【Re:Mind / VSCode Extensions】

はじめに

本記事は 日本語構造化仕様記述言語 Re:Mind（リマインド） Advent Calendar 2023 の24日目の記事です。ふたたび参加させていただきます。

プログラミング言語の開発者体験を考えた際、言語そのものと同様に、エディタ上の補完やシンタックスハイライトは重要な要素になります。
特に、設計メインで普段コーディングをあまりしない方にとって、エディタが補助してくれるかどうかは工数や認知負荷に大きく影響すると予想されます。

そこで、本記事ではRe:MindのVSCode Extensionを作ってみて¹、どのような補完があるとモデル作成時に便利かを考えてみました。

（Re:Mindの例を取り上げていますが、内容は他の日本語プログラミング言語にも当てはまると思います）

VSCodeの拡張機能によるプログラミングのサポート

今回は、VSCode上の言語サポートについて考えます（理由は単純に、私が仕事でもプライベートでもVSCodeを愛用しているからです）。

VSCodeでは、拡張機能を作成することで特定のプログラミング言語のシンタックスハイライトやスニペット作成を行うことができます。

参考記事

例えば、シンタックスハイライトによって以下のように構文に色が付き見やすくなります。

今回着目するのはスニペット機能です。よく使う構文を変換候補のように呼び出せる機能で、例えばJavaのExtensionでは class と打つだけで空のクラスが作成できます。

スニペットに何という単語を登録するか

Re:Mindのスニペットを作る際、なんという単語で呼び出すと使いやすいでしょうか？

Java等の（英語）プログラミング言語のスニペットとの違いは主に以下の2点です。

• スニペットとは別に、日本語そのものの変換が必要
• 記号を使用する

条件分岐（◇... の場合） を例に考えてみます。

図形そのものを登録（「◇」）

まずはシンプルに ◇ という図形でスニペットを呼び出します。

• 長所:
  • 文字そのものを登録しているので直感的
• 短所:
  • スニペットを呼び出すために、まず図形を変換で出す必要がある
  • 変換で出す方法が分からないと、その記号をググるところから始める必要がある
    • ◇ の読み方は？（※「しかく」で出てきます）

図形をあらわす単語をひらがなで登録（「しかく」）

変換が面倒なので、ひらがな しかく で呼び出せるようにします。

• 長所:
  • 変換が一度（スニペットの選択のみ）で済む
• 短所:
  • 複数の記号が被って紛らわしい
    • しかく で ◇, □ どちらも出てくる
  • スニペットに登録している読み方が分からないと候補が出ない

対応する文法機能をあらわす単語を英語で登録（「if」）

場合によっては、スニペットの単語は英語のままにした方が呼び出しやすいかもしれません。条件分岐なので if で登録します。

• 長所:
  • プログラミングの経験があれば連想しやすい（特にロジック記述担当者に便利？)
  • 途中まで入力した時点でスニペット候補が表示される
    • if の場合 i の時点で出る
• 短所:
  • スニペットを呼ぶために「全角/半角」を切り替える必要がある

ここまで3つの案を出しましたが一長一短なので、いっそ全て登録しても良いかもしれません。幸いVSCodeのスニペットは複数の単語(prefix)から呼び出すことが可能です。

snippets/remind.json

{
  "if": {
    "prefix": ["◇", "しかく", "if"],
    "body": [
      "◇$0 の場合",
      "    $1",
      "◇ここまで"
    ],
    "description": "条件分岐（if文）"
  }
}

その他の機能

また、スニペット以外にもあると便利な機能を考えていきます。

全角、半角の統一

インデントに全角、半角空白が混ざっているとガタガタで読みづらくなってしまいます²。
特に、等幅フォントでは「全角文字は半角文字の2倍の幅」となっていることが多く、インデントを見間違えてしまう可能性があります。

インデントが混ざった例

◇数値 == 0 の場合
    // 全角空白になっている！
　　　　□コンソール.一行表示する("ほげ")
    ◇文字 == "a" の場合
　　　　□コンソール.一行表示する("ふが")
    ◇ここまで
◇ここまで

保存したタイミングでコードを自動整形し、全角、半角も統一しておくと読みやすくなりそうです。

文字コードの統一

マルチバイト特有の問題ですが、ファイルごとにUTF-8とShift_JIS等が混ざっていると思わぬ文字化けの原因になってしまいます。

こちらも保存時にどちらかに統一しておくと便利です。

おわりに

以上、Re:MindのVSCode Extensionを作ってみることで、開発者体験を上げるためにどのようなスニペットを登録すると便利かを書き出してみました。
（「作ってみる」といっても条件式の部分しか触れられていませんが...）

周辺ツールも言語の使用感に関わると感じているので、日本語プログラミングに適した方法が確立されていくと良いなと思っています。

1. 文法はアドベントカレンダーの各記事と オープンな実装言語仕様 日本語トランスコンパイラ言語 Re:Mind（リマインド）2023 Lv1.1ドラフト #C#, 日本語トランスコンパイラ言語 Re:Mind（リマインド）の試作バージョン（ターゲット言語Java,C#,Mind）をC#で実装してみた #Java を参考にしました。 ↩

2. 全角空白は半角空白と同じものとして扱われる前提で考えています。 ↩