目次

CodeSandboxで2クリックでVue開始

Vue.jsトップページ

CodeSandboxとは、無料でVue.jsやAngularといったJavascriptのフレームワークを利用できるサイトで、2017年から公開されています。2020年現在、初心者が特に動的なWEBサイトを作成する際のツールとして、一番のお勧めです。

2017年までは、Cloud9というサイトがあったのですが、Amazonに買収され、無料プランが無くなってしまいました。（少なくともクレジットカード登録が必須になりました。）

CodeSandbox上から『deploy Now』をクリックすることにより、パソコン上で、WEBブラウザのみで、無料でVue.jsやAngularで作成したWEBサイトを公開することができます。

CodeSandboxで初めてのVue.js

解説：https://jp.vuejs.org/v2/guide/index.html

https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world?codemirror=1 

<DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

CodeSandboxの使い方リンク

https://paiza.hatenablog.com/entry/2018/03/29/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%ABAngular%2CReact%2CVue%E7%AD%89%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E4%B8%80%E7%99%BA%E6%A7%8B%E7%AF%89%EF%BC%86%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D
2018-03-29
ブラウザ上にAngular,React,Vue等の環境を一発構築＆開発できる「CodeSandbox」を使ってみた！

http://studio-andy.hatenablog.com/entry/codesandbox-vue
2018-04-12
君は2クリックでVue appを立ち上げたことがあるか!!<CodeSandboxを世の中に広めなければと思った件>

https://qiita.com/ynunokawa/items/0759ba44e2b816884759
@ynunokawa
2017年12月15日に更新
SmartDrive12日目
もうJS開発環境は訳わからんって人に薦めたい CodeSandbox

ホスティングサービスNowについて

https://qiita.com/aggre/items/f0cb9f8b8e8c54768e50
@aggre
2018年11月20日に更新
Now でクラウドの複雑さから解放されよう、今すぐに

https://qiita.com/w-iijima/items/6382b8dab1d48c15ba95
@w-iijima
2018年05月07日に投稿
クレジットカードの登録不要！無料で使えるモックアップ環境比較[now/heroku/firebase]

他にも、Netlifyという静的サイトホスティングサービスがあり、こちらも無料範囲内でもとても便利です。

Vue.jsとfirebaseでチャットのリンク

https://qiita.com/nakadoribooks/items/a5c73580039c99a117dc
@nakadoribooks
2017年08月05日に更新
vueとfirebaseでブラウザチャット
JavaScript
vue.js
Firebase
Bulma

https://liginc.co.jp/378463
Vue.js + Firebaseでチャットアプリを脳死しながら作ってみよう！〜セットアップ編〜
2018.01.10
#113
それいけ！フロントエンド
Vue.js + Firebaseでチャットアプリを脳死しながら作ってみよう！〜セットアップ編〜

https://liginc.co.jp/382652
完成編

https://cr-vue.mio3io.com/tutorials/firebase.html
認証付きの簡易チャットを作る！(基礎から学ぶ Vue.js 書籍用サポートページ)
→素晴らしいサポートサイトです。今度、この本を購入して読んでみたいと思います。

リンク

Vue.jsトップページ