CodeWing

Vue.jsの読み込み方法について

2018-11-14 By プログラミング入門ナビ編集部

この記事ではVue.jsの読み込みについて学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

Vue.jsを使ってプログラムを書くには、Vue.jsのファイルを読み込む必要があります。

Vue.jsを読み込む方法

Vue.jsを読み込む方法ですが、主に、次の方法があります。

◯ CDN（Content Delivery Network経由）
直接組み込み（ファイルをダウンロードして配置）
NPM（パッケージ管理ソフトの利用）

この記事では原則CDNを使った読み込みを行います。無料で利用できます。

動画で学習する

CDNについて

CDNというのはContent Delivery Network の略です。
ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

Vue.jsで利用するのはjsdelivrというCDNですが、東京と大阪にもエッジロケーション、つまり、配信サーバがあるので高速です。

Network map | jsDelivr

基本的には、何かしらの理由がある時以外は、CDNを使うのがおすすめです。

読み込み方ですが。
Vue.jsの公式サイトで、「インストール」などのキワードで検索すると、
インストールのページが開けます。

見出しCDN, のところに、vue.jsをCDNから読み込むための、コードが記載されているのでコピーします。

HTML入力欄の末尾にコピーしまします。
実際のHTMLの場合は、bodyの終了タグの直前に配置します。

これでVue.jsを読み込むことができました。

Vue.jsのバージョンについて

この数字を変更することで,読み込むvue.jsのバージョンを変更することができます。

このコースのサンプルコードは、vue.js バージョン2.5.16で動作確認を行っています。

2.5.xというバージョンで、かつ、2.5.16以上であれば基本的には動作すると考えられます。

しかしながら、2.5.16以外のバージョンですと、動作が動画と異なる可能性もあるため、学習中には、バージョン2.5.16を明示的に指定することをおすすめします。

実際に本番環境で一般ユーザーに公開する場合も、バージョンを固定するのが安全です。
Vue.jsのバージョンを上げるときには、必ず、ステージング環境など開発用の環境で、新しいVue.jsのバージョンでアプリケーションの動作検証をしてから、本番環境に公開するようにしてください。

おわりに

このレクチャーでは、Vue.jsをCDNを使った読み込む方法について学習しました。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する

JSFiddleの画面の概要について説明

2018-11-14 By プログラミング入門ナビ編集部

この記事では、jsFiddleの画面の概要について、学習します。

jsFiddleのサイトをWebブラウザで開く

Webブラウザでjsfiddle.netを開いてください。
Webブラウザは、本質的ではない部分でトラブルが発生しないために、Google Chromeを使うことをおすすめしています。

動画で学ぶ

初期操作

JSFiddleを開いたら、
Closeを押して、作業領域を広くします。

いまは、黒い画面、Darkテーマになっているのですが、
動画で皆さんが見やすいように、明るいテーマに変更をしておきます。
Settings > Dark テーマをOFFにしします。
テーマは、各自の好みで構いません。

HTML 入力欄について

このHTMLと記載がある入力欄には、Vue.jsのテンプレート記述します。

もう少し補足すると、
ここには、HTMLのbodyタグの要素の内容を記述します。
HTMLタグとか、ヘッダーなどは、JSfiddleが、自動的に生成するので書く必要はありません、

JavaScript入力欄

JavaScriptの欄には、JavaScriptを記載します。
jsファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

CSS入力欄

JavaScriptの欄には、CSSを記載します。
CSSファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

出力欄

この部分には、
書いたコードの出力が表示されます。

RUNボタン押すと、書いたコードが描画されます。

デベロッパーツールで、HTMLを確認してみましょう。
iframeで、開発者が書いたWebページを表示していることが分かります。

おわりに

もう少し詳しい使い方や、便利な使い方については、あとのレクチャーで随時紹介していきます。

実際に使ってみたほうがイメージしてが着くと思いますので、つぎのレクチャーから、実際にはコードを書いてきましょう。

この記事では、このレクチャーでは、JSFiddleの画面について概要を学習しました。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する

【JavaScript】変数の宣言var, const, let の違いについて

2018-11-10 By プログラミング入門ナビ編集部

変数の宣言var, const, let の違いについて、プログラミング入門者向けに説明いたします。

主に、「動作の違い」、「利用できるJavaScriptのバージョンの違い」2点が挙げられます。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

① 動作の違い

var ・・・「再宣言」も「再代入」も可能

例)

var num = 10; // OK
num = 11; // OK
var num = 12; // OK

let・・・「再宣言」が不可

例)

let num = 10; // OK
num = 11; // OK
let num = 12; // NG

const ・・・「再宣言」も「再代入」も不可

例)

const num = 10; // OK
num = 11; // NG
const num = 12; // NG

②利用できるJavaScriptのバージョンの違い

var・・・すべてのJavaScriptバージョンで利用できる。
let, const ・・・ES2015以降で利用できる。インタネットエクスプローラーなど、対応していないブラウザがあるため、公開時にES5のコードに変換するなど配慮が必要になる場合がある。

おわりに

この記事では、変数の宣言var, const, let の違いについて、プログラミング入門者向けに説明しました。

Udemyでオンライン講座を公開中！

オンライン講座「Web開発入門完全攻略コース」では、JavaScriptの使い方を始めとした、プログラミング入門について動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する

CodeWing

Vue.jsを読み込む方法

動画で学習する

CDNについて

Vue.jsのバージョンについて

おわりに

動画で学ぶプログラミング入門

jsFiddleのサイトをWebブラウザで開く

動画で学ぶ

初期操作

HTML 入力欄について

JavaScript入力欄

CSS入力欄

出力欄

おわりに

動画で学ぶプログラミング入門

① 動作の違い

var ・・・「再宣言」も「再代入」も可能

let・・・ 「再宣言」が不可

const ・・・ 「再宣言」も「再代入」も不可

②利用できるJavaScriptのバージョンの違い

おわりに

Udemyでオンライン講座を公開中！

動画で学ぶプログラミング入門

let・・・「再宣言」が不可

const ・・・「再宣言」も「再代入」も不可