※現職を退職するにあたって、2020年に社内ナレッジ置き場で書いたものを転載していますので、クラスコンポーネント前提だったりと古い情報が含まれます。機会があれば随時修正します。
親記事
ReactとかJavascriptに関する知識
-
js,jsx,ts,tsx,などあるが、基本的に全部jsと思えばOK。-
jsxはざっくりいうとReactで管理するHTMLが書けるjs -
ts,tsxのtsはtypescriptというjavascriptの方言
-
-
index.jsはそのディレクトリ内の全ての取りまとめ役- 下記の例だと、
index.tsxがSearchButtonとかの部品の取りまとめ役になっている
- 下記の例だと、
SearchForm
├── SearchButton.tsx
└── index.tsx
前提
デザイナーさんは、Reactを最初からちゃんと理解できなくて大丈夫です！
ReactはHTMLを書く以上にボタン押したときの挙動とか色々カスタマイズできますが、
まずはHTMLが書かれる場所だったりとか、jsファイルにどう書けば実際の画面でどうHTMLが展開されるかだけ分かれば、少なくともエンジニアと分業できます。
（それ以上はエンジニアがやるので）
HTML(jsx)を書く場所は大きく2つあります
デザイナーさんがファイルの中で見る場所はjsファイルのHTML(jsx)部分です。それが書かれる場所は「関数コンポーネント」と「クラスコンポーネント」の2つがあります。
コンポーネントとは、HTMLタグで括られたHTMLのブロックのことを言います。
これはわかった人用のまとめなので、詳しくはエンジニアに「ここに書いてあることってどういうことですか、デザイナーは何だけ知ってればいいですか」って聞けばわかると思います。
車輪の再発明するにも長すぎて書きたくないので結構割愛しました。
関数コンポーネント
const SearchForm = (props: Props) => {
...
return ( // ←htmlっぽい表記が書かれた関数の`return`の()の中
<div>
</div>
)
}
export default SearchForm; // ← jsの中でexportってやつをしたものは他のファイルから参照できます。
クラスコンポーネント
class SearchForm extends React.Component {
render(
...
return ( // ←React.Componentのブロックにあるhtmlっぽい表記が書かれたrender関数の`return`の()の中
<React.Fragment>
</React.Fragment>
)
}
}
export default SearchForm;
コンポーネントがreturnで返すjsxは1つのタグで囲われている必要があります。
コンポーネントごとに<div>タグとかHTMLタグで囲うのが嫌であれば<React.Fragment></React.Fragment>とか<></>で囲えばコンポーネントを囲う用のタグがHTML描画時に表現されません。
（<></>は<React.Fragment></React.Fragment>の省略版）
Railsで言うところの、html.erbのパーシャル的なことできます
import React from 'react';
import Title from './Title.tsx' // ←入れ子にしたい部品コンポーネントのインポート
export default function News(props: Props) {
return (
<div>
<Title /> // ←入れ子にしたい部品コンポーネントの使用
<Content />
</div>
)
}
import React from 'react';
export default function Title(props: Props) {
return (
<div>
タイトーーーーーーーーーーール
</div>
)
}
最低限の命名規則
※class属性(className属性)についてはデザイナーさんの領分なので、デザイナーフレンドリーに付けてもらって大丈夫です。
jQueryなどDOM要素を使った処理を使っていた時代はエンジニアもclass属性を使っていたんですが、今はもう使ってないので。
class属性以外の命名規則、というか大文字小文字の扱いについてメモっておきます。
js関連のディレクトリ内(js,jsx,ts,tsx)
-
変数: camelCase
- let camelAge = 3
-
定数: UPPER_SNAKE_CASE
- const JAPAN_TAX = 1.1
-
クラス名: PascalCase
-
ファイル名(CSS含む): PascalCase
- export する class 一つに対して一つのファイルを作成する場合に、PascalCase のクラス名をそのままファイル名に用いる。
- class を export しない場合は camelCase になる
- 主に index.ts だけ覚えておけば良い。
-
jsx(html)のclass属性: BEM記法
-
ケース説明
- PascalCase
- camelCase
- snake_case
- kebab-case
(参考)Ruby ・Rails
基本：スネークケース (ex search_form)
クラス名・コンポーネント名：パスカルケース (ex SearchForm)
定数：アッパースネークケース(ex SEARCH_FORM)