0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React/Typescriptの開発環境を作る

Last updated at Posted at 2021-11-15

#目次
1.はじめに
2.インストール
3.プロキシ環境の場合
4.おわりに

#1. はじめに 参考資料など
JavaやC#で基幹系システムしか作ってこなかったエンジニアがフロント開発に挑戦する。さて、開発環境の構築を記録していきます。
なお、Reactを使う上で必要なJavascriptとしての知識レベルですが、以下ぐらいです。

  • 普通のJavascriptについては、他人の書いたコードは読める
  • 一からコードを書くのはできない
  • コールバック関数は読めることには読めるがあまり自信がない
  • ReactやVue.jsなどのライブラリ関連はよくわからない。コードも読んだことはない。

まず参考にした書籍は以下です。

で結局。
「お題がないとがっつり作ろうとしない」からいまいち覚えないよね。という状況になりました。プログラミングあるあるですね。
お題はのちの記事に書いていくので、まず今回はツール類のインストールをまとめていきます。

#2. インストール
以下のツールをインストールしました。

  • Node.js

ちゃんと勉強するまで知らなかったが、Node.jsを入れただけでReactが使えるとは。
公式サイトよりダウンロード→ https://nodejs.org/ja/
入れたバージョンは14.17.16だが、なぜこれを入れたのかは忘れました。。。

  • Visual Studio Code (VS Code)

もともとPythonを扱っていたので、インストール済みでした。
公式サイトよりダウンロード→https://azure.microsoft.com/ja-jp/products/visual-studio-code/

  • VS Code拡張機能: Japanese Language Pack

このサイトを参考に拡張機能をインストールし、VS Codeを日本語で扱えるようにしました。
https://www.javadrive.jp/vscode/install/index4.html

  • VS Code拡張機能: Babel Javascript

入れた経緯を思い出せません。Javascript構文のハイライト表示に使っています。
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

#3.プロキシ環境の場合
自分の環境ではプロキシありませんが、プロキシがある場合はnpmコマンドで以下に設定するようです。

npm -g config set proxy htt://xxxxxx:9999/
npm -g config set https-proxy htt://xxxxxx:9999/

プロキシを解除する場合は以下

npm -g config delete proxy
npm -g config delete https-proxy

参考:https://qiita.com/ymaru/items/cf513ab05fe0ebac7d3b

#4. おわりに
以上が開発環境構築になります。

と、おもいきや
Web開発者はWindowsじゃないほうが良いのではという意見を見てしまったがために…。
次回へ続く。

0
1
0

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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?