CodePenで素のJavaScriptで最小のアプリケーションを作る

CodePenを使うとブラウザで直接JavaScriptのコードを書いてアプリケーションを動かすことが出来ます。サーバーも不要ですし、ちょっとしたアプリケーションであればこれだけでも簡単に作成＆公開が可能です。

CodePenのトップページにCREATEメニューがあります。そちらでPenをクリックして新規作成します。

あとは実際にHTMLとJavaScriptを書いていきます。ひとまずロジックもなにもない、単なる最小の表示を作ってちゃんと動作しているか確かめます。

let count = 0

function render() {
  document.querySelector('#count').innerHTML = count
}

render()

<div id="count"></div>

これで下記のようにcountの値が表示されているので問題なさそうです。

次に値をかえるロジックを入れていきます。

let count = 0

function increment() {
  count++;
  render()
}

function render() {
  document.querySelector('#count').innerHTML = count
}

render()

<div id="count"></div>
<button onClick="increment()">+</button>

ボタンを押すと値が増えていくロジックを追加することが出来ました。

実際に試してみることも出来ます。

https://codepen.io/dala00/pen/eYNRvLx

あとはCrieitやQiitaなどは埋め込みも可能です。

CodePenの埋め込み

See the Pen Vanilla JS simple application by dala00 (@dala00) on CodePen.