事前準備 開発に入る前に以下が入っていない場合は先にインストールをしてください Node.jsがインストールされている確認 Node.jsのバージョン確認 node -v yarnがインストールされているか確認 yarnのバージョン確認 yarn -v プロジェクトの作成 プロジェクト名:react_practice プロジェクトの作成 npx create-react-app react_practice --template typescript 確認 作成したアプリケーションのディレクトリに移動し、下記実行 確認 yarn start ブラウザが立ち上がり、Reactのロゴマークがクルクル回っていれば成功 初期化 不要なファイルを削除し、整理します。 またそれに伴いそれらを使っていたところでエラーが発生するのでそれを修正します。 削除する一覧 以下のファイルごと削除します。 publicフォルダ favicon.ico logo192.png logo512.png manifest.json robots.txt srcフォルダ App.test.tsx logo.svg react-app-env.d.ts reportWebVitals.ts setupTests.ts 削除する箇所 ファイルを以下のように書き換えます App.tsx App.tsx import React from 'react'; import './App.css'; export const App = () => { return ( <div>リセット済</div> ); } index.tsx index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import {App} from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ここでもう一度正常に動作するかどう確認してください。 正常に表示ができればOKです。

使用環境 MacOS Catalina（10.15.7）、VScode（1.55.2）、Node JS(16.1.0)、Express JS（4.17.1）、body-parser（1.19.0） はじめに タイトル通りですが、最新版のExpress（2021年5月5日現在 npmからデフォルトでインストールできる最新版がv4.17.1）でbody-parserがいらない（＝インストールしなくていい）ことがわかりました。 私は現在、下記のUdemyの人気コースでNode JSおよびExpress JSを学習しています。 The Complete 2021 Web Development Bootcamp （URL） https://www.udemy.com/course/the-complete-web-development-bootcamp そのチュートリアルにてnpmでbody-parserをインストールしreq.bodyを記述することによって、”クライアント経由でサーバーに送信されたデータを取得できる”ことを知りました。 $ npm install body-parser //jshint esversion:6 const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const port = 3000 app.use(bodyParser.urlencoded({ extended: true })); //途中略 app.post("/", (req, res) => { var num1 = Number(req.body.num1); var num2 = Number(req.body.num2); var result = num1 + num2; res.send("The result of the calculation is " + result); }) //以下略 しかし、コードを書いている際に定義したbodyParserに予期せぬ訂正線が入り、以下の通り何やらおかしな説明が出てきました。 （チュートリアルではこんなの出てなかったよ！？涙） @deprecated というのは”非推奨の、反対の”という意味で、その下に「'body-parser'は非推奨です」とあるとおり、それが理由でこんな風に線が入っているみたいです。 ちなみにこれを無視しても問題なくそのままコードは実行できました。 でもこのまま放っておくのはなんか気持ち悪いですよね。 大丈夫です。ちゃんと解決策がありました。 解決策 StackOverFlowやMediumの記事など、いろいろ調べてみた結果、どうやらExpressのバージョン14.6.0以降ではbody-parserは標準搭載されているらしいです。 しつこいですが、要するに最新版のExpressをインストールしたらなら、あえてbody-parserをインストールする必要はないということです。 ではどうすればいいのかっていうと、この部分を $ app.use(bodyParser.urlencoded({extended: true})); 下記のように記述すれば済みます。 $ app.use(express.urlencoded({extended: true})); //Parse URL-encoded bodies ちなみに、.jason();を使う場合もこちらを app.use(bodyparser.json()); 下記の通り変更すればOKです。 app.use(express.json()); これに変更した上でも、req.bodyは問題なく使えます。 （なぜならExpressにbody-parserが標準搭載されているから） ってことで、body-parserさん、もうあなたは用済みです。バイバイ！ $ npm uninstall body-parser constでbodyParserを定義したものも、もういらないのでこちらも消し去りましょう。 ちなみに、前述した完全なコードは以下の通りです。 //jshint esversion:6 const express = require("express"); //const bodyParser = require("body-parser"); ←もういらない const app = express(); const port = 3000 //app.use(bodyParser.urlencoded({extended: true})); ←bodyParserを下記の通りexpressに変更 app.use(express.urlencoded({ extended: true })); //途中略 app.post("/", (req, res) => { var num1 = Number(req.body.num1); var num2 = Number(req.body.num2); var result = num1 + num2; res.send("The result of the calculation is " + result); }) //以下略 最後に 前述したとおり、VS Codeからのメッセージを無視して、実行できちゃうんですが私はちょっとそれを無視するのが気持ち悪かったので、なんとかできないかなと検索を始めたら理由がわかりました。 スッキリできてよかったです。 恥ずかしながら、調べる前は、「まあ、動いているし無視していっかw」と思ってました。 こんな風に考えても解決しないことはすぐにググって解決していくスタイルが、結果的に学びが多くなる気がしたので、続けていこうと思います。（そしてこんな風に学んだことをアウトプットすることも。） 参考にしたサイトたち Medium Express JS— body-parser and why may not need it StackOverFlow bodyParser is deprecated express 4 Grepper “bodyparser is deprecated” Code Answer’s

使用環境 MacOS Catalina（10.15.7）、VScode（1.55.2）、Node JS(16.1.0)、Express JS（4.17.1）、body-parser（1.19.0） はじめに タイトル通りですが、最新版のExpress（2021年5月5日現在 npmからデフォルトでインストールできる最新版がv4.17.1）でbody-parserがいらない（＝インストールしなくていい）ことがわかりました。 私は現在、下記のUdemyの人気コースでNode JSおよびExpressを学習しています。 The Complete 2021 Web Development Bootcamp （URL） https://www.udemy.com/course/the-complete-web-development-bootcamp そのチュートリアルにてnpmでbody-parserをインストールしreq.bodyを記述することによって、”クライアント経由でサーバーに送信されたデータを取得できる”ことを知りました。 $ npm install body-parser //jshint esversion:6 const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const port = 3000 app.use(bodyParser.urlencoded({ extended: true })); //途中略 app.post("/", (req, res) => { var num1 = Number(req.body.num1); var num2 = Number(req.body.num2); var result = num1 + num2; res.send("The result of the calculation is " + result); }) //以下略 しかし、コードを書いている際に定義したbodyParserに予期せぬ訂正線が入り、以下の通り何やらおかしな説明が出てきました。 （チュートリアルではこんなの出てなかったよ！？涙） @deprecated というのは”非推奨の、反対の”という意味で、その下に「'body-parser'は非推奨です」とあるとおり、それが理由でこんな風に線が入っているみたいです。 ちなみにこれを無視しても問題なくそのままコードは実行できました。 でもこのまま放っておくのはなんか気持ち悪いですよね。 大丈夫です。ちゃんと解決策がありました。 解決策 StackOverFlowやMediumの記事など、いろいろ調べてみた結果、どうやらExpressのバージョン14.6.0以降ではbody-parserは標準搭載されているらしいです。 しつこいですが、要するに最新版のExpressをインストールしたらなら、あえてbody-parserをインストールする必要はないということです。 ではどうすればいいのかっていうと、この部分を $ app.use(bodyParser.urlencoded({extended: true})); 下記のように記述すれば済みます。 $ app.use(express.urlencoded({extended: true})); //Parse URL-encoded bodies ちなみに、.jason();を使う場合もこちらを app.use(bodyparser.json()); 下記の通り変更すればOKです。 app.use(express.json()); これに変更した上でも、req.bodyは問題なく使えます。 （なぜならExpressにbody-parserが標準搭載されているから） ってことで、body-parserさん、もうあなたは用済みです。バイバイ！ $ npm uninstall body-parser constでbodyParserを定義したものも、もういらないのでこちらも消し去りましょう。 ちなみに、前述した完全なコードは以下の通りです。 //jshint esversion:6 const express = require("express"); //const bodyParser = require("body-parser"); ←もういらない const app = express(); const port = 3000 //app.use(bodyParser.urlencoded({extended: true})); ←bodyParserを下記の通りexpressに変更 app.use(express.urlencoded({ extended: true })); //途中略 app.post("/", (req, res) => { var num1 = Number(req.body.num1); var num2 = Number(req.body.num2); var result = num1 + num2; res.send("The result of the calculation is " + result); }) //以下略 最後に 前述したとおり、VS Codeからのメッセージを無視して、実行できちゃうんですが私はちょっとそれを無視するのが気持ち悪かったので、なんとかできないかなと検索を始めたら理由がわかりました。 スッキリできてよかったです。 恥ずかしながら、調べる前は、「まあ、動いているし無視していっかw」と思ってました。 こんな風に考えても解決しないことはすぐにググって解決していくスタイルが、結果的に学びが多くなる気がしたので、続けていこうと思います。（そしてこんな風に学んだことをアウトプットすることも。） 参考にしたサイトたち Medium Express JS— body-parser and why may not need it StackOverFlow bodyParser is deprecated express 4 Grepper “bodyparser is deprecated” Code Answer’s

doctocとは、markdownファイルの目次を自動的に生成するCLIです。 Node.jsで記載されています。 thlorenz/doctoc: ? Generates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites. インストール npmでインストールする場合 npm install -g doctoc 使い方 Sample doctoc.md # doctoc test ## test1 ### test1-1 ### test1-2 #### test1-2-1 ## test2 ### test2-1 上記のdoctoc.mdに以下のコマンドで目次を作成します。 $ doctoc doctoc.md DocToccing single file "doctoc.md" for github.com. ================== "doctoc.md" will be updated Everything is OK. Everything is OK.と出力されると、ファイルに目次が追記されています。 doctoc.md <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [doctoc test](#doctoc-test) - [test1](#test1) - [test1-1](#test1-1) - [test1-2](#test1-2) - [test1-2-1](#test1-2-1) - [test2](#test2) - [test2-1](#test2-1) <!-- END doctoc generated TOC please keep comment here to allow auto update --> # doctoc test ## test1 ### test1-1 ### test1-2 #### test1-2-1 ## test2 ### test2-1 <!-- START doctoc generated TOC please keep comment here to allow auto update -->から <!-- END doctoc generated TOC please keep comment here to allow auto update -->までが doctocによって自動的に追加された目次になります。 2行目に警告が記載されてますが、doctocで追記された部分は編集しないようにしてください。 markdownの内容を更新して、doctocを再実行したときにうまく作成されない恐れがあります。 オプションについて よく使うのは以下のオプションです。 オプション 内容 [--notitle, --title title] **Table of Contents**の行の有無、もしくは名前の指定 [--maxlevel level] 追記する目次の深さ [-s, --stdout] 作成時のコマンド出力に目次を表示する 使用するサイトのmarkdown形式に合わせたオプション --bitbucket bitbucket.org --nodejs nodejs.org --github github.com --gitlab gitlab.com --ghost ghost.org 特定ファイルをSkipしたい場合 公式サイトによるとmarkdownファイルの先頭に<!-- DOCTOC SKIP -->と記載する必要がある。 skip.md <!-- DOCTOC SKIP --> # doctoc test ## test1 ### test1-1 ### test1-2 #### test1-2-1 ## test2 ### test2-1 次に以下のコマンドを実行する。 ack -L 'DOCTOC SKIP' | xargs doctoc 単純に、DOCTOC SKIPという文字列が入っていないファイルに対して目次を作成しているだけである。