この記事では、Vue.jsの学習に便利な jsFiddleの使い方について補足説明致します。
学習を進める中で、ソースコードを一旦保存したいときがあると思います。
jsFiddleには、ファイルをセーブする機能がありますので、紹介いたします。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。
jsFiddleにログインしていない状態から始めます。
コードを書いたら、Sava機能するとセーブされます。
セーブの状態ごとに、URLが発行されるので、これを控えておくと、あとで再現したり、他の人にURLを共有することで、ソースコードを共有することができます。
このurlをコピーして、シークレットモードで起動した、Google Chromeで表示してみると、ソースコードが復元できました。
推測しにくいURLではあるのですが、URLがわかれば内容を確認できてしまうので、機密情報や個人情報が含まれたコードは保存しないことをおすすめします。
fiddlemetaのところに、タイトルや、説明文を書くこともできます。
タイトルを記入すると、public fiddleという扱いになって、他のユーザーからfiddleを探しやすい状態になります。
ちなみに、Public設定になっていなくても、URLがわかればコードを表示することができます。
ソースコードをアップデートしたい場合は、updateを押すと、updateされます。
また、新しくurlが発行されます。/1/というUrlが発行されました。
また、変更して、updateすると、 /1/というUrlが発行されました。
このURLを、控えておくのが面倒という方は、このsign in > sign upからユーザー登録を行って、ログインすると、一覧で管理できるようになります。
無料で利用できるので、使いたい方は使って頂いてもよいと思いますが、コースの学習を進めるにあたって、ユーザー登録は必須ではありません。
ログインした状態にして、画面右上の、アイコンをクリック、
All your fiddlesをクリックすると、保存したソースコードの一覧を確認することができます。
your public fiddleをクリックすると、Public設定になっているものが一覧表示されます。
あと、Forkを使うと
今あるコードの複製を作って、複製後のコードに手を加えていくことができます。
新しいURLが発行されます。
Tidy （タイディ）ボタンをクリックすると、コードフォーマットが整形されて見やすくなります。
この記事では、補足説明としてjsFiddle ソースコードの保存について紹介いたしました。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する