CodeMafiaさんのUdemy講座でNode.jsを深く学び、それに伴ってWeb開発全般についても学べましたので共有します。

　Node.jsをExpressを使用したAPI開発でのみ使用していましたが、現在のWeb開発技術の根底にある技術であることがJavaScriptの歴史とともにわかりました。

　また、現在のフロントエンド界隈の開発技術はカオスな状態になっていますが、その技術の種類と役割がわかりました。頭の中にフロントエンド開発の地図がようです。

　ハンズオンでは、フロントエンドからAPI構築、さらにはスクレイピングや、デスクトップアプリ開発なども行い実習内容としてもとても面白かったです。

　Node.jsとは何か、Nodejsをなぜ学ぶのか、JavaScriptによるスクレイピングやデスクトップアプリの開発手法についてもピックアップして説明します。詳しくはぜひ、講座を受講してみてください。

---

　

🚀受講した講座

　Node.jsで学ぶWebシステムとソフトウェア開発基礎！Node.js完全入門ガイド

　動画再生18時間 　林がかけた時間42.5時間

---

　

🚀Node.jsとは

　Node.jsとはJavaScriptを実行するためのランタイムです。つまり、JavaScriptを動かす環境を構築するソフトウェアとなります。

　JavaScriptエンジンには、V8というものがあり、ChromeとNode.jsに組み込まれています。Node.jsを用いることでブラウザ以外でV8を使用して、JavaScriptを使用することができます。

---

🐡ESModuleとCommonJSについて

　JavaScriptのモジュールに関する記述にはESModuleとCommonJSがあります。古くからあるのがCommonJS、後から出てきたのがESModuleです。

　Node.jsではCommonJSも使用可能ですが、現在の推奨はESModuleとなっています。

　　・フロントエンド：ESModuleのみ

　　・Node.js:ESModuleとCommonJSの両方

　よくわからない方のために、それぞれの記法のサンプルを書いておきます。どこかで見たことがあるのではないでしょうか。

〇CommonJS（modue.exports、requireを使用）

function plus(a, b) {
  return a + b;
}
function minus(a, b) {
  return a - b;
}
// CommonJSで機能を外部に露出
module.exports = {
  plus,
  minus,
};

/*--------------------------------------*/
// CommonJSで読み込み
const { plus } = require('./calc');
const result = plus(1, 2);
console.log(result);

〇ESModule（export、importを使用）

export function plus(a, b) {
  return a + b;
}
export default function minus(a, b) {
  return a - b;
}
// ESModuleで機能を外部に露出
export {
  plus,
  minus,
};

/*--------------------------------------*/
//ESModuleで読み込み
import minusFn, * as calc from './calc.mjs';
console.log(calc);
const result = minusFn(1, 2);
console.log(result);

---

　

🚀Node.jsを学習するメリット

　Node.jsを学ぶことで、JavaScriptでの開発の幅が広がります。

　Webサーバとしての利用では、Expressを使用したAPIサーバだけでなく、モジュールバンドラや、Reactなどの開発サーバにも使用されており、フロントエンド開発では欠かせないものとなっています。

　また自動化ツールや、スクレイピング、PCやスマホアプリも開発でき、JavaScriptを使用して、幅高い開発ができるようになります。

---

　

🚀現代のフロントエンド開発界隈

　現代のフロントエンド開発におけるビルドツール群は、カオスなことになっています。ここでは種類と役割について記載します。これらのビルドツールはNode.jsのモジュール管理ツール「NPM」でインストールや管理を行います。

🐡タスクランナー

　リリースに必要なnpmコマンドを実行するツール。SassをCSSに変換したり、ファイルを圧縮、フォルダ移動を行う。複雑な開発には向いておらず、Web製作に用いられる。有名なもので、Gulpがある。

　

🐡Linter/Formatter

　VSCodeの拡張機能として使用しているESLintやPrettierもビルドツールとして提供されています。

🐡Minifier

　ビルド時にファイルを圧縮します。

🐡トランスパイラー

　トランスパイラーに対してコンパイラはソースコードを機械語に直すソフトウェアを指します。Babelは見たことがあるのではないでしょうか。

🐡モジュールバンドラ/NativeESMビルダー

　こちらの詳細は以前の記事📒で説明しています。

　なお、開発現場では、バンドラーの処理の中で、Linter、minifier、トランスパイラーを使用して最後に１つのJavaScriptにするように設定ファイルを記述しています。また、Viteはそれらをデフォルトの設定で行ってくれます。

---

　

🚀Expressによるバックエンド開発

　Node.js/Expressについては、すでに何度も説明していますのでここではしません。

　代わりにこの講座でRESTAPIについて、CodeMafiaさんが具体的にそうでないAPIと比較して解説されていましたので共有します。皆さんkintoneRESTAPIとよく言ってますが、RESTAPIとは何か説明できますか？

🐡RESTAPIとは？

　 メソッドでリソースに対する処理を定義したAPI。つまり今我々が使用しているAPIはRESTAPIとなる。

　・POST:追加

　・PUT・PATCH:更新

　・DELETE:削除

　・GET:取得

〇RESTAPIの記述例

//フロントエンド
//取得
method:GET url:/product
//追加
method:POST url:/product
//削除
method:DELETE url:/product/1
//更新
method:PUT url:/product/1


//バックエンド
//取得
app.get("/product",(req,res)=>{
})
//追加
app.post("/product",(req,res)=>{
})
//削除
app.delete("/product/:id",(req,res)=>{
})
//更新
app.update("/product/:id",(req,res)=>{
})

🐡RESTでないAPI（かつてのAPI）とは？

　処理毎にパスを用意したAPI。もともとAPIを使用するときのメソッドにはPOSTとGETしかなかったため、処理を区別するためにパスを利用していた。※更新や削除もPOSTで書いていた。

　〇通常のAPIの記述例

//フロントエンド
//取得
method:GET url:/product
//追加
method:POST url:/create-product
//削除
method:POST url:/delete-product
//更新
method:POST url:/update-product


//バックエンド
//取得
app.get("/create-product",(req,res)=>{
})
//追加
app.post("/create-product",(req,res)=>{
})
//削除
app.post("/delete-product",(req,res)=>{
})
//更新
app.post("/update-product",(req,res)=>{
})

　このように、通常のAPIと比べると分かりやすいのではないでしょうか。

---

　

🚀JavaScriptによるスクレイピング

　Node.jsでPlayWrightを使用することで、JavaScriptでスクレイピングを行うことができます。

🐡PlayWrightについて

　Playwrightは、Microsoftが開発したNode.js用のエンドツーエンドテスト自動化ライブラリです。ブラウザの自動化に優れており、クロスブラウザのテストやスクレイピングに非常に有効です。RPAの内製化にも使用できます。

　少し具体的に説明をするとhtmlの要素はCSSセレクタやXPathで指定します。以下は、PlayWrightによる自動化のデモです。

🐡スクレイピングの例-名刺管理アプリ

　名刺管理アプリから、氏名と会社名を取得し、スプレッドシートに転記し、メールを送信する。

🐡スクレイピングの例-WBGT

　環境省の岐阜市のWBGT値のサイトから値を取得し、スプレッドシートに転記し、メールを送信する。

---

🚀JavaScriptによるデスクトップアプリ開発

　Node.jsでElectronを使用することで、クロスプラットフォームのデスクトップアプリ開発をすることができます。UI構築にhtml、CSS、JavaScript（TypeScript）をそのまま使用でき、Reactも使用できます。しかしながら、こちらはスマートデバイス（iPhone、Android）開発はできません。

　以前紹介したReactNativeとの比較を掲載します。VSCodeやNotionもJavaScriptで開発されています。

🐡デスクトップアプリの例-画像取得アプリ

　デモサイトに掲載されている画像データを取得し、ローカルフォルダに保存するデスクトップアプリケーションです。

---

　

🚀JavaScriptによるスマートデバイス開発

　ReactNativeで開発できます。

　ReactNativeについてはコチラの記事📒で紹介しています。

---

　

🚀まとめ

　JavaScript開発において、Node.jsが様々な技術の根底にあります。今回この講座を学ぶことにより、今までよくわかっていなかったJavaScriptの裏側について理解を深めることができました。具体的には、Node.modueやpackage.jsonなどの意味・役割・挙動、API通信の挙動、RESTAPIとは何か、Expressを使用したバックエンド開発の詳細な挙動、高度な書き方です。

　また、Vanilla→React間のミッシングリンク状態だったビルドツールについて、どのようなものがあり、名前と役割が知れました。特にこの講座で紹介されたViteについては、実際に開発でも使用しました。

　普段行っているReactの開発においても、サーバやモジュール管理はNode.jsで行っていることがこの講座を受けて良く理解でき、今まで対処法は分かるけど、意味があまりわからなかったエラーメッセージについてもその意味分かるようになりました。

　深める学習も大事だと感じました。

←ホームに戻る