Zenn
Closed8

C#くらいしか触ったことがない人が JS に入門してみる

JavaScript
初心者
たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

この本を参考に進めてる

https://zenn.dev/wkb/books/node-tutorial

初見での感想はこんな感じ。

  • 型がないので違和感を感じる
  • 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たくのろじぃ | 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}`);
たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

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
たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

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();
    }
});
たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

コレクションの要素アクセスにもちょっとした違いがある

let items = [];
for(let item of items) {
    // 何かの処理
}

var items = new List<int>();
foreach(var item in items)
{
    // 何かの処理
}

サンプルアプリもいい感じになってきた

たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

MySQL をたててテーブルを作るところまではいったけど、接続しようとしたらエラーが表示された。

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 以降では認証に使用するパスワードの認証プラグインが変更されているとのこと。

https://www.chuken-engineer.com/entry/2020/09/04/074216

で、npm 公式で確認してみると普通に require で mysql2 を指定すれば使えるみたい。

https://www.npmjs.com/package/mysql2

const mysql = require('mysql2');

ちゃんと接続できた。

GET / 200 14.329 ms - 386
GET /stylesheets/style.css 304 2.493 ms - -
success

とりあえず、リファレンスを参照して書き換えるところまでのスキルは身についたかもしれない。

たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

SQL構文を覚えないといけない問題が発生している（今までは 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)
たくのろじぃ | Takumi Okawaたくのろじぃ | Takumi Okawa

おお～ちゃんとデータベースに書き込めてる！（感動）

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 - -

ちゃんと参照もできてる～
動いているのを見ると嬉しくなっちゃう病

このスクラップは2022/02/17にクローズされました