すべてのカテゴリ

React の「部品」のライフサイクルとリファレンスReact でも、表示に利用する「部品」にはライフサイクルがあります。Vue の公式チュートリアル（英語版）では、この「部品」のライフサイクルをリファレンスの機能を使って体験するステップがありました。React でも似たようなやり方で同じような機能が実現できます。React の表示の更新の例外これまで紹介してきたように、React で表示データが更新に合わせて表示も更新する場合には、「ステート」を利用して管理するのが基本です。 今回取り上げるれでは、例外的にステートを利用しないでも表示の更新ができる例です。import React, { useEffect } from "react";import "./styles/step9.css";export default function Step9() {  return (    <React.Fragment>      <div className="step9">        <p>hello</p>      </div>    </React.Fragment>  );} Vue のチュートリアルと同様に、最初は、単純に「hello」を表示するように、直接、HTML に相当する部分（JSX)に「hello」を書いて表示させています。当然、表示は、「hello」が表示されます。この記述を変更して、HTML に相当する部分で指定した、「hello」を「mounted!」に上書きします。 やり方は

Facebook投稿支援アプリにReact/Vueは必要か (2)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、シンプルにHTMLとJavascriptだけで実装してみました。アプリがシンプルなのでHTMLとJavascriptだけでも簡単に実装できました。この記事ではHTMLとJavascriptに加えてjQueryを利用してみました。少し前には利用が多かったjQueryjQueryは、フレームワークというよりは、Javascriptのライブラリという感じのものです。どう呼ぶかはこの記事ではあまり重要ではありません。何が便利かというと、JavascriptでHTMLで記述した部分の操作をシンプルに記述できるようになる点です。例えば、Javascriptの機能でHTMLのDOM(Document Object Model)を取得する場合には、const sample = document.getElementById("sample") と書いているのと同じ操作を以下のようなシンプルな記述に置き換えることができます。const sample = $('#sample') Javascriptのコーディングをシンプルにすることができるので、少し前はよく利用されていました。現在でも、DOM操作に特化したライブラリなどを作る際にはよく利用されています。最近は、Webアプリなどでは主流はReactやVue、或いはAngurarと言ったフレームワークになっています。しかし、Webページ