(2) CodeSandboxでサンプルを動かす - デザイナー向けのVue.js紹介
「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、Vueを使ったプロジェクトのサンプルを作成します。
連載をまとめたマガジンはこちら↓
アカウントの準備
Vueに触れ、プログラミングを始めるにあたって、便利なWebサービスがいくつかあります。まずはそこへの登録から始めましょう。（すべて無料で使用可能です。）
GitHub
GitHubはかなり有名なサービスなので、すでに使っている人もいるかもしれません。プログラムやWebサイトのコードのバージョンを管理し、共有するためのサービスです。
また、GitHubのアカウントを使って連携ログインできる開発用サービスもあります。GitHubそのものの機能を使わない場合でも、アカウントだけは作成しておくといいでしょう。
アカウント作成は、トップページの案内通りにユーザー名、メールアドレス、パスワードを登録するだけで完了します。
CodeSandbox
Vue.jsはその名の通りJavaScriptのフレームワークです。そのため、開発および実行するにはJavaScriptの開発用ツールが必要になります。
しかし、少し触ってみるためだけにいくつもツールをインストールするのはちょっとハードルが高いですよね。そこで便利なサービスがCodeSandboxです。
CodeSandboxは開発用ツールを自分で用意することなく、クラウド上に用意し、ブラウザからコードを書くことができるサービスです。
書いたコードをGitHub上に保存する機能、提携しているホスティングサービスにアップロードする機能、さらにはメンバーを招待して編集の様子をリアルタイムに共有しながら一緒に編集する機能まで無料で使えます。
注意点として、無料のCommunityプランではプライベート（非公開）のコードは作れません。学習用途には支障ありませんが、個人情報や業務上の秘匿データなどを書かないように気をつけましょう。有料プランならば、非公開のコードを書くことができるようです。
CodeSandboxにはGitHubアカウントで連携ログインできます。2020年2月現在、以下のようにしてログインします。
①画面右上の「Sign In」リンクからサインイン画面に移動する
②「Sign in with GitHub」ボタンを押す
③GitHubの画面がポップアップするので、ログインしていない場合はGitHubのIDとパスワードでログインする
④画面の指示に従い、CodeSandboxからGitHubアカウントへのアクセスを許可する
サンプルの作成
CodeSandboxには、有名なフレームワークのサンプルをすぐに作成できるテンプレートが組み込まれています。さっそくVueのサンプルを作成してみましょう。
画面右上の「Create Sandbox」ボタンを押すと、新規作成画面に移動します。そこで「Official Templates」（公式テンプレート）からVueをクリックしましょう。
すると、準備中の画面が数秒表示された後で、以下のような画面に移動します。
これでサンプルの作成は完了です！
驚くほど簡単ですね。とはいえ、最初は画面のどこが何なのかわからないと思いますので、簡単に説明します。
編集画面
CodeSandboxの編集画面はいくつかのパネルに分かれています。よく使用するのは画像で明るく示した3つのパネルです。
「ファイルエクスプローラー」パネルで編集したいファイルを選び、「コードエディター」パネルで編集すると、変更が「ブラウザプレビュー」パネルに反映されます。これを繰り返し、プレビューを確認しながら開発します。
コードエディターパネルでは、通常のエディターと同じようなショートカットキーも使えます。例えば上書き保存は「Ctrl + S」ですね。ショートカットは画面上部のメニューを開いたところにも書いてあるので、一通り眺めてみましょう。
サンプルに名前を付けて保存しておく
CodeSandbox上では、ファイルや設定や環境のひとまとまりを「サンドボックス」と呼んでいます。一般的にいうところの「プロジェクト」とだいたい同じ意味だと思ってもらってかまいません。
サンドボックスは自分のCodeSandboxアカウントに保存され、いくつも作ることができます。自分のサンドボックスは、名前をつけたり、フォルダを作って分類したり、他の人に見てもらえるようにシェアしたりと、様々な管理ができます。
先ほど新しく作成したサンドボックスには、他と重複しない名前が自動的に付けられています。しかしこのままではわかりにくいので、この記事シリーズ用にフォルダを作り、名前を付けて保存しておきましょう。
フォルダを作りサンドボックスを移動
①画面上部のサンドボックス名エリア（前掲の画像参照）から、「My Sandboxes」の部分をクリックします。
②「Move to Folder」ダイアログが表示されます。
③＋マークがついたフォルダアイコンが新規フォルダを意味します。
「Folder Name」に「note-vue-introduction」と入力してEnterを押すと、新しいフォルダ「note-vue-introduction」が作成されます。（好きなフォルダ名でいいです！）
④作成された「note-vue-introduction」を選択すると、一番下のボタンが「Move to note-vue-introduction」になるので、このボタンを押します。
名前を変更
①画面上部のサンドボックス名エリアから、「/」で区切られた右側の部分（自動で割り振られた名前の部分）をクリックします。
②文字が入力できる状態に変わるので、「sample-2」と入力して確定します。（好きな名前でいいです！）
ダッシュボード
以上の手順でサンドボックスに名前を付けて保存できました。変更できているか確認してみましょう。
画面左上の四角いロゴをクリックすると、「Dashboard（ダッシュボード）」画面に移動します。この画面では、自分のサンドボックスを一覧表示したり削除したりできます。
画面の左に、「My Sandboxes」のツリーがあり、その中に先ほど作った「note-vue-introduction」フォルダがあるのがわかります。フォルダを選択すると、右側に新規作成用リンクと「sample-2」サンドボックスが表示されます。「sample-2」をダブルクリックするとサンドボックスを開くことができ、先ほどまでの編集画面に戻ります。
今回のまとめ
CodeSandboxとは？
・開発環境をクラウド上に用意し、ブラウザからコードを書くことができるサービス
・自分のマシンにインストールしなくていいのでお試しに最適
・無料プランでは書いたコードが公開されるので気をつけよう
・非公開のコードを書きたい場合は有料プランを検討しよう
サンドボックス
・CodeSandboxではプロジェクトのことをサンドボックスと呼ぶ
・Vueのサンプルをすぐに作成できるテンプレートが用意されているので、ワンクリックで準備完了
・サンドボックスはいくつも作れる
・名前をつけたりフォルダ分類して管理できる
画面
・編集画面ではファイルを選択し、エディターで編集し、プレビューで動作確認しながら開発する
・ダッシュボードではサンドボックス一覧を管理できる
-----------------------------
ここまでお読みいただきありがとうございました。次回は、サンプルをいじりながらVueの動作の流れを解説します。
-----------------------------
おまけ：練習課題①
CodeSandboxのサンドボックス管理操作に慣れましょう。
自分のサンドボックスにしか書き込み権限がないので、他人のサンドボックスやテンプレートを上書きしたり削除してしまうことはありません。色々いじってみましょう！
サンドボックスの新規作成
・新しいサンドボックスをもうひとつ作ってみましょう。
・Vue以外のテンプレートを選択してサンドボックスを作ってみましょう。
サンドボックスの管理
・作ったサンドボックスに名前をつけて、フォルダを移動してみましょう。
・サンドボックスのフォルダをもうひとつ作ってみましょう。
・サンドボックスを新しく作ったフォルダに移動してみましょう。
・練習で作ったサンドボックスやフォルダを削除しましょう。
ヒント
・ダッシュボードでフォルダを右クリックすると、フォルダ操作のメニューが表示されます。
・ダッシュボードでサンドボックスを右クリックすると、サンドボックス操作のメニューが表示されます。
・ダッシュボードでサンドボックスをドラッグ＆ドロップすると、他のフォルダに移動することができます。
おまけ：練習課題②
CodeSandboxの公式テンプレート「Static」は、特別な機能のない、HTMLファイルだけのサンドボックスを作るテンプレートです。まずはこれを使ってエディターの操作に慣れるといいでしょう。
コードエディターでの編集
・Staticテンプレートを使って、新しいサンドボックスを作りましょう。
・ファイルエクスプローラーから「index.html」を選択し、HTMLを表示しましょう。
・コードエディターでindex.htmlを自由に編集し、保存しましょう。
・プレビューの更新ボタンを押し、HTMLの変更が適用されるか確認しましょう。
・新しく「about.html」を追加し、index.htmlからリンクを貼ってみましょう。プレビューでリンクが動作するか確認しましょう。
・画像ファイルを追加し、表示してみましょう。
ヒント
・コードエディターには高度な補完機能があります。タグ名などを入力すると候補が表示され、Tabキーで選択できます。Emmetの展開も行えます。
・ファイルエクスプローラーパネルでファイルやフォルダを右クリックすると、ファイル操作メニューが表示されます。
・ファイルエクスプローラーパネルから、ローカルの画像などをアップロードできます。ローカルのファイルをドラッグ＆ドロップしてもOKです。
・プレビューパネル右上の「Open In New Window」を押すと、プレビューを新しいウィンドウで開けます。ブラウザの開発ツールを使う場合などはこちらの方が便利ですね。
・Ctrl + Sでの上書き保存など、一般的なショートカットも使えます。
・sandbox.config.jsonを開き、「Hard Reload on Change」をオンにすると、更新ボタンを押さなくてもリロードされるようになります。
練習課題②の内容を実行したサンドボックスへのリンク
上のリンクのように、サンドボックスはURLをそのまま共有し、他の人に見てもらうことができます。
他人のサンドボックスは編集できませんが、画面右上の「Fork（フォーク）」ボタンを押すと、内容をコピーした新しいサンドボックスが作成されます。サンプルをフォークして、改造してみましょう。
おまけ：設定変更
メニューのFile - Preference - Settingsから、エディターの設定が変更できます。たくさんの項目がありますが、以下の3つはまず最初に確認するといいでしょう。
・Commonly Used - Editor: Word Wrapから、行の折り返しをオンにしてみましょう。
・Text Editor - fontから、Font Sizeを見やすい大きさに変えてみましょう。
・Workbench - Appearanceから、Color Themeを好きな色に変えてみましょう。
私の作業環境だとデフォルトのCodeSandboxテーマの色が暗すぎたので、もう少し明るい「Visual Studio Dark」テーマに変更しました。
🐥はげみになります！