すべてのカテゴリ

React で条件によって表示を変えるには？React で変数の値（状態）によって表示内容を変える方法を紹介しています。React の場合は、HTML に相当する JSX の記述が Typescript (Javascript)の一部なので、Typescript(Javascript)の書き方を使って表示を切り替えます！React は全てプログラム！Vue の場合には、HTML の記述の部分にもプログラム的な要素を書けるようにして「_v-if_」を使って表示の切り替えをおこなっていました。 React の場合には、HTML に相当する部分（JSX）は Typescript（Javascript）の一部なので、表示の切り替えには、Typescript（Javascript）を使って切り替えます。Typescript(Javascript)の「xxx ? OOOO : _XXXX_」を使って切り替えます。 この記述は、「_xxx_」が真（true）の場合は、「_OOOO_」、「_xxx_」が偽（false）の場合には、「_XXXX_」という処理を行う場合に使います。 今回は、この「_OOOO_」と「_XXXX_」の部分に HTML に相当する JSX の記述を入れて利用します。以下が Typescript を利用した実装例です。import React, { useState } from "react";import "./styles/step6.css";export default function Step6(): JSX.Element {  const [awesom

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法

Facebook投稿支援アプリにReact/Vueは必要か (3)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、jQueryを利用して実装してみました。プログラムでやっている事はほぼ同じですが、記述をシンプルにすることが可能になりました。この記事では、Webアプリやサービスの開発によく利用されるReactを使って実装してみました。Reactの実装はnpmを利用する場合が多い！Webアプリやサービスの実装でReactを利用する場合は、npmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。 このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。今回は、通常のHTMLとJavascriptの実装や、jQueryとの比較も考えているので、敢えてnpmを使わずに、jQueryの場合と同様に、CDN(Contents Delivery Network)で必要なモジュールをHTMLで記述したWebページに取り込んで実装をしてみました。ReactをCDNで利用する場合以下のようなリンクをHTMLに記述して利用します。<script      crossorigin      src="ｈｔｔｐｓ://unpkg.com/react＠17/umd/react.production.min.js"></script><script    crossorigin    src="ｈｔｔｐｓ://unp