「CodePen」の記事 - Crieit

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

2020-03-01T17:46:18+09:00

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

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

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

let count = 0

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

render()

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

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

let count = 0

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

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

render()

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

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

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

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

CodePenの埋め込み

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

CodePenでReactを使った最小のアプリケーションを作る

2020-03-01T17:37:31+09:00

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

するとPenの設定画面が開きます。ここのJSメニューで、JavaScriptのライブラリなどのCDNを追加することが出来ます。ここで検索も出来ますが、Reactをとりあえず動かすには公式に説明があるように、下記の２つのURLを登録する必要があります（現時点のバージョンですので適宜更新してください）。

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js

あとはJSXを動作させるためにJavaScript PreprocessorをBabelにしておきます。

同様にCSSのフレームワークなども追加できます。設定できたら「Save & Close」で確定します。

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

const IncrementButton = () => {
  const [count, setCount] = React.useState(0)

  return (
    
      {count}
    
  )
}

ReactDOM.render(, document.querySelector('#app'))

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

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

const IncrementButton = () => {
  const [count, setCount] = React.useState(0)

  return (
    
      {count}
      
    
  )
}

ReactDOM.render(, document.querySelector('#app'))

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

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

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

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

CodePenの埋め込み

See the Pen React.js simple application by dala00 (@dala00) on CodePen.

CodePenでVue.jsの最小アプリケーションを作成する

2020-03-01T08:40:20+09:00

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

するとPenの設定画面が開きます。ここのJSメニューで、JavaScriptのライブラリなどのCDNを追加することが出来ます。例えば今回はVueで検索してVue.jsを追加します。

同様にCSSのフレームワークなども追加できます。設定できたら「Save & Close」で確定します。

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

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  }
})


  {{ count }}

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

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

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count = this.count + 1
    }
  }
})


  {{ count }}

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

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

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

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

CodePenの埋め込み

See the Pen Vue.js simplest application by dala00 (@dala00) on CodePen.

CodePenの埋め込み

2018-07-28T06:37:23+09:00

CrieitではCodePenの埋め込みに対応しています。

See the Pen rradaj by dala00 (@dala00) on CodePen.

作成したCodePenのプロジェクトにてEmbedをクリックし、HTML(recommended)と書かれた箇所のHTMLをコピーし、そのままCrieitのエディタに貼り付けます。

（編集中のプレビュー画面では表示されません）

CodePenサンプル

2018-07-12T00:14:53+09:00

CodePenのembedタグを貼り付けられるようになりました（恐らく）。

See the Pen rradaj by dala00 (@dala00) on CodePen.