見た目のコードを少し書くとき、時間を食うのはコードそのものではないことが多い。開くまでの支度の連なりだ。環境を入れ、道具の列を繋ぎ、置き場所を探す。どの段も考えを先へ送ってしまう。

三つの面と一つの下見

CodePen は見た目を作るのに要る最小の輪をブラウザへ移す。ページを開けば Pen が一つ出る。三つの面に HTML と CSS と JavaScript が分かれて並び、変えた所はそのまま下見に映る。編集の道具を入れる必要も、命令の行と向き合う必要も、設定の書面を解きほぐす必要もない。公式はこの辺りを素直に書く。入れるものはなく、対峙する命令の行もなく、絡まる設定もない。

Pen に入るのはこの三つに限らない。書面とフォルダをさらに重ね、散らばった見本を一つのページの組みへ育てられる。Sass や TypeScript のように下ごしらえの要る書き方は、中に備えた変換の仕組みが引き受けるので、手元に道具の列を先に立てなくてよい。何もない所から始めたくないときは、集まりの作品や自分で残した雛形を当てられ、それを既定にすれば新しい Pen がいつも見慣れた所から始まる。

書いたものはどこに置かれるか

作品は口座の中に残る。公開の Pen は自分のページに並び、他人が読み、控え、集まりの中から探せる。まだ形になっていない考えは、まず見せ方の設定でしまっておく。数が増えたら集まりで分類する。払う段には素材の預かりも付き、画像も様式もスクリプトも、音や映像まで面へ放り込めば預けられ、HTTPS とキャッシュと別の出所からの参照に対応した住所が返る。どの Pen からでも呼べるので、静かな素材の置き場所を別に探す段が消える。

公開の段は一度の操作に縮む。どの Pen も開ける住所になり、サーバーを用意する必要も、名前の解決の細かい話に触る必要もない。誰に見せるかも自分で決められる。すべて公開、隠す、合い言葉を一枚かける、あるいは自分だけに閉じる。

無償と払う段の境目

無償の縁ははっきりしている。公開の Pen は数に限りがないが、一つに入る書面は三つまでで、中身は初めから公開である。隠した Pen と隠した集まり、素材の預かりは払う段から始まり、段が上がるほど一つの Pen に入る書面の数、素材の大きさ、預かりの総量が緩む。

年で払うと月で払うより安い。Starter は年で九十六ドル、Developer は百四十四ドル、Super は三百十二ドル。接点の枠も段で上がり、無償は一時間に百度の問い合わせ、払う段は三千度になる。版 2.0 で画面と流れの手直しが一度入っており、新しい力の細部は公式の更新の説明に当たるのが確かだ。

どんな問題を解くのか

見た目の仕事には、手元に企画を立てる値打ちのないコードが必ずある。ある幅で組みがどう見えるかを試す。他人から報された様式の不具合をなぞる。同僚に移りの動きを見せる。あるいは後でまた使う一片を書き留める。どれもコードが短く、命も短いのに、すぐ結果が要り、そのまま人へ渡せる住所も要る。

器の弱い所も同じくらい明らかだ。見た目を描く層に向いていて、後ろで動く本物のサービスは走らせられない。無償の Pen は書面が三つまでなので、少し大きい見本はすぐ天井に当たる。中身が初めから公開という点も気に留めたい。まだ終わっていない仕事は、まず見せる範囲を調えてから書くべきだ。思いつきの確認と分かち合いの入口として置き、長く手入れの要る企画は手元の保管に残すのが、自然な分担である。

道具が敷居を下げるやり方は、できることを増やすことではなく、その前に置かれた段を消すことにあることが多い。住所を開けばコードが書けるなら、考えが画面へ落ちるまでに残る費用は、鍵を叩くことだけになる。

使い方の勧め。短い確認や見本は、手元の環境を動かさず新しい Pen を開く。人へ渡すときは公開の働きで住所を作り、相手は開くだけで済むようにする。内側の話を含む一片は、書き始める前に見せる範囲を調えておく。同じ題で何度も試すなら、雛形を一つ残しておくと毎回同じ所から始められる。