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

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

Webエンジニアを目指している方

Node.jsを使ってフロント側のコードの実装を行っている方

フロントエンドツール界隈の技術がカオスすぎて混乱している方

VueやReactなどのSPAライブラリを学んでいる方

モダンなWeb開発の全体像をとらえたい方

JavaScriptで何か動くものを作ってみたい方

デスクトップアプリの開発などに興味のある方

プログラムを使った自動化の技術に興味のある方

JavaScriptやフロントエンドの学習をしている方

これらに当てはまる方は是非こちらのコースを受けてみてください。本コースでは、ただNode.jsについて学ぶだけでなく、Node.jsを中心としたモダンな開発の手法について網羅的に学んでいきます。

- Node.jsって何？

Node.jsは世界で最も使用されているプログラミング言語のJavaScriptを実行するための環境です。元々は2009年にJavaScriptを用いたサーバーサイドのプログラムの実行環境として開発されました。ただ、それから１０年以上の月日が経ち、昨今のNode.jsはサーバー上の処理を実装するためだけではなく、ソフトウェア開発の様々なシーンで利用されています！

- Node.jsを学ぶメリットは？

Node.jsは昨今のWeb開発、ソフトウェア開発のいたるところで使用されています。特にフロントエンド側の開発を行っている場合、Node.jsは必ずと言っていいほど使用します。また、PaypalやLinkedInといった大企業はバックエンドにNode.jsを導入しています。それに加えて、デスクトップアプリの開発やモバイルアプリの開発などもNode.jsで行えます。プログラムは全てJavaScriptで書くことができるため、様々なことを一つで出来るかなりコスパのいい技術になります！

- Node.jsって難しいの？

Node.jsはJavaScriptが出来れば誰でもできます。ただ、使いこなせるようになるにはNode.js独特のルールについてマスターする必要があります。JavaScriptが実行できる環境にブラウザがありますが、ブラウザ上で実行された時とNode.js上で実行された時ではJavaScriptの動作が異なります。本コースではそういった違いなどについても体系的に解説していきます！

- 本コースで学ぶこと！

本コースで学ぶことについて以下にまとめました！興味のある方は是非一度ざっと見てみてください。

- 本コースで学ぶこと - ポイント１（Node.js基礎）

本コースでは、まずはターミナル上での基本的なコマンドの使い方から学んでいきます。また、パスの取り扱いについても何となく理解している方も多いと思いますので、本コースでマスターしていってください。普段、何気なく使っているNode.jsの使い方と特徴についてはブラウザ環境と対比しながら説明しますので、違いが明確になり頭の中がすっきりすると思います！

・Node.jsのバージョンの意味。

・Node.jsの実行方法。

・PC上のパスの取り扱い方法について。

・ターミナルの基本的な使い方。

・モジュール管理システム（CJS / ESM）。

・ブラウザ環境とNode.js環境の違い。

- 本コースで学ぶこと - ポイント２（npm基礎）

Node.jsの基礎が終わったら、npmについて学びましょう。npmはNode.jsのパッケージ管理のためのツールです。

npmでインストールしたパッケージはNode.js上で自由に使用することができますが、意外とその仕組みは理解していないもの。基礎を固めることによって、エラーなどにも対処できるようになりましょう！

・npmってなに？npmを使う理由。

・package.jsonの中身を見る！

・npmの便利コマンド紹介！

・パッケージ読み込みと実行。

・npm install使いこなせてる？

・コマンド型のパッケージの仕組み！

・グローバルパッケージの管理方法など。

- 本コースで学ぶこと - ポイント３（自動化ツールの作成）

基礎が完了したら、実際にコードを書いてみましょう！本コースではPlaywrightというライブラリを用いて、サイト内の情報を取得し、Google Spread Sheetに書き込んでみます。プログラムの定期実行やその結果のEmail送信なども行いますので、楽しみにしてください！

・サイトの情報を自動で収集！

・収集した情報をcsvに出力。

・Google Spread Sheetと連携して出力！

・定期実行も可能！

・エラーが起きた時の処理の記述。

・Emailで結果の通知！

- 本コースで学ぶこと - ポイント４（モダンフロントエンド開発界隈の現状把握）

昨今のフロントエンド開発はかなりカオスな状況です（いや、ホントに）。特にフロントエンドのコードをビルドするためのツールなどは乱立しており、初心者の方からしてみれば何を使うべきなのか？何を学習するべきなのか？が分からないと思います。

本コースでは初心者の方が知っておくべき、フロントエンド界隈の知識について体系的に説明していきますので、効率的に最新のトレンドをキャッチアップすることができます。

・モジュールバンドラーって？トランスパイラとは！？

・用語やツールについて説明。

・現状とトレンドについて説明。

・良く使用されるツールの用途について。

・webpackを例に設定方法の意味を解説。

・最新のビルドツールViteについて紹介！

- 本コースで学ぶこと - ポイント５（バックエンド開発）

フロントの学習が終わったら、次はバックエンドの実装について学んでいきましょう！バックエンドを学ぶということはすなわちWebシステムの仕組みを学ぶ必要があります。Webシステムの仕組みを知れば、他のプログラミング言語でバックエンド側の実装を行った時もとても役に立ちます。（プログラミング言語による違いは書き方の違いのみで、Webシステムの仕組みはどの言語でも同じです。）本コースではRest APIを作りながら、Webシステムの基本的な仕組みと実装方法について学習していきます！

・Webページが表示されるまで！

・サーバーとブラウザのやり取り！

・Content-Type？HTTPステータス？

・POSTとGETメソッドの違い？送り方と受け取り方。

・Rest APIについて学ぶ！application/json？

・ルーター？ミドルウェア？サーバーの基本を習得！

・MongoDBにデータを格納！

- 本コースで学ぶこと - ポイント６（モダンなWebアプリの構築）

バックエンドの実装が完了したら、今度はフロントエンドのコードと統合して、画面を持ったアプリケーションを実際に構築してみましょう。フロントエンド側はReactを用いたSPA（Single Page Application）を用意しています。Reactの実装や細かな説明は行いませんが、実際どのようにしてWebシステムが構成されているのかを具体的に知ることは大変勉強になると思います。また、作成したアプリケーションはインターネットへの公開まで行いますので、ポートフォリオを公開したい人などは是非楽しみにしてください。

・フロントエンドのコードとバックエンドのコードの統合。

・CORS制約とは？

・どのようにWebアプリは動くのか？

・インターネットへの公開。

- 本コースで学ぶこと - ポイント７（デスクトップアプリ開発）

最後に、デスクトップアプリの開発をやってみましょう。実は皆さんが普段お使いのアプリにもNode.jsで開発されたものはたくさんあります。例えば、VSCode、Teams、Slack、Discord、SkypeなどはNode.jsのライブラリであるElectronで作成されています。本コースでは実際にElectronを用いて、画像ダウンロードアプリを作成し、それを配布できる状態にビルドまでします。また、コースの最後にはReact Native + Expoを用いたスマホアプリ開発のための環境構築の方法についても紹介しますので是非楽しみにしてください。

・Electronって何？

・Electronを使ったアプリの特徴。

・プロセスってなに？

・IPC（プロセス間通信）とは！

・画像ダウンロードアプリを作成！

・アプリを実際にビルドして配布！

・Node.jsでスマホ開発！

以上が本コースでざっと学ぶことになってきます。

もし、あなたがJavaScriptを使った開発に興味があれば、是非一度Node.jsについて学んでみてください。Web開発のスキルアップはもちろん、Webシステム以外のプログラムも行うことができるようになるため、JavaScriptを使った開発の幅がグッと広がります！

また、近年ではDenoやBunといったNode.js以外のJavaScript実行環境も登場してきていますが、Node.jsを習得すればその他の実行環境についても特に問題なく使用することができます。

是非この機会にNode.jsに触れてみてください！

5. 本コースで使用する代表的なパッケージ

express: 4.18.1

mongodb: 4.10.0

mongoose: 6.6.1

webpack: 5.74.0

babel: 6.23.0

google-spreadsheet: 3.3.0

node-cron: 3.0.2

playwright: 1.27.1

node: 18.12.1

nodemailer: 6.7.8

vite: 3.2.0

react: 18.0.22

react-dom: 18.0.7

electron: 20.1.4

electron-builder: 23.6.0

npm-run-all: 4.1.5

chrome-paths: 1.0.1

image-downloader: 4.3.0

expo-cli: 6.0.8

その他）

WSLを用いて学習を進めたい方へ。

WSL（Windows Subsystem for Linux）を用いてもNodeは実行可能なため、受講いただくことはできますがセットアップや一部動画の通りにコマンドが流れない可能性があります。（パスが通っていないためエラーになるなど。）そのため、WSLを用いて本コースを受講する場合にはその点をご留意いただけますと幸いです。