nodejsウェブアプリケーション開発_2021 [講義ノート]

Webアプリケーションって何？

What is Web applications?

https://www.sei-info.co.jp/it-keyword/summary_webapplication.html

HTML、JavaScriptについての入門書は色々ありますが、下記のMDNのページが英語、日本語、中国語など色々な言語に翻訳されているので、今回のトレーニングでは下記の資料を使います。

There are many introductory books on HTML and JavaScript, but the following MDN pages seems to be good to start because there are a lot of documents translated into various languages such as English, Japanese and Chinese.

https://developer.mozilla.org/

まずは下記の「HTML を始めよう」を題材に1回目の講習を行います。

First of all, I would like to hold the first training session on the subject “Getting Started with HTML”.

日本語 (Japanese)：https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started

英語 (English)： https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

中国語 (Chinese)： https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started

imgタグとaタグを使って、画像のアイコンをクリックすると、Googleにジャンプするボタンを作り、それをHTMLファイルとして保存し、ブラウザで表示させる。

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started

Google Chromeを使用します。インストールしておいてください。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals

練習問題：このページのHTMLをメモ帳などに貼り付けて、Javascriptが動作するか見てみる。Javascriptが動いたら、ここの「様々な結合」という動きをするようにHTMLに記述する。

練習問題2：問題1のHTMLについて、“水圏生物工学”とダイアログに入力された場合のみ、「ようこそ」とalert関数で表示するボタンを作る。

メモ：ChromeでF12キーを押して、開発者ツールを開き、「Console」タブを開いて、そこにJavascriptを記述する。ChromeのConsole内での改行は「Shift＋Enter」で改行できる。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code

連想配列 Dictionary with Key/Value pairs

日本語：https://techplay.jp/column/528

English: https://pietschsoft.com/post/2015/09/05/javascript-basics-how-to-create-a-dictionary-with-keyvalue-pairs

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

練習問題：このページのリストの適当な項目にChromeのConsoleからいくつか色を付けてみる。.style.colorプロパティなどを使ってみるなど。

“XHTML image map test (XHTML browsers only)“の項目の文字の色を赤にする。(リンク以外の文字の色が変わればOK。もちろん、リンクの色も変えるように変更してもOK。) .style.colorプロパティを使用。
querySelectorAllでliをすべて列挙し、偶数番目の項目に対してのみ背景色を黄色にする。 .style.backgroundColorを使用。偶数かどうかは、演算子「% (剰余算、余り)」を使う。

JavaScriptの関数とお絵描きをやってみる予定です。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Return_values https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

課題1：2つの数字を引数を受けとり、大きいほうの数字を戻してくれる関数を作る。

課題2：3つの図形をランダムな場所に10個ずつ描画する。（下記のステップで進めてみると良いかも。）

1．3つの関数を作る
　違う形を描画する3つの関数を作る
2．引数で描画開始地点を指定できるようにする。
3．ループの中で、ランダムに描画開始地点を指定して10個ずつ図形を描く。

いよいよサーバ側の開発に移行します。これまでは、ChromeのJavaScript実行エンジンを使ってましたが、サーバではJavaScriptの実行環境としてNodeJSというプログラムを使います。NodeJSのインストールを行う必要があるので、下記のWEBサイトにアクセスしてバージョン14.17.0 LTSをインストールしておいてください。

日本語：https://nodejs.org/ja/

English: https://nodejs.org/en/

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website

https://www.sejuku.net/blog/28449

PUGの練習をします。

日本語：https://qiita.com/c2997108/items/fee5d2ca1d2e524823e5

日本語：https://docs.qranoko.jp/static/pug.html#variable

日本語：https://tr.you84815.space/pug/language/iteration.html

English：https://www.sitepoint.com/a-beginners-guide-to-pug/

・クライアントのHTMLフォームから、サーバのNodeJSにデータを渡す

日本語：