progate React 1講座目

ProgateのReact
1講座目をやったメモ
気になったことをメモしたのでprogateと関係ないこともある

progate React 1講座目

目的

バックエンドをrailsにして
フロントエンドを何にしようかなと思った時に
progateにReactがあったのでやってみる

railsとreactの連携方法

聞いてもまだよくわからんが聞いてみる

RailsとReactを連携させる方法はいくつかありますが、一般的なアプローチはRailsをAPIサーバーとして使用し、Reactでフロントエンドを構築する方法です。以下に手順を示します。

新しいRailsプロジェクトをAPIモードで作成する:

rails new my_project --api

必要なgemをGemfileに追加し、bundle installを実行する:

gem 'webpacker'

Webpackerをインストールして、Reactを設定する:

bundle exec rails webpacker:install
bundle exec rails webpacker:install:react

Reactコンポーネントを作成する:

app/javascript/componentsディレクトリに新しいReactコンポーネントを作成し、そのコンポーネントをapp/javascript/packsディレクトリのエントリポイントファイルでインポートします。

例:

// app/javascript/components/HelloWorld.js
import React from 'react';

const HelloWorld = () => <div>Hello World!</div>;

export default HelloWorld;

// app/javascript/packs/application.js
import React from 'react';
import { render } from 'react-dom';
import HelloWorld from '../components/HelloWorld';

document.addEventListener('DOMContentLoaded', () => {
  render(<HelloWorld />, document.querySelector('#root'));
});

RailsのビューでReactコンポーネントを表示する:

Railsのコントローラとビューを作成し、ビューでjavascript_pack_tagを使用してReactコンポーネントを読み込みます。

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
  <%= javascript_pack_tag 'application' %>
</head>
<body>
  <%= yield %>
</body>
</html>

<!-- app/views/pages/index.html.erb -->
<div id="root"></div>

以上で、RailsとReactが連携されます。RailsはAPIサーバーとして機能し、Reactはフロントエンドを担当します。これにより、データをやり取りしながらモダンなシングルページアプリケーションを構築できます。

Reactとwordpressの違い

ReactとWordPressは、目的と使用方法が異なるため、比較は直接的ではありません。しかし、以下にそれぞれの特徴を表にまとめました。

特徴	React	WordPress
カテゴリ	JavaScriptライブラリ	コンテンツ管理システム(CMS)
目的	ユーザインターフェースの構築	Webサイトやブログの作成と管理
開発言語	JavaScript (JSX)	PHP
データ管理	APIや外部データソースとの連携が必要	独自のデータベースを持つ
難易度	開発スキルが必要 (JavaScript、Reactの知識)	より低い学習曲線 (非開発者でも利用可能)
柔軟性	カスタマイズ可能で、複雑なアプリケーションに適している	プラグインとテーマでカスタマイズが可能だが制限あり

Reactは、ウェブアプリケーションのフロントエンド開発に焦点を当てたJavaScriptライブラリです。一方、WordPressは、Webサイトやブログの作成と管理を目的としたコンテンツ管理システム(CMS)です。Reactは開発者向けで、カスタマイズ性が高く、複雑なアプリケーションに適しています。WordPressは、開発者と非開発者の両方に適しており、プラグインとテーマを使用して簡単にカスタマイズできますが、制限があります。

フロントエンドをrailsではなくReactを使うと何がうれしい？

Railsをバックエンドとして、フロントエンドにReactを使うことには、いくつかの利点があります：

ユーザーインターフェースの向上: Reactはコンポーネントベースのアプローチを採用しており、再利用可能なUIコンポーネントを構築できます。これにより、開発者は効率的にモダンなUIを構築できます。
高速なページロード: Reactは仮想DOM（Virtual DOM）を使用して、ページの一部分だけを効率的に更新できます。これにより、ページ全体を再ロードせずにコンテンツの更新が可能で、ユーザーエクスペリエンスが向上します。
SPA（シングルページアプリケーション）: Reactを使うことで、シングルページアプリケーションを簡単に構築できます。これにより、ページ間の遷移が高速になり、ユーザーエクスペリエンスが向上します。
豊富なエコシステム: Reactのコミュニティは大変活発で、多くのツールやライブラリが提供されています。これにより、開発者は自分のニーズに合った機能を簡単に追加できます。
スキルの再利用: Reactを学習することで、同じ知識やスキルをReact Nativeを使ったモバイルアプリ開発にも適用できます。

これらの利点を活用することで、RailsとReactを組み合わせたアプリケーションは、効率的な開発プロセスと優れたユーザーエクスペリエンスを提供できます。

初めてのReact

class App extends React.Component {
  render() {
    return (
      <h1>Hello React</h1>

class App extends React.Component {: Appという名前の新しいReactコンポーネントクラスを定義し、ReactのComponentクラスを継承しています。
render(): renderメソッドを定義し、コンポーネントが画面に表示する内容を記述します。
return ( : renderメソッド内で、コンポーネントが表示する要素を返します。

このコードは、"Hello React"というテキストを表示するシンプルなReactコンポーネントを定義しています。

Reactコンポーネント

Reactコンポーネントとは、Reactアプリケーションの構成要素であり、UI（ユーザーインターフェイス）の一部分を表現するための独立した再利用可能なコードの単位です。コンポーネントは、アプリケーションのUIを管理し、状態やプロパティ（props）を通じてデータを受け取り、表示する要素を生成します。

Reactコンポーネントは、親子関係を持つことができ、より大きなアプリケーションの構成要素として使用されます。これにより、コードの再利用性が向上し、アプリケーションの開発と保守が容易になります。また、コンポーネントは、状態管理やライフサイクルメソッドを利用して、アプリケーションの動的な振る舞いを実現することができます。

jsx

JSX（JavaScript XML）の名前は、JavaScriptとXML（eXtensible Markup Language）の組み合わせから来ています。JSXは、Reactアプリケーション開発で一般的に使われる構文拡張で、JavaScript内でXML風のマークアップを記述できるようにします。

JSXの目的は、コンポーネントツリーの構造を視覚的に表現しやすくすることで、開発者がUIの構築をより直感的に行えるようにすることです。JSXは、ReactコンポーネントでHTML要素を簡単に記述・組み合わせることができるため、コードの可読性が向上し、開発者がReactでのUI開発を効率的に行えるようになります。

jsxの範囲

class App extends React.Component {
  render() {
    return (  //ここまでjs
      {/* ここからjsx */}

Reactコンポーネントはなぜdivで囲む必要がある？

Reactコンポーネントでは、通常、一つの親要素（ルート要素）を返す必要があります。これは、Reactがコンポーネントツリーを効率的に構築・管理するための制約です。複数の要素を返す場合、それらを一つの親要素（よく使われるのがdivタグ）で囲むことで、この制約を満たすことができます。

ただし、React 16以降では、フラグメント（<></>または<React.Fragment></React.Fragment>）という機能が導入されました。これにより、不要なdivタグを追加せずに、複数の要素を返すことができるようになりました。フラグメントは、DOMに追加されることなく、子要素をまとめる役割を果たします。

例えば、次のようなコードが可能です。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <>
        <h1>Title</h1>
        <p>Description</p>
      </>
    );
  }
}

この場合、h1とpタグが兄弟要素として、余分なdivタグなしにレンダリングされます。

DOMとは？

DOM（Document Object Model）は、HTMLやXMLドキュメントの構造を表現するためのプログラミングインターフェースです。DOMでは、ドキュメント内の要素や属性をオブジェクトとして表現し、それらの関係性や階層構造を「ツリー」の形で表します。このツリー構造は、要素や属性の追加、削除、変更などの操作が可能であり、JavaScriptなどのプログラミング言語を使用して、ウェブページの動的な変更が容易に行えるようになっています。

DOMを利用することで、ウェブ開発者はウェブページ上の要素を選択、操作、イベントリスナーを追加するなど、さまざまな動的な機能を実装することができます。例えば、ユーザーがボタンをクリックしたときに特定の要素のテキストを変更する、画像のスライドショーを作成するなどの機能が可能です。

jsxのimgはなぜ/>にする必要がある？

JavaScriptの場合、/>は必ずしも必要ではありません。しかし、JSX（Reactで使用される）でHTML要素を表現する場合、単一のタグ（例: <img>、<br>など）を使うときは、タグを閉じるために/>が必要です。

これは、JSXがXMLに似た構文を採用しているためで、XMLでは開始タグと終了タグを持つ要素か、自己閉じタグ（<タグ名/>）のいずれかであることが要求されます。そのため、JSX内の<img>タグは、自己閉じタグとして<img />のように書かれることが一般的です。

これにより、JSXがHTMLとXMLの両方の構文に対応し、コードの可読性と整合性が向上します。

コードの可読性と整合性はなぜ向上する？

コードの可読性と整合性が向上する理由は以下の通りです。

一貫性: JSXはXMLに似た構文を採用しており、自己閉じタグ（<タグ名/>）を使用することで、開始タグと終了タグが存在しない要素に対しても明確に閉じられていることがわかります。これにより、コード全体の構文が一貫しており、コードの流れがわかりやすくなります。
エラーの発見が容易: 自己閉じタグを使用することで、開始タグと終了タグの間にネストされた要素が存在しないことが明確になります。これにより、タグの閉じ忘れや入れ子構造のエラーを発見しやすくなります。
可読性: 自己閉じタグを使用することで、要素が子要素を持たないことが明確になります。これにより、コードの構造を把握しやすくなり、他の開発者がコードを理解しやすくなります。

これらの理由から、自己閉じタグを使用することで、コードの可読性と整合性が向上します。

Reactはなぜrenderメソッド内のreturnの中にjsxを書く？

Reactでは、コンポーネントがブラウザに表示するべき内容を定義するために、renderメソッドを使用します。renderメソッド内のreturn文には、そのコンポーネントのUI構造を表すJSXを記述します。

JSXは、Reactのコンポーネント構造を簡潔かつ直感的に表現するためのシンタックス(書き方ルール)です。renderメソッド内でJSXをreturnすることで、以下のような利点が得られます。

一貫性: コンポーネントのUI構造を一箇所で定義し、管理することで、コードの見通しが良くなります。
可読性: JSXはHTMLに似た構文で記述されるため、UI構造を直感的に把握しやすくなります。
再利用性: renderメソッド内でJSXをreturnすることで、コンポーネントを他のコンポーネントで簡単に再利用できます。
効率性: Reactが内部で仮想DOMを使用して変更を検出し、必要な部分だけを更新するため、パフォーマンスが向上します。

これらの理由から、Reactではrenderメソッド内でJSXをreturnすることが一般的なパターンとなっています。

イベントとstate

ボタン作成

<button>ボタン</button>

イベント作成

<button onClick={() => {console.log("nunu")}}>ボタン</button>

state作成

stateの定義

  constructor(props){
    super(props);
    this.state = {name: "nunu"};
  }

stateの表示

  render(){
    return(
      <h1>こんにちは{this.state.name}さん</h1>
    );
  }

stateの変更

  <button onClick={() => {tshi.setState({name: "oo"})}}>
    oo
  </button>

カッコつけすぎ

オブジェクト

const user = {name: "nunu", age: 14};
console.log(user.age);

constructor(props)とは

constructor(props)は、Reactコンポーネントのクラスで使用される特別なメソッドです。このメソッドは、コンポーネントのインスタンスが作成される際に最初に実行されます。コンストラクタの主な目的は、コンポーネントの初期状態（state）を設定し、コンポーネントに必要なバインディングやメソッドの初期化を行うことです。

constructor(props)には以下の要素があります。

props: コンポーネントの親から渡されるプロパティ（properties）を表すオブジェクトです。これにより、コンポーネントは外部から渡されたデータにアクセスできます。

コンストラクタ内での典型的な処理は以下の通りです。

super(props): 親クラス（React.Component）のコンストラクタを呼び出すことで、this.propsをコンポーネント内で利用できるようになります。これは、コンストラクタ内で最初に実行する必要があります。
this.state: コンポーネントの初期状態を設定します。これは、オブジェクト形式でプロパティと値を持ちます。
イベントハンドラのバインディング: クラスコンポーネントでは、イベントハンドラをthisにバインドする必要があります。これにより、イベントハンドラ内でコンポーネントの状態やメソッドにアクセスできるようになります。例: this.handleClick = this.handleClick.bind(this);

注意すべき点として、Reactの関数コンポーネントではconstructorメソッドは使用されません。代わりに、useStateフックを使ってコンポーネントの状態を管理します。これにより、コードがシンプルで読みやすくなります。

メソッド呼び出し

<button onClick={() => {this.exFunk('oo')}}></button>

Reactはカッコ () {} つけすぎだけど大丈夫？

カッコや波括弧の多さは、慣れれば問題にはなりません。実際に多くの開発者がReactを使用して高品質かつ高効率なアプリケーションを開発しており、Reactは現代のウェブ開発において非常に重要なツールとなっています。

javascriptの()と{}の付け方まとめ

JavaScriptのカッコ()と波括弧{}は、それぞれ異なる用途で使用されます。以下の表にその用途をまとめました。

カッコや波括弧	用途	例
()	関数呼び出し	`myFunction()`
()	グルーピング演算子	`(a + b) * c`
()	アロー関数の引数	`(arg1, arg2) => { ... }`
()	条件演算子（三項演算子）のグルーピング	`condition ? (trueValue) : (falseValue)`
{}	ブロック（スコープ）の定義	`if (condition) { ... }`
{}	オブジェクトリテラルの定義	`const myObject = { key1: 'value1', key2: 'value2' };`
{}	関数の本体	`function myFunction() { ... }`
{}	アロー関数の本体	`(arg1, arg2) => { ... }`
{}	ReactのJSX式内でJavaScriptを埋め込むため	`<div>{myVariable}</div>`

この表を参考に、JavaScriptのカッコ()と波括弧{}の使い方を理解していただくことができるでしょう。もちろん、JavaScriptには他にもカッコや波括弧が使われる場面がありますが、これらは最も一般的な使用例です。

正誤

間違えたやつ

誤：this.state.setState(count: this.state.count+=1);
正：this.setState({count: this.state.count+1});

誤：<button onClick = {this.handleClick}>+</button>
正：<button onClick = {() => {this.handleClick()}}>+</button>

カニゲーム攻略日記ブログ

beatmaniaIIDXやハースストーンなどのゲーム攻略日記。主にまったり勢。２０１６年にIIDX皆伝になった

progate React 1講座目

progate React 1講座目

目的

railsとreactの連携方法

Reactとwordpressの違い

フロントエンドをrailsではなくReactを使うと何がうれしい？

初めてのReact

Reactコンポーネント

jsx

jsxの範囲

Reactコンポーネントはなぜdivで囲む必要がある？

DOMとは？

jsxのimgはなぜ/>にする必要がある？

コードの可読性と整合性はなぜ向上する？

Reactはなぜrenderメソッド内のreturnの中にjsxを書く？

イベントとstate

ボタン作成

イベント作成

state作成

オブジェクト

constructor(props)とは

メソッド呼び出し

Reactはカッコ () {} つけすぎだけど大丈夫？

javascriptの()と{}の付け方まとめ

正誤