12月22日(金)1、2コマ目
今日、やったこと
REST API + Vue.js
今日のホワイトボード
REST API + Vue.js
以前クライアント側をプレーンなJavaScriptで作った図書検索をVue.jsに変更。
ソースコードをあげておきます。
index.html
次回は
以上でソフトウェア工学実習、ネットワークプログラミング実習は終了です。
年明けに再試験等の案内をします。
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で制御する必要が...