JSでサイトを作る・・・・だと・・・・・！？

ええ・・　嫌だ・・・・
HTML/CSS以外でWebサイトをコーディングするなんて・・・

どうせ絶対むずいやん・・・

いや、間っ違いない。
僕も全く同じ気持ちでした。

---

• え、サイトってHTMLとCSSで作るんじゃないの・・？

• ちょっとレベル上がったとしてもPHPで
  WordPressサイト作るんじゃないの・・・？

• Reactって要はJavaScriptでしょ。
  それでサイト作るってどういうこと・・？

---

僕と同じく「？」がとどまるところを知らない皆さまへ

そんなReactへの拒否反応を減らしたいなあって思って
いま記事書いてます💪

何を隠そう僕自身、
フロントエンドエンジニアとしての知見はあまりなくって、
The Web制作コーダーです。

これまでJavaScriptを使ってやってきたことと言えば
・フワッとしたアニメーション
・モーダルとかアコーディオンとか
・ハンバーガーメニューとドロワーとか
だけで、超ざっくり端的に言うと、「動きをつける」という部分。

静的なページの内容部分はHTMLとCSS、もしくはPHPで作ってきた。

コーディングされてる方はこんな気持ちじゃないでしょうか？

「　JavaScriptで静的な部分どうやって書くんや・・・　」

ですよね。僕もそうでした。

でもね・・

実は・・・・・

HTMLと同じ感じで！

JavaScriptを書ける仕組みが！！

あるよ！！！！

それが、

JSX（JavaScript XML）です！！

百聞は一見にしかず。
実際のコードをみてみましょう〜！

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

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

`<div>`とか `<a>` とか、見た目は結構HTMLっぽいですよね。
コーダーの方も馴染みやすいんじゃないでしょうか。
`App`という関数にHTMLをぶち込みました、というイメージ🙆

これ、実際にHTMLに変換されて画面に表示されます。

呼び出すときは

<App />

って書けばOK
（Appっていうコンポーネントを呼び出してます）

実際の表示はこんな感じ。

ええ感じですね〜〜！

仕組みとか難しいこといっぱい書いても仕方ないので、
JSXってなんぞ？ってところを簡単に書いていきますね！

JSX とは JavaScript の拡張であり、JavaScript ファイル内に HTML のようなマークアップを書けるようにするものです。

参考:Doc　https://ja.react.dev/learn/writing-markup-with-jsx

通常のコーディングでは、

• コンテンツはHTMLで書いて

• デザインはCSSで書いて

• ロジックの部分をJSで書く

って感じですよね。

これを

JavaScript（ロジック）にHTML（コンテンツ）も
書いちゃえばよくね？？？

っていうのがJSXもといReactの思想です！！

こうすることで

---

• ロジックとコンテンツが1つのファイルにまとまるのでわかりやすい

• パーツが完全に分離されるので、関係ないコードがファイルに書かれない

  • ボタンの記述が書いてあるファイルには
    サイドバーの記述は記載されていない、みたいなイメージ

• JavaScriptだから変数を埋め込んだり、繰り返し処理したりできる

• HTMLよりも厳格だから記述ミスあるとちゃんとエラー出てくれる

  • HTMLだと間違えててもエラーでないもんね。。

---

などなど、いろんなメリットが得られるんですよ〜！！

特に、
変数や関数を埋め込んだり、繰り返し処理したりできる
というのがとっても優秀

const Sample = () => {
  const colors = ['red', 'pink', 'green'];

  const handleClick = () => {
    alert('ボタンがクリックされたよ！');
  };

  return (
    <div>
      <ul>
        {colors.map(color => <li key={color}>{color}</li>)}
      </ul>
      <button onClick={handleClick}>クリック！！</button>
      <button onClick={handleClick}>クリック2個目！！</button>
    </div>
  );
};

👨‍💻まずはボタンの要素を全て取得して・・
👨‍💻そしてそのボタンをループで回して・・・
ってのがなくなるし、
同じファイルにロジックがあるから
何の処理がされているのかイメージしやすい！

どうでしょう、少しはReactに対する拒否感なくなりましたよね・・？
「あれ、意外と簡単じゃーん」って感じてくれましたよね・・？

もちろん全てHTMLとおんなじ、という訳ではなくって、
色々ルールや決まり、お作法みたいなのがあるけど、
それはまたの機会に・・・！

こんな感じで今後もReactに対する怖さを
取っ払って行けたらなーって思ってます！

そして僕もどんどんアウトプットしてスキル定着させていきたい・・！！

「Reactええやんけ！」とか
「ちょっと拒否感減ったよ！！」って方は
ハートのボタンをぽちっと押してくれると泣いて喜びます・・！

ではでは！！