記事一覧
Mantine入門6 ブログ概要入力フォームを作成しよう
前回のカード内容（タイトル、日付、タグ、概要）と、カードからリンクされる記事本体へのリンクを設定するフォームのページを作成します。
カードの内容は違う記事だとしても同じJSONファイルに記載していきます。カードをタグや日付で並べ替えたり、切り替えたりします。
（記事の一時保存、記事作成ページは、後で追加します。記事自体は、記事ごとに個別にJSONファイルに保存します。）
フォームの作成タイトル
Mantine 入門5 トップページに動きをつけよう
前回のトップページに動きをつけます。具体的には下記を実施します。
ダークモードの実装
スマホ用、タブレット用、PC用の表示
ダークモードまずはダークモードです。まずは__app.tsxで以下のように手動でダークモードを設定してみます。
import { AppProps } from 'next/app';import Head from 'next/head';import { Mant
Mantine 入門4 ブログトップページの構成と主要パーツの選定
個人ブログサイトは下記で構成することにします。
トップページ
コンテンツ表示ページ
コンテンツ作成ページ
トップページを作っていくまずは、今回はトップページの見た目を作っていきます。制御は次回。
トップページのイメージ
中央コンテンツの他、ヘッダー、フッター、ナビゲーションバー（左）に持ちます。
中央にはキャッチーな写真とページ概要、記事カード（リンク）を配置します。
ヘッダーには
Mantine 入門3 主要パーツ一覧
ここではMantine Coreコンポーネントの概要を一覧で示します。
MANTINEの公式ホームページの左サイドーバーの目次のところにMANTINE CORE を探してクリックするとそれぞれのコンポーネントにアクセスできます。
Layout一覧AppShell
ヘッダとナビゲーションをもつ骨格です。
AspectRatio
子要素のImageやIframのアスペクト比を設定すると、サイズを自
Mantine入門 2 スタイルを書く
ライティングスタイルの概要Mantineはemotionを使ったcss-in-js libraryで構築されています。ライブラリの競合などを避けるため、可能な限りcreateStylesを作ってスタイリングすることを推奨します。
createStylesは以下のように使います。
import type { NextPage } from 'next'import { createStyles }
Mantine 入門1 セットアップとリンクの貼り方、テーマの概要
ゴールはNextjsをフレームワークとして、Mantineを使ってブログサイトをつくることです。
ただし、Mantineに焦点を当てるため、寄り道をいっぱいしようと思っております。
インストール
公式ページの初っ端にフレームワークを選択させるところがありますので、Nextjsをクリックします。typescript前提なので、下記で新しいプロジェクトを作って移動しておきます。
npx crea
React入門10 MUI on Next.js with TypeScript
今回はMUIを使います。MUIはボタンやフォームやレイアウトを簡単にCCSを書かなくても綺麗な装飾をしてくれます。
さて、MUIは色々なフレームワークに対応しています。下記に公式のテンプレートがあります。
今回はNext.js with TypeScriptですので、下記に従って、プロジェクトをダウンロード、インストールし、VScodeで開きます。
あなたがアプリケーションエンジニアで、ライブ
react入門9 with Nextjs
プロジェクトの作成sample-appというプロジェクトを作る際には
npx create-next-app sample-app --use-npm --ts
npm はnode package manager、つまりパッケージの管理ツールです。
npx はnode package executer、つまりパッケージの実行を行うツールです。すでにnextはインストールしているので、npxで実
react入門 8 with Nextjs
リアクトのwebフレームワークとしてユーザー数の多いnextjsを勉強することにしました。チュートリアルが素晴らしく、記事を書く意味を見出せないところもありますが、コンパクトに概要をまとめることを目的としたいと思います。
Next.jsとはVercel社がMITライセンスで提供する、Reactベースのフレームワークです。
以下の機能を提供します。
コンパイリング
reactスタイルで書かれた
react 入門 3
これまで、入門1では、コンポーネントという形でファイル毎に分割する方法、JSXによりHTMLの役割をjavascriptに組み込む方法、コンポーネントに読み取り専用の引数を与える方法を示しました。
入門2では、コンポーネントにそれぞれの内部の状態を変数として保持する方法、イベントにより内部の関数を呼び出し、状態変数を更新し表示に反映する方法を学びました。
入門3では、JSX内で、動的に別のJSXを
react 入門 2
カウンターをコンポーネントで作ろうボタンを押すと、カウントアップするカウンターを関数コンポーネントで作りましょう。
初めに、関数コンポーネントでのユーザーのボタンクリック時にイベントの扱いと、コンポーネント内部でカウントを保持する方法を学ぶことができます。
まずは通常のhtmlとES6での例を示します。
index.html
<!DOCTYPE html><html lang="ja">