JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法

Summary

In this informative video, the host, Tomostan Taniguchi, dives into the world of React, focusing on JSX, a syntax extension for JavaScript that allows for the inclusion of HTML-like elements in JavaScript code. The video is structured around a chapter from a book titled 'Starting with React Practical Introduction,' written by Yuta Yamada and published by SoftBank Creative. The host guides viewers through setting up a React project using Next.js, a framework that simplifies React development. He explains the basics of JSX, including its rules and syntax nuances, such as the use of className instead of class due to JavaScript's naming conventions. The video also covers how to dynamically insert variables into JSX, handle attributes, and apply styles. The host emphasizes the importance of understanding JSX for anyone looking to master React and Next.js, suggesting that it's a crucial skill for modern front-end development. He encourages viewers to experiment with JSX and to use available tools to convert HTML to JSX for easier integration into React-based projects. The video concludes with a recommendation to study the subject further, using resources like the mentioned book and the host's channel for ongoing learning.

Takeaways

• 📚 The speaker introduces JSX, a syntax for embedding HTML in JavaScript, commonly used with React but not exclusive to it.
• 🌟 JSX allows for a more integrated approach to writing HTML and JavaScript, making it easier to manipulate and interact with HTML elements within JavaScript.
• 🛠️ JSX requires understanding specific rules, such as enclosing multiple elements within a single parent element like a `div` or using a React Fragment.
• ⚠️ Be cautious with JSX as it behaves differently from HTML; for instance, self-closing tags in JSX need an explicit closing slash.
• 🔍 Attributes in JSX are treated as JavaScript, so 'class' becomes 'className' to avoid conflicts with the JavaScript keyword 'class'.
• 🔄 JSX enables dynamic output of attributes and styles, allowing for more interactive and data-driven UI components.
• ✅ The use of `{...link}` in JSX allows for the spreading of an object's properties as attributes, simplifying the syntax for complex elements.
• 💡 JSX comments are written using the JavaScript comment syntax, enclosed within `{/* ... */}` to avoid conflicts with HTML comment syntax.
• 🎨 The speaker demonstrates embedding variables directly into JSX, showcasing the power and convenience of JSX for dynamic content.
• ⛔ When embedding HTML within JSX, use the `dangerouslySetInnerHTML` attribute to prevent automatic escaping and allow raw HTML rendering.
• 📈 The speaker recommends using JSX conversion tools for existing HTML to facilitate the transition to JSX, making it easier to adopt React and Next.js in new projects.

Q & A

What is JSX and how is it used in React?

JSX is a syntax extension for JavaScript that allows HTML to be written within JavaScript code. It's not exclusive to React but is commonly used with it. JSX makes it easier to manipulate HTML with JavaScript and is a key concept to learn when studying React.

What is the main difference between HTML and JSX?

While HTML and JSX may look similar, JSX is not strictly HTML. JSX gets transpiled into HTML by the React framework, allowing for the use of JavaScript expressions within the markup.

How does one begin setting up a React project with Next.js?

To start a React project with Next.js, you can use the command `npx create-next-app@latest` in the terminal. This command sets up a new Next.js application, which includes React as it is built on top of React.

What is the significance of the 'class' attribute in JSX?

In JSX, the 'class' attribute is not used due to it being a reserved word in JavaScript. Instead, 'className' is used as the attribute name for assigning classes to elements.

How can you include multiple elements within a single JSX return statement?

In JSX, you can wrap multiple elements with a single parent tag like `div`, or use a React Fragment (`<>...</>` or `<React.Fragment>`) to return multiple elements without adding extra nodes to the DOM.

What is the correct way to include comments in JSX?

Comments in JSX are written using the JavaScript comment syntax, enclosed within curly braces and wrapped with the HTML comment syntax: `{/* comment text */}`.

How can you embed variables directly into JSX?

In JSX, you can embed variables directly into the markup by enclosing the variable name in curly braces `{variableName}`. This allows for dynamic content to be rendered based on the variable's value.

What is the `dangerouslySetInnerHTML` attribute in JSX used for?

The `dangerouslySetInnerHTML` attribute is used in JSX to render raw HTML from variables without escaping. It is used with caution because it can expose the application to cross-site scripting (XSS) attacks if not handled properly.

How do you dynamically assign attributes to JSX elements?

Attributes in JSX can be dynamically assigned by embedding expressions within curly braces. For example, to dynamically set the `href` attribute of an anchor tag, you can write `{link}` where `link` is a JavaScript variable containing the URL.

What is the correct way to define and apply styles to JSX elements?

Styles in JSX can be defined using an object where the property names are written in camelCase to match CSS property names. This object can then be applied to a JSX element using the `style` attribute, like so: `style={styles}`.

What is the recommended approach for handling CSS in a React application?

It is recommended to use CSS classes and separate stylesheets for styling in React applications. While inline styles can be used, they can make the application harder to manage, especially as it grows in size and complexity.

What are the benefits of using Next.js for React development?

Next.js is a framework built on top of React that provides features like server-side rendering, API routes, dynamic imports, and automatic code splitting. It simplifies the development of complex applications and is considered a fast and efficient way to build React applications.

Outlines

00:00

📚 Introduction to JSX in React

The speaker, Taniguchi from Tomostation, introduces JSX, a syntax for embedding HTML in JavaScript, which is commonly used in React. They reference a book titled 'Starting Practical Introduction to React' by Yamada Yoshihiro, which covers React basics and Next.js app development. The speaker discusses JSX as a way to integrate HTML with JavaScript, making it easier to manipulate and work with in React applications. They also provide a step-by-step guide on setting up a React project using Next.js and the necessary tools like Node.js, ESLint, and Tailwind.

05:00

🔍 Understanding JSX and Its Syntax

The speaker explains the intricacies of JSX, highlighting that it is not pure HTML and has certain rules, such as requiring a single parent element to wrap multiple elements. They discuss the use of React Fragments to avoid adding extra HTML elements and the need to convert certain HTML attributes to their JSX equivalents, like 'class' to 'className'. The speaker also covers the correct way to include comments in JSX and how to handle self-closing tags.

10:00

🎨 JSX for Dynamic Content and Styling

The video demonstrates how JSX allows for the dynamic insertion of variables into the UI, with an example of displaying a user's name. It also covers the use of the 'dangerouslySetInnerHTML' attribute for embedding raw HTML. The speaker further explains how to dynamically assign attributes and styles to JSX elements, showcasing the use of objects and the spread operator to pass multiple attributes at once. They also touch on the need to convert CSS property names to camelCase when defining styles in JavaScript.

15:02

🌐 Practical Uses of JSX in Web Development

The speaker emphasizes the practical benefits of using JSX, such as the ability to integrate JavaScript variables and logic directly into the UI. They provide examples of how to use JSX for dynamic content, including linking to URLs and applying styles. The video also suggests using tools to convert existing HTML to JSX, which can be helpful for transitioning existing websites to use React and Next.js.

20:03

📚 Encouraging Learning of React and Next.js

The speaker recommends the book 'Starting Practical Introduction to React' for a thorough study of React and Next.js, considering their importance in modern front-end development. They invite viewers to subscribe to their channel for continued learning on React, Next.js, Astro, WordPress, and other related topics. The speaker thanks the audience for watching and encourages them to explore React and Next.js through the provided resources.

Keywords

💡JSX

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. It is widely used with React to define the structure and layout of components. In the video, JSX is introduced as a key concept for creating React components, allowing HTML to be embedded within JavaScript code, which simplifies the process of combining UI elements with logic.

💡React

React is an open-source, front-end JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications. It is the basis for many web applications and is central to the video's discussion on JSX. React is mentioned as a technology that JSX complements, allowing for a seamless integration of UI elements within JavaScript code.

💡Next.js

Next.js is an open-source React framework that enables server-side rendering and provides features for building web applications with React. It is referenced in the video as a tool that simplifies the learning process for React by providing a structured environment for development. The script discusses using Next.js to create a new project and how it integrates with React.

💡Components

In React, a component is a modular piece of code that defines a part of the user interface. Components can be reused and combined to create complex UIs. The video emphasizes the importance of understanding components when learning React, as they are fundamental to building applications with React and JSX.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. It is used in the video to contrast with JSX, illustrating how JSX allows HTML to be written within JavaScript files, which can streamline the development process.

💡CSS

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML. In the video, CSS is discussed in the context of styling React components. It is shown how CSS can be applied to JSX elements, either through inline styles or by referencing classes defined in a stylesheet.

💡ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. It is mentioned in the video as an option to include during the setup of a new Next.js project, indicating its role in maintaining code quality and adhering to coding standards.

💡Tailwind

Tailwind is a utility-first CSS framework for rapidly building custom designs. The video references Tailwind as a tool that can be included in a Next.js project to facilitate styling and layout design, enhancing the development workflow.

💡Variables

Variables in JavaScript are used to store, retrieve, and manipulate data. In the context of the video, variables are shown to be directly embeddable within JSX, allowing dynamic content to be rendered in the UI. This feature is highlighted as a convenience of using JSX over traditional HTML.

💡Attributes

Attributes in HTML are used to provide additional information about elements. The video explains how attributes work within JSX, noting that some HTML attributes have different names in JSX to avoid conflicts with JavaScript reserved words, such as 'class' becoming 'className'. It also shows how to dynamically assign values to attributes using JavaScript variables.

💡Fragment

A React Fragment is a component that lets you group a list of children without adding extra nodes to the DOM. The video discusses the use of fragments in JSX to wrap multiple elements, allowing them to be returned from a component function without creating unnecessary DOM elements.

Highlights

Introduction to JSX, a specification that allows embedding HTML within JavaScript, commonly used with React.

JSX is not exclusive to React but is fundamental to it, making it essential for anyone learning React.

JSX enables the combination of HTML and JavaScript, which traditionally were separate and had poor compatibility.

Demonstration of setting up a React project using Next.js, a framework that simplifies React learning.

Explanation of JSX syntax and how it differs from HTML, including the use of `className` instead of `class`.

JSX allows for the direct embedding of variables into the markup, making it highly versatile.

The use of `dangerouslySetInnerHTML` in JSX to embed raw HTML without escaping.

Attributes in JSX can be dynamically output, unlike static HTML attributes.

Introduction of React Fragments, which allow multiple elements to be returned without adding extra nodes to the DOM.

The special syntax for comments in JSX, which differs from HTML comment syntax.

The ability to define and apply styles dynamically within JSX, using JavaScript objects.

The importance of using tools to convert HTML to JSX for easier integration into React projects.

The convenience of JSX for developers familiar with HTML, despite initial learning curve.

The presentation of the book 'Starting with React Practical Introduction' by Yamada Yoshihiro, covering React basics to Next.js app development.

Emphasis on React and Next.js as essential subjects for front-end developers.

Encouragement for viewers to experiment with JSX and integrate it into their projects for practical experience.

The presenter's intention to continue providing information on React, Next.js, Astro, and WordPress in future content.

A call to action for viewers to subscribe to the channel for more updates on React and related technologies.

Transcripts

こんばんは、ともすたのたにぐちです。

今日はReactの話をしていきたいと思うんですけれども

その中でもですねこちらJSXというものについて

ご紹介していきたいと思います

今日はですねこちらの書籍

これから始めるReact実践入門

コンポーネントの基本からNext.jsによるアプリ開発まで

というですね

山田 祥寛さんが執筆された

ソフトバンククリエイティブさんの書籍

こちらが発売になったんですけれども

こちらですね一冊いただきましたので

参考にさせていただいて

今日はですねその中でチャプター2のところでですね

JSXの基本というところがあるので

そちらをですね参考にさせていただきながら

こちらの講座作らせていただきました

ありがとうございます

ということでこの JSXというものなんですけれども

これ何かと言いますとJavaScriptの中に

HTMLを組み込むことができるという規格になります

Reactだけのものではないんですけれども

基本的にはこのReactでよく使われる文法になるので

Reactを学習するときにはこのJSXについてもですね

慣れていかないといけないよということになります

要は、従来はHTMLとJavaScriptというのは

別々のものですので非常にこう相性が悪くてですね

HTMLを書いてJavaScriptを書いてということをしていたんですけれども

それをこの中に組み込むことができちゃいますよ

というのが JSX というものですね

ですので非常にこう扱いやすくなりますし

JavaScriptで操作しやすくなるというのが特徴ということですね

ではちょっとさっそく触りながらですねやっていきたいと思うので

まずReactを準備していきましょう

こちらですねターミナルを準備していきます

macOSの方はアプリケーションの中の

ユーティリティのターミナルですね

Windowsの方はスタートボタンを右クリックして

Microsoft Terminalこちらを起動しておいてください

Node.jsが必要なので、Node.jsのインストールが終わったところから

スタートしていきたいと思います

こちら np m の -v としてバージョン番号が出れば OK ですね

まだインストールしてない方は「nodejs インストール」とか

検索していただければすぐ出てくるかと思います

ではやっていきましょう

npx create-next-app@latest と入力していきます

今ですねReactを学習する時に

ここnext-appとしていまして

これNext.jsっていうフレームワークを使ったものなんですけれども

今、Reactを学習する時には

基本的にはこのNext.jsを入れて学習していただくのが

手っ取り早いかなというところがありますので

ReactとNext.jsは同じようなものだと

考えていただければと思います

ではこれでEnterしていきましょう

で OK ですかということですね

まずプロジェクトの名前を入れていきます

next-appとかとしましょうか

好きな名前で結構です

TypeScript使いますかということですね

今日はどっちでも大丈夫ですマ

Noのままいきましょうか

ESLint使いますかですね

これ Yes にしておきましょうかね

Tailwind使いますかですね

まあこれも Yes にしておきましょう

srcディレクトリー使いますかですね

これも Yes にしておきましょうか

Appルーター使いますかは Yes にしておきます

さあこんな感じですかね

customize the default import aliases

これは No のままで結構です

こんな感じでですね質問に答えていって

プロジェクトを作っていきます

これで準備できましたら next-app という

ディリクトリーができあがっていますので

これをですね Visual Studio Code で開いていきましょう

code . ですね

これで今作ったディリクトリーを

Visual Studio Codeで開くことができました

さあそしたらですねこちら見ていきましょう

src フォルダーの中のappフォルダーの中ですね

この中に page.js というファイルがあるんですけれども

ここがですねトップページの HTML を司っているところになります

これをブラウザーで見ていきましょう

ターミナルを起動して

ここで npm run dev と入力していきます

そうするとですねこちら

ローカルサーバーですね起動するので

これをですね見ていきましょう

こんな感じでページが表示されました

こちらの page.js が表示されている状態ということですね

さあではですねちょっとここでやっていきたいと思うんですけれども

今ですねまあここに書かれているのが

実際には JSX なんですが

ちょっと一旦全部消しちゃいたいと思います

この5行目のところですね main タグというのが始まっているので

この辺全部消していっちゃいましょう

ざーっと消していきます

ここですね main タグ閉じるのところまで消していきましょう

あと CSSがちょっとかかっているんですね

これで今ちょっと何もないですよということで

エラーが出ていますけれども

あとこちらですね globals.css というところでですね

CSS がかかっているので

これもちょっと消していきたいと思います

4行目から下ですね

これを全部消しちゃいましょう。

さあではこれでですね実際にやっていきましょう

page.js の方ですねこちらにこんなふうに書いていきます

p タグですね

で例えば「こんにちは」としていきましょう

で保存します

さあそうするとですね、これだけで

ページに表示されました

今ですねここよく見ていただくとわかるんですけれども

これ HTML のファイルではありません

そもそもが .js のファイルですよね

かつ3行目にですね

export default function Home() などと書かれていて

その関数というのが始まっていますけれども

JavaScriptの内部なんですよね

ですが、ここにこのように普通に HTML を書くと

そのままですね画面に表示されるよというのが

JSX というものになります

実際ですね生成される HTML もこんな感じ

きれいな p タグが生成されています

なんでこんなことができるのかというのは

普通にですね JavaScript を作っていたら

こんなことは、もちろんできないんですけれども

今 Next.js というフレームはこう使ってですね

中に React が入っていますので

それがですねこちらを処理してくれているよということになります

で JSX はですね HTML とは厳密には違うので

ちょっとですね差があるんですね

例えば、ではここにですねもう1つ p タグを入れまして

「ともすたへ」などとしましょう

保存します

そうするとですねこれエラーになっちゃうんですね

何かと言いますと

Unterminated regexp literalと書かれているんですけれども

何のこっちゃかもしれないんですが

これ終わってないですよということですね

どういうことかと言いますと

まずですね JSX の基本的なルールとして

この return の中にかける HTML の要素は1つだけ

というルールがあります

今ですねこれ p タグ1つあるんですけれども

1つの時はこれルール違反ではありません

問題ありません

なんですが2つ書くとですね

これ2つの要素がリターンの中に入ってしまっているので

これはダメですよということになります

いくつかやり方が

どうするかなんですけれどもあります

例えば1つのやり方としては

このdiv というタグですね

こういったレイアウトに影響しないタグでですね

全体を囲ってあげる

そうするとこのようにきちんと表示されるようになります

ただこれはですねちょっとデメリットもありまして

実際に生成される HTML の方ですね

こちらにもこの div タグというのができてしまうんですね

特にレイアウトとかに影響はないんですけれども

ただですねちょっとこう気持ち悪いところがあったりですとか

まあCSSによっては影響が出てきてしまう可能性があります

こういう場合どうするかなんですけれども

1つのやり方としてですね

React Fragmentというんですけれども

こういうですね非常に特殊なタグが使えます

これですね、 、 という形で

HTML のタグとも言えないようなものなんですが

これで囲ってあげると

ちゃんとですねエラーにならないですね

これはですね HTML のソースを見ても

何もですね出力されていません

JavaScript 特に React の方でですね

これはちゃんと処理してから出力してくれるので

こういうふうにきれいな HTML になってくれます

これですね実はあるものの省略でして

っていうですねちょっと特殊なタグがあって

これのですね略称なんですけれども

Next.jsの場合ですね

この React っていうオブジェクトが標準ではないので

not defined ということで

エラーになってしまうんですね

Reactっていうのをここでロードしてあげればいいんですけれども

この省略系の方が使いやすいかなと思いますので

省略系を使っていただいていいかなと思います

ということで複数のですね要素を JSX で表現したいときには

この React Fragment ですね

それか divタグとかarticleタグとか

そういったレイアウト系のタグをですね

1つ入れてあげるといいかなというところがあります

さあもう1つがですね

例えばこう hr というタグを使ってですね

罫線ですねを引きたいという場合なんですけれども

これもですねエラーになってしまいます

これ何かと言いますと

このいわゆる空要素ってやつですかね

終了タグがないタグがあるんですけれども

その場合ですねこの HTML の普通の書き方ではできません

XHTML って昔の規格があるんですけれども

その書き方をしないといけないんですね

/> でこうするとですね

ちゃんとこのように罫線が出ているんですけれども

空要素の時はですね

この /> 記号で閉じてあげるという

XHTML の書き方をしてあげましょうねということになります

続いてがですね属性にもいくつかですね変化があるんですね

例えばよく使うのがこの class っていう属性よく使うかと思います

例えば greeting とかとしましょう

でじゃあこの greeting というものに対してですね

こう文字を赤くしたいなということであれば

globals.css の方にですね

こちら greeting というクラスを

これですね color を red にしますよとかって書きました

そうするとこう赤が反映されるわけなんですけれども

実はですねこれちょっと正しくありません

正しく画面には表示されているんですけれども

デベロッパーツールの方で見るとですね

ちょっとおかしいなことが起こります

デベロッパーツールでここですねエラーが1件起こってます

見ていくとこんなエラーですね

DOM property 'class' が invalid 正しくないですよということですね

でもしかしたら className のことですかと

書かれているんですけれども

これもですね JSX の特徴の1つですね

class っていうのが JavaScript の用語と被ってしまっているので

使えません

なので JSX では class は className という名前に変わっています

なので普通に className に変えてあげるだけなんですけれども

こうですねで、赤いままきちんと表示されていて

これだと CSS のですね

エラーも表示されなくなるよということになります

画面がですねうまく表示されちゃうので

ちょっとですね見落としがちなんですけれども

プログラムとか組んでいくとですね

エラーになったりしますので気をつけてください

他にもですねいくつかありまして

for 属性が使えないので

htmlFor になったりとかですね

いくつか変化する場所があります

でこのあたりはですね HTML で普通に組んでしまったものを

JSX にしたいなという場合には

これをですねそれぞれ変更しないといけないんですけれども

こういったものはですね結構ツールが提供されています

例えばこれ transform というちょっと適当なですね

サービスを探しただけなんですけれども

HTMLをこちらに貼り付けてあげると

こっちにですね JSX として吐き出したものというのが出力されます

例えば class のところが className に変わったりですね

style が書き方が変わったりですとか htmlFor に変わったりですとか

そういった形でですね JSX で正しい書式に書き換えてくれるので

こういったツールを使ってあげるのが

一番早いかなと思いますね

さあそしてコメントの入れ方もですね

ちょっと違うんですね

HTML ではコメントをこのようにですね

コメントを入れることができるんですけれども

これですね残念ながらこちらではエラーになってしまいます

なぜかと言いますとこの ! とかがですね

JSX では使えないので

じゃあどうするかですが

こんなコメントになります

{/* そしてこちらは */} という形になります

これ JavaScript のですねコメントですね

こちら HTML に見えてるんですが

今この中って実は JavaScript ですので

JavaScript のコメントを書くようということになります

ちょっとユニークなのが

実はこのタグの中とかにですね

このようにコメントを書くことができるんですね

// とかとして p タグとかって書いてあげると

これですねコメントとしてきちんと機能しています

こうですね特に変化はないんですけれども

こんな書き方ができるのも JSX っていうのが

HTML に似ているんだけれども

実はちょっと違うよというところの一つかもしれません

ということでまあ JSX ですね

いくつかちょっと違いがあるので

HTML に慣れている方だとですね

JSX ちょっとこう違和感があったり

気持ち悪いなって感じるところはあると思うんですけれども

JSX をですね React ですとかこの Next.js で使えるようになると

どんなところが便利かといいますと

まず1 つが変数をそのまま埋め込むことができるよということですね

例えばちょっとやってみましょう

こちらですね上のところで、これいらないですね消しちゃって

const としていきますね

で name として自分の名前例えば入れたとしましょう

そしたらこの name っていう変数をですね

画面に出力したいなと思いました

その場合ですね

これまでの HTML を JavaScript で操作するとかですと

まあここに id 属性を振ってですね

で getElementById とかでですね

いろいろこう書いていかないといけなかったんですけれども

こちら JSX をですね使っている場合は

こんな風に書くことができます

これで画面を出力すると

ここがちゃんと たにぐちまこと さんになっていますよね

この {name}、マスタッシュ構文とかよく言いますけれども

{ } で変数の名前を囲ってあげると

文章の中にこの準備したですね

変数をそのまま埋め込むことができますよというのが

JSX の非常に便利なところかなと思います

ただですねここもちょっと注意が必要なのが

例えばですねこの中に HTML を組み込んだとします

ここで として太字にしましょうということですね

そうするとですねこちら埋め込んだ状態だと

ここですね まこと さんということで

タグがですねそのまま出力されます

これいわゆるエスケープというのがされているという状態ですね

HTMLをエスケープしないでそのままですね

表示したいなという場合にはこんな風に書くことができます

例えばここですね {name} さんのところを

タグで囲っていきましょうか

dangerouslySetInnerHTML

ちょっと長いですね

このように dangerouslySetInnerHTML というものにですね

入れることができるんですけれども

__html: name と入れていきます

とこういう形で書いていきます

そうするとですねこれ今保存すると

ここ まこと というところがですね

太字になっているのでお分かりの通り

この タグのですね

この中に HTML がそのまま入って

これはエスケープされないよということになります

このですね dangerouslySetInnerHTML という属性の部分ですね

このように書く必要があるよということです

これはもう決まり文句としてですね

覚えてしまうと早いかなと思います

また逆に言うとですね

基本的にはここでエスケープされて表示されるので

安全性が高いよということでもあります

どんどん行きましょう

続いて属性もですね動的に出力することができます

例えばではここではですね const link としましょうか

https://tomosta.jp と入れていきますね

このリンクという変数ですね

これを使っていきたいと思うんですけれども

例えばこの「ともすたへ」というところにですね

リンクを貼っていきましょう

href ですねこの属性のところに

今のものを埋め込んでいきます

linkですね「ともすたへ」のところを タグで囲っていきましょう

今ちょっと色が変わらないので分かりにくいんですけれども

「ともすたへ」 のところにリンクが張られていて

ともすたのサイトにリンクが張られています

さあこれちょっともう一度見ていきますと

このリンクというところに URL が入っていますよね

属性のところなんですけれども

でここに {link} を埋め込んでいると

気をつけないといけないのがここですね

HTML の属性なので " で囲いたくなってしまうんですが

これ囲うとですねうまく動かなくなります

リンクがこう張られてない状態ですね

なので変数を埋め込むときには

" で囲わないというのが約束になります

これですね囲わなくても HTML 出力されている時は

" が自動的に入っているのでご安心ください

このようにですね属性を動的に入れることができるんですけれども

JSX はですねもっと便利な機能があります

まとめて入れることができるんですね

例えばちょっとここを変えていきましょう

リンクをですねオブジェクト形式にしていきます

例えば href属性これにですね https://tomosta.jp を入れる

そして例えばtarget属性ですね

これブラウザーを新しく開くかどうかみたいのを

決めることができるんですけれども

これを _blank ということで新しいタブを開きますということですね

例えばtitle属性をですね

ともすた などにしておきましょうということで

さあこれでですね

今この link っていう中にたくさんのですね

属性が一気に入った状態になります

でこれをですね

ここに出力していきたいんですけれども

この時ですねこんな書き方ができます

{...link} としていきましょう

さあこれで見ていきます

そうするとここですね

リンクは張られています

HTML のソースを見ていきましょう

そうするとhref属性 target属性と title属性ですね

それぞれこのようにきちんと入っています

今のですねちょっともう一度見ていきますと

この書き方ですね {...link} というふうに書いて

このリンクというのが

上のところでオブジェクトとして定義されています

hrefとtargetとtitleそれぞれを定義しているんですけれども

これによってですね

それをまとめてここに書き出すことができるよということになります

例えばですねいわゆる論理属性ですかね

属性名だけを書くっていうのがあったかと思うんですけれども

例えば disabled というやつですね

書き出したい時はこれ true というのを値を入れてあげます

そうするとですねこちらの出力されるタグの方も

ここですね disabled属性がこのように表示されています

当たり前ですけれどもここですね false にしてあげると

生成される HTML からは属性名も外れていくよということですね

ここでですね属性も動的に制御することができますので

まあこの辺でですねプログラムであらかじめまとめておいて

まあそれを HTML の方に出力するという形ができます

あとスタイルシートもですねできます

const styles = {

例えば color をここでは blue にしましょうと

fontSize を例えば 1.5rem などとしましょうと

ここまでですねまたちょっと書き方が特殊なので

気をつけていただきたいんですけれども

まずですねここですね fontSizeですね

CSS のプロパティだとこれ font-size と - 区切りなんですけれども

- 区切りがですね JSX の中では使えません

fontSize とこのキャメルケースっていうんですけれども

二文字目が大文字になるという書き方ですね

このように書いていく必要があります

そうするとこの styles というところでですね

スタイルシートが定義されているので

先ほどのこの部分ですかね

ここに style= として styles というふうに書いていきます

さあそうするとこちら CSS が効きましたね

検証するときちんとですねここの p タグのところに

color: blue だよと

で font-size= 1.5rem だよと

font-size というプロパティもちゃんと - 区切りに変わっています

こんな風にですねスタイルシートも

動的に吐き出すことができますよということですね

実際にはですねこちらスタイルシートですね

インラインで書いてしまうと

色々と扱いにくくなってしまいますので

先ほどみたいにですね

この className の方で class を割り振って

それを CSS のファイルでですね

こう書いていくというのがいいかなと思いますけれども

とはいえなんかプログラムでですね

色を変えたりするときにはこういった書き方もいいかなと思います

ということでいかがだったでしょうか

JSX ちょっとですね最初は非常に扱いにくいなと

いうふうに感じるところはあるとは思うんですけれども

とはいえまこの JavaScript ですね HTML をいじれるというのは

非常にですねメリット大きいかなと思いますので

まずはですね少しいじってみていただいて

慣れてみていただくといいかなと思います

HTMLで組んでしまったものは

先ほどの通りこの HTML を JSX に変換するツールですね

こういったものを使っていただくと変換できますので

それで既存のですねウェブサイトとかも

こちらの JSX に持ってきて

Next.js 化するというような

プロジェクトもやってみるといいかもしれません

ということでですね今回改めてご紹介すると

ここでから始める React 実践入門

コンポーネントの基本から Next.js によるアプリ開発まで という書籍

今日はですねもう本当に一部ですねご紹介をしました

書籍ですね今私の手元に届いているのが

非常に分厚い書籍となっていて

かなりですねじっくりと勉強できる書籍になっています

まあ React と Next.js はですね

今フロントエンドをやるには

結構必須の科目になっていますので

ぜひですねちょっとこの機会に手に取っていただいて

学習してみていただければなと思います

僕の動画でもですね

引き続き React ですとか Next.js

あとまあ Astro とかですね

WordPress とかそういった情報もお届けできればと思いますので

興味ありましたらぜひチャンネル登録していただければと思います

ということで本日もご視聴ありがとうございました