プログラミング入門ナビ

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

You are here: Home / 2018 / Archives for 11月 2018

Archives for 11月 2018

HTMLのthタグとtdタグの違い

By

HTMLのthタグとtdタグの違いについて、Web開発初心者向けに説明致します。

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

thタグとtdタグの意味

それぞれのタグは、下記の意味を持っています。

  • th・・・テーブルのヘッダーのセルを定義 （Table Header の略）
  • td・・・テーブルでデータが入るセルを定義 （Table dataの略）

サンプルコード

テストの点数の集計表、言い換えると集計テーブルを例にとります。

ジェームズさん、オリビアさんや、国語、算数、社会のように、テーブルのヘッダーを定義するセルには、thタグを使います。
データを定義するセルにはtdタグを使います。

おわりに

この記事では、HTMLのthタグとtdタグの違いについて、Web開発初心者向けに説明いたしました。

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

オンライン講座「Web開発入門完全攻略コース」では、HTMLの使い方を始めとした、Web開発入門について動画を使って学習できます。

無料プレビューを1時間分用意しています。ぜひご確認ください！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村 祐太 Yuta Nakamura, Proglus （プログラス）Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦！¥27,800 4.5 (6820 ratings)407 lectures, 24 hours

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

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

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

今すぐ詳細を確認する

Vue.js データバインディングとはなにか説明します

By

Vue.jsを利用する際に重要なデータバインディンディングとはなにかについて学習します。

動画でVue.jsを学習する

データバインディングとは

データバインディングとは、ざっくり言ってしまうと、
「データと描画を同期する仕組み」です。

HTML側の、テープレートに記述したされた、フォームのinputの部分の文字を変更すると、
出力される文字がリアルタイムで変わります。
これは、データバインディングによって実現しています。
inputのvalueが変わると、データメッセージの値が、代わり、さらに、こちらの文字列の表示も変わる流れになっています。

jQueryでも書けるが

例えば、
inputの文字列を変えたら、この文字列も変えるというのは、
Vue.jsを使わなくても、素のJavaScriptとかjqueryを使って書くこともできます。

例えば、jQueryで書いた場合です。

初期値をセットして、input要素の、keyupイベントをトリガにして、inputのvalueを取得して、p要素のコンテンツにセットするといったコードになり、煩雑です。

これは簡単な事例なので、まだ良いのですが。
画面上の複数の要素について、イベントハンドラを書いていくという処理を書いていくと、コードが複雑で見通しが悪くなりがちです。

Vue.jsで記載すると、非常にシンプルに書けます。

Vue.jsを使うと

Vue.jsを使うことで、開発効率を上げることができます。
エンジニアとかデザイナーの仕事の目的は、お客様に満足してもらえるサービスを提供することです。
コードを書くことは手段であって、目的では無いので、
ぜひ、Vue.jsを使って効率的なWeb開発ができることを目指しましょう。

データバインディングの種類

データバインディングの種類にはつぎのものがあります。

  • 双方向バインディング （TwoWay）
  • 単方向バインディング(OneWay)
  • ワンタイムバインディング(OneTime)

双方向バインディング （TwoWay）

  • 双方向にデータが同期するデータバインディングです。

単方向バインディング(OneWay)

  • 一方方向に同期するデータバインディングです。

ワンタイムバインディング(OneTime)

  • 一回だけ同期を行うデータバインディング

おわりに

データバインディングを使ったプログラムの書き方については、今後のレクチャーで学習していきますので、ここでは、何となく全体像を把握していただければOKです。

この記事では、データバインディンディングとはなにかについて学習しました。

オンライン講座「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開発のフロントエンド開発の課題を解決。¥2,400 4.4 (3213 ratings)120 lectures, 5 hours

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

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

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

今すぐ詳細を確認する

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

By

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

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

動画でVue.jsを学習する

テンプレートとは

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

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

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

テンプレートの記述

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

 

ルートのテンプレートは、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開発のフロントエンド開発の課題を解決。¥2,400 4.4 (3213 ratings)120 lectures, 5 hours

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

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

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

今すぐ詳細を確認する