Reactの基本文法とpackage.json【RaiseTech フロントコース#6】

2021 8/27

2021.07.29 2021.08.27

悩んでいる人

packeage.jsonってよく聞くけど何？
ReactってJavaScriptと書き方違うの？

本記事では、そのような悩みを解決致します。

僕も、package.jsonとかpackeage.json.lockとかnode_moduelsとか意味分からなすぎて嫌になった記憶があります。なんとなくコード書いているけど腑に落ちないってときはこのあたりの理解が足りていない気がします。

なので、package.jsonを理解できるように解説していきます。

また、React開発での基本文法も実際のコードを交えながら解説していきます。

本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第6回の講義のまとめとなります。

package.jsonについて知ろう

パッケージマネージャー（npm/yarn）

npmとはnode package managerの略で、Node.js関連のパッケージをインストールするためにツールになります。

npmはパッケージの依存関係を管理して、必要なほかのパッケージをまとめてインストールしてくれます。

package.jsonの中身を見る

npmでインストールしたパッケージのバージョン管理を行うために使われているpackage.json。

{
  "name": "react-raisetech-no4",
  "version": "0.1.0", //
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "eslint src __test__",
    "eslint:fix": "eslint --fix src __test__"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2"
  }
}

name

パッケージ名。NPMに公開するときには、

version

バージョン情報

private

このプロパティがtrueになっていると、モジュールの公開ができません。
react-create-appをしたときには、デフォルトでtrueになってました。

scripts

コマンドエイリアスを登録できます。

npm run startのようにnpm runを頭につけて登録したコマンドを実行できる。
※start / stop / restart / test の4つについてはrunを省略できます。

npm run start //OK
npm start //OK
npm run eslint //OK
npm eslint //NG

dependencies

使用する外部パッケージの一覧。ここを参考にして、node_modules配下を展開してくれます。
本番環境で使用するパッケージを記載します。

devDependencies

使用する外部パッケージの一覧。ここを参考にして、node_modules配下を展開してくれます。
開発環境で使用するパッケージを記載します。

オカ

とりあえず重要そうなものは上記になります。
調べていたらめちゃくちゃ丁寧にまとまっている記事があったんで興味がある人はこちらも見てみてくださいー。

https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847

バージョンの指定方法

これはこうやって指定しているんだなぁぐらいの理解で問題ないはず。
わからなくなったら、調べればすぐでてくるし。

下記で簡単に説明しておきます。

"react": "^17.0.2",

バージョンは"^17.0.2"で指定されております。major.minor.patchという構成でできています。
大きな変更があったときは、17の部分が18に変わります。
マイナー変更があったときは、17.1.2のように変わります。
バグ修正などのときには、17.0.3のように変わります。

下記バージョン指定方法のルールになります。

・^17.0.2 ▶ majorは変えない範囲で更新される(17.0.2~17.9.9)
・17.0.2 ▶完全一のバージョンのみ
・~17.0.2 ▶ minorは変えない範囲で更新される(17.0.2~17.0.9)
・17.0.*、17.0.x、17.0.X ▶ *の部分が自由に更新される
・17.0.2 – 17.1.0 ▶指定した範囲の中で更新される
・>=17.0.2 ▶演算子に応じて更新される(>、>=、<、<=)

Reactの基本の文法

JSX記法

JSXを一言でいうと、ReactをHTMLっぽく書けるようにしてくれる便利な記法です。

ただJavaScriptの構文規則に違反しているため直接ブラウザ上で実行することができません。
そのためにJSX記法で書いたコードをピュアなJavaScriptに変換（トランスパイル）する必要があります。
トランスパイルしてくれるのがBabelになります。

また書くときのルールがあるので簡単に触れておきます。

最上位コンポーネントは並列に書いてはいけない！

//これはダメ
const App = () => {
  return (
      <h1>Hello</h1>
      <h1>World</h1>
  );
};
export default App;

//これはOK
const App = () => {
  return (
    <>
      <h1>Hello</h1>
      <h1>World</h1>
    </>
  );
};
export default App;

<React.Fragment>hogehoge</React.Fragment> でもやれるのですが、<>hogehoge</> でいいかと。

https://ja.reactjs.org/docs/fragments.html

タグ内に要素を持たないときは閉じタグを利用する！

<Button />

{ } の中はJavaScriptの世界

const App = () => {
 console.log("ここはJavaScriptが普通に動く")
  return (
    <>
      //テキストとして表示されてしまう。NG
      console.log("NG");
      //コンソールに表示される。OK
      {console.log("OK")}
    </>
  );
};
export default App;

オカ

とりあえずこの辺は最低限覚えておきましょう！

コンポーネントについて

コンポーネントはパスカルケースで記述するのがルールになります。

export const MessageItem = () =>{

}

==他の記法==
■キャメルケース：export const messageItem
■パスカルケース：export const MessageItem
■キャメルケース：export const message_item
■ケバブケース：export const message-item

Reactでのイベント

JavaScriptだとonclickと記述しますが、ReactではonClickとなります。（onchangeも同様です。onChangeが正しいです。）

下記サンプルコードになります。

三項演算子を使って、showがtrueのときは元気です元気ですが表示され、falseのときには元気じゃないのですが表示されます。

trueとfalseの切り替えを、onClickで行っています。

export default function App() {
  const [show, setShow] = useState(true);
  const buttonYes = () => {
    setShow(true);
  };
  const buttonNo = () => {
    setShow(false);
  };
  return (
    <div className="App">
      <h1>元気ですかー？</h1>
      {show ? <h2 id="yes">元気です</h2> : <h2 id="yes">元気じゃないのです</h2>}
      <button onClick={buttonYes}>はい</button>
      <button onClick={buttonNo}>いいえ</button>
    </div>
  );
}

Reactでのスタイル

スタイルの当て方も複数あって自分の好きなやつを選んで使う感じです。個人的にはstyled-componentが好きでよく使っています。

inline-style

:hoverや:focusなどが当てられない（ゴニョゴニョすれば当てられる）のであんまり使えないかなぁといった印象です。
部分的にmargin-top:5pxをあてるとかってときに使えるかなぁと。

<h1 style={inlineH1}>inline style</h1>

const inlineH1 = {
  color: "red",
  fontSize: "32px"
};

CSS Modules

CSS Modulesでは、別でCSSファイルを作成する必要があり（Hoge.module.css）JavaScriptのファイルで読み込む必要があります。

import classes from "./Test.module.css";

<h1 className={classes.title}>CSS Modules</h1>

.title {
  color: blue;
  font-size: 32px;
}

styled JSX

見慣れない記述方法で抵抗感がありますが、こんな書き方もできるようです。

<h1 className="titleJSX">Styled JSX</h1>

      <style jsx="true">
        {`
          .titleJSX{
          color: green;
          font-size: 32px;
        }
      `}
      </style>

styled components（CSS in JS）

使用するには、npmからstyled-componentsをインストールする必要があります。

https://www.npmjs.com/package/styled-components

CSSの記述がそのままできますし、コードもすっきりするのでかなり見通しがよく好きです。

<STitle>styled component</STitle>

const STitle = styled.h1`
  color: pink;
  font-size: 32px;
`;

オカ

コンポーネント名はTitleでもいいのですが、STitleとすることでstyled componentのコンポーネントだと分かるようにしています。

じゃけさんのローカルルールでそのように運用することがあったようです。見習って僕もそのやり方をパクってます！ｗ

Propsについて

コンポーネントに渡す引数のようなものです。非常に重要な概念です。

import "./styles.css";
import { Greeting } from "./Greeting";

export default function App() {
  return (
    <div className="App">
      <h1>Propsについて</h1>
      <Greeting text="こんにちは" color="red" />
      <Greeting text="Hello" color="blue" />
    </div>
  );
}

export const Greeting = (props) => {
  console.log(props);
  return <h1 style={{ color: props.color }}>{props.text}</h1>;
};

今回の例で言うと、Greetingというコンポーネントにtextとcolorをpropsとして渡しています。

Greeting.jsxではpropsを受取り使うことができます。オブジェクトとして受け取るのでpropsにアクセスする際には、props.hogeのように記述します。

基本の記述方法は上記になりますが、propsについては別記事でもまとめていけたらと思っています。

Stateについて

コンポーネントが持つ状態のことをいいます。こちらもprops同様に非常に重要な概念です。

stateを定義するには、useStateというHooksを使用します。

useStateの基本の記述方法です。

numには状態を持った変数が入ります。setNumは更新する関数となります。

const [num, setNum] = useState(0);

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);

  const countUp = () => {
    setCount((prevState) => prevState + 1);
  };
  const countDown = () => {
    setCount((prevState) => prevState - 1);
  };
  return (
    <div>
      <p>現在のカウント数: {count}</p>
      <button onClick={countUp}>up</button>
      <button onClick={countDown}>down</button>
    </div>
  );
}