サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== CodeSandboxで2クリックでVue開始 =====
[[vue:index.html|Vue.jsトップページ]]

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

{{:vue:pasted:20181209-144356.png}}

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

CodeSandbox上から『deploy Now』をクリックすることにより、<wrap hi>パソコン上で、WEBブラウザのみで、無料で</wrap>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

<code html>
<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>
</code>




===== 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 書籍用サポートページ)
→素晴らしいサポートサイトです。今度、この本を購入して読んでみたいと思います。

<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07D9BYHMZ&linkId=fa852410875e77ec8615969928dc1e59"></iframe>
</html>

===== リンク =====

[[vue:index.html|Vue.jsトップページ]]