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

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

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

You are here: Home / Archives for プログラミング入門

プログラミング入門

Vue.jsのルート テンプレートを作成

By

Vue.jsでルート テンプレートを作成する方法について学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポートコンテンツです。

動画でVue.jsを学習する

テンプレートとは

テンプレートとは 、 HTML ベースのテンプレート構文を使用した、描画部分に関する記述のことです。

いわゆる、MVCモデルとか、MVVMパターンでいうところの、Vの部分、Viewに相当する部分です。

ルートのテンプレートというのは、テンプレートの中でも、頂点に位置するテンプレートを指します。

テンプレートの記述

それでは、早速、コードをかきます。
jsFiddleのHTML入力欄に下記のように記述します。

<div id="app"></div>

ルートのテンプレートは、htmlのbodyタグの中であれば、どこにでも設置できます。

id名はappでは、なくても任意につけることが出来ます。
本コースでは、基本的には、divタグに、id名がappというセレクタを設定して利用します。

HTML中で、このルートテンプレートの中が、Vue.jsの世界として利用できます。

JavaScript側でルートのテンプレートをマウント

次に、JS側のVueインスタンスに、戻って、
マウントする要素を指定します。

Vue. js を動作させるため の オプション を「 オプション 名: 値」 の ハッシュ 形式 で 指定 でき ます。

var app = new Vue({
	el: '#app',
})

elは、アプリケーションを紐付ける要素セレクタを指定します。
要素は、英語でいうとエレメントです。

el: ‘#app’,とすることで、Vue. js を 適用 する 要素を、id がappの要素と指定できます。

いいかえると、idがappである要素の配下で、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 (3685 ratings)122 lectures, 5 hours

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

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

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

今すぐ詳細を確認する

Vueインスタンスの作成

By

この記事では、Vueインスタンスの作成について学習します。

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

動画で学習する

Vueインスタンスの作成

早速、Vueインスタンスを作成します。

var app = new Vue({
})

new Vueの戻り値は、ルートVue インスタンスとなります。

この変数名(app)は、任意で付けてOKなのですが、
慣例として、appや vmが利用されます。
appは、アプリケーションの略で、vmはViewModelの略です。

ViewModelと聞くと、.netなどで使われているMVVMパターンを連想する方もいらっしゃると思います。
Vue.js は、MVVM パターンと厳密には関連がありませんが、部分的には影響を受けているため、vmといった変数名が使われこともあります。

ルート Vue インスタンスを変数化しておくことで、
consoleからアクセスすることができますが、利用しない場合は、変数化を省略してもOKです。

new Vue({
})

consoleからVueインスタンスにアクセスする方法については、あとのレクチャーで説明いたします。
このコースでは、原則変数名としてappを利用します。

var app = new Vue({
  // options
})

これで、空のVueインスタンスの作成が行えました。

ここに、各種オプションを記述していきます。

おわりに

このレクチャでは、Vueインスタンスの作成について学習しました。

オンライン講座「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 (3685 ratings)122 lectures, 5 hours

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

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

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

今すぐ詳細を確認する

Vue.jsの基本的な使い方 イントロダクション

By

注目度抜群のJavaScriptフレームワーク「Vue.js」入門オンラインコース『「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」』 Vuejsの基本的な使い方のセクションのイントロダクションです。

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

Vue.jsを動画で学ぶ

説明

このセクションでは、Vue.jsの基本的な使い方について、速習を行います。

機能の詳細については、あとのセクションで個別に説明します。
まずは、細かいことよりも、Vue.jsの全体像についてコードを書いて習得することを目的としています。

学習環境としては、JavaScriptの学習に便利なWebサービス jsFiddleを利用します。
無料で使えて、ユーザー登録も必須ではありません。

jsFiddleを使わないで、テキストエディタを使って開発する方法についても、補足説明いたします。

このセクションの学習カリキュラム

  1. イントロダクション
  2. JSFiddle 画面説明
  3. Vue.jsの読み込み
  4. Vue.jsの開発バージョンと本番バージョン
  5. Vueインスタンスの作成
  6. ルートのテンプレートを作成
  7. データバインディングとは
  8. Vue.js入門 テキストのデータバインディング
  9. dataオプションにオブジェクトや配列要素を設定
  10. jsFiddle 便利な設定
  11. jsFiddle ソースコードの保存
  12. エラーを自力で解決する方法
  13. ディレクティブとは
  14. 属性のデータバインディング v-bind
  15. 条件分岐 v-if
  16. 条件分岐 v-show
  17. 繰り返しの描画 v-for
  18. オブジェクトの繰り返し描画 v-for
  19. イベントの基本 v-on
  20. 双方向データバインディング v-model
  21. コンポーネント
  22. トランジション
  23. 演習：Vue.jsの基本的な使い方のまとめ①
  24. 演習：Vue.jsの基本的な使い方のまとめ②
  25. 補足：テキストエディタを使った開発
  26. consoleからObj操作

おわりに

Vue.jsのコードは書いていて、とても楽しいです。

この楽しさは理屈では説明が難しいので、まずはコードを書いて体感してください。

詳細は無料プレビュー動画を30分用意しましたので、ぜひご覧ください！

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

今すぐ詳細を確認する

MySQLとはなにかプログラミング入門者向けに説明します

By

Webアプリケーションのデータ管理によく使われるRDBMSである、MySQL(マイエスキューエル)とは何かについて学習します。

この記事は、オンライン講座「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」のサポート記事です。

動画で学習する

MySQLの公式サイト

これがMySQLの公式サイトです。

最新情報やドキュメントといった情報が入手できます。

ドキュメント

ドキュメントは、ドキュメントをクリックして、

MySQL 5.7
Reference Manual
をクリックします。

記事執筆時点では、MySQL5.7のドキュメントの日本語訳が無いため、
英語が苦手な方は、5.6 Japaneseを選択すると日本語のドキュメントを参照できます。
基本的な部分では大きく差はありませんので、多くの場合で役に立つと思います。

ドキュメントを読めば学習はできるのですが、初めて学ぶ際には難しいと思いますので、
このコースでは、動画を使って学習するのもおすすめです。

MySQLとは

オープンソースのRDBMS(リレーショナル・データベース・マネジメントシステム）と呼ばれるものの一つ。
MySQL Community Editionを無料で利用できる。
2010年からオラクル社が開発元
シェアが高い。（実績、信頼性、実用レベルの性能、使えるエンジニアが多い等）

MySQLのシェアについて、

参考情報となりますが、db-engines.comの調査によると、

1位はOracle, 2位は、MySQL, 3位は、Microsoft SQL Serverとなっています。
オープンソースで無料で使える製品では、MySQLが1位なので、実務で見かける機会も多いと思います。

MariaDB

最近では、MySQLから派生した、MySQLと基本的な部分で互換性がある、MariaDB（マリアディービー）というRDBMSが使われることもあります。

#MySQLのバージョン」
MySQLのバージョンについて説明します。
記事執筆時点で実務で見かける機会が多いバージョンとしては、5.6, 5.7です。
ver 5.6 からパフォーマンスが大きく向上したので、ver 5.6以降を使うことが多いと思います。
また、2018年4月に、ver 8.0がリリースされました。
システムの肝となるデータベースに、実績があまりない新しいメジャーバージョンが使われるようになるには、時間が必要ですが、徐々にMySQL8.0の利用も進んでいくと考えられます。

  • 2010年 ver 5.5 ： あまり使われなくなってきた。
  • 2013年 ver 5.6 ：パフォーマンスが大きく向上した。
  • 2015年 ver 5.7
  • 2018年 ver 8.0 ： 最新の安定バージョン(2018/7現在)

おわりに

この記事ではWebアプリケーションのデータ管理によく使われるRDBMSである、MySQL(マイエスキューエル)とは何かについて、学習しました。

UdemyでSQL入門講座を公開中

世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）にて、SQL初心者向けのオンライン講座を公開中です。

ベストセラーコースにも選ばれたことがある人気のコースです。
ぜひ、ご利用ください。

「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」

エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ。データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。MySQL使用。

Bestseller はじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コースはじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース中村 祐太 Yuta Nakamura, Proglus （プログラス）MySQL 使用。エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ！データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。 4.4 (6982 ratings)144 lectures, 7 hours

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

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

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

今すぐ詳細を確認する