Visual Stadio CodeでExpress.js(Node.js)開発をするまで

下克上中退人無料メールマガジン





----------------------------------------------------------------------------------

どうも、
こんにちは、
じゅうきちだ。

今回は、
VscodeでNode.jsの環境構築をする。

Node.jsやGit、Homebrew、Vscodeのがインストールできていない人は、

まずは、この記事の内容を実行していただけるとスムーズ。

https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391

目次

開発環境

・Macos Catarina (v10.15.6)

・Node.js (v14.5.0)

・Visual Stadio Code(v1.47.2)

プロジェクトを作成

ターミナルでディレクトリを作る。

今回は、express-testという名前で作った。

$ mkdir express-test

ディレクトリを作ったら、Vscodeで開く。

control+shift+@でターミナルを開く。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

・express-generatorをインストールする。

$ npm install -g express-generator

すると、

npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
/Users/banbook/.nodebrew/node/v14.5.0/bin/express -> /Users/banbook/.nodebrew/node/v14.5.0/lib/node_modules/express-generator/bin/express-cli.js
+ express-generator@4.16.1
updated 1 package in 1.03s

という警告が出るが無視して構わない。

・今回は、テンプレートエンジンにpugを使いたいため、
pugに変更するオプションをつける。

$ express --view=pug .

実際に起動する

$ npm install

すると

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@2.6.11 postinstall /Users/banbook/express-test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm notice created a lockfile as package-lock.json. You should commit this file.
added 118 packages from 172 contributors and audited 119 packages in 8.642s

3 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

ここでも警告が出るが無視。

・サーバーを起動する。

$ npm start
> express-test@0.0.0 start /Users/banbook/express-test
> node ./bin/www

GET / 200 1048.744 ms - 170
GET /stylesheets/style.css 200 7.135 ms - 111
GET / 304 34.561 ms - -
GET /stylesheets/style.css 304 2.927 ms - -


これで、

http://localhost:3000/

にアクセスして下のような画面がでてきたら成功。

サーバーを落とす場合は、
control+cを使う。

参考になった良記事

Visual Studio CodeとNode.jsの導入について

Visual Studio CodeでExpressの開発環境を作ってみます

覚えるのはこれだけ!Pug(Jade)のよく使う9つの書き方

【express】テンプレートファイルを使ってViewを作成する

MDN docs

Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (1/3)

公式ドキュメント

----------------------------------------------------------------------------------

僕じゅうきちは大学中退ニートからエンジニアになることができました。


エンジニアはいいですよ。需要のあるスキルがめちゃくちゃ付きます。


大学を中退して、学歴のなかった僕は将来物凄く不安でした。


自分を保証してくれるものがないからです。


就職もムズイし、年収も低くなるだろうし、結婚も無理だと思ってました。


でもエンジニアに就職してからは充実したスキルが着くことによって、日々の不安がなくなり充実した毎日をおくることができています。


どんな人間でもきちんと勉強していけば、エンジニアに就職することはできる。


じゅうきちがエンジニアになるまでの過程は下の記事で公開しています。


大学中退からエンジニアになれたじゅうきちの物語
よかったらシェアしてね!

この記事を書いた人

大学中退
→ニート
→引きこもり
→IT企業

超学歴コンプを拗らせて、
一度自暴自棄になり、世捨て人になる(ニート)。
ここままじゃと思い、再起する。

大学中退の希望の星になる。

コメント

コメントする

CAPTCHA


目次
閉じる