プログラミング

JavaScript

Next.js 入門(2) ~ルーティングとページ移動~

ルーティングとは Next.jsのようなWebアプリケーションフレームワークにおける、複数のページを作成しそれらに決まったURLを割り当ててアクセスできるようにする仕組みのこと。Next.jsには2つのルーティングの仕組みが用意されてます。...
JavaScript

Next.js 入門(1) ~Next.jsを触ってみる~

Next.jsでフォームを作ってみる 'use client' // Reactのステートを使うときに必要なもの import Image from "next/image"; import {useState} from 'react' ...
CSS

Tailwind CSSの主なクラス

Tailwind CSS とは Tailwind CSSは、モダンWebサイトのデザインを簡単に生成できるCSSフレームワークのこと。デフォルトで多数のクラスが定義されていて、それらを指定するだけで基本的なデザインが作成できます。 <h1 ...
JavaScript

React.js入門(3) ~コンポーネントの活用~

データの一覧表示 JSXには繰り返し表示する構文がありません。{}を使ってJavaScriptのコードを記述し表示させることはできるので、配列の"map"メソッドを使って表示する。 {配列.map((引数) => { return <JSX...
JavaScript

React.js入門(2) ~ステートとフック~

ステートで値を保持する 表示しているコンポーネントをリアルタイムに操作してみる。画面をクリックしたら表示の値が変わるやつ。 .clickable { cursor: pointer; font-size: 50px; } function ...
JavaScript

React.js 入門(1) ~関数コンポーネント~

Reactはコンポーネント(部品)を組み合わせて作成される。コンポーネントには、クラスを利用するものと関数として定義するものがある。クラスベースのコンポーネントは設計が複雑になるので、最近はあまり使用されない。関数コンポーネントの方が簡単に...