Proglus

ディレクティブとは – Vue.js入門

2019-05-17 By プログラミング入門ナビ編集部

この記事ではVue.jsのディレクティブとは、なにかについてプログラミング入門者向けに説明いたします。

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

Vue.jsのディレクティブとは

ディレクティブとはv-で始まる特別な属性のことです。

ディレクティブは Vue.js によって提供された特別な属性を示すためにv- 接頭辞がついています

directive(日本語でいうと指令）という名前の通り、Vue.jsに何らかの指示を行う。仕組みです。

ディレクティブの例

Vue.jsには、多くのディレクティブがあるのですが、代表的なものとしては、下記のものがあります。

v-bind
v-if
v-show
v-for
v-on
v-model

使用例

例えば、このような形で使います。

<input type="text" v-bind:value="message"/>

v-bindの部分は、DOMへ反映される前に、Vue.jsによって解釈・変換されて、その後は内部的にのみ利用されます。

動画でVue.jsのディレクティブについて学習する

おわりに

この記事では、ディレクティブとは何かについて、学習しました。

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

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

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

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

今すぐ詳細を確認する

jsFiddle ソースコードの保存 – Vue.js入門

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

この記事では、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週間無料体験しよう

今すぐ詳細を確認する

VueJS入門: dataオプションにオブジェクトや配列要素を設定

2019-03-22 By プログラミング入門ナビ編集部

この記事では、Vue.jsで、dataオプションにオブジェクトや配列要素を設定して、テンプレートから使う方法について説明いたします。

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

完成形

完成形の動作としては下記になります。

Vueインスタンス側のコード

var app = new Vue({
	el: '#app',
  data: {
  	message: 'Hello Vue.js!',
    count: 1,
    // Object
    user: {
    	lastName: 'Yamada',
      firstName: 'Taro',
      prefecture: 'Tokyo'
    },
    // Array
    colors: ['Red', 'Green', 'Blue'],
  }
})

まず、Vueインスタンスから見ていきましょう。
以前のレクチャーで、dataオプションに、messageプロパティを定義して、値を設定する方法について学習しました。

データオプションには、カンマ区切りで複数のプロパティを定義するとができます。

数字も使えます。できます。
count : 0

Objectを設定することができます。

ユーザーを管理するObjectを作ります。
オブジェクト名はuserで、
名字、名前、居住地の都道府県をプロパティにもつとします。
lastName　Yamada,　FirstName　Taro, プリフィクスチャー Tokyo
とします。

次に、配列を作成します。
配列名はcolorsで、値にRed, Green, Blueを設定してみます。
配列は [ (ブラケット、日本語でいうと、各カッコで囲むことで表現できます。

テンプレート側のコード

次に、テンプレート側から、データオプションの各値を使用して、画面に描画してみましょう。

<div id="app">
  {{ message }}
  {{ count}}
  {{ users.prefecture }}
  {{ colors[1] }}
</div>

まずは、文字列、数も同様です。

次に、オブジェクト、プリフィクスチャーの値を表示してみましょう。
オブジェクト名、userのあとに、ドットとして、prefectureとします。
これで、Tokyoと表示できました。

次に、配列、この、Greenを表示してみましょう。
colos ブランケットで囲って、配列のindexを指定します。
Redが0で、Greeが1、Blueが2なので、1を指定します。
Greenと表示されました。

動画で学習する

おわりに

この記事では、dataオプションにオブジェクトや配列要素を設定して、
テンプレートから使う方法について学習しました。

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

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

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

今すぐ詳細を確認する

プログラムエラーが発生したときはログを確認！

2019-03-08 By プログラミング入門ナビ編集部

エラーが発生してプログラムが動かないというコメントを、Q&Aコーナでよく頂きますので、エラーが発生した時の対処方法について補足説明いたします

エラーが発生したときに、エラーを調査して解決できることは、優秀なエンジニアであっても、駆け出しのエンジニアでもあっても、必須となる業務です。

エラーログを読むのが面倒なことはよく分かるのですが、エラーが出るたびに上司や、クライアントに聞くというのは現実的では無いですし、これができないと一人前になれませんので、ぜひ、日頃から心がけるようにしてみてください！

プログラミング入門コースのサポート情報です。

手順

①プログラム実行時などにエラーが発生したときは、必ずログを確認する

具体的には、

JavaScript、 Vue.jsであれば、Google Chrome デベロッパーツールのconsole

Ruby, Ruby on Railsであれば、ターミナルに表示されているログ

SQLであれば、MySQL Workbechのログやターミナルのログ

に表示されています。

“Error”といった、ネガティブなキーワードに着目すると良いです。

②エラーログを読む

Error などの文字列を発見したら、その行のエラーログの内容を読んで確認するようにします。

英語が苦手な方は、Google 翻訳（無料）を使うと良いです。

③Googleで検索する

エラーログを読んでもピンと来ない場合は、エラー内容をコピーアンドペーストしてGoogleで検索してみてください。

多くの場合で、何かしらの情報がヒットするハズです。

ただし、ブログ記事は情報が古いことや、間違っていることもよくあるので、ブログ等でアタリを付けたら、出来るだけ公式ドキュメントなど、いわゆる一次情報を参照するのがおすすめです。

動画で学習する（Ruby)

おわりに

この記事では、プログラミング入門者向けに、プログラムエラーが発生したときはログを確認することの重要性と、その方法について説明いたしました。

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

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

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

今すぐ詳細を確認する

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

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

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

Vue.jsを動画で学ぶ

説明

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

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

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

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

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

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

おわりに

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

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

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

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

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

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

今すぐ詳細を確認する