irigon//code ── 自分好みにコーディングをノーコードで

ビジュアル＆コード統合開発環境ブロックと本物のコードを行き来登録なし・無料

irigon//code は、ブロックを組み合わせる「ノーコード」の操作と、本物のソースコードを書く「コーディング」を、ひとつの画面で行き来できる開発環境です。ブロックで作ったものはコードとして読め、コードの変更はブロックにも反映されます。HTML・CSS・JavaScript・TypeScript・Python・Ruby・PHP・Java・Go・JSON など、多くの言語のサンプルが入っているので、「プログラムとは何か」を触りながら学べます。インストールは不要で、ブラウザで開くだけです。

▶ irigon//code を開く　ゲーム・機能の紹介の一覧

ブロックを 1 つ動かすと、コードが 1 行変わる。コードを 1 行書くと、ブロックが 1 つ増える。

この頁でできること

  • ブロックと本物のコードを行き来：ブロックの組み立てとソースコードが同期する
  • 多くの言語のサンプル：HTML・CSS・JavaScript・TypeScript・Python・Ruby・PHP・Java・Go・JSON ほか
  • ライブプレビュー：作った Web ページがすぐ見える。コンソールとエラー診断つき
  • かんたん結線：ボタンで文字を変えるなどの定番の動きを、ブロックをつなぐだけで作れる
  • 保存：プロジェクトは端末の保存領域に残る

画面の構成

サンプルプロジェクト

最初に選べるサンプルは、まっさらな「クリーン空プロジェクト」のほか、本格的な Web サイト作り（ヒーロー画面とカードの画面）、Todo と API のアプリ、SaaS ダッシュボード、AI チャットボット、Java の在庫管理、パスワード認証とハッシュ化の仕組み、Rust・C++・Haskell・SQL といった言語の例などです。サンプルは、動かして中身を読んだり、書き換えたりして学ぶための教材として使えます。

対応する言語

用途言語
Web 画面を作るHTML・CSS・JavaScript・TypeScript
サーバー側の処理PHP・Python・Ruby・Java・Go
データSQL・JSON
その他の言語の例Rust・C++・Haskell

それぞれの言語について、仕様書と教本の画面があり、ブロックの意味や書き方を調べられます。Python は、ブラウザの中で動く WebAssembly 版（Pyodide）につなぐこともできます。ブラウザの中で動く仕組みなので、実際のサーバーや OS で動かした場合と細かい挙動が違うことがあります。

学び方の例

  1. まず「クリーン空プロジェクト」で、ボタンを押したら文字が変わる動き（ボタン押下→画面の書き換え）を、ブロックで作る。
  2. 横のコードを見て、どんな文字が並んだのかを読む。1 行だけ書き換えて、結果がどう変わるか確かめる。
  3. サンプルの Web サイトで、色や文字を変えて、プレビューに反映されるのを見る。
  4. 慣れたら、Python や Go など、別の言語のサンプルを動かして、書き方の違いを比べる。

授業などで使う場合は、成果物の「修了証」のページを発行して保存する機能もあります。

外部のライブラリについて

irigon//code は、利用者が必要なときだけ、外部のライブラリを取り込めます（例：Three.js、Chart.js、React、Matter.js、Tailwind CSS、Python の WebAssembly 版）。利用者が取り込みの操作をしたときにだけ、それぞれの配信元（jsDelivr・esm.sh・Tailwind CSS の配信元など）に接続します。くわしくはプライバシーポリシーの第7条の4をご覧ください。

保存と安全

作ったプロジェクトは、ブラウザの保存領域（この端末の中）に残ります。ブラウザの記録を消すと消えることがあるので、残したいものは書き出して保存してください。ひとりで使う機能なので、年齢を問わず使えます。

なお、このサイトの以前の「つくるーる」（絵のルールでゲームを作る機能）は、この irigon//code に置き換わりました。irigon//code は開発中で、サンプルや機能は今後も増やします（更新履歴）。

このページについて　ブロックと本物のソースコードを行き来できる、ブラウザの統合開発環境 irigon//code の紹介。多くの言語のサンプル、ライブプレビュー、画面の構成、外部ライブラリの扱い。