すべてのカテゴリ

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ページ

JavaScriptは、ウェブページのコンテンツやスタイルを動的に操作するための強力なツールです。**DOM（Document Object Model）**は、ウェブページの構造を表現するツリー状のデータ構造であり、JavaScriptはDOMを操作することで、ページの要素にアクセスし、変更を加えることができます。DOM操作の利点インタラクティブなユーザーエクスペリエンス: ボタンをクリックしたり、フォームに入力したりするなど、ユーザーの操作に応じてページを動的に更新することができます。ダイナミックなコンテンツ: データを動的に取得してページに表示したり、ユーザーの行動に基づいてコンテンツを変更したりできます。* ページの最適化: JavaScriptでDOMを操作することで、ページの表示速度を向上させることができます。DOM操作の基本的な方法要素の取得: `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()`などのメソッドを使って、特定の要素を取得します。要素の変更: `innerHTML`, `textContent`, `style`などのプロパティを使って、要素の内容やスタイルを変更します。要素の作成: `document.createElement()`を使って新しい要素を作成し、`appendChild()`を使って既存の要素に追加します。要素の削除: `removeChild()`を使って要素を削除します。イベントリスナー: `addEventL