KAKERU Designingの連載「WEBの技術」の記事に、読みながらコードを試せる「ためしがきエディタ」を付けました。

記事が教科書で、ためしがきエディタがノート。記事は閉じずに、となりにノートを開いて、記事のコードを貼る。書き換えると、その場で動きが変わります。画面では「ためしがきエディタを開く」というボタンで開きます。名前は、文房具売り場で自由に試し書きできる、あの白い紙のイメージです。無料で、登録もいりません。

できること

• 記事の中の「ためしがきエディタを開く」か、画面の左下の同じボタンで、ためしがきエディタが開く
• 記事のコードを、自分でコピーして貼れる。コードの欄の「エディタに入れる」なら1回で入る
• 書き換えると、すぐ下のプレビューで動きが変わる
• 数字にカーソルを置くと、つまんで動かせる。色は、色を選ぶだけで変わる
• 1回で止まる動きは「もう一度動かす」で最初から見られる
• 書き方の間違いを、行番号つきで知らせる（AIは使わず、ブラウザの中だけで調べます）
• 書いた内容は、その端末に残る。できあがったコードは、ボタン1つでまとめてコピーできる

なぜ作ったのか

昔、WEBの勉強をしていたころのことです。ブログの記事を見ながら、そのコードを自分のエディタに貼り、ブラウザで開いて確かめる。それが、当時の勉強のしかたでした。

ブログを見ながら、自分のエディタに貼って、そこからブラウザで確認するのが、とても面倒でした。

覚えるには、書いて覚えるのが一番だと思っています。だから、これを作ってみました。

記事が教科書、ためしがきエディタがノート

いちばん大事にしたのは、教科書（記事）を閉じずに、となりにノートを広げることです。

画面の上にかぶさって開く形（モーダル）にすると、記事が隠れてしまいます。それでは、記事を見ながらコピーできません。そこで、パソコンでは記事の右側に、スマホでは画面の下半分に、ノートを開く形にしました。

僕は最初、下半分に開く形をイメージしていました。パソコンでは横に並べる形になりましたが、スマホは下半分です。

作るときに決めたこと

コピペは、自分の手でできるように

記事のコードを選んでコピーし、ノートに貼る。いつものやり方で使えることを、いちばんの前提にしました。「エディタに入れる」は、その近道です。

間違いは、責めずに知らせる

書いたコードに間違いがあると、その行の番号が赤くなり、「colr というCSSの名前はありません。color の書き間違いかもしれません」のように、直し方の見当を添えて知らせます。

作っている途中で、わざとでたらめなクラス名や属性を入れて試してみると、最初は見逃していました。そこで、HTMLのクラス名がCSSと合っていないときや、ない属性を書いたときにも気づけるようにしています。

見やすさは、使う人が決められる

記事とノートの境目の線をつまむと、ノートの幅を変えられます。カウンターやタイピングのように1回で止まる動きは、「もう一度動かす」で何度でも見直せます。どちらも、試しに使ってみて「ほしい」と感じたところを足しました。

AIの時代に、書いて覚える意味

いまは、AIに頼めばコードを書いてもらえる時代です。自分でコードを書く人は、これから減っていくのかもしれません。

それでも、根本を理解しておくと、自分が次に作るもののアイデア出しにつながります。だから、書いて覚えることは無駄ではないと思っています。

CSSで何ができるのかを手で知っていると、「この表現は、あの書き方でできそうだ」と考えられるようになります。ためしがきエディタは、そのための小さなノートです。

判断と設計はトミー、組み立てはClaude

この道具も、AIのClaudeと一緒に作りました。

記事とノートをどう並べるか、どこにボタンを置くか、間違いをどんな言葉で知らせるか。こうした判断と設計は僕がして、プログラムの組み立てはClaudeが担当しています。まず見た目の見本（カンプ）を作って確認し、それから実際に動く試作に進みました。公開の前には、WEBの技術の記事すべてで、正しく付くか・崩れないかを確かめています。

触ってみて「ここは違う」と気づくことは、人の仕事です。そこを先に決めたから、早く形にできました。

こんな道具も作れます

ためしがきエディタと同じように、ページを読みながら、その場で試せる仕組みを作ることができます。たとえば、こんなものです。

こんな会社に向いています

• 社内向けのマニュアルや研修を、読むだけで終わらせたくない会社
• 自社のサイトに、お客さまが「その場で試せる」ページを作りたい会社
• Webの担当者を、社内で少しずつ育てていきたい会社
• 大きなシステムを入れるほどではないけれど、小さな仕組みがほしい会社

大がかりな学習システムではなく、今あるページや記事に足せる、小さな仕組みを早く形にするのが得意です。「こんなことできる？」くらいの段階でも、お気軽にご相談ください。