jsFiddle ソースコードの保存 – Vue.js入門 | プログラミング入門ナビ

この記事では、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（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！