LoginSignup
19

More than 3 years have passed since last update.

Node.js / Expressを習得するためにやったことまとめ(随時更新)

Last updated at Posted at 2020-02-16

Node.jsとそのフレームワークExpressを習得するためにやったことをここにまとめていきます。(随時更新!)

GitHub PagesからHerokuのPostgreSQLにCRUD!CORS設定も!2020/11/15追加

Node.js

Node.jsをインストールしてHelloWorldしてみる。Node.jsはフロントエンド開発環境として重要。

※参考:初めてのNode.js:インストール確認、REPL、Hello worldまで

Node.jsでWebサーバ立ててHTTP通信(2020/02/21追加)

※参考:【Node.js】Webサーバを立ててハローワールドを表示する

ハローワールドを色々打ち替える(2020/03/02追加)

※参考:【Node.js】ハローワールドの打ち替え(ポート番号、日本語化、HTMLタグ化)

fsモジュールでHTMLファイルを読み込んで表示(2020/03/12追加)

※参考:【Node.js】fsモジュールでHTMLファイルを表示する

ルーティング設定でCSS、JSファイルを読み込み(2020/03/30追加)

※参考:【Node.js】ルーティング設定でCSS、JSファイルを読み込む

ルーティングで複数ページを表示(2020/04/03追加)

※参考:【Node.js】ルーティング設定で複数ページを表示する

Express事始め

まず、Expressとはなんなのか。JSフレームワークとの役割の違い。

※参考:ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと

Expressをインストールしてハロワ(Hello World)(2020/04/10追加!)

※参考:Express事始め(インストール〜ハローワールドまで)

res.sendFile()、express.static()による静的HTMLファイルの表示(2020/04/16追加)

※参考:【Express】静的HTMLファイルの表示(res.sendFile()、express.static())

ExpressでAPI

ExpressからMySQL、MongoDBに接続する(2020/08/16追加)

※参考:【Epxress】データベース接続の比較(MySQLとMongoDB)

Fetch APIのデータをbody-parserで受け取ってテキストを返す(2020/08/30追加)

※参考:【Express】body-parserでFetch API(およびForm)のPOST送信を受け取る

MySQLのデータをbody-parserでブラウザに返す(2020/09/03追加)

※参考:【Express】MySQLのデータをbody-parserでブラウザに返す

ExpressでFetch APiとMySQLを連携しCRUDする(2020/09/14追加)

※参考:【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする

ExpressとHerokuの連携

Node.js環境をHeroku CLIを使ってHerokuにデプロイ(2020/09/22追加)

※参考:【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする

環境変数とかPATHを通すとかフワッとしてた部分を調べる(2020/09/26追加)

※参考:【Express】環境変数とは?PATHを通すとは?けっきょく南極ローカルインストール!(Herokuコマンドでローカル起動)

heroku configでローカルの.envファイルとクラウドの環境変数を同期(2020/09/30追加)

※参考:【Express】heroku configでHerokuに環境変数を設定(.envファイルとHerokuの同期)

Fetch APIでHerokuの環境変数を読み込んでブラウザに表示する(2020/10/02追加)

※参考:【Express】Fetch APIでHerokuの環境変数を読み込んでブラウザに表示する

HerokuとGitHubを連携して自動デプロイ!環境変数はソースに含めずに成功(2020/10/08追加)

※参考:【Express】HerokuとGitHubを連携して自動デプロイ(環境変数は除外)

ExpressとPostgreSQLの連携

ExpressとPostgreSQLの連携、DB接続情報はGitHubから除外(2020/10/27追加)

※参考:【Express】HerokuのPostgreSQLのデータを表示する

Fetch APIでExpressのAPIを叩いてPostgreSQLのデータを表示(2020/10/30追加)

※参考:【Express】Fetch APIでAPIを叩いてHerokuのPostgreSQLのデータを表示する

フォームとPostgreSQLを連携したCRUDの前編、テーブルやモジュールの追加(2020/11/05追加)

※参考:【Express】body-parserでフォームからHerokuのPostgreSQLにCRUD(前編)

フォームとPostgreSQLを連携したCRUDの後編、CRUD操作。新たな課題も(2020/11/06追加)

※参考:【Express】body-parserでフォームからHerokuのPostgreSQLにCRUD(後編)

GitHub PagesからHerokuのPostgreSQLにCRUD!CORS設定も!(2020/11/15追加!

※参考:【Express】GitHub PagesからHerokuのPostgreSQLへCRUD操作(CORSエラー対策も)

随時更新していきます!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19