速報！GlintCode登場：ブラウザで動く初心者向けスクリプト言語が面白い

「JavaScriptってなんだか難しそう…でもブラウザで動くものを作りたい！」

そんな気持ち、ありませんか？ JavaScriptは確かに強力な言語ですが、初心者にとってはとっつきにくい部分も多いですよね。そこに朗報です！ 🎉

GlintCodeという、ブラウザ上で動く新しい軽量スクリプト言語が話題になっています。JavaScriptをベースにしながら、もっとシンプルで初心者にやさしいAPIを目指して開発されているプロジェクトです。この記事では、GlintCodeの概要・特徴・実際の書き方をわかりやすく紹介します。

Contents

GlintCodeって何者？
GlintCodeの基本的な書き方
DOMの操作もシンプルに
JavaScriptとGlintCode、何が違う？
GlintCodeが向いている人・向いていない人
- ✅ こんな人に向いている
- ❌ こんな人には向いていないかも
まとめ：GlintCodeは「学ぶ楽しさ」を大切にした言語

GlintCodeって何者？

browser scripting language beginner / Photo by Pixabay via Pexels

ざっくり言うと、「JavaScriptの上に乗っかる、よりシンプルな言語」です。

イメージとしては、JavaScriptというエンジンをそのまま使いつつ、操作パネルをもっとわかりやすく作り直した感じ、でしょうか。裏側の仕組みはJSなので、ブラウザとの相性もバッチリです。

主な特徴をまとめるとこんな感じです 👇

🚀 インストール不要、ブラウザだけで動く
📝 <script type='text/glint'> タグで即スタート
🧩 JavaScriptよりもシンプルな文法
🔰 プログラミング初心者でも読みやすい設計
🔗 既存のJavaScript資産と共存できる

GlintCodeの基本的な書き方

GlintCodeは、HTMLファイルの中に直接書くことができます。まずは最もシンプルな「Hello World」から見てみましょう。

<!-- HTMLファイルの中に書くだけでOK -->
<script src='https://cdn.glintcode.dev/glint.js'></script>

<script type='text/glint'>
  print('Hello, GlintCode!')
</script>

JavaScriptの console.log() の代わりに print() が使える、というのが初心者にとってはかなり直感的ですよね。

変数と基本的なデータ型

変数の宣言もシンプルです。JavaScriptのように var / let / const を使い分ける必要はなく、let 一本で統一されています。

<script type='text/glint'>
  let name = 'Taro'
  let age  = 20
  let isStudent = true

  print('名前: ' + name)
  print('年齢: ' + age)
  print('学生: ' + isStudent)
</script>

条件分岐と繰り返し

if文やfor文はJavaScriptとほぼ同じ感覚で書けます。ただし、余計なセミコロンや複雑な書き方を省略できるよう設計されています。

<script type='text/glint'>
  let score = 85

  if score >= 80 {
    print('合格です！')
  } else {
    print('もう少し頑張りましょう')
  }

  // 繰り返し
  for i in range(1, 6) {
    print(i + '回目のループ')
  }
</script>

Pythonユーザーにはおなじみの range() が使えるのもポイントです。Python的な直感とJS的な動作環境が合体した、いいとこ取りな設計ですね。

関数の定義

関数は func キーワードで定義します。JavaScriptの function より短くてスッキリしています。

<script type='text/glint'>
  func greet(name) {
    return 'こんにちは、' + name + 'さん！'
  }

  let message = greet('Hanako')
  print(message)
  // 出力: こんにちは、Hanakoさん！
</script>

DOMの操作もシンプルに

ブラウザで動く言語なので、もちろんHTMLの要素を操作することもできます。JavaScriptでいう document.getElementById() のような長いメソッド名を覚えなくても、GlintCodeならもっと短く書けます。

<!-- HTML部分 -->
<p id='output'>ここに表示されます</p>
<button id='btn'>クリック！</button>

<script type='text/glint'>
  // 要素を取得してテキストを変更
  let output = select('#output')
  let btn    = select('#btn')

  // クリックイベントを設定
  btn.onClick {
    output.text = 'ボタンが押されました！ 🎉'
  }
</script>

select() という関数でCSS風にセレクタを指定できるので、jQueryに慣れている人にも親しみやすい書き方ですね。

JavaScriptとGlintCode、何が違う？

改めて、JavaScriptとGlintCodeの違いを整理してみましょう。

比較項目	JavaScript	GlintCode
変数宣言	var / let / const	let のみ
関数定義	function キーワード	func キーワード
コンソール出力	console.log()	print()
繰り返し	for / while	for in range() など
DOM取得	document.getElementById() 等	select() のみ
セミコロン	原則必要	省略可能