12月21日(木)1、2コマ目

今日の予習

フロントエンド開発はプレーンなJavaScriptから始まり、JQuery、ReactやVue、Angularといろいろなライブラリやフレームワークを利用してきた。

これらの違いをソースコードで比較する。

1. 入力内容を表示する

テキストボックスに入力するとリアルタイムに表示される。

テキストボックスのinputイベントが発生したら、入力内容を取得して表示する。

JavaScript版


JQuery版


Vue.js版


2.ボタンクリックで表示

テキストボックスに入力後ボタンをクリックすると、入力内容が表示される。

JavaScript版


JQuery版


Vue.js版


3.配列で表を作成

オブジェクト配列の内容を表形式で表示する。

JavaScript版


JQuery版


Vue.js版


4.カウンタ

ボタンをクリックする毎に数字がインクリメントされる。

JavaScript版


JQuery版


Vue.js版


今日、やったこと

  • フロントエンド、バックエンド
  • JavaScript、JQuery、Vue.js

今日のホワイトボード

フロントエンド、バックエンド

フロントエンドはクライアント側。

Webブラウザを使う場合はJavaScriptで開発。iOSやAndoroid上の専用アプリならSwiftやkotlinで開発。

バックエンドはサーバー側。

JavaやC#、PHPやPythonなど選択肢はいろいろ。

図　フロントエンド、バックエンド

同期通信、非同期通信

JavaScriptがクライアントで利用されるきっかけになったのがGoogle Mapのような非同期通信。Ajaxとも呼ばれている。
図　同期通信・非同期通信

同期通信は、サーバーへリクエスト送信するとレスポンスが返ってくるまでなにもしない。
非同期通信は、サーバーへリクエスト送信しレスポンスを待たずに次の処理を実行する。

Webページ全体を書き換える場合は同期通信。
サーバーからデータを取得して、Webページ中の一部分だけを書き換える場合は非同期通信で十分。
ただ、Webブラウザには非同期通信を実現する手段はないため、JavaScriptで制御する必要がある。

Ajaxの普及とともにJavaScriptの利用が増えていった。


JavaScript、JQuery、Vue.js

同じアプリケーションをプレーンなJavaScript、一昔前によく使われたライブラリのJQuery、いまどきのVue.jsを使って作成して比較。

図　作ったモノ
ソースコードはここを参照。


JavaScriptとJQueryの比較

JQueryはJavaScriptのソースを簡略化できる。
図　JavaScriptとJQuery

JQueryを使うには

$(セレクタ)をdocument.querySelector(セレクタ)に置き換える必要がある。それをやるにはJQueryのライブラリファイルが必要。このライブラリファイルはローカルに保存するか、インターネット(CDN)から取得するかの2種類がある。
図　ライブラリファイルの読み込み

このあとのVue.jsも同じ。Vue.jsのライブラリファイルが必要。

Vue.jsのオブジェクト

必要なデータやメソッドなどをオブジェクトに定義しておき、そのオブジェクトをHTML上の特定の部分に紐づけをする。
図　Vue.jsのオブジェクト
オブジェクト内のdataプロパティの値は扱うデータを定義する。

Vue.jsのv-model、{{ }}

v-modelは双方向バインド。下図ではv-modelが付与された<input>タグに何か入力されるとオブジェクト内のinputプロパティの値に反映される。
逆に、オブジェクト内のinputプロパティの値が変更されると、v-modelが付与された<input>タグの内容に反映される。
{{ }}は指定プロパティの値をHTMLに埋め込む。
図　双方向バインド、データ埋め込み

Vue.jsのv-on、ref

v-onはonXXXと同じでイベントハンドラの指定。
ref属性が付与されると、JavaScriptからref属性値で入力内容が取得できる。
図　イベントハンドラの指定、入力値の参照

次回は

前回作ったREST APIアプリのクライアント側をプレーンなJavaScriptからVue.jsの利用に改造します。





このブログの人気の投稿

12月22日(金)1、2コマ目

今日、やったこと REST API + Vue.js 今日のホワイトボード REST API + Vue.js 以前クライアント側をプレーンなJavaScriptで作った図書検索をVue.jsに変更。 ソースコードをあげておきます。 index.html 次回は 以上でソフトウェア工学実習、ネットワークプログラミング実習は終了です。 年明けに再試験等の案内をします。 
続きを読む

10月24日(火)1、2コマ目

今日、やったこと [評価用課題]オークションサイト(.Net版) 今日のホワイトボード 採点して気づいた点を書きました。 1.無駄な変数 2回以上アクセスしないデータのために変数を作らない 以下の変数flgは代入後、1回しか使っていない。 修正版は以下。 2.冗長な処理 同じような処理があちこちにある。 修正版は以下。 3.OracleDataReaderからデータを取り出す これはまずい。実行時エラーになる可能性がある。 SQL実行直後のOracleDataReaderは検索結果の0行目を参照している。 参照先を1行目に移動するにはRead()を実行する必要がある。 検索結果が0行の場合、Read()はfalseを返すだけでエラーにはならない。 修正版は以下。 検索結果の行数とOracleDataReaderのRead() 〇検索結果が常に0行または1行だけ 1回だけ移動すればいいので、 　if(reader.Read()) で1回だけ移動すればOK。 〇検索結果が複数行の可能性がある場合 検索結果の1行目から最終行まで移動する必要があるので、 　while(reader.Read()) で検索結果の最初から最後まで移動すること。 この場合、検索結果は複数行になるので、結果の格納先はリストにするべき。 〇検索結果は常に1行1列 SQL実行にExecuteQuery()ではなく、ExecuteScalar()を使うほうが便利。 ExecuteScalar()は検索結果を返すのでDataReaderを使って検索結果を取り出す必要がない。ただし、戻り値はobject型。キャストする必要がある。また、検索結果が無い場合はnullを返す。 〇bool型はtrueかfalseだけ bool型を返すメソッドの戻り値で条件分岐をする場合、以下のelse if()は不要。 ifの条件式がfalseの場合は自動的にelseブロックにくる。 〇変数名、メソッド名の接頭語について 変数名やメソッド名に下表の接頭語をつけるケースがある。 名前にあった役割どおりに実装すること。 接頭語 例 役割 ...
続きを読む