プログラミング入門

ディレクティブとは – 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

使用例

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

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

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

おわりに

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

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

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

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

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

今すぐ詳細を確認する

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

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

今すぐ詳細を確認する

オンライン学習のUdemy（ユーデミー）が新年度セール2019年を実施中！

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

世界最大級のオンライン学習サイトUdemy（ユーデミー）が、2019年の新年度セールを開始しました！

平成最後の大規模セールと予想されますので、ぜひこの機会に受講しましょう！

Udemy セール実施期間

2019年4月22（月） 16:00から2019年4月26（木）15:59まで

Udemyとは

Udemy（ユーデミー）は、「世界最大級のオンライン学習プラットフォームです。
米国シリコンバレー発祥のUdemyは、学びたい人と教えたい人をつなぐCtoCの学習マーケットプレイスです。

2010年の設立以来、2,000万人以上の生徒が
プログラミングからヨガ、写真に至るまで、あらゆるコースを受講しています。

実績のある講師陣が教える8万以上の種類の講座を、
オンデマンドで、いつでもどのデバイスからでも自分のペースで学ぶことができます。

海外初のサービスだと不安な方もいるかもしれません。
でも、とても安心できるサービスです。
なぜならば、日本では教育大手でこどもちゃれんじや進研ゼミを手がける、ベネッセコーポレーションがマーケティングパートナーとして協力しているからです。

サポートの対応はとても親切で好感が持てます。
もちろん日本語でやり取りができますよ。

Udemyをおすすめする理由

なぜおすすめかというと、ITの最先分野に精通したエキスパートのオンライン講座を、安価（1講座、1,300円〜）に受講できるからです。

現役で活躍されている講師が、現場で使えるフレッシュなテーマを提供していることが多いのも特徴です。

動画を見るだけでなく、実際に手を動かしながら学ぶスタイルを取る講師が多いので、実務で使えるスキルが身につきます。

独学と違って、コースを受講する中で発生した不明点はQ＆A形式で講師手厚くサポートするので、安心です。

書籍で独学する方法では、気軽に著者に質問はできないですよね？

毎月定額で発生するサービスと違って、一度購入したコースは、無期限に視聴できるのもメリットです。

仕事が忙しくても、自分のペースで学習することができます。

安心の30日間返金保証があるので、気軽にコースを受講し始めることができます。※iOSモバイルアプリからの購入は対象外

購入してみたものの、思ってた内容と違ったと思ったら、30日以内に返金すれば、リスクはありません。

Udemyのサイトを見ていると、今後学びのスタイルが大きく変わっていくと実感できるはず。

思い立ったら、今すぐ、確認してスキルアップしましょう！

Udemy（ユーデミー）のおすすめコース

プログラミング入門ナビが読者の皆さんのために選んだ、Udemyおすすめのプログラミングコースとビジネスコースを紹介いたします。
プログラミング入門ナビ編集部の現役のITエンジニアが、時間を掛けて各コースを選び抜きました！
価格は参考価格です。最新の価格情報など詳細はUdemyのサイトでご確認ください！！

Web開発入門

Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村祐太 Yuta Nakamura, Proglus （プログラス）MySQL/Bootstrap/Node.js/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、天気情報アプリ等の開発に挑戦！

実践Webサイトコーディング講座　｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようNEST online, ウェブデザイン / プログラミングHTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。

プログラミング入門

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

ディレクティブの例

使用例

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

おわりに

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

動画で学習する

保存方法

おわりに

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

Udemy セール 実施期間

Udemyとは

Udemyをおすすめする理由

Udemy（ユーデミー）のおすすめコース

Web開発入門

Vue.js入門

Ruby on Rails 入門

React.js入門

Linuxサーバー入門

Go入門

Python入門

アプリ開発

3Dゲーム制作入門

AI・機械学習入門

データ分析

ビジネススキル

プレゼン

エクセル入門

おわりに

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

Udemy セール実施期間