C#くらいしか触ったことがない人が JS に入門してみる
たくのろじぃ | Takumi Okawaこの本を参考に進めてる
初見での感想はこんな感じ。
- 型がないので違和感を感じる
- document やら require といった関数を前置きなく使えるので、何も知らないと何も書けない
- ラムダ式好きすぎ
- node との関係性がよくわかっていないが、createServer メソッドを記述すればサーバが立ち上がるみたい
- エントリポイントがわからんけど、
node <JS ファイル>で指定できる？ - オブジェクト指向らしいけど "関数" っていうらしい（実際に、ローカルから呼び出すので関数？）
- 関数を宣言するときに
functionを先頭につけるが、戻り値が何になるかがわからん - JS は HTML ありきだと思っていたが、JS 単体でも動かせる
- 文字列補間？が使えるみたい
// JS -> 文字列内に ${} をつける
console.log(`hogehoge ${value}`);
// C# -> 先頭に $ をつけて {} を入れていく
Console.WriteLine($"hogehoge {value}");
HTML/CSS は XAML で JS は C# みたいな関係性だと思って進めているので、特に難しさは感じないけど違和感がすごい。
たくのろじぃ | Takumi Okawaとりあえず、サーバ用のコード。const って定数を入れられるみたいだけど、java でいうところの finalみたいな感じなのかな。値もオブジェクトも代入できるのはなんか不思議な感覚。
const http = require("http");
const port = 8000;
const server = http.createServer((req, res) => {
res.writeHead(200, {
"Content-Type": "text/html"
});
const responseMessage = "<h1>Hello, Takunology</h1>"
res.end(responseMessage);
});
server.listen(port);
console.log(`this server has listen on : 127.0.0.1:${port}`);
express を起動するときに、PowerShell を使おうとするとデジタル署名されていない旨のエラーが表示されるので、コマンドプロンプトで動かす必要がある。
express : ファイル C:\Users\User\AppData\Roaming\npm\express.ps1 を読み込めません。
ファイル C:\Users\User\AppData\Roaming\npm\express.ps1 はデジタル署名されていません。
このスクリプトは現在のシステムでは実行できません。
スクリプトの実行および実行ポリシーの設定の詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ express -h
+ ~~~~~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
express で作成したテンプレートにて app.js が作成されるが、ここにはサーバに関する設定が色々書かれている。
app.use("/", require("./routes"));
上記の様に書くと、/ へアクセスしたときに、自動的に /routes に入っている index.html を読み込むような処理がなされる。ちなみに、ASP.NET Core では Program.cs に記述される。
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
ASP.NET Core の場合はディレクトリへのルーティングが特殊かも。
エラーページの表示部分はこんな違いがある。
app.use(function(req, res, next) {
next(createError(404));
});
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error');
});
JS では render() 関数、C# ではパスを Request.Path で指定できる。
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404)
{
context.Request.Path = "/Home/Error";
await next();
}
});
コレクションの要素アクセスにもちょっとした違いがある
let items = [];
for(let item of items) {
// 何かの処理
}
var items = new List<int>();
foreach(var item in items)
{
// 何かの処理
}
サンプルアプリもいい感じになってきた
たくのろじぃ | Takumi OkawaMySQL をたててテーブルを作るところまではいったけど、接続しようとしたらエラーが表示された。
error connectiong: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
どうやら、npm のパッケージ mysql では対応していないみたいなので、mysql2 に変更する必要があるみたい。MySQL 8.0 以降では認証に使用するパスワードの認証プラグインが変更されているとのこと。
で、npm 公式で確認してみると普通に require で mysql2 を指定すれば使えるみたい。
const mysql = require('mysql2');
ちゃんと接続できた。
GET / 200 14.329 ms - 386
GET /stylesheets/style.css 304 2.493 ms - -
success
とりあえず、リファレンスを参照して書き換えるところまでのスキルは身についたかもしれない。
たくのろじぃ | Takumi OkawaSQL構文を覚えないといけない問題が発生している（今までは LINQ で楽してた）
router.post(`/`, function(req, res, next){
connection.connect((err) => {
if(err) {
console.log(`error connectiong: ` + err.stack);
return;
}
console.log(`success`);
});
const todo = req.body.add;
connection.query(
`insert into tasks (user_id, content) values (1, '${todo}');`,
(error, results) => {
console.log(error);
res.redirect(`/`);
}
);
});
データベースへの挿入までできた。
mysql> select * from tasks;
+----+---------+------------------+
| id | user_id | content |
+----+---------+------------------+
| 1 | 1 | GitHub徘徊をする |
+----+---------+------------------+
1 row in set (0.00 sec)
おお～ちゃんとデータベースに書き込めてる！（感動）
POST / 302 31.311 ms - 46
null
[
{ id: 1, user_id: 1, content: 'GitHub徘徊をする' },
{ id: 2, user_id: 1, content: '紅茶にミルクを注ぐ' }
]
GET / 200 6.625 ms - 492
GET /stylesheets/style.css 304 1.098 ms - -
ちゃんと参照もできてる～
動いているのを見ると嬉しくなっちゃう病
