プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for CodeWing

CodeWing

Vue.jsの開発バージョンと本番バージョン

By

この記事では、Vue.jsの開発バージョンと本番バージョンについて学習します。

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

動画を使って学習する

開発バージョンと本番バージョンの違い

開発バージョン・・・開発中に使う

  • 警告出力とデバッグモード ◯
  • スピード ：　✕

本番バージョン・・・本番環境で使う

  • 警告出力とデバッグモード ✕
  • スピード ：　◯

Vue.jsには、applicationの開発者が開発中に使うバージョンと、本環境で使うバージョンのファイルが用意されています。
開発バージョンは、警告出力とデバッグモードがある代わりに、スピードは遅いです。
それに対して、本番バージョンは、
警告出力とデバッグモードがない代わりに、スピードは速いです。

用途によって使い分けます。

Vue.jsの読み込み方法

開発バージョンはこの記述で読み込むことができます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

これを、本番バージョンに切り替えるには
vue.js となっているところを、 vue.min.js にします。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

とします。

minは、Minify(ファイル圧縮）の意味です。

vue.jsのファイルのファイルを確認

vue.jsのファイルは、javascriptのファイルなので、URLをブラウザ指定すれば、内容を確認することがきます。

これが、開発バージョンです。
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
オープンソースなので、ソースコードを読むこともできます。

本番バージョンですが、.minを追加した、このURLで確認できます。
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js

スピードを優先するために、minifyされた、つまりファイル圧縮をして、最適化された小さなファイルとなっています。
変数名が、短縮形になっているなど、人間がソースコードを読むのは、かなり困難です。

まとめ

開発中は開発バージョン、本番環境では本番バージョンを使うようにしてください。
このコースの学習では、基本的には、開発バージョンを利用します。

このレクチャーでは、Vue.jsの開発バージョンと本番バージョンついて学習しました。

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

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

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

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

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

By

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

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

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の画面について概要を学習しました。

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

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する