tomy

tomy

Mantine入門6 ブログ概要入力フォームを作成しよう

前回のカード内容（タイトル、日付、タグ、概要）と、カードからリンクされる記事本体へのリンクを設定するフォームのページを作成します。 カードの内容は違う記事だとしても同じJSONファイルに記載していきます。カードをタグや日付で並べ替えたり、切り替えたりします。 （記事の一時保存、記事作成ページは、後で追加します。記事自体は、記事ごとに個別にJSONファイルに保存します。） フォームの作成タイトルはTextInput、タグはMultiSelect、概要はTextArea 日付

tomy

    • Mantine 入門5 トップページに動きをつけよう

      前回のトップページに動きをつけます。具体的には下記を実施します。 ダークモードの実装 スマホ用、タブレット用、PC用の表示 ダークモードまずはダークモードです。まずは__app.tsxで以下のように手動でダークモードを設定してみます。 import { AppProps } from 'next/app';import Head from 'next/head';import { MantineProvider } from '@mantine/core';expor

      tomy

      • Mantine 入門4 　ブログトップページの構成と主要パーツの選定

        個人ブログサイトは下記で構成することにします。 トップページ コンテンツ表示ページ コンテンツ作成ページ トップページを作っていくまずは、今回はトップページの見た目を作っていきます。制御は次回。 トップページのイメージ 中央コンテンツの他、ヘッダー、フッター、ナビゲーションバー（左）に持ちます。 中央にはキャッチーな写真とページ概要、記事カード（リンク）を配置します。 ヘッダーにはサイト名を入れます。レスポンシブで見えなくなったサイドバーを開くボタンがあります

        tomy

        • Mantine 入門3　主要パーツ一覧

          ここではMantine Coreコンポーネントの概要を一覧で示します。 MANTINEの公式ホームページの左サイドーバーの目次のところにMANTINE CORE を探してクリックするとそれぞれのコンポーネントにアクセスできます。 Layout一覧AppShell ヘッダとナビゲーションをもつ骨格です。 AspectRatio 子要素のImageやIframのアスペクト比を設定すると、サイズを自動調整します。 Center 子の要素を上下左右で中央よせします。 Cont

          tomy

        Mantine入門6 ブログ概要入力フォームを作成しよう

        tomy

        • Mantine 入門5 トップページに動きをつけよう

          tomy

        • Mantine 入門4 　ブログトップページの構成と主要パーツの選定

          tomy

        • Mantine 入門3　主要パーツ一覧

          tomy

          Mantine入門　2 スタイルを書く

          ライティングスタイルの概要Mantineはemotionを使ったcss-in-js libraryで構築されています。ライブラリの競合などを避けるため、可能な限りcreateStylesを作ってスタイリングすることを推奨します。 createStylesは以下のように使います。 import type { NextPage } from 'next'import { createStyles } from '@mantine/core'const useStyles = c

          tomy

          Mantine入門　2 スタイルを書く

          tomy

          Mantine 入門1 　セットアップとリンクの貼り方、テーマの概要

          ゴールはNextjsをフレームワークとして、Mantineを使ってブログサイトをつくることです。 ただし、Mantineに焦点を当てるため、寄り道をいっぱいしようと思っております。 インストール 公式ページの初っ端にフレームワークを選択させるところがありますので、Nextjsをクリックします。typescript前提なので、下記で新しいプロジェクトを作って移動しておきます。 npx create-next-app@latest --ts mantine-samplecd

          tomy

          Mantine 入門1 　セットアップとリンクの貼り方、テーマの概要

          tomy

          React入門10　MUI on Next.js with TypeScript

          今回はMUIを使います。MUIはボタンやフォームやレイアウトを簡単にCCSを書かなくても綺麗な装飾をしてくれます。 さて、MUIは色々なフレームワークに対応しています。下記に公式のテンプレートがあります。 今回はNext.js with TypeScriptですので、下記に従って、プロジェクトをダウンロード、インストールし、VScodeで開きます。 あなたがアプリケーションエンジニアで、ライブラリを作る側のエンジニアでなければ、アプリケーションの実現に必要なパーツ（マーク

          tomy

          React入門10　MUI on Next.js with TypeScript

          tomy

          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で実行しています。 コマンド詳細は下記です。主なオプションとしては　--ts（タイ

          tomy

          react入門9 with Nextjs

          tomy

          react入門 8 with Nextjs

          リアクトのwebフレームワークとしてユーザー数の多いnextjsを勉強することにしました。チュートリアルが素晴らしく、記事を書く意味を見出せないところもありますが、コンパクトに概要をまとめることを目的としたいと思います。 Next.jsとはVercel社がMITライセンスで提供する、Reactベースのフレームワークです。 以下の機能を提供します。 コンパイリング reactスタイルで書かれたコード、typescriptやJSXなど、人にわかりやすい記述のスクリプトなどを

          tomy

          react入門 8 with Nextjs

          tomy

          react入門7

          ツールの紹介良い家を作るには、用途やコスト、コンセプトに合った建材、家具を利用する必要があります。良いサービスを作るには、用途や用途やコスト、コンセプトに合ったツールを利用する必要があります。 フレームワーク、ツールチェーン reactを使ってweb開発する人は、ツールチェーン（フレームワーク）を使っていることが多いです。フレームワークはreactで書いたソースコードを実際にリリースする際に、裏でいろいろなこと（例えば最適化）をしたり、それぞれのフレームワーク上のエコシス

          tomy

          react入門7

          tomy

          react入門6

          reactルールの世界と外（JS）の世界の扉：useEffectreactは、javascriptを関数型プログラミングに拡張したような言語です。関数型プログラミングというのは、簡単にいうと、入力propsと内部状態stateが同じなら常に同じ出力 （同じレンダリング、子コンポーネント呼び出し）が出る関数のみでプログラミングしましょうと言う考え方です。そうすると全体としても同じ入力なら同じ出力が出るので、コンポーネント毎にテストすれば、システム全体としてバグが出にくいと言う思

          tomy

          react入門6

          tomy

          react入門5

          おさらい入門1： Webページを作る際、JSXと関数コンポーネントでES6よりシンプルにファイル分割する方法 関数コンポーネントから別の関数コンポーネントを呼び出し、呼び出したコンポーネントにリードオンリーの引数propsを渡す方法 入門2： 関数コンポーネントの内部に状態を保持する変数stateおよびstateを更新する関数を定義し、利用する方法（useState) reactでbuttonなどの要素のイベントを扱う方法 入門3： 動的にJSX（HTML要素お

          tomy

          react入門5

          tomy

          react入門4

          関数コンポーネントの設計指針関数コンポーネントは、というよりプログラム全般に言えることですが、コンポーネントあるいはモジュールあるいは一つのソースファイルを見たときに、意味が読み取れるシンプルさが求められます。 再利用の観点からのシンプルさ 同じことを2度記述しないことは、プロジェクト全体を見たときに、シンプルさにつながります。また、他のプログラムファイルやコードに依存しないこともシンプルさにつながります。また、独自に定義した入出力ではなく、広く知られている入出力の型、た

          tomy

          react入門4

          tomy

          react 入門　3

          これまで、入門1では、コンポーネントという形でファイル毎に分割する方法、JSXによりHTMLの役割をjavascriptに組み込む方法、コンポーネントに読み取り専用の引数を与える方法を示しました。 入門2では、コンポーネントにそれぞれの内部の状態を変数として保持する方法、イベントにより内部の関数を呼び出し、状態変数を更新し表示に反映する方法を学びました。 入門3では、JSX内で、動的に別のJSXを生成、選択する方法を示します。 JSXの動的な選択、追加や削除JSXのループ生

          tomy

          react 入門　3

          tomy

          react 入門　2

          カウンターをコンポーネントで作ろうボタンを押すと、カウントアップするカウンターを関数コンポーネントで作りましょう。 初めに、関数コンポーネントでのユーザーのボタンクリック時にイベントの扱いと、コンポーネント内部でカウントを保持する方法を学ぶことができます。 まずは通常のhtmlとES6での例を示します。 index.html <!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"/>

          tomy

          react 入門　2

          tomy

          react入門 1

          対象者reactの公式ガイドをベースに理解を深めていこうと思います。想定読者は、javascript,htmlに触ったことがあり、react を始めようかという人です。 reactが解決する課題reactが解決しようとしているweb開発上の目的は主に下記の3点だと考えられます。 webページの部品（コンポーネント）単位にファイル分割して、プログラムの見通しをよくする。（es6以前は、javascript自体にファイル分割の仕組みがなかった。） ファイル分割したコンポーネ

          tomy

          react入門 1

          tomy