MyMemoWiki - 利用者の投稿記録 [ja]

Mac

2024-12-31T00:57:19Z

Piroto: /* Appleシリコンを搭載したMacをセーフモードで起動する */

| [[Xcode]] | [[Swift]] | [[SwiftUI]] | [[Ubuntu]] | [[Docker]] |
==[[Mac]]==

{{amazon|4800712785}}

*[[Mac 使い方メモ]]

===基本===
----
====hostnameを変更====
# メニュー - 「システム環境設定」 - 「共有」
# 「編集」をクリックし、新しいローカルホスト名を入力

====シェルをbashに変更====
----
<pre>
% cat /etc/shells
/bin/bash
/bin/csh
:
% chsh -s /bin/bash
</pre>

===キーバインド===
----
====バックスラッシュの入力====
----
*option + ¥

====日本語入力====
----

*Windows風キー入力
{| class="wikitable"
|-
! scope="col"| キー
! scope="col"| 意味
|-
| ctrl + u
| ひらがな
|-
| ctrl + i
| カタカナ
|-
| ctrl + o
| 半角英数
|-
| ctrl + p
| 全角英数
|-
| ctrl + k
| 選択中の文節を縮める
|-
| ctrｌ + l
| 選択中の文節を伸ばす
|-
| 範囲選択し、かな×2回
| 再変換
|-
|}
=====日本語入力中に数字を半角入力する=====
*環境設定ーキーボードー日本語ローマ字入力ー入力ソースー「数字を全角入力」のチェックをOFF

====ツール====
=====画面キャプチャ=====
ctrl 長押し＋以下を行うと、クリップボードにコピーされる

*[shift]キー＋[command]キー＋[3]キーで画面全体を撮る
*[shift]キー＋[command]キー＋[4]キーで画面の一部を撮る
*[shift]キー＋[command]キー＋[4]キー→ [Space]キーでウィンドウ
*[shift]キー＋[command]キー＋[5]キー→オプション

=====動画キャプチャ=====
*音声を取得するには[https://github.com/mattingalls/Soundflower/releases Soundflower]をインストールし、shift + command + 5 のオプションから入力を指定

====キーボード記号====
----
*https://support.apple.com/ja-jp/guide/mac-help/cpmh0011/mac
[[File:Mac_keyboard_sign1.png|400px]]
[[File:Mac_keyboard_sign2.png|400px]]

===Finder===
----
====ショートカット====
*http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-mac-finder-with-keyboard-shortcut.html
=====実行(command+o)=====

=====ファイルのカット＆ペースト=====
# command+c
# option+command+v

====サイドバーにホームディレクトリを表示====
----
*メニューー環境設定ーサイドバー
====ターミナルから開く====
----
<pre>
$ open .
</pre>

====場所を指定して開く====
----
*Command + G で場所を入力
====システムフォルダを開く====
----
*一時的
**Command + G で場所を入力
*継続的
**以下のコマンドを入力、リブート
<pre>
defaults write com.apple.Finder AppleShowAllFiles YES
</pre>
[[File:Finder_show_all.png|400px]]

===高速化手法===
----
====メモリを解放====
----
<pre>
$ sudo purge
</pre>
*https://commte.net/6966
=====セーフブートモードで起動=====
----
セーフブートモードで起動すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Macmini reset=====
*システム終了します。
*電源コードを抜いて、15秒間待ちます。
*電源コードを差し直して、5秒間待ちます。
*電源ボタンを押して起動します。

====パフォーマンス改善====
*https://blog.avast.com/jp/guide-to-speeding-and-cleaning-mac
=====ディスクスキャン=====
*スキャンを実行するには、メニューバーの [移動] をクリックして [ユーティリティ] に移動します。ここで [ディスクユーティリティ] をクリックします。メインハードディスクを選択して [First Aid] をクリックします。
====SMC のリセット====
----
*着脱不能バッテリーを搭載した MacBook の場合、SMC をリセットするには、Mac を完全にシャットダウンする必要があります。次に、Mac の電源がオフになっている間に、キーボードの左側の [SHIFT] + [CONTROL] + [OPTION] キーを押しながら電源ボタンを押します。これらすべてのキーを 10 秒間押し続けます（指がつらないように気を付けてください）。キーを離し、通常どおりに Mac の電源を入れます。

===ディスク容量を増やす===
----
====このMacストレージを管理====
----
*https://support.apple.com/ja-jp/HT206996
*Apple メニュー  >「この Mac について」の順に選択し、「ストレージ」をクリックします。
*棒グラフの各セグメントは、ファイルのカテゴリごとのストレージ使用量の概算値を表しています。各セグメントの上にポインタを置くと、詳細情報が表示されます。
*ストレージ管理のウインドウには、ストレージを最適に使うための対策が「おすすめ」として表示されます
====セーフブートモードで起動====
----
[https://support.apple.com/ja-jp/guide/mac-help/mh21245/mac セーフブートモードで起動]すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Appleシリコンを搭載したMacをセーフモードで起動する=====
#Macで、アップルメニュー＞「システム終了」と選択します。
#Macが完全にシステム終了するまで待ちます。Macが完全にシステム終了すると画面が黒くなり、すべてのランプ（Touch Barのランプを含む）が消えます。
#「起動オプションを読み込み中」と表示されるまで、Macの電源ボタンを押したままにします。
#ボリュームを選択します。
#Shiftキーを押し続ける！ ->「セーフモードで続ける」をクリックします。
#コンピュータは自動的に再起動します。ログインウインドウが表示されたら、メニューバーに「セーフブート」と表示されます。

=====Intelプロセッサを搭載したMacをセーフモードで起動する=====
#Macを起動または再起動したらすぐにShiftキーを押したままにして、ログインウインドウが表示されたら放します。
#Macにログインします。
#もう一度ログインするように求められる場合があります。
#最初または2番目のログインウインドウのいずれかで、メニューバーに「セーフブート」と表示されます。

====Homebrew====
*[https://www.typea.info/tips_/index.php/Node.js#Homebrew_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB Homebrewのインストール]
*Homebrewのキャッシュ削除
----
<pre>

$ brew cleanup
</pre>

===管理===
----
====Remote Desktop====
----
=====[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]=====
----
*[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]

=====IME切り替え=====
----
*[[Windows]]にリモート接続し、IMEを切り替えるショートカットをIMEの設定から有効にする
[[File:mac_remote_win_ime.png|400px]]
=====バックスラッシュ入力できない問題=====
* https://qiita.com/KNaito/items/e4436cb73f9ff257394d
* https://blog.tsukumijima.net/article/mac-windows-keyboard-tweek/
* https://karabiner-elements.pqrs.org/
* https://karabiner-elements.pqrs.org/docs/

bundle_identifiers
* https://karabiner-elements.pqrs.org/docs/json/complex-modifications-manipulator-definition/conditions/frontmost-application/
*[https://www.typea.info/blog/index.php/2022/02/03/input_backslash_to_win_via_mac_remote_desktop/ MacリモートデスクトップからWindows¥入力]

====SSHポートフォワーディング====
----
*ssh -L {localhostからアクセスするポート}:{踏み台経由でアクセスしたいサーバーアドレス} {踏み台となるサーバー}
<pre>
$ ssh -L 10443:192.168.64.2:10443 hirotoyagi@delhi.local
</pre>
*上記でSSH接続した状態で、localhost:ポートに接続する

===画像===
----
====プレビューでトリミング====
----
トリミングを行いたい画像をダブルクリックすると、基本的にはプレビューが自動的に起動します。この画像の上でクリックをしたまま、引っ張ると四角く範囲を選択することができます。トリミングしたい部分で、クリックを離します。選択範囲に問題がなければ、command+Kを押してトリミングすることができます。
====プレビューで透過画像を作成する====
[[File:instant_alpha.png|300px]]

* command + x
*　範囲を切り取り、貼り付け

===TIps===
----
====スリープ====
----
*option + command + メディア取り出し

====古いOS用のアプリを入手する====
----
*https://filehippo.jp/

=====[https://filehippo.jp/mac/download_microsoft_remote_desktop/ Microsoft Remote Desktop]=====
=====[https://amzn.to/3vl3F1R Kindle for mac]=====

=====[https://developer.apple.com/download/more/ XCode]=====

====treeコマンドのインストール====

brew install tree

===トラブルシュート===
----
====Xcodeがインストール中で終わらない====
----
*いったんアンインストールしてから、AppStoreからインストール

===ツールインストール===
*[[Java SE]]
*[[Node.js]]
*[[Dart]]
*[[Flutter]]

Mac

2024-12-31T00:49:18Z

Piroto: /* Intelプロセッサを搭載したMacをセーフモードで起動する */

| [[Xcode]] | [[Swift]] | [[SwiftUI]] | [[Ubuntu]] | [[Docker]] |
==[[Mac]]==

{{amazon|4800712785}}

*[[Mac 使い方メモ]]

===基本===
----
====hostnameを変更====
# メニュー - 「システム環境設定」 - 「共有」
# 「編集」をクリックし、新しいローカルホスト名を入力

====シェルをbashに変更====
----
<pre>
% cat /etc/shells
/bin/bash
/bin/csh
:
% chsh -s /bin/bash
</pre>

===キーバインド===
----
====バックスラッシュの入力====
----
*option + ¥

====日本語入力====
----

*Windows風キー入力
{| class="wikitable"
|-
! scope="col"| キー
! scope="col"| 意味
|-
| ctrl + u
| ひらがな
|-
| ctrl + i
| カタカナ
|-
| ctrl + o
| 半角英数
|-
| ctrl + p
| 全角英数
|-
| ctrl + k
| 選択中の文節を縮める
|-
| ctrｌ + l
| 選択中の文節を伸ばす
|-
| 範囲選択し、かな×2回
| 再変換
|-
|}
=====日本語入力中に数字を半角入力する=====
*環境設定ーキーボードー日本語ローマ字入力ー入力ソースー「数字を全角入力」のチェックをOFF

====ツール====
=====画面キャプチャ=====
ctrl 長押し＋以下を行うと、クリップボードにコピーされる

*[shift]キー＋[command]キー＋[3]キーで画面全体を撮る
*[shift]キー＋[command]キー＋[4]キーで画面の一部を撮る
*[shift]キー＋[command]キー＋[4]キー→ [Space]キーでウィンドウ
*[shift]キー＋[command]キー＋[5]キー→オプション

=====動画キャプチャ=====
*音声を取得するには[https://github.com/mattingalls/Soundflower/releases Soundflower]をインストールし、shift + command + 5 のオプションから入力を指定

====キーボード記号====
----
*https://support.apple.com/ja-jp/guide/mac-help/cpmh0011/mac
[[File:Mac_keyboard_sign1.png|400px]]
[[File:Mac_keyboard_sign2.png|400px]]

===Finder===
----
====ショートカット====
*http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-mac-finder-with-keyboard-shortcut.html
=====実行(command+o)=====

=====ファイルのカット＆ペースト=====
# command+c
# option+command+v

====サイドバーにホームディレクトリを表示====
----
*メニューー環境設定ーサイドバー
====ターミナルから開く====
----
<pre>
$ open .
</pre>

====場所を指定して開く====
----
*Command + G で場所を入力
====システムフォルダを開く====
----
*一時的
**Command + G で場所を入力
*継続的
**以下のコマンドを入力、リブート
<pre>
defaults write com.apple.Finder AppleShowAllFiles YES
</pre>
[[File:Finder_show_all.png|400px]]

===高速化手法===
----
====メモリを解放====
----
<pre>
$ sudo purge
</pre>
*https://commte.net/6966
=====セーフブートモードで起動=====
----
セーフブートモードで起動すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Macmini reset=====
*システム終了します。
*電源コードを抜いて、15秒間待ちます。
*電源コードを差し直して、5秒間待ちます。
*電源ボタンを押して起動します。

====パフォーマンス改善====
*https://blog.avast.com/jp/guide-to-speeding-and-cleaning-mac
=====ディスクスキャン=====
*スキャンを実行するには、メニューバーの [移動] をクリックして [ユーティリティ] に移動します。ここで [ディスクユーティリティ] をクリックします。メインハードディスクを選択して [First Aid] をクリックします。
====SMC のリセット====
----
*着脱不能バッテリーを搭載した MacBook の場合、SMC をリセットするには、Mac を完全にシャットダウンする必要があります。次に、Mac の電源がオフになっている間に、キーボードの左側の [SHIFT] + [CONTROL] + [OPTION] キーを押しながら電源ボタンを押します。これらすべてのキーを 10 秒間押し続けます（指がつらないように気を付けてください）。キーを離し、通常どおりに Mac の電源を入れます。

===ディスク容量を増やす===
----
====このMacストレージを管理====
----
*https://support.apple.com/ja-jp/HT206996
*Apple メニュー  >「この Mac について」の順に選択し、「ストレージ」をクリックします。
*棒グラフの各セグメントは、ファイルのカテゴリごとのストレージ使用量の概算値を表しています。各セグメントの上にポインタを置くと、詳細情報が表示されます。
*ストレージ管理のウインドウには、ストレージを最適に使うための対策が「おすすめ」として表示されます
====セーフブートモードで起動====
----
[https://support.apple.com/ja-jp/guide/mac-help/mh21245/mac セーフブートモードで起動]すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Appleシリコンを搭載したMacをセーフモードで起動する=====
#Macで、アップルメニュー＞「システム終了」と選択します。
#Macが完全にシステム終了するまで待ちます。Macが完全にシステム終了すると画面が黒くなり、すべてのランプ（Touch Barのランプを含む）が消えます。
#「起動オプションを読み込み中」と表示されるまで、Macの電源ボタンを押したままにします。
#ボリュームを選択します。
#Shiftキーを押したまま、「セーフモードで続ける」をクリックします。
#コンピュータは自動的に再起動します。ログインウインドウが表示されたら、メニューバーに「セーフブート」と表示されます。

=====Intelプロセッサを搭載したMacをセーフモードで起動する=====
#Macを起動または再起動したらすぐにShiftキーを押したままにして、ログインウインドウが表示されたら放します。
#Macにログインします。
#もう一度ログインするように求められる場合があります。
#最初または2番目のログインウインドウのいずれかで、メニューバーに「セーフブート」と表示されます。

====Homebrew====
*[https://www.typea.info/tips_/index.php/Node.js#Homebrew_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB Homebrewのインストール]
*Homebrewのキャッシュ削除
----
<pre>

$ brew cleanup
</pre>

===管理===
----
====Remote Desktop====
----
=====[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]=====
----
*[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]

=====IME切り替え=====
----
*[[Windows]]にリモート接続し、IMEを切り替えるショートカットをIMEの設定から有効にする
[[File:mac_remote_win_ime.png|400px]]
=====バックスラッシュ入力できない問題=====
* https://qiita.com/KNaito/items/e4436cb73f9ff257394d
* https://blog.tsukumijima.net/article/mac-windows-keyboard-tweek/
* https://karabiner-elements.pqrs.org/
* https://karabiner-elements.pqrs.org/docs/

bundle_identifiers
* https://karabiner-elements.pqrs.org/docs/json/complex-modifications-manipulator-definition/conditions/frontmost-application/
*[https://www.typea.info/blog/index.php/2022/02/03/input_backslash_to_win_via_mac_remote_desktop/ MacリモートデスクトップからWindows¥入力]

====SSHポートフォワーディング====
----
*ssh -L {localhostからアクセスするポート}:{踏み台経由でアクセスしたいサーバーアドレス} {踏み台となるサーバー}
<pre>
$ ssh -L 10443:192.168.64.2:10443 hirotoyagi@delhi.local
</pre>
*上記でSSH接続した状態で、localhost:ポートに接続する

===画像===
----
====プレビューでトリミング====
----
トリミングを行いたい画像をダブルクリックすると、基本的にはプレビューが自動的に起動します。この画像の上でクリックをしたまま、引っ張ると四角く範囲を選択することができます。トリミングしたい部分で、クリックを離します。選択範囲に問題がなければ、command+Kを押してトリミングすることができます。
====プレビューで透過画像を作成する====
[[File:instant_alpha.png|300px]]

* command + x
*　範囲を切り取り、貼り付け

===TIps===
----
====スリープ====
----
*option + command + メディア取り出し

====古いOS用のアプリを入手する====
----
*https://filehippo.jp/

=====[https://filehippo.jp/mac/download_microsoft_remote_desktop/ Microsoft Remote Desktop]=====
=====[https://amzn.to/3vl3F1R Kindle for mac]=====

=====[https://developer.apple.com/download/more/ XCode]=====

====treeコマンドのインストール====

brew install tree

===トラブルシュート===
----
====Xcodeがインストール中で終わらない====
----
*いったんアンインストールしてから、AppStoreからインストール

===ツールインストール===
*[[Java SE]]
*[[Node.js]]
*[[Dart]]
*[[Flutter]]

Mac

2024-12-31T00:49:03Z

Piroto: /* Appleシリコンを搭載したMacをセーフモードで起動する */

| [[Xcode]] | [[Swift]] | [[SwiftUI]] | [[Ubuntu]] | [[Docker]] |
==[[Mac]]==

{{amazon|4800712785}}

*[[Mac 使い方メモ]]

===基本===
----
====hostnameを変更====
# メニュー - 「システム環境設定」 - 「共有」
# 「編集」をクリックし、新しいローカルホスト名を入力

====シェルをbashに変更====
----
<pre>
% cat /etc/shells
/bin/bash
/bin/csh
:
% chsh -s /bin/bash
</pre>

===キーバインド===
----
====バックスラッシュの入力====
----
*option + ¥

====日本語入力====
----

*Windows風キー入力
{| class="wikitable"
|-
! scope="col"| キー
! scope="col"| 意味
|-
| ctrl + u
| ひらがな
|-
| ctrl + i
| カタカナ
|-
| ctrl + o
| 半角英数
|-
| ctrl + p
| 全角英数
|-
| ctrl + k
| 選択中の文節を縮める
|-
| ctrｌ + l
| 選択中の文節を伸ばす
|-
| 範囲選択し、かな×2回
| 再変換
|-
|}
=====日本語入力中に数字を半角入力する=====
*環境設定ーキーボードー日本語ローマ字入力ー入力ソースー「数字を全角入力」のチェックをOFF

====ツール====
=====画面キャプチャ=====
ctrl 長押し＋以下を行うと、クリップボードにコピーされる

*[shift]キー＋[command]キー＋[3]キーで画面全体を撮る
*[shift]キー＋[command]キー＋[4]キーで画面の一部を撮る
*[shift]キー＋[command]キー＋[4]キー→ [Space]キーでウィンドウ
*[shift]キー＋[command]キー＋[5]キー→オプション

=====動画キャプチャ=====
*音声を取得するには[https://github.com/mattingalls/Soundflower/releases Soundflower]をインストールし、shift + command + 5 のオプションから入力を指定

====キーボード記号====
----
*https://support.apple.com/ja-jp/guide/mac-help/cpmh0011/mac
[[File:Mac_keyboard_sign1.png|400px]]
[[File:Mac_keyboard_sign2.png|400px]]

===Finder===
----
====ショートカット====
*http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-mac-finder-with-keyboard-shortcut.html
=====実行(command+o)=====

=====ファイルのカット＆ペースト=====
# command+c
# option+command+v

====サイドバーにホームディレクトリを表示====
----
*メニューー環境設定ーサイドバー
====ターミナルから開く====
----
<pre>
$ open .
</pre>

====場所を指定して開く====
----
*Command + G で場所を入力
====システムフォルダを開く====
----
*一時的
**Command + G で場所を入力
*継続的
**以下のコマンドを入力、リブート
<pre>
defaults write com.apple.Finder AppleShowAllFiles YES
</pre>
[[File:Finder_show_all.png|400px]]

===高速化手法===
----
====メモリを解放====
----
<pre>
$ sudo purge
</pre>
*https://commte.net/6966
=====セーフブートモードで起動=====
----
セーフブートモードで起動すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Macmini reset=====
*システム終了します。
*電源コードを抜いて、15秒間待ちます。
*電源コードを差し直して、5秒間待ちます。
*電源ボタンを押して起動します。

====パフォーマンス改善====
*https://blog.avast.com/jp/guide-to-speeding-and-cleaning-mac
=====ディスクスキャン=====
*スキャンを実行するには、メニューバーの [移動] をクリックして [ユーティリティ] に移動します。ここで [ディスクユーティリティ] をクリックします。メインハードディスクを選択して [First Aid] をクリックします。
====SMC のリセット====
----
*着脱不能バッテリーを搭載した MacBook の場合、SMC をリセットするには、Mac を完全にシャットダウンする必要があります。次に、Mac の電源がオフになっている間に、キーボードの左側の [SHIFT] + [CONTROL] + [OPTION] キーを押しながら電源ボタンを押します。これらすべてのキーを 10 秒間押し続けます（指がつらないように気を付けてください）。キーを離し、通常どおりに Mac の電源を入れます。

===ディスク容量を増やす===
----
====このMacストレージを管理====
----
*https://support.apple.com/ja-jp/HT206996
*Apple メニュー  >「この Mac について」の順に選択し、「ストレージ」をクリックします。
*棒グラフの各セグメントは、ファイルのカテゴリごとのストレージ使用量の概算値を表しています。各セグメントの上にポインタを置くと、詳細情報が表示されます。
*ストレージ管理のウインドウには、ストレージを最適に使うための対策が「おすすめ」として表示されます
====セーフブートモードで起動====
----
[https://support.apple.com/ja-jp/guide/mac-help/mh21245/mac セーフブートモードで起動]すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Appleシリコンを搭載したMacをセーフモードで起動する=====
#Macで、アップルメニュー＞「システム終了」と選択します。
#Macが完全にシステム終了するまで待ちます。Macが完全にシステム終了すると画面が黒くなり、すべてのランプ（Touch Barのランプを含む）が消えます。
#「起動オプションを読み込み中」と表示されるまで、Macの電源ボタンを押したままにします。
#ボリュームを選択します。
#Shiftキーを押したまま、「セーフモードで続ける」をクリックします。
#コンピュータは自動的に再起動します。ログインウインドウが表示されたら、メニューバーに「セーフブート」と表示されます。

=====Intelプロセッサを搭載したMacをセーフモードで起動する=====
+Macを起動または再起動したらすぐにShiftキーを押したままにして、ログインウインドウが表示されたら放します。
+Macにログインします。
+もう一度ログインするように求められる場合があります。
+最初または2番目のログインウインドウのいずれかで、メニューバーに「セーフブート」と表示されます。

====Homebrew====
*[https://www.typea.info/tips_/index.php/Node.js#Homebrew_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB Homebrewのインストール]
*Homebrewのキャッシュ削除
----
<pre>

$ brew cleanup
</pre>

===管理===
----
====Remote Desktop====
----
=====[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]=====
----
*[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]

=====IME切り替え=====
----
*[[Windows]]にリモート接続し、IMEを切り替えるショートカットをIMEの設定から有効にする
[[File:mac_remote_win_ime.png|400px]]
=====バックスラッシュ入力できない問題=====
* https://qiita.com/KNaito/items/e4436cb73f9ff257394d
* https://blog.tsukumijima.net/article/mac-windows-keyboard-tweek/
* https://karabiner-elements.pqrs.org/
* https://karabiner-elements.pqrs.org/docs/

bundle_identifiers
* https://karabiner-elements.pqrs.org/docs/json/complex-modifications-manipulator-definition/conditions/frontmost-application/
*[https://www.typea.info/blog/index.php/2022/02/03/input_backslash_to_win_via_mac_remote_desktop/ MacリモートデスクトップからWindows¥入力]

====SSHポートフォワーディング====
----
*ssh -L {localhostからアクセスするポート}:{踏み台経由でアクセスしたいサーバーアドレス} {踏み台となるサーバー}
<pre>
$ ssh -L 10443:192.168.64.2:10443 hirotoyagi@delhi.local
</pre>
*上記でSSH接続した状態で、localhost:ポートに接続する

===画像===
----
====プレビューでトリミング====
----
トリミングを行いたい画像をダブルクリックすると、基本的にはプレビューが自動的に起動します。この画像の上でクリックをしたまま、引っ張ると四角く範囲を選択することができます。トリミングしたい部分で、クリックを離します。選択範囲に問題がなければ、command+Kを押してトリミングすることができます。
====プレビューで透過画像を作成する====
[[File:instant_alpha.png|300px]]

* command + x
*　範囲を切り取り、貼り付け

===TIps===
----
====スリープ====
----
*option + command + メディア取り出し

====古いOS用のアプリを入手する====
----
*https://filehippo.jp/

=====[https://filehippo.jp/mac/download_microsoft_remote_desktop/ Microsoft Remote Desktop]=====
=====[https://amzn.to/3vl3F1R Kindle for mac]=====

=====[https://developer.apple.com/download/more/ XCode]=====

====treeコマンドのインストール====

brew install tree

===トラブルシュート===
----
====Xcodeがインストール中で終わらない====
----
*いったんアンインストールしてから、AppStoreからインストール

===ツールインストール===
*[[Java SE]]
*[[Node.js]]
*[[Dart]]
*[[Flutter]]

Mac

2024-12-31T00:48:21Z

Piroto: /* セーフブートモードで起動 */

| [[Xcode]] | [[Swift]] | [[SwiftUI]] | [[Ubuntu]] | [[Docker]] |
==[[Mac]]==

{{amazon|4800712785}}

*[[Mac 使い方メモ]]

===基本===
----
====hostnameを変更====
# メニュー - 「システム環境設定」 - 「共有」
# 「編集」をクリックし、新しいローカルホスト名を入力

====シェルをbashに変更====
----
<pre>
% cat /etc/shells
/bin/bash
/bin/csh
:
% chsh -s /bin/bash
</pre>

===キーバインド===
----
====バックスラッシュの入力====
----
*option + ¥

====日本語入力====
----

*Windows風キー入力
{| class="wikitable"
|-
! scope="col"| キー
! scope="col"| 意味
|-
| ctrl + u
| ひらがな
|-
| ctrl + i
| カタカナ
|-
| ctrl + o
| 半角英数
|-
| ctrl + p
| 全角英数
|-
| ctrl + k
| 選択中の文節を縮める
|-
| ctrｌ + l
| 選択中の文節を伸ばす
|-
| 範囲選択し、かな×2回
| 再変換
|-
|}
=====日本語入力中に数字を半角入力する=====
*環境設定ーキーボードー日本語ローマ字入力ー入力ソースー「数字を全角入力」のチェックをOFF

====ツール====
=====画面キャプチャ=====
ctrl 長押し＋以下を行うと、クリップボードにコピーされる

*[shift]キー＋[command]キー＋[3]キーで画面全体を撮る
*[shift]キー＋[command]キー＋[4]キーで画面の一部を撮る
*[shift]キー＋[command]キー＋[4]キー→ [Space]キーでウィンドウ
*[shift]キー＋[command]キー＋[5]キー→オプション

=====動画キャプチャ=====
*音声を取得するには[https://github.com/mattingalls/Soundflower/releases Soundflower]をインストールし、shift + command + 5 のオプションから入力を指定

====キーボード記号====
----
*https://support.apple.com/ja-jp/guide/mac-help/cpmh0011/mac
[[File:Mac_keyboard_sign1.png|400px]]
[[File:Mac_keyboard_sign2.png|400px]]

===Finder===
----
====ショートカット====
*http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-use-mac-finder-with-keyboard-shortcut.html
=====実行(command+o)=====

=====ファイルのカット＆ペースト=====
# command+c
# option+command+v

====サイドバーにホームディレクトリを表示====
----
*メニューー環境設定ーサイドバー
====ターミナルから開く====
----
<pre>
$ open .
</pre>

====場所を指定して開く====
----
*Command + G で場所を入力
====システムフォルダを開く====
----
*一時的
**Command + G で場所を入力
*継続的
**以下のコマンドを入力、リブート
<pre>
defaults write com.apple.Finder AppleShowAllFiles YES
</pre>
[[File:Finder_show_all.png|400px]]

===高速化手法===
----
====メモリを解放====
----
<pre>
$ sudo purge
</pre>
*https://commte.net/6966
=====セーフブートモードで起動=====
----
セーフブートモードで起動すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Macmini reset=====
*システム終了します。
*電源コードを抜いて、15秒間待ちます。
*電源コードを差し直して、5秒間待ちます。
*電源ボタンを押して起動します。

====パフォーマンス改善====
*https://blog.avast.com/jp/guide-to-speeding-and-cleaning-mac
=====ディスクスキャン=====
*スキャンを実行するには、メニューバーの [移動] をクリックして [ユーティリティ] に移動します。ここで [ディスクユーティリティ] をクリックします。メインハードディスクを選択して [First Aid] をクリックします。
====SMC のリセット====
----
*着脱不能バッテリーを搭載した MacBook の場合、SMC をリセットするには、Mac を完全にシャットダウンする必要があります。次に、Mac の電源がオフになっている間に、キーボードの左側の [SHIFT] + [CONTROL] + [OPTION] キーを押しながら電源ボタンを押します。これらすべてのキーを 10 秒間押し続けます（指がつらないように気を付けてください）。キーを離し、通常どおりに Mac の電源を入れます。

===ディスク容量を増やす===
----
====このMacストレージを管理====
----
*https://support.apple.com/ja-jp/HT206996
*Apple メニュー  >「この Mac について」の順に選択し、「ストレージ」をクリックします。
*棒グラフの各セグメントは、ファイルのカテゴリごとのストレージ使用量の概算値を表しています。各セグメントの上にポインタを置くと、詳細情報が表示されます。
*ストレージ管理のウインドウには、ストレージを最適に使うための対策が「おすすめ」として表示されます
====セーフブートモードで起動====
----
[https://support.apple.com/ja-jp/guide/mac-help/mh21245/mac セーフブートモードで起動]すると、ディレクトリのメンテナンスと膨大な量のシステムキャッシュファイルを削除してくれます。通常はShiftキーを押しながら起動

=====Appleシリコンを搭載したMacをセーフモードで起動する=====
+Macで、アップルメニュー＞「システム終了」と選択します。
+Macが完全にシステム終了するまで待ちます。Macが完全にシステム終了すると画面が黒くなり、すべてのランプ（Touch Barのランプを含む）が消えます。
+「起動オプションを読み込み中」と表示されるまで、Macの電源ボタンを押したままにします。
+ボリュームを選択します。
+Shiftキーを押したまま、「セーフモードで続ける」をクリックします。
+コンピュータは自動的に再起動します。ログインウインドウが表示されたら、メニューバーに「セーフブート」と表示されます。
=====Intelプロセッサを搭載したMacをセーフモードで起動する=====
+Macを起動または再起動したらすぐにShiftキーを押したままにして、ログインウインドウが表示されたら放します。
+Macにログインします。
+もう一度ログインするように求められる場合があります。
+最初または2番目のログインウインドウのいずれかで、メニューバーに「セーフブート」と表示されます。

====Homebrew====
*[https://www.typea.info/tips_/index.php/Node.js#Homebrew_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB Homebrewのインストール]
*Homebrewのキャッシュ削除
----
<pre>

$ brew cleanup
</pre>

===管理===
----
====Remote Desktop====
----
=====[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]=====
----
*[http://typea.info/blg/glob/2020/01/macwindows10.html Macからホスト名でWindows10にリモートデスクトップ接続]

=====IME切り替え=====
----
*[[Windows]]にリモート接続し、IMEを切り替えるショートカットをIMEの設定から有効にする
[[File:mac_remote_win_ime.png|400px]]
=====バックスラッシュ入力できない問題=====
* https://qiita.com/KNaito/items/e4436cb73f9ff257394d
* https://blog.tsukumijima.net/article/mac-windows-keyboard-tweek/
* https://karabiner-elements.pqrs.org/
* https://karabiner-elements.pqrs.org/docs/

bundle_identifiers
* https://karabiner-elements.pqrs.org/docs/json/complex-modifications-manipulator-definition/conditions/frontmost-application/
*[https://www.typea.info/blog/index.php/2022/02/03/input_backslash_to_win_via_mac_remote_desktop/ MacリモートデスクトップからWindows¥入力]

====SSHポートフォワーディング====
----
*ssh -L {localhostからアクセスするポート}:{踏み台経由でアクセスしたいサーバーアドレス} {踏み台となるサーバー}
<pre>
$ ssh -L 10443:192.168.64.2:10443 hirotoyagi@delhi.local
</pre>
*上記でSSH接続した状態で、localhost:ポートに接続する

===画像===
----
====プレビューでトリミング====
----
トリミングを行いたい画像をダブルクリックすると、基本的にはプレビューが自動的に起動します。この画像の上でクリックをしたまま、引っ張ると四角く範囲を選択することができます。トリミングしたい部分で、クリックを離します。選択範囲に問題がなければ、command+Kを押してトリミングすることができます。
====プレビューで透過画像を作成する====
[[File:instant_alpha.png|300px]]

* command + x
*　範囲を切り取り、貼り付け

===TIps===
----
====スリープ====
----
*option + command + メディア取り出し

====古いOS用のアプリを入手する====
----
*https://filehippo.jp/

=====[https://filehippo.jp/mac/download_microsoft_remote_desktop/ Microsoft Remote Desktop]=====
=====[https://amzn.to/3vl3F1R Kindle for mac]=====

=====[https://developer.apple.com/download/more/ XCode]=====

====treeコマンドのインストール====

brew install tree

===トラブルシュート===
----
====Xcodeがインストール中で終わらない====
----
*いったんアンインストールしてから、AppStoreからインストール

===ツールインストール===
*[[Java SE]]
*[[Node.js]]
*[[Dart]]
*[[Flutter]]

SwiftUI

2024-12-29T07:39:48Z

Piroto: /* Tips */

| [[Swift]] | [[Mac]] | [[Xcode]] | [[Swift Sample]] | [[Cocoa]] | [[Xamarin.Mac]] |

{{amazon|B082SMJC7V}}

==SwiftUI==
*[https://developer.apple.com/jp/xcode/swiftui/ SwiftUI]
*[https://developer.apple.com/documentation/swiftui/ SwiftUI Documents]
*[https://www.raywenderlich.com/macos macos tutorials]
*1セットのツールとAPIを使用するだけで、あらゆるAppleデバイス向けのユーザーインターフェイスを構築
*宣言型シンタックスを使
*宣言型のスタイルは、アニメーションなどの複雑な概念にも適用
===デザインツール===
*Xcodeには、SwiftUIでのインターフェイス構築をドラッグ＆ドロップのように簡単に行える直感的な新しいデザインツールが含まれています
*デザインキャンバスでの編集内容と、隣接するエディタ内のコードはすべて完全に同期されます
====ドラッグ＆ドロップ====
*ユーザーインターフェイス内のコンポーネントの位置は、キャンバス上でコントロールをドラッグするだけで調整できます
====ダイナミックリプレースメント====
*wiftのコンパイラとランタイムはXcode全体に完全に埋め込まれているため、Appは常にビルドされ実行されます
*表示されるデザインキャンバスは、単にユーザーインターフェイスに似せたものではなく、実際のAppそのもの
*Xcodeは編集したコードを実際のAppに直接組み入れることができます
====プレビュー====
*プレビューを1つまたは複数作成して、サンプルデータを取得できる

===Swift UI チュートリアルをやってみる===
----
*[https://www.typea.info/blog/index.php/2020/12/09/swiftui_tutorial_youtube_memo/ プロジェクト作成〜TextViewのカスタマイズ]
*[[Xcode]]
*resume -> プレビュー
*command + click -> Action List
*右上の +　ボタンでコントロール追加

====[[Xcode]] ナビゲーター====
----
[[File:xcode_navgator_icons.png|400px]]
左から
#プロジェクトナビゲーター
#ソースコントロールナビゲーター
#シンボルナビゲーター
#検索ナビゲーター
#イシューナビゲーター
#テストナビゲーター
#デバッグナビゲーター
#ブレークポイントナビゲーター
#レポートナビゲーター

====[https://www.typea.info/blog/index.php/2020/12/09/swiftui_tutorial_youtube_memo/ プロジェクト作成〜TextViewのカスタマイズ]====
====[https://www.typea.info/blog/index.php/2020/12/19/swiftui_tutorial_custom_image_view/ Custom Image Viewの作成]====
====[https://www.typea.info/blog/index.php/2020/12/06/xcode_macos_proguramming/ Xcodeを使ってmacOS プログラミングとplaygroundの作成]====
====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tutorial_list_navigation/ Listとナビゲーションとプレビュー]====

==レイアウト==
===[https://d1v1b.com/swiftui/alignment Alignment]===
----
*[https://d1v1b.com/swiftui/alignment Alignment]

===[https://t32k.me/mol/log/margin-padding-swiftui/ 余白の取り方]===
----
*[https://t32k.me/mol/log/margin-padding-swiftui/ 余白の取り方]
*記述箇所によって、表示が変わる

*backgroundにpaddingを指定する（cssのmargin的な効果)
[[File:swiftui_padding2.png|300px]]
<pre>
Text(host.host)
.background(Color.green)
.padding()
</pre>
*Textにpaddingを指定することになる(cssのpadding的効果)
[[File:swiftui_padding1.png|300px]]
<pre>
Text(host.host)
.padding()
.background(Color.green)
</pre>

===ボタンサイズ===
----
*ボタンのサイズを内容にフィットさせたい
[[File:swiftui_button_size1.png|300px]]
<pre>
Button(action: {}) {
VStack{
:
}
.padding()
.border(Color.blue, width: 3)
}
</pre>
*.buttonStyle(PlainButtonStyle()) を指定
[[File:swiftui_button_size2.png|300px]]
<pre>
Button(action: {}) {
VStack{
:
}
.padding()
.border(Color.blue, width: 3)
}.buttonStyle(PlainButtonStyle())
</pre>
===親Viewのサイズ情報を取得する===
----
*https://qiita.com/masa7351/items/0567969f93cc88d714ac
*https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-two-views-the-same-width-or-height
[[File:swiftui_grid_layout1.png|200px]]
[[File:swiftui_grid_layout2.png|400px]]
<pre>
struct HostView : View {
var host: WoL.Host
var body: some View {
GeometryReader { geo in
HStack() {
Text(host.host)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.red)
Text(host.ip)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.green)
Text(host.macaddr)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.yellow)
}.fixedSize(horizontal: false, vertical: true)

}.frame(height: 60)
}
}
</pre>

===影をつける===
---
*shadowを設定すると、内部のコンポーネント全てに影がつく、compositingGroup を指定することで、背景だけに影をつけることができる
<pre>
:
.background()
.compositingGroup()
.shadow(radius: 10)
</pre>
===Card View===
----
*[https://www.hackingwithswift.com/books/ios-swiftui/designing-a-single-card-view Card View]
*LazyGrid
[[File:swiftui_card_layout1.png|400px]]
[[File:swiftui_card_layout2.png|200px]]
<pre>
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.macaddr) { host in
HostView(host:host)
}
} .padding(20)
</pre>

===Toolbar===
----
[[File:swiftui_toolbar.png|300lx]]
<pre>
ScrollView {
LazyVGrid(columns: columns) {
ForEach(hosts.hosts, id: \.ip) { host in
HostView(host:host)
}
} .padding(20)
}.toolbar {
ToolbarItem(placement: .automatic) {
Button("arp -a") {
WoLService().arp(hosts:self.hosts)
}
}
ToolbarItem(placement: .automatic) {
Button("load") {
WoLService().load(hosts:self.hosts)
}
}
}
</pre>

==データ==
=== データ変更に応じて画面に反映させる ===
* 画面の構造体の中でデータを保持しているクラスのインスタンスを格納するプロパティに、@ObservedObjectプロパティラッパーを付与する
*　データを保持しているクラスを、@ObservableObjectプロトコルに準拠させる
* クラスの中で変更を反映させる値を保持しているプロパティに、@Publishedプロパティラッパーを付与する

=== UserDefaults===
----

===ドキュメントパス===
----
<pre>
let paths = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)
print("Document path: \(paths)")
</pre>
*出力
<pre>
Document path: [file:///Users/hirotoyagi/Library/Containers/info.typea.WoL/Data/Documents/]
</pre>
====ファイル格納先====
----
*[https://qiita.com/am10/items/3b2eb3d9f6c6955455b6 ファイル格納先]
===View間データ受け渡し===
----
SwiftUIでは親ビューと子ビュー間で値を渡す方法は、下記の3つが挙げられます。

#Environment
##Viewが持つ環境変数。独自の環境変数を定義することができ、それを利用して親ビューから任意の値を渡すことが可能
#EnvironmentObjects
##他の２つに比べて一般的な方法。利用するためには独自のクラスを定義
#Preferences
##Preferenceは子から親へ伝達させる方法

*https://qiita.com/noby111/items/26405bd89075c841029a
====ObservableObject を経由して親子ViewでAlertの表示フラグを共有====
[[File:swiftui_share_object.png|300px]]
*ObservableObjectを共有して、変更をSubscribeする
<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@ObservedObject var param = Param()
var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.id) { host in
HostView(host:host).environmentObject(param)
}
} .padding(20)
}.alert(isPresented: $param.isSaveAlert, content: {
Alert(title: Text("Title"),message: Text("Messge"),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
}
struct HostView : View {
@ObservedObject var host: WoL.Host
@EnvironmentObject var param: Param

var body: some View {
VStack{
HStack {
Button(action: {
self.param.isSaveAlert = true
}) {
Image(systemName: "square.and.arrow.down")
}.help(Text("save"))
}
:
}
}
}

class Param : ObservableObject {
@Published var isSaveAlert: Bool = false
}
</pre>

====@Binding を経由して親子ViewでAlertの表示フラグを共有====
[[File:swiftui_share_object.png|300px]]
*@Binding でView間で変数を共有
*呼び出し側は＠State
<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@State var isSaveAlert = false

var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.id) { host in
HostView(host:host, isSaveAlert: $isSaveAlert, alertMessage: $alertMessage)
}
} .padding(20)
}.alert(isPresented: $isSaveAlert, content: {
Alert(title: Text("Title"),message: Text(alertMessage),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
}
struct HostView : View {
@ObservedObject var host: WoL.Host
@Binding var isSaveAlert: Bool

var body: some View {
VStack{
HStack {
Button(action: {
self.isSaveAlert = true
}) {
Image(systemName: "square.and.arrow.down")
}.help(Text("save"))
:
}
}
}
}
</pre>
=====@Binding使用時のPreview=====
*＠Stateかつ、staticで宣言
*$で変数を渡す
<pre>
struct HostView_Previews: PreviewProvider {
@State static var isAlert = true

static var previews: some View {
let host = WoL.Host(host: "test.local", ip: "192.168.0.1", macaddr: "aa:bb:cc:dd:ee:ff", comment: "")
HostView(host: host, isAlert: $isAlert)
}
}
</pre>

==メニュー==
===メインメニューに別のViewを開くメニューを追加===
----
[[File:swift_ui_main_menu.png|400px]]
*.commandsを記述
<pre>
@main
struct WoLApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}.commands {
CommandGroup(after: CommandGroupPlacement.appInfo) {
Divider()
NavigationLink(destination: PreferenceView()) {
Text("preferences")
}
}
}
}
}
</pre>

==図形==
===Capsule===
----
[[File:swiftui_capsule.png|200px]]

<pre>
VStack{
:
}
.padding()
.background(
Capsule(style: .continuous)
.foregroundColor(Color.white)
)
.shadow(radius:10 )
</pre>

===RoundedRectangle===
----
[[File:swiftui_roundedRectangle.png|200px]]
<pre>
VStack{
:
}
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.foregroundColor(Color.white)
)
.shadow(radius:10 )
</pre>

==画像==
===SF Symbol アイコン===
----
*https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
*[https://developer.apple.com/sf-symbols/ SF Symbols アプリ]

==コードサンプル(コンポーネント)==
===Button===
----
[[File:swift_sample_button.png|200px]]
<pre>
import Foundation
import SwiftUI

struct ButtonView: View {

@State var cnt:Int = 0;
var body: some View {
VStack {
Button(action: {
self.cnt += 1;
print("print \(self.cnt)")
})
{
Text("Button+1 (\(self.cnt))")
}
.padding(.horizontal, 25.0)
.font(.largeTitle)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(15, antialiased: true)
Divider()
Button("Button+2 (\(self.cnt))") {
self.cnt += 2;
}
.font(.largeTitle)
.foregroundColor(.white)
.background(
Capsule()
.foregroundColor(Color.blue)
.frame(width: 200, height: 60, alignment: .center)
)
}
}
}
</pre>
===Toggle(@State)===
----
[[File:swift_sample_toggle.png|200px]]
<pre>
import SwiftUI

struct ToggleView: View {
@State var isOn = true
var body: some View {
VStack {
Toggle(isOn: $isOn) {
Text("On/Off")
.font(.title)
}
.fixedSize()
.padding()

/* https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
*/
Button(action: {
withAnimation {
self.isOn.toggle()
}
}) {
Image(systemName: self.isOn ? "applewatch" : "applewatch.slash")
.font(.system(size: 60))
.frame(width: 100, height: 100)
.imageScale(.large)
.rotationEffect(.degrees(isOn ? 0 : 360))

}
}
}
}
</pre>

===Stepper===
----
[[File:swift_sample_stepper.png|200px]]
<pre>
import SwiftUI

struct StepperView: View {
@State var cnt = 0;
var body: some View {
VStack {
Stepper(value: $cnt, in: 0 ... 5) {
Text("Stepper-\(self.cnt)")
}.frame(width: 200)
Stepper(
onIncrement: {
self.cnt += 5;
},
onDecrement: {
self.cnt -= 3;
},
label: {
Text("Stepper-\(self.cnt)")
}
).frame(width: 200)
}
}
}
</pre>

===Alert===
----
[[File:swift_sample_alert.png|200px]]
<pre>
import SwiftUI

struct AlertView: View {
@State var isAlert = false;
var body: some View {
Button(action: {
self.isAlert = true
}) {
Text("Alert")
.foregroundColor(.white)
}.background(
Capsule()
.foregroundColor(.blue)
.frame(width: 100, height: 40)
).alert(isPresented: $isAlert, content: {
Alert(title: Text("Title"),message: Text("Messge"),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
</pre>

===Tab===
----
[[File:swift_sample_tab.png|200px]]
<pre>

struct TabbedView: View {
@State var selection = 0
var body: some View {
TabView(selection: $selection) {
ButtonView().tabItem {
Text("Item1")
}.tag(1)
ToggleView().tabItem {
Text("Item2")
}.tag(2)
}
}
}
</pre>
====Tab切り替えイベント====
----
<pre>
@State var selectedTabIndex = 1;
var body: some View {
TabView(selection: $selectedTabIndex) {
arpListView.tabItem {
Text("Tab Label 1")
}.tag(1)
hostListView.tabItem {
Text("Tab Label 2")
}.tag(2)
}
.onChange(of: selectedTabIndex) { value in
print("TAB INDEX \(value)")
}
}
</pre>

===Binding===
----
[[File:swift_sample_binding.png|200px]]
<pre>
import SwiftUI

struct BindingView: View {
@State var isChecked1: Bool = false
@State var isChecked2: Bool = false
var body: some View {
VStack {
CheckImageButton(isChecked: $isChecked1)
CheckImageButton(isChecked: $isChecked2)
}
}
}

struct CheckImageButton: View {
@Binding var isChecked: Bool
var body: some View {
Button(action: {
self.isChecked.toggle()
}) {
Image(systemName: isChecked ?
"person.crop.circle.badge.checkmark":
"person.crop.circle")
.foregroundColor(
isChecked ? .blue : .gray)
}
.imageScale(.large)
.frame(width: 40)

}
}
</pre>
====リストのBinding====
----
[[File:swiftui_binding_list.png|500px]]

*Model
<pre>
import Foundation
import AppKit
import SwiftUI

class File : Identifiable, ObservableObject {
let id = UUID()
let path: String
let name: String
let isDirectory: Bool
var isOn: Bool = false

init(path: String, name: String, isDirectory: Bool, isOn: Bool) {
self.path = path
self.name = name
self.isDirectory = isDirectory
self.isOn = isOn
}
}

class FileList : ObservableObject {
@Published var files: [File] = []
}
</pre>
*UI
**各所(①②③)に$をつける
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var filePaths = FileList()
@State private var selectedPaths = Set<File.ID>()

var body: some View {
Button(action: {
let rootDir = EncConverterService.chooseDir()
let queue = DispatchQueue.global(qos: .userInitiated)
queue.async {
EncConverterService.loadFile(directoryPath: rootDir, filepaths: self.filePaths)
}
}) {
Text("Choose dir")
}

Table($filePaths.files, selection: $selectedPaths) { // ①
TableColumn("path") { $file in // ②
let isDir = file.isDirectory
HStack {
if !isDir {
Toggle("",isOn: $file.isOn) //　③
.padding(.leading, (isDir) ? 0 : 20)
}
Text((isDir) ? file.path : file.name)
.font((isDir) ? .headline : .none)

}
}
}
Text("\(selectedPaths.count) path selected")
}
}
</pre>

===画像===
----
[[File:Swiftui image sample.png|600px]]
<pre>
import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
Image("add_component_swiftui").resizable()
.aspectRatio(contentMode:.fill)
.frame(width: 400, height: 400)
.scaleEffect(1.2)
.offset(x: -60, y: 0)
.clipped()
.overlay(
Text("SwiftUI Sample")
.font(.title)
.foregroundColor(.red)
)
.clipShape(Circle()/)
.shadow(radius: 10)
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
</pre>

===図形===
----
[[File:Swiftui_sample_figure.png|600px]]
<pre>
import SwiftUI

struct Figure: View {
var body: some View {
VStack {
Circle()
.foregroundColor(.blue)
.frame(width: 100.0, height:100.0)
Ellipse()
.foregroundColor(.green)
.frame(width: 200, height: 100.0)
Rectangle()
.foregroundColor(.orange)
.frame(width: 100.0, height: 100.0)
.rotationEffect(.degrees(45))
}
}
}

struct Figure_Previews: PreviewProvider {
static var previews: some View {
Figure()
}
}
</pre>

===List===
----
[[File:Swiftui_list_sample.png|600px]]
<pre>
import SwiftUI

struct ListView: View {
var body: some View {
NavigationView {
List {
Text("List Item")
Text("List Item")
HStack {
Image("add_component_swiftui")
.frame(width: 100, height: 100)
.scaleEffect(0.2)
.aspectRatio(contentMode:.fit)
.clipped()
.clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)

}
Text("List Item")
Text("List Item")
}.navigationBarTitle("List Title")
}
}
}

struct ListView_Previews: PreviewProvider {
static var previews: some View {
ListView()
}
}
</pre>

====List(繰り返し、Section)====
----
[[File:Swiftui_list_section.png|600px]]
<pre>
import SwiftUI

let items = ["item1","item2","item3","item4","item5"];
struct EmbededList: View {
var body: some View {
VStack {
List(0..<items.count) { idx in
Text(items[idx])
}
.frame(height: 300.0)
List {
Section(header: Text("Section1")) {
ForEach(0 ..< items.count) { idx in
Text(items[idx])
}
}
Section(header: Text("Section2")) {
ForEach(0 ..< items.count) { idx in
Text(items[idx])
}
}
}
}
}
}

struct EmbededList_Previews: PreviewProvider {
static var previews: some View {
EmbededList()
}
}
</pre>

====Listにオブジェクトを表示====
----
[[File:swift_ui_object_load_to_list.png|500px]]
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var hosts = HostList()
var body: some View {
VStack {
HStack {
Button(action: {
WoLService().arp(hosts:self.hosts)
}) {
Text("arp -a")
}.padding()
}
Divider()
List (hosts.hosts, id: \.ip){ host in
Text(host.host)
Text(host.ip)
Text(host.macaddr)
}
}
}
}
</pre>
*
<pre>
import Foundation

class HostList : ObservableObject {
@Published var hosts: [Host] = []
}

class Host {
var host: String = ""
var ip: String = ""
var macaddr: String = ""
}
</pre>
===Table===
----
*https://developer.apple.com/documentation/swiftui/table

[[File:swiftui_tableview.png|500px]]

*Service
<pre>
import Foundation
import AppKit
import SwiftUI

class File : Identifiable {
let id = UUID()
let path: String

init(path: String) {
self.path = path
}
}

class FileList : ObservableObject {
@Published var files: [File] = []
}

public struct EncConverterService {
static func chooseDir() -> String {

let dialog = NSOpenPanel();

dialog.title = "Choose a file| Our Code World"
dialog.showsResizeIndicator = true
dialog.showsHiddenFiles = false
dialog.allowsMultipleSelection = false
dialog.canChooseDirectories = true
dialog.canChooseFiles = false

if (dialog.runModal() == NSApplication.ModalResponse.OK) {
let result = dialog.url

if (result != nil) {
let path: String = result!.path
return path
}

}
return "";
}

static func loadFile(directoryPath: String, filepaths: FileList) {
print(directoryPath)
filepaths.files.append(File(path: directoryPath))
do {
let fm = FileManager.default
let fileNames = try fm.contentsOfDirectory(atPath: directoryPath)

for fileName in fileNames {
let childPath = directoryPath + "/" + fileName

var isDir = ObjCBool(false)
fm.fileExists(atPath: childPath, isDirectory: &isDir)
if isDir.boolValue {
loadFile(directoryPath: childPath, filepaths: filepaths)
}
print("\t" + childPath)
filepaths.files.append(File(path: childPath))
}
} catch {
print(error)
}
}
}
</pre>
*View
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var filePaths = FileList()
@State private var selectedPaths = Set<File.ID>()

var body: some View {
Button(action: {
let rootDir = EncConverterService.chooseDir()
let queue = DispatchQueue.global(qos: .userInitiated)
queue.async {
EncConverterService.loadFile(directoryPath: rootDir, filepaths: self.filePaths)
}
}) {
Text("Choose dir")
}

Table(filePaths.files, selection: $selectedPaths) {
TableColumn("Path", value: \.path)
}
Text("\(selectedPaths.count) path selected")

}
}
</pre>

==コードサンプル(ロジック)==

===Observable(@ObservedObject,@Published,@State)===
----
#データクラスはObservableObjectプロトコル準拠とする。
#監視対象とするプロパティに@Published属性を付加する。
#<u>データクラスのインスタンスは@ObservedObject属性を付加してViewの中で宣言する</u>
[[File:swift_sample_observable.png|200px]]
*Publish
<pre>
import Foundation

class PublishObject: ObservableObject {
@Published var counter: Int = 0

var timer = Timer()

func start() {
timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
self.counter += 1
}
}

func stop() {
timer.invalidate()
}

func reset() {
timer.invalidate()
counter = 0
}
}
</pre>
*Subscribe
<pre>
import SwiftUI

struct SubscriberView: View {
@ObservedObject var publisher = PublishObject()

let currentTimer = Timer.TimerPublisher(interval: 1.0, runLoop: .main, mode: .default).autoconnect()
@State var now = Date()

var body: some View {
VStack {
Text("\(self.now.description)")
HStack {
Button(action: {
self.publisher.start()
}){
Image(systemName: "play")
}.padding()
Button(action: {
self.publisher.stop()
}){
Image(systemName: "pause")
}.padding()
Button(action: {
self.publisher.reset()
}){
Image(systemName: "backward.end")
}.padding()
}
.frame(width:200)

Text("\(self.publisher.counter)")

}.font(.largeTitle)
.onReceive(currentTimer) { date in
self.now = date
}
}
}
</pre>
===動的に検索===
[[File:swiftui_dynamic_search.png|400px]]

<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@ObservedObject var param = HostViewParameter()
// 検索キーワード
@State var searchKeyword = ""

var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
//　Arrayにfilterを適用
ForEach(hosts.hosts.filter({ (host) -> Bool in
if searchKeyword != "" {
return host.host.contains(searchKeyword) ||
host.ip.contains(searchKeyword) ||
host.comment.contains(searchKeyword)
}
return true
}), id: \.id) { host in
HostView(host:host).environmentObject(param)
}
} .padding(20)
}.toolbar {
:
ToolbarItem(placement: .automatic) {
TextField("search...", text: $searchKeyword)
}
}
}
}
}
</pre>

===バックグラウンドからUIを操作する===
----
*observableobj が、ObservableObject の派生クラス
*contentフィールドに、@Published アノテーション
*Viewで、@ObservedObjectを付与しインスタンスを生成
*上記で、バックグラウンドから、observableobj.contentを操作すると、UIはメインスレッドから触るように怒られる。
<blockquote>Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates.</blockquote>
*DispatchQueue.main.syncで囲む
<pre>
DispatchQueue.main.sync {
observableobj.content = text
}
</pre>

==Tips==

===VSCode + Github Copilot で iPhone アプリ開発===
*https://www.typea.info/blog/index.php/2024/12/29/vscode_and_github_copilot_dev_iphone_app/
===[https://www.typea.info/blog/index.php/2021/11/30/swift_macos_app_permission/ ファイルパーミッションエラー（App Sandbox)]===
----
*[https://www.typea.info/blog/index.php/2021/11/30/swift_macos_app_permission/ ファイルパーミッションエラー（App Sandbox)]
===[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tips_view_component_locate/ 画面部品の追加方法]===
----

===SwiftUIライブラリ===
----
====[https://github.com/SwiftUIX/SwiftUIX SwiftUIX]====
[https://qiita.com/yosshi4486/items/3d92f81feaabc1049b4c SwiftUIアプリケーション開発の不足を補うSwiftUIX]

===ファイル選択===
----
<pre>
let dialog = NSOpenPanel();

dialog.title = "Choose a file"
dialog.showsResizeIndicator = true
dialog.showsHiddenFiles = false
dialog.allowsMultipleSelection = false
dialog.canChooseDirectories = false

if (dialog.runModal() == NSApplication.ModalResponse.OK) {
let result = dialog.url
if (result != nil) {
let path: String = result!.path
print(path)
}

} else {
return
}
</pre>

SwiftUI

2024-12-29T07:39:17Z

Piroto: /* Tips */

| [[Swift]] | [[Mac]] | [[Xcode]] | [[Swift Sample]] | [[Cocoa]] | [[Xamarin.Mac]] |

{{amazon|B082SMJC7V}}

==SwiftUI==
*[https://developer.apple.com/jp/xcode/swiftui/ SwiftUI]
*[https://developer.apple.com/documentation/swiftui/ SwiftUI Documents]
*[https://www.raywenderlich.com/macos macos tutorials]
*1セットのツールとAPIを使用するだけで、あらゆるAppleデバイス向けのユーザーインターフェイスを構築
*宣言型シンタックスを使
*宣言型のスタイルは、アニメーションなどの複雑な概念にも適用
===デザインツール===
*Xcodeには、SwiftUIでのインターフェイス構築をドラッグ＆ドロップのように簡単に行える直感的な新しいデザインツールが含まれています
*デザインキャンバスでの編集内容と、隣接するエディタ内のコードはすべて完全に同期されます
====ドラッグ＆ドロップ====
*ユーザーインターフェイス内のコンポーネントの位置は、キャンバス上でコントロールをドラッグするだけで調整できます
====ダイナミックリプレースメント====
*wiftのコンパイラとランタイムはXcode全体に完全に埋め込まれているため、Appは常にビルドされ実行されます
*表示されるデザインキャンバスは、単にユーザーインターフェイスに似せたものではなく、実際のAppそのもの
*Xcodeは編集したコードを実際のAppに直接組み入れることができます
====プレビュー====
*プレビューを1つまたは複数作成して、サンプルデータを取得できる

===Swift UI チュートリアルをやってみる===
----
*[https://www.typea.info/blog/index.php/2020/12/09/swiftui_tutorial_youtube_memo/ プロジェクト作成〜TextViewのカスタマイズ]
*[[Xcode]]
*resume -> プレビュー
*command + click -> Action List
*右上の +　ボタンでコントロール追加

====[[Xcode]] ナビゲーター====
----
[[File:xcode_navgator_icons.png|400px]]
左から
#プロジェクトナビゲーター
#ソースコントロールナビゲーター
#シンボルナビゲーター
#検索ナビゲーター
#イシューナビゲーター
#テストナビゲーター
#デバッグナビゲーター
#ブレークポイントナビゲーター
#レポートナビゲーター

====[https://www.typea.info/blog/index.php/2020/12/09/swiftui_tutorial_youtube_memo/ プロジェクト作成〜TextViewのカスタマイズ]====
====[https://www.typea.info/blog/index.php/2020/12/19/swiftui_tutorial_custom_image_view/ Custom Image Viewの作成]====
====[https://www.typea.info/blog/index.php/2020/12/06/xcode_macos_proguramming/ Xcodeを使ってmacOS プログラミングとplaygroundの作成]====
====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tutorial_list_navigation/ Listとナビゲーションとプレビュー]====

==レイアウト==
===[https://d1v1b.com/swiftui/alignment Alignment]===
----
*[https://d1v1b.com/swiftui/alignment Alignment]

===[https://t32k.me/mol/log/margin-padding-swiftui/ 余白の取り方]===
----
*[https://t32k.me/mol/log/margin-padding-swiftui/ 余白の取り方]
*記述箇所によって、表示が変わる

*backgroundにpaddingを指定する（cssのmargin的な効果)
[[File:swiftui_padding2.png|300px]]
<pre>
Text(host.host)
.background(Color.green)
.padding()
</pre>
*Textにpaddingを指定することになる(cssのpadding的効果)
[[File:swiftui_padding1.png|300px]]
<pre>
Text(host.host)
.padding()
.background(Color.green)
</pre>

===ボタンサイズ===
----
*ボタンのサイズを内容にフィットさせたい
[[File:swiftui_button_size1.png|300px]]
<pre>
Button(action: {}) {
VStack{
:
}
.padding()
.border(Color.blue, width: 3)
}
</pre>
*.buttonStyle(PlainButtonStyle()) を指定
[[File:swiftui_button_size2.png|300px]]
<pre>
Button(action: {}) {
VStack{
:
}
.padding()
.border(Color.blue, width: 3)
}.buttonStyle(PlainButtonStyle())
</pre>
===親Viewのサイズ情報を取得する===
----
*https://qiita.com/masa7351/items/0567969f93cc88d714ac
*https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-two-views-the-same-width-or-height
[[File:swiftui_grid_layout1.png|200px]]
[[File:swiftui_grid_layout2.png|400px]]
<pre>
struct HostView : View {
var host: WoL.Host
var body: some View {
GeometryReader { geo in
HStack() {
Text(host.host)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.red)
Text(host.ip)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.green)
Text(host.macaddr)
.padding()
.frame(width: geo.size.width * 0.33 , alignment: .leading)
.frame(maxHeight: .infinity)
.background(Color.yellow)
}.fixedSize(horizontal: false, vertical: true)

}.frame(height: 60)
}
}
</pre>

===影をつける===
---
*shadowを設定すると、内部のコンポーネント全てに影がつく、compositingGroup を指定することで、背景だけに影をつけることができる
<pre>
:
.background()
.compositingGroup()
.shadow(radius: 10)
</pre>
===Card View===
----
*[https://www.hackingwithswift.com/books/ios-swiftui/designing-a-single-card-view Card View]
*LazyGrid
[[File:swiftui_card_layout1.png|400px]]
[[File:swiftui_card_layout2.png|200px]]
<pre>
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.macaddr) { host in
HostView(host:host)
}
} .padding(20)
</pre>

===Toolbar===
----
[[File:swiftui_toolbar.png|300lx]]
<pre>
ScrollView {
LazyVGrid(columns: columns) {
ForEach(hosts.hosts, id: \.ip) { host in
HostView(host:host)
}
} .padding(20)
}.toolbar {
ToolbarItem(placement: .automatic) {
Button("arp -a") {
WoLService().arp(hosts:self.hosts)
}
}
ToolbarItem(placement: .automatic) {
Button("load") {
WoLService().load(hosts:self.hosts)
}
}
}
</pre>

==データ==
=== データ変更に応じて画面に反映させる ===
* 画面の構造体の中でデータを保持しているクラスのインスタンスを格納するプロパティに、@ObservedObjectプロパティラッパーを付与する
*　データを保持しているクラスを、@ObservableObjectプロトコルに準拠させる
* クラスの中で変更を反映させる値を保持しているプロパティに、@Publishedプロパティラッパーを付与する

=== UserDefaults===
----

===ドキュメントパス===
----
<pre>
let paths = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)
print("Document path: \(paths)")
</pre>
*出力
<pre>
Document path: [file:///Users/hirotoyagi/Library/Containers/info.typea.WoL/Data/Documents/]
</pre>
====ファイル格納先====
----
*[https://qiita.com/am10/items/3b2eb3d9f6c6955455b6 ファイル格納先]
===View間データ受け渡し===
----
SwiftUIでは親ビューと子ビュー間で値を渡す方法は、下記の3つが挙げられます。

#Environment
##Viewが持つ環境変数。独自の環境変数を定義することができ、それを利用して親ビューから任意の値を渡すことが可能
#EnvironmentObjects
##他の２つに比べて一般的な方法。利用するためには独自のクラスを定義
#Preferences
##Preferenceは子から親へ伝達させる方法

*https://qiita.com/noby111/items/26405bd89075c841029a
====ObservableObject を経由して親子ViewでAlertの表示フラグを共有====
[[File:swiftui_share_object.png|300px]]
*ObservableObjectを共有して、変更をSubscribeする
<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@ObservedObject var param = Param()
var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.id) { host in
HostView(host:host).environmentObject(param)
}
} .padding(20)
}.alert(isPresented: $param.isSaveAlert, content: {
Alert(title: Text("Title"),message: Text("Messge"),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
}
struct HostView : View {
@ObservedObject var host: WoL.Host
@EnvironmentObject var param: Param

var body: some View {
VStack{
HStack {
Button(action: {
self.param.isSaveAlert = true
}) {
Image(systemName: "square.and.arrow.down")
}.help(Text("save"))
}
:
}
}
}

class Param : ObservableObject {
@Published var isSaveAlert: Bool = false
}
</pre>

====@Binding を経由して親子ViewでAlertの表示フラグを共有====
[[File:swiftui_share_object.png|300px]]
*@Binding でView間で変数を共有
*呼び出し側は＠State
<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@State var isSaveAlert = false

var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
ForEach(hosts.hosts, id: \.id) { host in
HostView(host:host, isSaveAlert: $isSaveAlert, alertMessage: $alertMessage)
}
} .padding(20)
}.alert(isPresented: $isSaveAlert, content: {
Alert(title: Text("Title"),message: Text(alertMessage),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
}
struct HostView : View {
@ObservedObject var host: WoL.Host
@Binding var isSaveAlert: Bool

var body: some View {
VStack{
HStack {
Button(action: {
self.isSaveAlert = true
}) {
Image(systemName: "square.and.arrow.down")
}.help(Text("save"))
:
}
}
}
}
</pre>
=====@Binding使用時のPreview=====
*＠Stateかつ、staticで宣言
*$で変数を渡す
<pre>
struct HostView_Previews: PreviewProvider {
@State static var isAlert = true

static var previews: some View {
let host = WoL.Host(host: "test.local", ip: "192.168.0.1", macaddr: "aa:bb:cc:dd:ee:ff", comment: "")
HostView(host: host, isAlert: $isAlert)
}
}
</pre>

==メニュー==
===メインメニューに別のViewを開くメニューを追加===
----
[[File:swift_ui_main_menu.png|400px]]
*.commandsを記述
<pre>
@main
struct WoLApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}.commands {
CommandGroup(after: CommandGroupPlacement.appInfo) {
Divider()
NavigationLink(destination: PreferenceView()) {
Text("preferences")
}
}
}
}
}
</pre>

==図形==
===Capsule===
----
[[File:swiftui_capsule.png|200px]]

<pre>
VStack{
:
}
.padding()
.background(
Capsule(style: .continuous)
.foregroundColor(Color.white)
)
.shadow(radius:10 )
</pre>

===RoundedRectangle===
----
[[File:swiftui_roundedRectangle.png|200px]]
<pre>
VStack{
:
}
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.foregroundColor(Color.white)
)
.shadow(radius:10 )
</pre>

==画像==
===SF Symbol アイコン===
----
*https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
*[https://developer.apple.com/sf-symbols/ SF Symbols アプリ]

==コードサンプル(コンポーネント)==
===Button===
----
[[File:swift_sample_button.png|200px]]
<pre>
import Foundation
import SwiftUI

struct ButtonView: View {

@State var cnt:Int = 0;
var body: some View {
VStack {
Button(action: {
self.cnt += 1;
print("print \(self.cnt)")
})
{
Text("Button+1 (\(self.cnt))")
}
.padding(.horizontal, 25.0)
.font(.largeTitle)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(15, antialiased: true)
Divider()
Button("Button+2 (\(self.cnt))") {
self.cnt += 2;
}
.font(.largeTitle)
.foregroundColor(.white)
.background(
Capsule()
.foregroundColor(Color.blue)
.frame(width: 200, height: 60, alignment: .center)
)
}
}
}
</pre>
===Toggle(@State)===
----
[[File:swift_sample_toggle.png|200px]]
<pre>
import SwiftUI

struct ToggleView: View {
@State var isOn = true
var body: some View {
VStack {
Toggle(isOn: $isOn) {
Text("On/Off")
.font(.title)
}
.fixedSize()
.padding()

/* https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
*/
Button(action: {
withAnimation {
self.isOn.toggle()
}
}) {
Image(systemName: self.isOn ? "applewatch" : "applewatch.slash")
.font(.system(size: 60))
.frame(width: 100, height: 100)
.imageScale(.large)
.rotationEffect(.degrees(isOn ? 0 : 360))

}
}
}
}
</pre>

===Stepper===
----
[[File:swift_sample_stepper.png|200px]]
<pre>
import SwiftUI

struct StepperView: View {
@State var cnt = 0;
var body: some View {
VStack {
Stepper(value: $cnt, in: 0 ... 5) {
Text("Stepper-\(self.cnt)")
}.frame(width: 200)
Stepper(
onIncrement: {
self.cnt += 5;
},
onDecrement: {
self.cnt -= 3;
},
label: {
Text("Stepper-\(self.cnt)")
}
).frame(width: 200)
}
}
}
</pre>

===Alert===
----
[[File:swift_sample_alert.png|200px]]
<pre>
import SwiftUI

struct AlertView: View {
@State var isAlert = false;
var body: some View {
Button(action: {
self.isAlert = true
}) {
Text("Alert")
.foregroundColor(.white)
}.background(
Capsule()
.foregroundColor(.blue)
.frame(width: 100, height: 40)
).alert(isPresented: $isAlert, content: {
Alert(title: Text("Title"),message: Text("Messge"),
primaryButton: .default(Text("OK"), action: {}),
secondaryButton: .cancel(Text("Cancel"),action: {}))
})
}
}
</pre>

===Tab===
----
[[File:swift_sample_tab.png|200px]]
<pre>

struct TabbedView: View {
@State var selection = 0
var body: some View {
TabView(selection: $selection) {
ButtonView().tabItem {
Text("Item1")
}.tag(1)
ToggleView().tabItem {
Text("Item2")
}.tag(2)
}
}
}
</pre>
====Tab切り替えイベント====
----
<pre>
@State var selectedTabIndex = 1;
var body: some View {
TabView(selection: $selectedTabIndex) {
arpListView.tabItem {
Text("Tab Label 1")
}.tag(1)
hostListView.tabItem {
Text("Tab Label 2")
}.tag(2)
}
.onChange(of: selectedTabIndex) { value in
print("TAB INDEX \(value)")
}
}
</pre>

===Binding===
----
[[File:swift_sample_binding.png|200px]]
<pre>
import SwiftUI

struct BindingView: View {
@State var isChecked1: Bool = false
@State var isChecked2: Bool = false
var body: some View {
VStack {
CheckImageButton(isChecked: $isChecked1)
CheckImageButton(isChecked: $isChecked2)
}
}
}

struct CheckImageButton: View {
@Binding var isChecked: Bool
var body: some View {
Button(action: {
self.isChecked.toggle()
}) {
Image(systemName: isChecked ?
"person.crop.circle.badge.checkmark":
"person.crop.circle")
.foregroundColor(
isChecked ? .blue : .gray)
}
.imageScale(.large)
.frame(width: 40)

}
}
</pre>
====リストのBinding====
----
[[File:swiftui_binding_list.png|500px]]

*Model
<pre>
import Foundation
import AppKit
import SwiftUI

class File : Identifiable, ObservableObject {
let id = UUID()
let path: String
let name: String
let isDirectory: Bool
var isOn: Bool = false

init(path: String, name: String, isDirectory: Bool, isOn: Bool) {
self.path = path
self.name = name
self.isDirectory = isDirectory
self.isOn = isOn
}
}

class FileList : ObservableObject {
@Published var files: [File] = []
}
</pre>
*UI
**各所(①②③)に$をつける
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var filePaths = FileList()
@State private var selectedPaths = Set<File.ID>()

var body: some View {
Button(action: {
let rootDir = EncConverterService.chooseDir()
let queue = DispatchQueue.global(qos: .userInitiated)
queue.async {
EncConverterService.loadFile(directoryPath: rootDir, filepaths: self.filePaths)
}
}) {
Text("Choose dir")
}

Table($filePaths.files, selection: $selectedPaths) { // ①
TableColumn("path") { $file in // ②
let isDir = file.isDirectory
HStack {
if !isDir {
Toggle("",isOn: $file.isOn) //　③
.padding(.leading, (isDir) ? 0 : 20)
}
Text((isDir) ? file.path : file.name)
.font((isDir) ? .headline : .none)

}
}
}
Text("\(selectedPaths.count) path selected")
}
}
</pre>

===画像===
----
[[File:Swiftui image sample.png|600px]]
<pre>
import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
Image("add_component_swiftui").resizable()
.aspectRatio(contentMode:.fill)
.frame(width: 400, height: 400)
.scaleEffect(1.2)
.offset(x: -60, y: 0)
.clipped()
.overlay(
Text("SwiftUI Sample")
.font(.title)
.foregroundColor(.red)
)
.clipShape(Circle()/)
.shadow(radius: 10)
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
</pre>

===図形===
----
[[File:Swiftui_sample_figure.png|600px]]
<pre>
import SwiftUI

struct Figure: View {
var body: some View {
VStack {
Circle()
.foregroundColor(.blue)
.frame(width: 100.0, height:100.0)
Ellipse()
.foregroundColor(.green)
.frame(width: 200, height: 100.0)
Rectangle()
.foregroundColor(.orange)
.frame(width: 100.0, height: 100.0)
.rotationEffect(.degrees(45))
}
}
}

struct Figure_Previews: PreviewProvider {
static var previews: some View {
Figure()
}
}
</pre>

===List===
----
[[File:Swiftui_list_sample.png|600px]]
<pre>
import SwiftUI

struct ListView: View {
var body: some View {
NavigationView {
List {
Text("List Item")
Text("List Item")
HStack {
Image("add_component_swiftui")
.frame(width: 100, height: 100)
.scaleEffect(0.2)
.aspectRatio(contentMode:.fit)
.clipped()
.clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)

}
Text("List Item")
Text("List Item")
}.navigationBarTitle("List Title")
}
}
}

struct ListView_Previews: PreviewProvider {
static var previews: some View {
ListView()
}
}
</pre>

====List(繰り返し、Section)====
----
[[File:Swiftui_list_section.png|600px]]
<pre>
import SwiftUI

let items = ["item1","item2","item3","item4","item5"];
struct EmbededList: View {
var body: some View {
VStack {
List(0..<items.count) { idx in
Text(items[idx])
}
.frame(height: 300.0)
List {
Section(header: Text("Section1")) {
ForEach(0 ..< items.count) { idx in
Text(items[idx])
}
}
Section(header: Text("Section2")) {
ForEach(0 ..< items.count) { idx in
Text(items[idx])
}
}
}
}
}
}

struct EmbededList_Previews: PreviewProvider {
static var previews: some View {
EmbededList()
}
}
</pre>

====Listにオブジェクトを表示====
----
[[File:swift_ui_object_load_to_list.png|500px]]
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var hosts = HostList()
var body: some View {
VStack {
HStack {
Button(action: {
WoLService().arp(hosts:self.hosts)
}) {
Text("arp -a")
}.padding()
}
Divider()
List (hosts.hosts, id: \.ip){ host in
Text(host.host)
Text(host.ip)
Text(host.macaddr)
}
}
}
}
</pre>
*
<pre>
import Foundation

class HostList : ObservableObject {
@Published var hosts: [Host] = []
}

class Host {
var host: String = ""
var ip: String = ""
var macaddr: String = ""
}
</pre>
===Table===
----
*https://developer.apple.com/documentation/swiftui/table

[[File:swiftui_tableview.png|500px]]

*Service
<pre>
import Foundation
import AppKit
import SwiftUI

class File : Identifiable {
let id = UUID()
let path: String

init(path: String) {
self.path = path
}
}

class FileList : ObservableObject {
@Published var files: [File] = []
}

public struct EncConverterService {
static func chooseDir() -> String {

let dialog = NSOpenPanel();

dialog.title = "Choose a file| Our Code World"
dialog.showsResizeIndicator = true
dialog.showsHiddenFiles = false
dialog.allowsMultipleSelection = false
dialog.canChooseDirectories = true
dialog.canChooseFiles = false

if (dialog.runModal() == NSApplication.ModalResponse.OK) {
let result = dialog.url

if (result != nil) {
let path: String = result!.path
return path
}

}
return "";
}

static func loadFile(directoryPath: String, filepaths: FileList) {
print(directoryPath)
filepaths.files.append(File(path: directoryPath))
do {
let fm = FileManager.default
let fileNames = try fm.contentsOfDirectory(atPath: directoryPath)

for fileName in fileNames {
let childPath = directoryPath + "/" + fileName

var isDir = ObjCBool(false)
fm.fileExists(atPath: childPath, isDirectory: &isDir)
if isDir.boolValue {
loadFile(directoryPath: childPath, filepaths: filepaths)
}
print("\t" + childPath)
filepaths.files.append(File(path: childPath))
}
} catch {
print(error)
}
}
}
</pre>
*View
<pre>
import SwiftUI

struct ContentView: View {
@ObservedObject var filePaths = FileList()
@State private var selectedPaths = Set<File.ID>()

var body: some View {
Button(action: {
let rootDir = EncConverterService.chooseDir()
let queue = DispatchQueue.global(qos: .userInitiated)
queue.async {
EncConverterService.loadFile(directoryPath: rootDir, filepaths: self.filePaths)
}
}) {
Text("Choose dir")
}

Table(filePaths.files, selection: $selectedPaths) {
TableColumn("Path", value: \.path)
}
Text("\(selectedPaths.count) path selected")

}
}
</pre>

==コードサンプル(ロジック)==

===Observable(@ObservedObject,@Published,@State)===
----
#データクラスはObservableObjectプロトコル準拠とする。
#監視対象とするプロパティに@Published属性を付加する。
#<u>データクラスのインスタンスは@ObservedObject属性を付加してViewの中で宣言する</u>
[[File:swift_sample_observable.png|200px]]
*Publish
<pre>
import Foundation

class PublishObject: ObservableObject {
@Published var counter: Int = 0

var timer = Timer()

func start() {
timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
self.counter += 1
}
}

func stop() {
timer.invalidate()
}

func reset() {
timer.invalidate()
counter = 0
}
}
</pre>
*Subscribe
<pre>
import SwiftUI

struct SubscriberView: View {
@ObservedObject var publisher = PublishObject()

let currentTimer = Timer.TimerPublisher(interval: 1.0, runLoop: .main, mode: .default).autoconnect()
@State var now = Date()

var body: some View {
VStack {
Text("\(self.now.description)")
HStack {
Button(action: {
self.publisher.start()
}){
Image(systemName: "play")
}.padding()
Button(action: {
self.publisher.stop()
}){
Image(systemName: "pause")
}.padding()
Button(action: {
self.publisher.reset()
}){
Image(systemName: "backward.end")
}.padding()
}
.frame(width:200)

Text("\(self.publisher.counter)")

}.font(.largeTitle)
.onReceive(currentTimer) { date in
self.now = date
}
}
}
</pre>
===動的に検索===
[[File:swiftui_dynamic_search.png|400px]]

<pre>
struct HostListView: View {
@ObservedObject var hosts = HostList()
@ObservedObject var param = HostViewParameter()
// 検索キーワード
@State var searchKeyword = ""

var body: some View {
VStack {
let columns =
[GridItem(.adaptive(minimum: 250, maximum: 800))]
ScrollView {
LazyVGrid(columns: columns, spacing:10) {
//　Arrayにfilterを適用
ForEach(hosts.hosts.filter({ (host) -> Bool in
if searchKeyword != "" {
return host.host.contains(searchKeyword) ||
host.ip.contains(searchKeyword) ||
host.comment.contains(searchKeyword)
}
return true
}), id: \.id) { host in
HostView(host:host).environmentObject(param)
}
} .padding(20)
}.toolbar {
:
ToolbarItem(placement: .automatic) {
TextField("search...", text: $searchKeyword)
}
}
}
}
}
</pre>

===バックグラウンドからUIを操作する===
----
*observableobj が、ObservableObject の派生クラス
*contentフィールドに、@Published アノテーション
*Viewで、@ObservedObjectを付与しインスタンスを生成
*上記で、バックグラウンドから、observableobj.contentを操作すると、UIはメインスレッドから触るように怒られる。
<blockquote>Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates.</blockquote>
*DispatchQueue.main.syncで囲む
<pre>
DispatchQueue.main.sync {
observableobj.content = text
}
</pre>

==Tips==
----
===VSCode + Github Copilot で iPhone アプリ開発===
*https://www.typea.info/blog/index.php/2024/12/29/vscode_and_github_copilot_dev_iphone_app/
===[https://www.typea.info/blog/index.php/2021/11/30/swift_macos_app_permission/ ファイルパーミッションエラー（App Sandbox)]===
----
*[https://www.typea.info/blog/index.php/2021/11/30/swift_macos_app_permission/ ファイルパーミッションエラー（App Sandbox)]
===[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tips_view_component_locate/ 画面部品の追加方法]===
----

===SwiftUIライブラリ===
----
====[https://github.com/SwiftUIX/SwiftUIX SwiftUIX]====
[https://qiita.com/yosshi4486/items/3d92f81feaabc1049b4c SwiftUIアプリケーション開発の不足を補うSwiftUIX]

===ファイル選択===
----
<pre>
let dialog = NSOpenPanel();

dialog.title = "Choose a file"
dialog.showsResizeIndicator = true
dialog.showsHiddenFiles = false
dialog.allowsMultipleSelection = false
dialog.canChooseDirectories = false

if (dialog.runModal() == NSApplication.ModalResponse.OK) {
let result = dialog.url
if (result != nil) {
let path: String = result!.path
print(path)
}

} else {
return
}
</pre>

Visual Studio Code

2024-12-29T07:38:46Z

Piroto: /* .NET Core */

| [[Electron]] | [[Visual Studio]] |
==[[Visual Studio Code]]==
{{amazon|4297112019}}

*[http://qiita.com/TakahiRoyte/items/cdab6fca64da386a690b 【Windows版】VS Code キーボードショートカット一覧]
*[http://qiita.com/aoinu/items/681f932ce0b162cd9520 Visual Studio Code チートシート]
*[http://sourcechord.hatenablog.com/entry/2015/05/06/230003 VisualStudio Codeの各種操作メモ]
*https://code.[[vi]]sualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
===キーボードショートカット===
[[Android Studio]]

* 画面左下歯車アイコン -> キーボードショートカットで一覧表示される
====一般====
{|class="wikitable"
!操作(Windows)
!操作(Mac)
!内容
|-
|Ctrl+Shift+P
|
|コマンドパレット
|-
|Ctrl+k s
|
|キーボードショートカット一覧
|-
|Ctrl+ ,
|
|設定を開く
|-
|}

====表示====
{|class="wikitable"
!操作(Windows)
!操作(Mac)
!内容
|-
|Ctrl+Q
|
|クイックオープンビュー
|-
|Ctrl+Shift+O
|
|メソッド一覧
|-
|Ctrl+B
|
|サイドバー(エクスプローラーなど)の開閉
|-
|Ctrl+Shift+E
|
|エクスプローラー
|-
|Ctrl+Shift+G
|
|ソースコード管理
|-
|Ctrl+\
|Ctrl+Cmd+Option+¥
|画面分割
|-
|Ctrl+Shift＋V
|Shft+Cmd+V
|[[Markdown]]をプレビュー
|-
|}

====編集====
{|class="wikitable"
!操作(Windows)
!操作(Mac)
!内容
|-
|Alt+Click
|Option+Click
|[http://mugi1.hateblo.jp/entry/2018/12/11/215808 マルチカーソルを追加する]
|-
|Ctrl+Shift+Alt+矢印
|Shift+Option+Command+矢印
|矩形選択(キーボード)
|-
|Shift+Alt+ドラッグ
|Shift+Option+ドラッグ
|矩形選択(マウス) 始点クリック→終点クリック
|-
|Ctrl+Shift+L
|Command+Shift+L
|選択部分の全マッチを選択
|-
|Ctrl+K Ctrl+D
|
|次のマッチに移動
|-
|Ctrl+F2
|Command+F2
|すべての出現箇所を変更
|-
|Ctrl+.
|
|クイック修正(波下線が表示されているエラーなど)
|-
|Alt+↑/↓
|
|行の移動
|-
|Shift+Alt+↑/↓
|Shift+Option+↑/↓
|行のコピー
|-
|Ctrl+Shift+k
|Command+Shift+K
|行の削除
|-
|Ctrl+j
|Command+j
|行のマージ
|-
|Ctrl+Shift+P -> Sort Lines Ascending
|Command+Shift+P -> Sort Lines Ascending
|行の昇順並べ替え
|-
|Ctrl+k, Ctrl+f
|Command+k, Command+f
|コードフォーマット、書式整形
|-
|Ctrl + Space
|Command+Space
※ Spotlight無効化　システム環境設定 - キーボード-ショートカット - Spotlight - Spotlight検索を表示のチェックを外す
|コード補完
|-
|}

====検索と置換====
{|class="wikitable"
!操作(Windows)
!操作(Mac)
!内容
|-
|Ctrl+K Ctrl+S
|
|キーボードショートカット一覧を表示
|-
|Ctrl+p
|Command+p
|ファイル名を検索
|-
|Ctrl+Shift+O
|Command+Shift+O
|シンボルを検索（メソッドなど)
|-
|Ctrl+P
|
|ファイルを検索して開く
|-
|Ctrl+T
|
|全ファイルにまたがって参照検索して移動し、ファイルを開く
|-
|Ctrl+Shift+F
|
|全ファイルから検索
|-
|Ctrl+Shift+J
|
|検索詳細設定
|-
|Alt+C
|
|大文字小文字区別の切り替え
|-
|Alt+R
|
|[[正規表現]]要否の切り替え
|-
|Alt+W
|
|ワード選択の切り替え
|-
|Alt+Enter
|
|マッチ個所の全選択
|-
|Ctrl+G
|Ctrl+G
|指定行へジャンプ
|-
|}

===設定===
====Workspace====
*File - Preference - Settings - Workspaceタブ

====MacでPATHを通す====
*以下を~/.bash_profile に追記
export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"

==デバッグ==
*https://code.[[vi]]sualstudio.com/docs/editor/debugging#_launch-configurations

==[[Java]]==
*[https://code.visualstudio.com/docs/java/java-tutorial VSCode Java]
===[https://code.visualstudio.com/docs/java/java-refactoring リファクタリング]===
{|class="wikitable"
!操作
!内容
|-
|メソッドの実装とオーバーライド
|コンテキストメニュー - Source Action - Override/Imprement methods
|-
|}

==[[.NET Core]]==
===C# および [[Visual Studio Code]] の使用を開始する===
*https://docs.microsoft.com/ja-jp/dotnet/core/tutorials/with-[[vi]]sual-studio-code

====シンプルなプロジェクト====
=====プロジェクト作成=====
*https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new?tabs=netcore21
dotnet new console
=====ビルド=====
dotnet build
=====実行=====
dotnet run

==[[SwiftUI]]==
===VSCode + Github Copilot で iPhone アプリ開発===
*https://www.typea.info/blog/index.php/2024/12/29/vscode_and_github_copilot_dev_iphone_app/

==Extension==
===Remote SSH===
----
*リモートのワークスペースに接続

[[File:vs_remote_ssh.png|600px]]
===Remote Containers===
----
*https://techblog.roxx.co.jp/entry/2021/04/19/132838
[[File:vscode_extension_remote_container.png|600px]]

===Rest Client===
----
*https://marketplace.visualstudio.com/items?itemName=humao.rest-client
[[File:vscode_restclient.png|600px]]
*cmd + option + r で送信
*複数を区切る時には、###
<pre>
GET https://example.com/comments/1 HTTP/1.1

###

GET https://example.com/topics/1 HTTP/1.1

###

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
"name": "sample",
"time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
</pre>

===[[PlantUML]]===
====[[Mac]]====
*[[Java SE|Java]]のインストール
<pre>
$ brew install graphviz
</pre>

[[File:plantuml_vc.png | 600px]]
*tcp.pu
*option + d でプレビュー
<pre>
@startuml
title TCP コネクション確立
クライアント -> サーバ: 1.SYN
サーバ --> クライアント: 2.SYN/ACk
クライアント -> サーバ: 1.ACK
@enduml
</pre>
[[File:plantuml_tcp.png | 800px]]

==[[Tips]]==
===[[文字コード]]自動判別===
"files.autoGuessEncoding": true

[[category:VisualStudio操作]]

MarsEdit

2024-12-02T16:05:26Z

Piroto: ページの作成:「=MarsEdit= ==キーボードショートカット== * HTMLエディタ切り替え：Command+Shift+t」

=MarsEdit=

==キーボードショートカット==
* HTMLエディタ切り替え：Command+Shift+t

AWS

2024-10-28T10:43:56Z

Piroto: /* AWS Organizations */

==AWS==
===[https://wa.aws.amazon.com/wellarchitected/2020-07-02T19-33-23/index.ja.html AWS Well-Architectedプレームワーク]===

*AWS Well-Architectedプレームワークと呼ばれる、クラウド活用のベストプラクティスをまとめたホワイトペーパーが無償提供されている

* 五つの柱
# 運用上の優秀性
# セキュリティ
# 信頼性
# パフォーマンス効率
# コスト最適化
===AWSインフラストラクチャ===
====リージョンとアベイラビリティゾーン====
*リージョンは地理的に離れた領域、アベイラビリティゾーンはリージョン内にある複数のデータセンターの集合体
*各AZ間は、冗長化された高速なネットワークで接続されており、それぞれ地理・電源・ネットワークが独立した施設で構成
*高可用性の実現のためにマルチAZ構成が推奨されている
*災害対策サイトの場合、マルチリージョン構成とすることもある
====エッジロケーション====
*Amazon CloudFronのコンテンツやAmazon Route 53のDNSサービスを提供するデータセンター
*世界中でAZを上回る拠点を構え、ユーザーは地理的に近いエッジロケーションから配布されるコンテンツを利用できる
====AWSサービス範囲====
* グローバルサービス
** リージョンに依存しない共通サービス：IAM、CloudFront、Route53など
* リージョンサービス
** 特定リージョン内でのみ利用可能：VPC、DynamoDB、Lambdaなど
* アベイラビリティゾーンサービス
**特定のAZ内で利用するサービス：VPCサブネット、EC2、RDSなど
==AWS Organizations==

*複数のアカウントを管理できる
*OUという組織単位を作成し個々のアカウントを紐づけて管理
*組織単位でポリシーを一元管理
*Organizations APIによるアカウント作成の自動化
**複数ユーザーの一括作成
*SCP(Service Control Policy)
**所属アカウントを一元管理
*継承される
*一括請求管理機能(組織単位の請求)
**無料利用枠、割引の組織内共有
*他サービスと連携して利用される。
**AWS CloudFormation:共同開発が可能になる
**AWS CloudTrail:組織単位でアカウントの証跡をとる
**AWS Control Tower:ランディングゾーン(初期設定テンプレート)の構成、複数アカウント環境を自動設定

AWS

2024-10-28T10:38:29Z

Piroto: /* AWS Organizations */

AWS

2024-10-28T10:36:02Z

Piroto: /* AWSサービス範囲 */

MediaWiki:Sidebar

2024-10-28T10:34:51Z

Piroto: /* MyMemoWiki */

Next.js

2024-10-06T02:44:59Z

Piroto: /* useRef */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>

=Objects=
==useRef==
*https://ja.react.dev/reference/react/useRef
*ref を変更しても、再レンダーはトリガされないということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています
*ref を使用することで、次のことが保証されます。
*レンダーを跨いで情報を保存できます（通常の変数は、レンダーごとにリセットされます）。
*変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
*保存された情報は、コンポーネントのインスタンスごとに固有です（コンポーネントの外側で定義された変数は、コンポーネントのインスタンス間で共有されます）。
*[https://zenn.dev/tns_00/articles/react-typescript-form-error-of-value TypeScriptでエラーの場合]

<pre>
import { useRef } from 'react';

const txtKeyword = useRef<HTMLInputElement>(null);
console.log(`txtKeyword.current.value:${txtKeyword.current?.value}`);
:
<input type="text" ref={txtKeyword} ../>
</pre>

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-06T02:33:50Z

Piroto: /* =useRef */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>

=Objects=
==useRef==
*https://ja.react.dev/reference/react/useRef
*ref を変更しても、再レンダーはトリガされないということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています
*ref を使用することで、次のことが保証されます。
*レンダーを跨いで情報を保存できます（通常の変数は、レンダーごとにリセットされます）。
*変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
*保存された情報は、コンポーネントのインスタンスごとに固有です（コンポーネントの外側で定義された変数は、コンポーネントのインスタンス間で共有されます）。
<pre>
import { useRef } from 'react';

const txtKeyword = useRef(null);
:
<input type="text" ref={txtKeyword} ../>
</pre>

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-06T02:30:54Z

Piroto: /* =useRef */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>

=Objects=
==useRef=
*https://ja.react.dev/reference/react/useRef
*ref を変更しても、再レンダーはトリガされないということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています
*ref を使用することで、次のことが保証されます。
*レンダーを跨いで情報を保存できます（通常の変数は、レンダーごとにリセットされます）。
*変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
*保存された情報は、コンポーネントのインスタンスごとに固有です（コンポーネントの外側で定義された変数は、コンポーネントのインスタンス間で共有されます）。
<pre>
import { useRef } from 'react';

const txtKeyword = useRef(null);
:
<input type="text" ref={txtKeyword} ../>
</pre>

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-06T02:29:38Z

Piroto: /* Tips */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>

=Objects=
==useRef=
*https://ja.react.dev/reference/react/useRef
*ref を変更しても、再レンダーはトリガされないということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています
*ref を使用することで、次のことが保証されます。
*レンダーを跨いで情報を保存できます（通常の変数は、レンダーごとにリセットされます）。
*変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
*保存された情報は、コンポーネントのインスタンスごとに固有です（コンポーネントの外側で定義された変数は、コンポーネントのインスタンス間で共有されます）。
<pre>
const txtKeyword = useRef(null);
</pre>

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:50:04Z

Piroto: /* MUI */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=外部サービスからのデータ取得=
*標準JavaScriptのfetchが拡張されている
*関数コンポーネントを非同期(async)とすることでコンポーネント配下でfetchメソッドを実行できる
*個々のfetch呼び出しに際して、キャッシュ/再取得ルールを指定できる
*コンポーネント改装間で同一データを取得の場合、リクエストの重複を除去
<pre>
fetch('https://...", { cache: 'force-cache' }); // 無制限にキャッシュ
fetch('https://..."); // 無制限にキャッシュ
fetch('https://...", { cache: 'no-store' }); // 常にデータを取得
fetch('https://...", { cache: 'revalidate: 10' }); // 10秒以上でデータを再取得
</pre>

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:43:16Z

Piroto: /* 本番ビルド＋実行 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
===静的サイトとしてビルドした場合の実行===
*Prisma でのデータアクセスの処理がビルド時に実行され、その時点の静的な出力になる
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:31:47Z

Piroto: /* 本番ビルド＋実行 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>
*静的サイトとしてビルドした場合の実行
<pre>
npm run build
npx serve@latest out
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:27:18Z

Piroto: /* 本番ビルド＋実行 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

====ビルド結果がクリーンされない====
*https://blog.unimoku.com/20201209
*/.next /out はビルド時に削除しても良い。
*デフォルトでクリーンされない
<pre>
rm -rf .next out
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:17:21Z

Piroto: /* Route Segment Config */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:17:03Z

Piroto: /* コンポーネントの処理 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

==静的サイト==
*[https://zenn.dev/hiromu617/articles/1ed6811dc6cf26 静的サイトの生成]
*静的エクスポートを有効にすることによりビルド時の生成物がNode.jsサーバーを必要としないものとなる
<pre>
const nextConfig = {
:
output: 'export'
}
</pre>
*この機能を有効にすることで、ridirectsやmiddlewareなどのサーバーを必要とする一部機能が使えなくなります
*動的レンダリングも一切できなくなってしまうのでこの機能を有効にするかはアプリケーションの性質を考慮して検討

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T16:06:48Z

Piroto: /* サーバー側で実行 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*[https://www.ey-office.com/blog_archive/2024/05/29/tried-running-react-server-component-in-a-production-environment-and-got-a-little-hooked/ 本番環境で動かす]
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:51:50Z

Piroto: /* 概要 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*[https://qiita.com/newbee1939/items/7ce919f9a1a7153582b8#:~:text=React%20Serv React Server ComponentsとApp Routerをそろそろちゃんと理解したい]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:48:46Z

Piroto: /* App Router */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
*デフォルトで作成したコンポーネントがサーバーコンポーネントになる
*クライアントコンポーネントにするにはuse clientを記述する必要がある

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:43:33Z

Piroto: /* 概要 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*[https://ja.next-community-docs.dev/docs/app-router/getting-started/ Next.js Document]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:41:24Z

Piroto: /* コンポーネントの処理 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*[https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/composition-patterns#:~:text=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3 サーバーとクライアントの構成パターン]

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:40:05Z

Piroto: /* サーバーコンポーネント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=コンポーネントの処理=
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

==サーバー側で実行==
*Next.jsの基本はサーバー側でコンポーネントを処理
*メリット
**サーバーリソースの活用
**ダウンロードコードサイズの最小化
**機密情報(サクセストークンなど)の管理
*クライアントに依存する操作には対応していない
**State関連操作(useState,useReducer,useEffectなど)
**イベントリスナー(onXxxxx)
**ブラウザAPIアクセス
**上記を伴うカスタムフック
**クラスコンポーネント利用

==クライアント側で実行==
*ファイルの先頭に、'use client'ディレクティブを記述することでコンポーネントをクライアント側で実行可

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:34:43Z

Piroto: /* メタデータ */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=サーバーコンポーネント=
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

*Next.jsの基本はサーバーコンポーネント
*ファイルの先頭に、'use client'、'use server'ディレクティブを記述する

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

===Route Segment Config===
*レイアウト、ページ単位の設定
*あらかじめ決められた名前の変数をエクスポートしておくことで、個別の設定を施せる
*force-dynamic : 極力キャッシュを無効にし、ページを動的に描画しようとする

<pre>
export const dynamic = 'force-dynamic'
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:21:55Z

Piroto: /* サーバーコンポーネント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=サーバーコンポーネント=
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

*Next.jsの基本はサーバーコンポーネント
*ファイルの先頭に、'use client'、'use server'ディレクティブを記述する

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:20:24Z

Piroto: /* サーバーコンポーネント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=サーバーコンポーネント=
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

*Next.jsの基本はサーバーコンポーネント

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:19:28Z

Piroto:

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=サーバーコンポーネント=
*https://qiita.com/kenogi/items/f216359576a4aa5a4b74#:~:text=Next.js%20%E3%81%AB%E3%81%8A
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

*Next.jsの基本はサーバーコンポーネント

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:06:02Z

Piroto: /* サーバーコンポーネント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=サーバーコンポーネント=
*https://qiita.com/kenogi/items/f216359576a4aa5a4b74#:~:text=Next.js%20%E3%81%AB%E3%81%8A
*https://qiita.com/keitaMax/items/b74ef76171224c2587c4#:~:text=React%20Serv

*Next.jsの基本はサーバーコンポーネント

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:04:33Z

Piroto: /* サーバーコンポーネント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=サーバーコンポーネント=
*https://qiita.com/kenogi/items/f216359576a4aa5a4b74#:~:text=Next.js%20%E3%81%AB%E3%81%8A
*Next.jsの基本はサーバーコンポーネント

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:03:32Z

Piroto: /* MUI */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=サーバーコンポーネント=
*Next.jsの基本はサーバーコンポーネント

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T15:00:43Z

Piroto:

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

=実装=

==ルートレイアウト==
===アプリ内のリンクにはLinkコンポーネントを利用===

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

===メタデータ===
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

=フォント=
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

=MUI=
[[MUI]]

=Tips=

==リモートホストからの画像表示を許可する==
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T14:57:15Z

Piroto:

[[React]] | [[MUI]] |

{{amazon|4815619484}}

=概要=
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

==実装==

===ルートレイアウト===
====アプリ内のリンクにはLinkコンポーネントを利用====

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

====メタデータ====
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

==フォント==
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

==MUI==
[[MUI]]

==Tips==

===リモートホストからの画像表示を許可する===
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T09:44:16Z

Piroto: /* データモデルの定義 */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

*Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
<pre>
$ nps prisma generate
</pre>
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

*Prisma Clientの利用
<pre>
import { PrismaClient } from "@prisma/client";
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

==実装==

===ルートレイアウト===
====アプリ内のリンクにはLinkコンポーネントを利用====

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

====メタデータ====
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

==フォント==
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

==MUI==
[[MUI]]

==Tips==

===リモートホストからの画像表示を許可する===
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

Next.js

2024-10-05T09:18:29Z

Piroto: /* MUI */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

==実装==

===ルートレイアウト===
====アプリ内のリンクにはLinkコンポーネントを利用====

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

====メタデータ====
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

==フォント==
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

==MUI==
[[MUI]]

==Tips==

===リモートホストからの画像表示を許可する===
*next.config.mjs
<pre>
const nextConfig = {

:

images: {
remotePatterns: [
{
hostname: 'books.google.com'
}
]
}
};
</pre>

React

2024-10-05T08:54:13Z

Piroto: /* ファイル拡張子 */

==[[React]]==
[[Node.js]] | [[Next.js]] |

{{amazon|4873117887}}

{{amazon|4815619484}}

===スケルトン作成===
#[https://www.typea.info/blog/index.php/2017/08/15/react_1/ 開発の全体像を把握しつつ開発環境を整える]
#[https://www.typea.info/blog/index.php/2017/08/16/react_router/ React の単純なサンプルに React Router を適用する]
#[https://www.typea.info/blog/index.php/2017/08/17/react_react_router_redux-saga/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する]
#[https://www.typea.info/blog/index.php/2017/08/19/react_react_router_redux-saga_ajax/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む]
#[https://www.typea.info/blog/index.php/2017/08/23/react-react_router-redux-saga-superagent_bootstrap/ React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する]

==導入==

===Create React App===
*Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
*Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
*より高度な環境としてNext.jsも存在

===Next.js===
*[[Next.js]]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

===Node===
[[Node.js]] のインストール

====npx====
*ローカルにインストールされたツールを実行するためのパッケージランナー

===Next.jsアプリの作成===
[[Next.js]]

===[[TypeScript]]の導入===
====ファイル拡張子====

=====JSX=====
*https://3chome.net/javascript-typescript/#:~:text=.tsx%EF%BC%88TSX%E3%83%95%E3%82%A1
*[[TypeScript]]の拡張子
**.ts :　コードにJSX含まない
**.tsx :　コードにJSX含む(含まない場合tsxとしてもよいが望ましくない)

=====Module=====
*https://zenn.dev/uhyo/articles/typescript-module-option
**.mts

====型アサーション====

===導入(旧)===
----
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/[[R]]EADME.md#table-of-contents
*[[React]]のSPAを作成するのによい方法
[[npm]] install -g create-react-app
*https://ja.reactjs.org/docs/create-a-new-react-app.html
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
*[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
Creating a new [[React]] app in C:\workspaces\vscode\reactlesson\react-lesson.

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...
:
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> [[npm]] start
*実行された
[[File:1086_react01.jpg]]
*/src/App.js を書き換えてみる
import [[React]], { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const element = (<h1>Hello,world</h1>);
class App extends Component {
render() {
return (
element
);
}
}

export default App;
*反映された
[[File:1087_react02.jpg]]
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm]] run build

==クイックスタート==
===JSX===
const element = <h1>Hello,world!</h1>;
*文字列でも、[[HTML]]でもなく、JSX
*[[JavaScript]]の拡張文法
*テンプレートと思われるかもしれないが、完全な[[JavaScript]]
*JSXは[[React]]の要素を生成する
===JSX表現===
*どのような[[JavaScript]]の表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (<h1>Hello, {formatName(user)}!</h1>);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {firstName:'Hiroto', lastName:'Yagi'};
const element = (<h1>Hello, {formatName(user)}!</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>

*コンパイルされたJSXは通常の[[JavaScript]]オブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる

function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>;
} else {
return <h1> Hello {user.firstName + ' ' + user.lastName}.</h1>;
}
}
====属性に利用====
*中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。
<div id="root"></div>
<script type="text/babel">
function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
} else {
return <h1> Hello <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
}
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (<h1>{greeting(user)}</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1089_react04.jpg]]
====子要素====
*子要素がない場合、[[XML]]同様　/> で閉じる
*子要素を含む
*JSXはHTMLより[[JavaScript]]により近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
function greeting(user) {
return <div>
<h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1090_react05.jpg]]
====インジェクション[[攻撃]]の予防====
*デフォルトで[[React]] DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
*明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
*XSS[[攻撃]]の予防を助ける
function greeting(user, title) {
return <div>
<h1>{title}</h1>
<h2> Good morning {user.firstName + ' ' + user.lastName}.</h2>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const title = "<input type='button'>";
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user,title));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1091_react06.jpg]]
====JSX [[R]]epresent オブジェクト====
*Babelは、[[React]].createElement()を呼び出しコンパイルを行う
*以下の2つは同じ意味
const element1 = (<h1 className='greeting'>hello</h1>);
const element2 = [[React]].createElement('h1',{className:'greeting'},'hello');
*[[React]].createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
// 簡易表現
const element = {type:'h1',props:{className:'greeting',children:'hello'}};
*これらの要素を"[[React]] elements"と呼ぶ
*画面に表示させたいものの記述と考えることができる
*[[React]]はこれらのオブジェクトを読み、DOMの構築と最新化に利用する
===Elementsのレンダリング===
*Elements は[[React]] アプリケーションの最小のビルディングブロック
*1つの要素は、画面上に表示するものを表現する
*ブラウザのDOM要素と異なり、[[React]] Elements はプレーンなオブジェクトで生成のコストは小さい
*[[React]] DOMは、DOMを[[React]] Elementsに一致するように取り扱う
====1つの要素を[[DOM]]の中にレンダリング====
*[[HTML]]どこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ
*[[React]] DOM が管理するすべてが、この要素の中にある
<div id="root"></div>
====[[React]]要素の更新====
*[[React]]要素は不変。一旦生成したら、子要素、属性などは変更できない。
*UIを更新するには、新しい要素を作成し、[[React]]DOM.rendar()に引き渡す。
function tick() {
const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick,1000);
[[File:1092_react07.jpg]]
<blockquote>通常の[[React]] アプリケーションでは、[[React]]DOM.rendar()は一度しか呼びださない。</blockquote>
====[[React]]は必要なもののみ更新する====
*[[React]] DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
*ブラウザツールで、上記のソースコードを確認する
[[File:1093_react08.jpg]]
<blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみ[[React]] DOMにより更新されている。</blockquote>
===コンポーネントと Props===
*コンポーネントはUIを独立し再利用可能な部分に分割する。
*概念的にコンポーネントは[[JavaScript]]の関数のようなもの。
*コンポーネントはpropsと呼ばれる任意の入力を受け付け、[[React]] Elementを返す。
====コンポーネントの機能とクラス====
*[[JavaScript]]の関数としてコンポーネントを定義する
*この関数は有効な[[React]]コンポーネント、なぜなら、単一のprops引数を引数として取り、[[React]] Elementを返す。
*このようなコンポーネントを"functional"と呼ぶ。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
*ES6のクラスをコンポーネントの定義として利用できる
class Welcome extends [[React]].Component {
render() {
return <h1>Hello,{props.name}</h1>;
}
}
*上記2つのコンポーネントは[[React]]の視点からは同じ
====コンポーネントのレンダリング====
*Elementは、ユーザー定義コンポーネントも表すことができる
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name='Hiroto' />
[[React]]DOM.render(
element,
document.getElementById('root')
);
*[[React]]がユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。

<blockquote>コンポーネント名はいつも大文字から始める。[[DOM]] タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>
====コンポーネントの構成====
*コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
*同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
*[[React]]でこれらは、一般にコンポーネントで表現される
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return ( <div>
<Welcome name="Yagi"/>
<Welcome name="Kaela"/>
<Welcome name="Hiroto"/>
</div> );
}
[[React]]DOM.render(
<App />,
document.getElementById('root')
);
*一般的に新しい[[React]]アプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションに[[React]]を統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。

<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>
====Propsは読み取り専用====
**[[React]]はかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。
===状態とライフサイクル===
*次のClockコンポーネントを再利用可能にカプセル化する
function Clock(props) {
return (
<div>
<h2>{props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
[[React]]DOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);

[[File:1094_react09.jpg]]

*実装のために、Clockコンポーネントにstateを追加する。
*状態は、propsと同様だが、private かつ、コンポーネントから完全に制御される
*クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる
====関数をクラスに変更する====
#[[React]].Component を継承して同名のES6クラスを作成する
#render()メソッドを作成し、処理を移動、functionを削除
#propsをthis.propsに変更
class Clock extends [[React]].Component {
render() {
return (
<div>
<h2>{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにローカル状態を追加する====
*date を props から state へ移動する
#render()メソッドの中の、this.props.date を this.state.date に変更
#クラスにコンストラクタを追加し、this.stateの初期状態を記述する
#<Clock date={new Date()} /> から dateを削除
class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにライフサイクルメソッドを追加する====
*多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
*ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これを[[React]]では、"mounting" という
*また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これを[[React]]では、"unmounting"という
*コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
*componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
*どのようにtimer IDを thisに保存するか
**this.propsが[[React]]によりセットアップされる間、this.stateは特別な意味を持つ
**表示に使用しないならば、クラスに自由にフィールドを追加できる
**render()の中では、それらは利用できないし、ステートも持たない
*最後に、毎秒実行されるtick()メソッドを実装する。
*this.setState()でローカルコンポーネントの状態を更新する

class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
[[React]]DOM.render(
<Clock />,
document.getElementById('root')
);
====状態を正しく使う====
=====stateを直接操作しない=====
// まちがい
this.state.comment = 'Hello';
*上記の代わりに、setState() を利用する
// 正しい
this.setSatate({comment:'Hello'});
<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>
=====stateは、非同期に更新される=====
*[[React]]は、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
*このため、this.propsとthis.stateは非同期に更新される
*これらの値を信頼して、次の状態への計算を行うべきではない
// まちがい
this.setState({
counter: this.state.counter + this.props.increament,
});
*修正するには、オブジェクトではなく関数を受け取る、setState()を使用する
*関数は、ひとつ前の状態(state)を最初の引数として、更新時のpropsを2つ目の引数として取る
// 正しい
this.setState((prevState, props) => ({
counter: prevState.counter + prpos.increament
}));
*通常の関数でもよい
// 正しい
this.setState(function(prevState, props) {
return { counter: prevState.counter + props.increament };
});
=====状態の更新はマージされる=====
*setState()を呼び出すと、[[React]]は、現在のstateに提供したオブジェクトをマージする
*例えば、いくつかの独立した変数を含む場合
constructor(props) {
super(props);
this.state = {
posts: []
comments: []
};
}
*これらを別のsetState() で更新
componentDidMount() {
fetchPosts().then(response => { this.setState({ posts: response.posts }); });
fetchComments().then(response => { this.setState({ commentss: response.comments }); });
}
*マージはシャローなので、setState({comment}) は、this.state.posts を損なわずに、this.state.comments を置き換える
====データは下へ流れる====
*親だけでなく子コンポーネントも確実にステートフルかステートレスか知ることはできない。
*状態はしばしばローカルから呼び出されるかカプセル化されていて、他からアクセスできない。
*コンポーネントは、自身の状態をpropsを通して子コンポーネントに渡す
<h2>It is {this.state.date.toLocalTimeString()}.</h2>
*これは、ユーザー定義コンポーネントでも動作する
<FormattedDate date={this.state.date} />
*FormattedDateコンポーネントは、propsにdateを受け取り、Clockの状態が何かは知らない。
function FormatterDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
*これは一般的に、トップダウン、もしくは、ユニディレクショナルデータフローという
*状態は常に特定のコンポーネントに属する。
*データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる
===イベントの処理===
*[[React]] 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。
**[[React]]イベントは、ロウアーケースではなく、キャメルケース
**JSXでは、stringではなく、関数をイベントハンドラーとして渡す。

=====[[HTML]]=====
<button onclick="test()" />
=====[[React]]=====
<button onClick={test} />

*もう一つの違いは、[[React]]では、falseを返しデフォルトのふるまいを防止することができない。
*明示的に、preventDefault を呼び出す必要がある。

=====[[HTML]]でデフォルトの新しいページを開くリンクのふるまいを防止する=====
<a href="#" onclick="console.log('hoge'); return false" >Click</a>
=====[[React]]=====
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('hoge');
}
return (
<a href="#" onClick={handleClick} >Click</a>
)
}
*e は、本物ではないイベント。Reactでは、[https://www.w3.org/TR/DOM-Level-3-Events/ W3C]に合わせるために定義している。
*なので、ブラウザの互換性を心配する必要はない。[https://facebook.github.io/react/docs/events.html リファレンス]を参照
*[[React]]では、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
*ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
class Toggle extends [[React]].Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevStae => ({
isToggleOn: !prevStae.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick} >
{this.state.isToggleOn?"ON":"OFF"}
</button>
);
}
}
[[React]]DOM.render(
<Toggle />,
document.getElementById('root')
);
*この文法の問題点は、LoggingButtonがレンダリングされるたびに、異なったコールバックが生成されること
*多くのケースで、これは問題ないが、このコールバックが下位のコンポーネントにpropとして渡される場合、コンポーネントは余分にレンダリングすることになる。
*コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。
===条件付きのレンダリング===
*[[React]]では、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。
*Reactの条件付きレンダリングは、[[JavaScript]]の条件が動作するのと同じ方法で動作する。
*[[JavaScript]]のifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
=====以下の2つのコンポーネントについて考える=====
*ユーザーがログインしているか否かによって使い分けたい。
*isLoggedIn により、異なるレンダリングがなされる。
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />
} else {
return <GuestGreeting />
}
}
[[React]]DOM.render(
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
====要素変数====
*要素を保持するのに変数を利用できる。
*これは、出力結果が変わらない間に、条件によりコンポーネントの一部をレンダリングするのを助ける。
function LoginButton(props) {
return (
<button onClick={props.onClick} >
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick} >
Logout
</button>
);
}
class LoginControl extends [[React]].Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick(){
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />
} else {
button = <LoginButton onClick={this.handleLoginClick} />
}
return (<div>{button}</div>);
}
}

[[React]]DOM.render(
<LoginControl />,
document.getElementById('root')
);
[[File:1085_react_debug.jpg]]
====インラインif と論理 && 演算子====
*true && 演算子の場合評価され、false && の場合、falseとなり[[React]]は無視する
function MailBox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['message1','message2'];
[[React]]DOM.render(
<MailBox unreadMessages={messages} />,
document.getElementById('root')
);
====インライン if-else とコンディション演算子====
*条件 ? true : false
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<UserGreeting />
) : (
<GuestGreeting />
)
}
</div>
);
}
[[React]]DOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
====コンポーネントのレンダリングさせない====
*他のコンポーネントからレンダリングされたとしてもコンポーネントを隠したい場合、render出力の代わりにnullを返す
function WarningBanner(props){
if(!props.warn) {
return null;
}
return (
<div>Warning!</div>
);
}
class Page extends [[React]].Component {
constructor(props) {
super(props);
this.state = {showWarning : true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState =>({showWarning : !prevState.showWarning}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

[[React]]DOM.render(
<Page />,
document.getElementById('root')
);
[[File:1095_react10.jpg]]
===リストとキー===
=====[[JavaScript]]でリストの変換には、map()を利用する=====
const numbers = [1,2,3,4,5];
const doubled = numbers.map((number)=> number * 2);
console.log(doubled)
> [2, 4, 6, 8, 10]
*[[React]] では同様に配列をリストに変換する
====複数のコンポーネントをレンダリングする====
const fruits = ['apple','orange','grape','banana'];
const listItems = fruits.map((fruit) => <li>{fruit}</li>);
[[React]]DOM.render(
<ol>{listItems}</ol>,
document.getElementById('root')
);

[[File:1096_react11.jpg]]
====基本的なリストコンポーネント====
*通常リストはコンポーネントに含まれる
=====Keys=====
*keyを指定しないと警告がでる
*keyは、[[React]]が、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
*文字列で兄弟間でユニークな値を設定するのが望ましい
function FruitList(props) {
const fruits = props.fruits;
const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====コンポーネントをKeyと取り出す====
*Keyが意味を持つのは、配列を囲むコンテキストにおいて
*兄弟間で同じKeyを持つとエラーとなる
function ListItem(props) {
// この<li> にKeyを設定するのは、ここがルートになるため間違い
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
// <ListItem>の配列となるため、ここでKeyを指定するのが正しい
const listItems = fruits.map((fruit) => <ListItem key={fruit} value={fruit} />);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====JSXでmap()を埋め込む====
*中括弧のインラインにmap()を置くことができる
function ListItem(props) {
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
return (
<ol>{fruits.map((fruit) => <ListItem key={fruit} value={fruit} />)}</ol>
);

}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
===Form===
*HTML Formは、[[React]]では、少し他のDOMとは動作が異なる。
*なぜなら Fromは通常内部状態をもつから。
====コントロールされたコンポーネント====
*[[HTML]]でFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。
*[[React]]では、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。
*"single source of truth"として[[React]] stateを作成することにより2つを結びつけることができる。
*[[React]]コンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。
*input Form 要素の値は、[[React]]によりこの方法で制御される。
*これは、「コントロールされたコンポーネント」と呼ばれる。

class NameForm extends [[React]].Component {
constructor(props) {
super(props);
this.state = {value : ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value });
}
handleSubmit(event) {
alert('A name was submitted ' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit"/>
</form>
);
}
}
[[React]]DOM.render(
<NameForm />,
document.getElementById('root')
);
[[File:1097_react12.jpg]]
*valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
*すべてのキーストロークで、handleChangeが起動し、[[React]]のstateを更新する
*表示されるvalueも更新される
handleChange(event) {
this.setState({value : event.target.value.toUpperCase() });
}
====textarea/select タグ====
class SelectParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {value: 'coconuts'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render(){
return(
<label>Select:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grape Fruit</option>
<option value="lime">Lime</option>
<option value="coconuts">Coconuts</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
class TextareaParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {
value : 'なにか書いて'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value});
}
render(){
return (
<label>Textarea:<textarea value={this.state.value} onChange={this.handleChange} /></label>
);
}
}
[[React]]DOM.render(
<div>
<SelectParts />
<TextareaParts />
</div>,
document.getElementById('root')
);
====複数入力項目の処理====
*複数のコントロールされた入力要素を処理したい場合、name属性を各要素に追加する
*ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
*ES6 [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 計算されたプロパティ名]構文をkey状態を更新するのに使用
class Reservation extends [[React]].Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = (target.type == 'checkbox') ? target.checked : target.value;
const name = target.name;
this.setState({[name]: value});
}
render(){
return (
<form>
<label>Is going:<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange}/></label>
<br />
<label>Number of guests:<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/></label>
</form>
);
}
}
[[React]]DOM.render(
<div>
<[[R]]eservation />
</div>,
document.getElementById('root')
);
[[File:1098_react13.jpg]]
====コントロールされたコンポーネント以外の方法====
*コントロールされたコンポーネントを利用するのが、冗長な場合がある。
*入力フォームを実装するための、[https://facebook.github.io/react/docs/uncontrolled-components.html コントロールされないコンポーネント]を参照。
===状態を持ち上げる===
*いくつかのコンポーネントは同じ変更をデータに反映させることを必要とする。
*共有状態をそれらの、最も近い共通の祖先に持ち上げることを推奨する。
=====水が沸騰しているかどうかの計算を行う。=====
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
this.setState({temprature: e.target.value});
}
render(){
const temprature = this.state.temprature;
return (
<fieldset>
<legend>Enter temprature in Celsius:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1099_react14.jpg]]
====2つ目の入力を追加する====
*華氏の入力を追加し同期させる
*[[React]]でstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
*TempratureInputのローカルstateをCalcuratorへ移動させる
*Calucratorの共有stateは、「真の情報源」となる
*TempratureInputにとって、tempuratureがローカルの場合、propsは読み取り専用となるので、this.setState()とするしかないが、tempratureが、親のpropsなので、管理する必要はなくなる。
const scaleName = {
c: '摂氏',
f: '華氏'
};
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function toFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function tryConvert(temprature, convert) {
const input = parseFloat(temprature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class TempratureInput extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
// before:this.setState({temprature: e.target.value});
this.props.onTempratureChange(e.target.value);
}
render(){
// before:const temprature = this.state.temprature;
const temprature = this.props.temprature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temprature in {scaleName[scale]}:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleCelsiumChange = this.handleCelsiumChange.bind(this);
this.handlFahrenheitChange = this.handlFahrenheitChange.bind(this);
this.state = {scale:'c', temprature:''};
}
handleCelsiumChange(temprature) {
this.setState({scale:'c', temprature});
}
handlFahrenheitChange(temprature) {
this.setState({scale:'f', temprature});
}
render() {
const scale = this.state.scale;
const temprature = this.state.temprature;
const celsius = scale == 'f' ? tryConvert(temprature, toCelsius) : temprature;
const fahrenheit = scale == 'c' ? tryConvert(temprature, toFahrenheit) : temprature;
return (
<div>
<TempratureInput scale="c" temprature={celsius} onTempratureChange={this.handleCelsiumChange} />
<TempratureInput scale="f" temprature={fahrenheit} onTempratureChange={this.handlFahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1100_react15.jpg]]
===コンポジションと継承===
*[[React]]は強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する
====封じ込める====
*一部のコンポーネントは自身の子供を事前に知ることができない
*これは、特にサイドバーやダイアログなどボックスを表現するコンポーネント共通
*このようなコンポーネントには特別な子供propを使用し直接その要素に出力する
*<FancyBorder>の内側に何があっても、JSXタグはFancyBorderコンポーネントをprops.children として経由する
<style type="text/css">
div.FancyBorder {
border : 2px dashed;
}
div.FancyBorder-blue {
border-color: blue;
}
</style>

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
</FancyBorder>
);
}
[[React]]DOM.render(
<div>
<WelcomDialog />
</div>,
document.getElementById('root')
);
[[File:1101_react16.jpg]]
====特殊化====
*コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
*[[React]]では、コンポジションを使って実現する
*クラスを用いても同様に記述できる
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">{props.title}</h1>
</FancyBorder>
);
}
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<Dialog title="Welcome" />
);
}

===[[React Router]]===
*[[React Router]]
===[[Redux]]===
*[[Redux]]
===[[Tips]]===
*[http://typea.info/blg/glob/2017/06/react.html React のシンタックスエラーをデバッグ]

{{ref example.zip}}
====ビルド====
*https://mae.chab.in/archives/2765
*https://mae.chab.in/archives/2891

React

2024-10-05T08:47:43Z

Piroto: /* TypeScriptの導入 */

==[[React]]==
[[Node.js]] | [[Next.js]] |

{{amazon|4873117887}}

{{amazon|4815619484}}

===スケルトン作成===
#[https://www.typea.info/blog/index.php/2017/08/15/react_1/ 開発の全体像を把握しつつ開発環境を整える]
#[https://www.typea.info/blog/index.php/2017/08/16/react_router/ React の単純なサンプルに React Router を適用する]
#[https://www.typea.info/blog/index.php/2017/08/17/react_react_router_redux-saga/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する]
#[https://www.typea.info/blog/index.php/2017/08/19/react_react_router_redux-saga_ajax/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む]
#[https://www.typea.info/blog/index.php/2017/08/23/react-react_router-redux-saga-superagent_bootstrap/ React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する]

==導入==

===Create React App===
*Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
*Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
*より高度な環境としてNext.jsも存在

===Next.js===
*[[Next.js]]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

===Node===
[[Node.js]] のインストール

====npx====
*ローカルにインストールされたツールを実行するためのパッケージランナー

===Next.jsアプリの作成===
[[Next.js]]

===[[TypeScript]]の導入===
====ファイル拡張子====
*https://3chome.net/javascript-typescript/#:~:text=.tsx%EF%BC%88TSX%E3%83%95%E3%82%A1
*[[TypeScript]]の拡張子
**.ts :　コードにJSX含まない
**.tsx :　コードにJSX含む(含まない場合tsxとしてもよいが望ましくない)

====型アサーション====

===導入(旧)===
----
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/[[R]]EADME.md#table-of-contents
*[[React]]のSPAを作成するのによい方法
[[npm]] install -g create-react-app
*https://ja.reactjs.org/docs/create-a-new-react-app.html
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
*[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
Creating a new [[React]] app in C:\workspaces\vscode\reactlesson\react-lesson.

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...
:
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> [[npm]] start
*実行された
[[File:1086_react01.jpg]]
*/src/App.js を書き換えてみる
import [[React]], { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const element = (<h1>Hello,world</h1>);
class App extends Component {
render() {
return (
element
);
}
}

export default App;
*反映された
[[File:1087_react02.jpg]]
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm]] run build

==クイックスタート==
===JSX===
const element = <h1>Hello,world!</h1>;
*文字列でも、[[HTML]]でもなく、JSX
*[[JavaScript]]の拡張文法
*テンプレートと思われるかもしれないが、完全な[[JavaScript]]
*JSXは[[React]]の要素を生成する
===JSX表現===
*どのような[[JavaScript]]の表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (<h1>Hello, {formatName(user)}!</h1>);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {firstName:'Hiroto', lastName:'Yagi'};
const element = (<h1>Hello, {formatName(user)}!</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>

*コンパイルされたJSXは通常の[[JavaScript]]オブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる

function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>;
} else {
return <h1> Hello {user.firstName + ' ' + user.lastName}.</h1>;
}
}
====属性に利用====
*中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。
<div id="root"></div>
<script type="text/babel">
function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
} else {
return <h1> Hello <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
}
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (<h1>{greeting(user)}</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1089_react04.jpg]]
====子要素====
*子要素がない場合、[[XML]]同様　/> で閉じる
*子要素を含む
*JSXはHTMLより[[JavaScript]]により近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
function greeting(user) {
return <div>
<h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1090_react05.jpg]]
====インジェクション[[攻撃]]の予防====
*デフォルトで[[React]] DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
*明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
*XSS[[攻撃]]の予防を助ける
function greeting(user, title) {
return <div>
<h1>{title}</h1>
<h2> Good morning {user.firstName + ' ' + user.lastName}.</h2>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const title = "<input type='button'>";
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user,title));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1091_react06.jpg]]
====JSX [[R]]epresent オブジェクト====
*Babelは、[[React]].createElement()を呼び出しコンパイルを行う
*以下の2つは同じ意味
const element1 = (<h1 className='greeting'>hello</h1>);
const element2 = [[React]].createElement('h1',{className:'greeting'},'hello');
*[[React]].createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
// 簡易表現
const element = {type:'h1',props:{className:'greeting',children:'hello'}};
*これらの要素を"[[React]] elements"と呼ぶ
*画面に表示させたいものの記述と考えることができる
*[[React]]はこれらのオブジェクトを読み、DOMの構築と最新化に利用する
===Elementsのレンダリング===
*Elements は[[React]] アプリケーションの最小のビルディングブロック
*1つの要素は、画面上に表示するものを表現する
*ブラウザのDOM要素と異なり、[[React]] Elements はプレーンなオブジェクトで生成のコストは小さい
*[[React]] DOMは、DOMを[[React]] Elementsに一致するように取り扱う
====1つの要素を[[DOM]]の中にレンダリング====
*[[HTML]]どこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ
*[[React]] DOM が管理するすべてが、この要素の中にある
<div id="root"></div>
====[[React]]要素の更新====
*[[React]]要素は不変。一旦生成したら、子要素、属性などは変更できない。
*UIを更新するには、新しい要素を作成し、[[React]]DOM.rendar()に引き渡す。
function tick() {
const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick,1000);
[[File:1092_react07.jpg]]
<blockquote>通常の[[React]] アプリケーションでは、[[React]]DOM.rendar()は一度しか呼びださない。</blockquote>
====[[React]]は必要なもののみ更新する====
*[[React]] DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
*ブラウザツールで、上記のソースコードを確認する
[[File:1093_react08.jpg]]
<blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみ[[React]] DOMにより更新されている。</blockquote>
===コンポーネントと Props===
*コンポーネントはUIを独立し再利用可能な部分に分割する。
*概念的にコンポーネントは[[JavaScript]]の関数のようなもの。
*コンポーネントはpropsと呼ばれる任意の入力を受け付け、[[React]] Elementを返す。
====コンポーネントの機能とクラス====
*[[JavaScript]]の関数としてコンポーネントを定義する
*この関数は有効な[[React]]コンポーネント、なぜなら、単一のprops引数を引数として取り、[[React]] Elementを返す。
*このようなコンポーネントを"functional"と呼ぶ。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
*ES6のクラスをコンポーネントの定義として利用できる
class Welcome extends [[React]].Component {
render() {
return <h1>Hello,{props.name}</h1>;
}
}
*上記2つのコンポーネントは[[React]]の視点からは同じ
====コンポーネントのレンダリング====
*Elementは、ユーザー定義コンポーネントも表すことができる
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name='Hiroto' />
[[React]]DOM.render(
element,
document.getElementById('root')
);
*[[React]]がユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。

<blockquote>コンポーネント名はいつも大文字から始める。[[DOM]] タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>
====コンポーネントの構成====
*コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
*同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
*[[React]]でこれらは、一般にコンポーネントで表現される
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return ( <div>
<Welcome name="Yagi"/>
<Welcome name="Kaela"/>
<Welcome name="Hiroto"/>
</div> );
}
[[React]]DOM.render(
<App />,
document.getElementById('root')
);
*一般的に新しい[[React]]アプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションに[[React]]を統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。

<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>
====Propsは読み取り専用====
**[[React]]はかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。
===状態とライフサイクル===
*次のClockコンポーネントを再利用可能にカプセル化する
function Clock(props) {
return (
<div>
<h2>{props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
[[React]]DOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);

[[File:1094_react09.jpg]]

*実装のために、Clockコンポーネントにstateを追加する。
*状態は、propsと同様だが、private かつ、コンポーネントから完全に制御される
*クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる
====関数をクラスに変更する====
#[[React]].Component を継承して同名のES6クラスを作成する
#render()メソッドを作成し、処理を移動、functionを削除
#propsをthis.propsに変更
class Clock extends [[React]].Component {
render() {
return (
<div>
<h2>{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにローカル状態を追加する====
*date を props から state へ移動する
#render()メソッドの中の、this.props.date を this.state.date に変更
#クラスにコンストラクタを追加し、this.stateの初期状態を記述する
#<Clock date={new Date()} /> から dateを削除
class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにライフサイクルメソッドを追加する====
*多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
*ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これを[[React]]では、"mounting" という
*また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これを[[React]]では、"unmounting"という
*コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
*componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
*どのようにtimer IDを thisに保存するか
**this.propsが[[React]]によりセットアップされる間、this.stateは特別な意味を持つ
**表示に使用しないならば、クラスに自由にフィールドを追加できる
**render()の中では、それらは利用できないし、ステートも持たない
*最後に、毎秒実行されるtick()メソッドを実装する。
*this.setState()でローカルコンポーネントの状態を更新する

class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
[[React]]DOM.render(
<Clock />,
document.getElementById('root')
);
====状態を正しく使う====
=====stateを直接操作しない=====
// まちがい
this.state.comment = 'Hello';
*上記の代わりに、setState() を利用する
// 正しい
this.setSatate({comment:'Hello'});
<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>
=====stateは、非同期に更新される=====
*[[React]]は、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
*このため、this.propsとthis.stateは非同期に更新される
*これらの値を信頼して、次の状態への計算を行うべきではない
// まちがい
this.setState({
counter: this.state.counter + this.props.increament,
});
*修正するには、オブジェクトではなく関数を受け取る、setState()を使用する
*関数は、ひとつ前の状態(state)を最初の引数として、更新時のpropsを2つ目の引数として取る
// 正しい
this.setState((prevState, props) => ({
counter: prevState.counter + prpos.increament
}));
*通常の関数でもよい
// 正しい
this.setState(function(prevState, props) {
return { counter: prevState.counter + props.increament };
});
=====状態の更新はマージされる=====
*setState()を呼び出すと、[[React]]は、現在のstateに提供したオブジェクトをマージする
*例えば、いくつかの独立した変数を含む場合
constructor(props) {
super(props);
this.state = {
posts: []
comments: []
};
}
*これらを別のsetState() で更新
componentDidMount() {
fetchPosts().then(response => { this.setState({ posts: response.posts }); });
fetchComments().then(response => { this.setState({ commentss: response.comments }); });
}
*マージはシャローなので、setState({comment}) は、this.state.posts を損なわずに、this.state.comments を置き換える
====データは下へ流れる====
*親だけでなく子コンポーネントも確実にステートフルかステートレスか知ることはできない。
*状態はしばしばローカルから呼び出されるかカプセル化されていて、他からアクセスできない。
*コンポーネントは、自身の状態をpropsを通して子コンポーネントに渡す
<h2>It is {this.state.date.toLocalTimeString()}.</h2>
*これは、ユーザー定義コンポーネントでも動作する
<FormattedDate date={this.state.date} />
*FormattedDateコンポーネントは、propsにdateを受け取り、Clockの状態が何かは知らない。
function FormatterDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
*これは一般的に、トップダウン、もしくは、ユニディレクショナルデータフローという
*状態は常に特定のコンポーネントに属する。
*データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる
===イベントの処理===
*[[React]] 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。
**[[React]]イベントは、ロウアーケースではなく、キャメルケース
**JSXでは、stringではなく、関数をイベントハンドラーとして渡す。

=====[[HTML]]=====
<button onclick="test()" />
=====[[React]]=====
<button onClick={test} />

*もう一つの違いは、[[React]]では、falseを返しデフォルトのふるまいを防止することができない。
*明示的に、preventDefault を呼び出す必要がある。

=====[[HTML]]でデフォルトの新しいページを開くリンクのふるまいを防止する=====
<a href="#" onclick="console.log('hoge'); return false" >Click</a>
=====[[React]]=====
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('hoge');
}
return (
<a href="#" onClick={handleClick} >Click</a>
)
}
*e は、本物ではないイベント。Reactでは、[https://www.w3.org/TR/DOM-Level-3-Events/ W3C]に合わせるために定義している。
*なので、ブラウザの互換性を心配する必要はない。[https://facebook.github.io/react/docs/events.html リファレンス]を参照
*[[React]]では、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
*ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
class Toggle extends [[React]].Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevStae => ({
isToggleOn: !prevStae.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick} >
{this.state.isToggleOn?"ON":"OFF"}
</button>
);
}
}
[[React]]DOM.render(
<Toggle />,
document.getElementById('root')
);
*この文法の問題点は、LoggingButtonがレンダリングされるたびに、異なったコールバックが生成されること
*多くのケースで、これは問題ないが、このコールバックが下位のコンポーネントにpropとして渡される場合、コンポーネントは余分にレンダリングすることになる。
*コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。
===条件付きのレンダリング===
*[[React]]では、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。
*Reactの条件付きレンダリングは、[[JavaScript]]の条件が動作するのと同じ方法で動作する。
*[[JavaScript]]のifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
=====以下の2つのコンポーネントについて考える=====
*ユーザーがログインしているか否かによって使い分けたい。
*isLoggedIn により、異なるレンダリングがなされる。
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />
} else {
return <GuestGreeting />
}
}
[[React]]DOM.render(
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
====要素変数====
*要素を保持するのに変数を利用できる。
*これは、出力結果が変わらない間に、条件によりコンポーネントの一部をレンダリングするのを助ける。
function LoginButton(props) {
return (
<button onClick={props.onClick} >
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick} >
Logout
</button>
);
}
class LoginControl extends [[React]].Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick(){
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />
} else {
button = <LoginButton onClick={this.handleLoginClick} />
}
return (<div>{button}</div>);
}
}

[[React]]DOM.render(
<LoginControl />,
document.getElementById('root')
);
[[File:1085_react_debug.jpg]]
====インラインif と論理 && 演算子====
*true && 演算子の場合評価され、false && の場合、falseとなり[[React]]は無視する
function MailBox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['message1','message2'];
[[React]]DOM.render(
<MailBox unreadMessages={messages} />,
document.getElementById('root')
);
====インライン if-else とコンディション演算子====
*条件 ? true : false
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<UserGreeting />
) : (
<GuestGreeting />
)
}
</div>
);
}
[[React]]DOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
====コンポーネントのレンダリングさせない====
*他のコンポーネントからレンダリングされたとしてもコンポーネントを隠したい場合、render出力の代わりにnullを返す
function WarningBanner(props){
if(!props.warn) {
return null;
}
return (
<div>Warning!</div>
);
}
class Page extends [[React]].Component {
constructor(props) {
super(props);
this.state = {showWarning : true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState =>({showWarning : !prevState.showWarning}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

[[React]]DOM.render(
<Page />,
document.getElementById('root')
);
[[File:1095_react10.jpg]]
===リストとキー===
=====[[JavaScript]]でリストの変換には、map()を利用する=====
const numbers = [1,2,3,4,5];
const doubled = numbers.map((number)=> number * 2);
console.log(doubled)
> [2, 4, 6, 8, 10]
*[[React]] では同様に配列をリストに変換する
====複数のコンポーネントをレンダリングする====
const fruits = ['apple','orange','grape','banana'];
const listItems = fruits.map((fruit) => <li>{fruit}</li>);
[[React]]DOM.render(
<ol>{listItems}</ol>,
document.getElementById('root')
);

[[File:1096_react11.jpg]]
====基本的なリストコンポーネント====
*通常リストはコンポーネントに含まれる
=====Keys=====
*keyを指定しないと警告がでる
*keyは、[[React]]が、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
*文字列で兄弟間でユニークな値を設定するのが望ましい
function FruitList(props) {
const fruits = props.fruits;
const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====コンポーネントをKeyと取り出す====
*Keyが意味を持つのは、配列を囲むコンテキストにおいて
*兄弟間で同じKeyを持つとエラーとなる
function ListItem(props) {
// この<li> にKeyを設定するのは、ここがルートになるため間違い
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
// <ListItem>の配列となるため、ここでKeyを指定するのが正しい
const listItems = fruits.map((fruit) => <ListItem key={fruit} value={fruit} />);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====JSXでmap()を埋め込む====
*中括弧のインラインにmap()を置くことができる
function ListItem(props) {
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
return (
<ol>{fruits.map((fruit) => <ListItem key={fruit} value={fruit} />)}</ol>
);

}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
===Form===
*HTML Formは、[[React]]では、少し他のDOMとは動作が異なる。
*なぜなら Fromは通常内部状態をもつから。
====コントロールされたコンポーネント====
*[[HTML]]でFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。
*[[React]]では、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。
*"single source of truth"として[[React]] stateを作成することにより2つを結びつけることができる。
*[[React]]コンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。
*input Form 要素の値は、[[React]]によりこの方法で制御される。
*これは、「コントロールされたコンポーネント」と呼ばれる。

class NameForm extends [[React]].Component {
constructor(props) {
super(props);
this.state = {value : ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value });
}
handleSubmit(event) {
alert('A name was submitted ' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit"/>
</form>
);
}
}
[[React]]DOM.render(
<NameForm />,
document.getElementById('root')
);
[[File:1097_react12.jpg]]
*valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
*すべてのキーストロークで、handleChangeが起動し、[[React]]のstateを更新する
*表示されるvalueも更新される
handleChange(event) {
this.setState({value : event.target.value.toUpperCase() });
}
====textarea/select タグ====
class SelectParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {value: 'coconuts'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render(){
return(
<label>Select:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grape Fruit</option>
<option value="lime">Lime</option>
<option value="coconuts">Coconuts</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
class TextareaParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {
value : 'なにか書いて'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value});
}
render(){
return (
<label>Textarea:<textarea value={this.state.value} onChange={this.handleChange} /></label>
);
}
}
[[React]]DOM.render(
<div>
<SelectParts />
<TextareaParts />
</div>,
document.getElementById('root')
);
====複数入力項目の処理====
*複数のコントロールされた入力要素を処理したい場合、name属性を各要素に追加する
*ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
*ES6 [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 計算されたプロパティ名]構文をkey状態を更新するのに使用
class Reservation extends [[React]].Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = (target.type == 'checkbox') ? target.checked : target.value;
const name = target.name;
this.setState({[name]: value});
}
render(){
return (
<form>
<label>Is going:<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange}/></label>
<br />
<label>Number of guests:<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/></label>
</form>
);
}
}
[[React]]DOM.render(
<div>
<[[R]]eservation />
</div>,
document.getElementById('root')
);
[[File:1098_react13.jpg]]
====コントロールされたコンポーネント以外の方法====
*コントロールされたコンポーネントを利用するのが、冗長な場合がある。
*入力フォームを実装するための、[https://facebook.github.io/react/docs/uncontrolled-components.html コントロールされないコンポーネント]を参照。
===状態を持ち上げる===
*いくつかのコンポーネントは同じ変更をデータに反映させることを必要とする。
*共有状態をそれらの、最も近い共通の祖先に持ち上げることを推奨する。
=====水が沸騰しているかどうかの計算を行う。=====
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
this.setState({temprature: e.target.value});
}
render(){
const temprature = this.state.temprature;
return (
<fieldset>
<legend>Enter temprature in Celsius:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1099_react14.jpg]]
====2つ目の入力を追加する====
*華氏の入力を追加し同期させる
*[[React]]でstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
*TempratureInputのローカルstateをCalcuratorへ移動させる
*Calucratorの共有stateは、「真の情報源」となる
*TempratureInputにとって、tempuratureがローカルの場合、propsは読み取り専用となるので、this.setState()とするしかないが、tempratureが、親のpropsなので、管理する必要はなくなる。
const scaleName = {
c: '摂氏',
f: '華氏'
};
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function toFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function tryConvert(temprature, convert) {
const input = parseFloat(temprature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class TempratureInput extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
// before:this.setState({temprature: e.target.value});
this.props.onTempratureChange(e.target.value);
}
render(){
// before:const temprature = this.state.temprature;
const temprature = this.props.temprature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temprature in {scaleName[scale]}:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleCelsiumChange = this.handleCelsiumChange.bind(this);
this.handlFahrenheitChange = this.handlFahrenheitChange.bind(this);
this.state = {scale:'c', temprature:''};
}
handleCelsiumChange(temprature) {
this.setState({scale:'c', temprature});
}
handlFahrenheitChange(temprature) {
this.setState({scale:'f', temprature});
}
render() {
const scale = this.state.scale;
const temprature = this.state.temprature;
const celsius = scale == 'f' ? tryConvert(temprature, toCelsius) : temprature;
const fahrenheit = scale == 'c' ? tryConvert(temprature, toFahrenheit) : temprature;
return (
<div>
<TempratureInput scale="c" temprature={celsius} onTempratureChange={this.handleCelsiumChange} />
<TempratureInput scale="f" temprature={fahrenheit} onTempratureChange={this.handlFahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1100_react15.jpg]]
===コンポジションと継承===
*[[React]]は強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する
====封じ込める====
*一部のコンポーネントは自身の子供を事前に知ることができない
*これは、特にサイドバーやダイアログなどボックスを表現するコンポーネント共通
*このようなコンポーネントには特別な子供propを使用し直接その要素に出力する
*<FancyBorder>の内側に何があっても、JSXタグはFancyBorderコンポーネントをprops.children として経由する
<style type="text/css">
div.FancyBorder {
border : 2px dashed;
}
div.FancyBorder-blue {
border-color: blue;
}
</style>

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
</FancyBorder>
);
}
[[React]]DOM.render(
<div>
<WelcomDialog />
</div>,
document.getElementById('root')
);
[[File:1101_react16.jpg]]
====特殊化====
*コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
*[[React]]では、コンポジションを使って実現する
*クラスを用いても同様に記述できる
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">{props.title}</h1>
</FancyBorder>
);
}
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<Dialog title="Welcome" />
);
}

===[[React Router]]===
*[[React Router]]
===[[Redux]]===
*[[Redux]]
===[[Tips]]===
*[http://typea.info/blg/glob/2017/06/react.html React のシンタックスエラーをデバッグ]

{{ref example.zip}}
====ビルド====
*https://mae.chab.in/archives/2765
*https://mae.chab.in/archives/2891

React

2024-10-05T08:39:06Z

Piroto: /* ファイル拡張子 */

==[[React]]==
[[Node.js]] | [[Next.js]] |

{{amazon|4873117887}}

{{amazon|4815619484}}

===スケルトン作成===
#[https://www.typea.info/blog/index.php/2017/08/15/react_1/ 開発の全体像を把握しつつ開発環境を整える]
#[https://www.typea.info/blog/index.php/2017/08/16/react_router/ React の単純なサンプルに React Router を適用する]
#[https://www.typea.info/blog/index.php/2017/08/17/react_react_router_redux-saga/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する]
#[https://www.typea.info/blog/index.php/2017/08/19/react_react_router_redux-saga_ajax/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む]
#[https://www.typea.info/blog/index.php/2017/08/23/react-react_router-redux-saga-superagent_bootstrap/ React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する]

==導入==

===Create React App===
*Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
*Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
*より高度な環境としてNext.jsも存在

===Next.js===
*[[Next.js]]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

===Node===
[[Node.js]] のインストール

====npx====
*ローカルにインストールされたツールを実行するためのパッケージランナー

===Next.jsアプリの作成===
[[Next.js]]

===[[TypeScript]]の導入===
====ファイル拡張子====
*https://3chome.net/javascript-typescript/#:~:text=.tsx%EF%BC%88TSX%E3%83%95%E3%82%A1
*TypeScriptの拡張子
**.ts :　コードにJSX含まない
**.tsx :　コードにJSX含む(含まない場合tsxとしてもよいが望ましくない)

====型アサーション====

===導入(旧)===
----
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/[[R]]EADME.md#table-of-contents
*[[React]]のSPAを作成するのによい方法
[[npm]] install -g create-react-app
*https://ja.reactjs.org/docs/create-a-new-react-app.html
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
*[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
Creating a new [[React]] app in C:\workspaces\vscode\reactlesson\react-lesson.

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...
:
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> [[npm]] start
*実行された
[[File:1086_react01.jpg]]
*/src/App.js を書き換えてみる
import [[React]], { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const element = (<h1>Hello,world</h1>);
class App extends Component {
render() {
return (
element
);
}
}

export default App;
*反映された
[[File:1087_react02.jpg]]
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm]] run build

==クイックスタート==
===JSX===
const element = <h1>Hello,world!</h1>;
*文字列でも、[[HTML]]でもなく、JSX
*[[JavaScript]]の拡張文法
*テンプレートと思われるかもしれないが、完全な[[JavaScript]]
*JSXは[[React]]の要素を生成する
===JSX表現===
*どのような[[JavaScript]]の表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (<h1>Hello, {formatName(user)}!</h1>);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {firstName:'Hiroto', lastName:'Yagi'};
const element = (<h1>Hello, {formatName(user)}!</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>

*コンパイルされたJSXは通常の[[JavaScript]]オブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる

function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>;
} else {
return <h1> Hello {user.firstName + ' ' + user.lastName}.</h1>;
}
}
====属性に利用====
*中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。
<div id="root"></div>
<script type="text/babel">
function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
} else {
return <h1> Hello <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
}
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (<h1>{greeting(user)}</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1089_react04.jpg]]
====子要素====
*子要素がない場合、[[XML]]同様　/> で閉じる
*子要素を含む
*JSXはHTMLより[[JavaScript]]により近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
function greeting(user) {
return <div>
<h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1090_react05.jpg]]
====インジェクション[[攻撃]]の予防====
*デフォルトで[[React]] DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
*明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
*XSS[[攻撃]]の予防を助ける
function greeting(user, title) {
return <div>
<h1>{title}</h1>
<h2> Good morning {user.firstName + ' ' + user.lastName}.</h2>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const title = "<input type='button'>";
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user,title));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1091_react06.jpg]]
====JSX [[R]]epresent オブジェクト====
*Babelは、[[React]].createElement()を呼び出しコンパイルを行う
*以下の2つは同じ意味
const element1 = (<h1 className='greeting'>hello</h1>);
const element2 = [[React]].createElement('h1',{className:'greeting'},'hello');
*[[React]].createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
// 簡易表現
const element = {type:'h1',props:{className:'greeting',children:'hello'}};
*これらの要素を"[[React]] elements"と呼ぶ
*画面に表示させたいものの記述と考えることができる
*[[React]]はこれらのオブジェクトを読み、DOMの構築と最新化に利用する
===Elementsのレンダリング===
*Elements は[[React]] アプリケーションの最小のビルディングブロック
*1つの要素は、画面上に表示するものを表現する
*ブラウザのDOM要素と異なり、[[React]] Elements はプレーンなオブジェクトで生成のコストは小さい
*[[React]] DOMは、DOMを[[React]] Elementsに一致するように取り扱う
====1つの要素を[[DOM]]の中にレンダリング====
*[[HTML]]どこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ
*[[React]] DOM が管理するすべてが、この要素の中にある
<div id="root"></div>
====[[React]]要素の更新====
*[[React]]要素は不変。一旦生成したら、子要素、属性などは変更できない。
*UIを更新するには、新しい要素を作成し、[[React]]DOM.rendar()に引き渡す。
function tick() {
const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick,1000);
[[File:1092_react07.jpg]]
<blockquote>通常の[[React]] アプリケーションでは、[[React]]DOM.rendar()は一度しか呼びださない。</blockquote>
====[[React]]は必要なもののみ更新する====
*[[React]] DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
*ブラウザツールで、上記のソースコードを確認する
[[File:1093_react08.jpg]]
<blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみ[[React]] DOMにより更新されている。</blockquote>
===コンポーネントと Props===
*コンポーネントはUIを独立し再利用可能な部分に分割する。
*概念的にコンポーネントは[[JavaScript]]の関数のようなもの。
*コンポーネントはpropsと呼ばれる任意の入力を受け付け、[[React]] Elementを返す。
====コンポーネントの機能とクラス====
*[[JavaScript]]の関数としてコンポーネントを定義する
*この関数は有効な[[React]]コンポーネント、なぜなら、単一のprops引数を引数として取り、[[React]] Elementを返す。
*このようなコンポーネントを"functional"と呼ぶ。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
*ES6のクラスをコンポーネントの定義として利用できる
class Welcome extends [[React]].Component {
render() {
return <h1>Hello,{props.name}</h1>;
}
}
*上記2つのコンポーネントは[[React]]の視点からは同じ
====コンポーネントのレンダリング====
*Elementは、ユーザー定義コンポーネントも表すことができる
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name='Hiroto' />
[[React]]DOM.render(
element,
document.getElementById('root')
);
*[[React]]がユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。

<blockquote>コンポーネント名はいつも大文字から始める。[[DOM]] タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>
====コンポーネントの構成====
*コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
*同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
*[[React]]でこれらは、一般にコンポーネントで表現される
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return ( <div>
<Welcome name="Yagi"/>
<Welcome name="Kaela"/>
<Welcome name="Hiroto"/>
</div> );
}
[[React]]DOM.render(
<App />,
document.getElementById('root')
);
*一般的に新しい[[React]]アプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションに[[React]]を統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。

<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>
====Propsは読み取り専用====
**[[React]]はかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。
===状態とライフサイクル===
*次のClockコンポーネントを再利用可能にカプセル化する
function Clock(props) {
return (
<div>
<h2>{props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
[[React]]DOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);

[[File:1094_react09.jpg]]

*実装のために、Clockコンポーネントにstateを追加する。
*状態は、propsと同様だが、private かつ、コンポーネントから完全に制御される
*クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる
====関数をクラスに変更する====
#[[React]].Component を継承して同名のES6クラスを作成する
#render()メソッドを作成し、処理を移動、functionを削除
#propsをthis.propsに変更
class Clock extends [[React]].Component {
render() {
return (
<div>
<h2>{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにローカル状態を追加する====
*date を props から state へ移動する
#render()メソッドの中の、this.props.date を this.state.date に変更
#クラスにコンストラクタを追加し、this.stateの初期状態を記述する
#<Clock date={new Date()} /> から dateを削除
class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにライフサイクルメソッドを追加する====
*多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
*ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これを[[React]]では、"mounting" という
*また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これを[[React]]では、"unmounting"という
*コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
*componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
*どのようにtimer IDを thisに保存するか
**this.propsが[[React]]によりセットアップされる間、this.stateは特別な意味を持つ
**表示に使用しないならば、クラスに自由にフィールドを追加できる
**render()の中では、それらは利用できないし、ステートも持たない
*最後に、毎秒実行されるtick()メソッドを実装する。
*this.setState()でローカルコンポーネントの状態を更新する

class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
[[React]]DOM.render(
<Clock />,
document.getElementById('root')
);
====状態を正しく使う====
=====stateを直接操作しない=====
// まちがい
this.state.comment = 'Hello';
*上記の代わりに、setState() を利用する
// 正しい
this.setSatate({comment:'Hello'});
<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>
=====stateは、非同期に更新される=====
*[[React]]は、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
*このため、this.propsとthis.stateは非同期に更新される
*これらの値を信頼して、次の状態への計算を行うべきではない
// まちがい
this.setState({
counter: this.state.counter + this.props.increament,
});
*修正するには、オブジェクトではなく関数を受け取る、setState()を使用する
*関数は、ひとつ前の状態(state)を最初の引数として、更新時のpropsを2つ目の引数として取る
// 正しい
this.setState((prevState, props) => ({
counter: prevState.counter + prpos.increament
}));
*通常の関数でもよい
// 正しい
this.setState(function(prevState, props) {
return { counter: prevState.counter + props.increament };
});
=====状態の更新はマージされる=====
*setState()を呼び出すと、[[React]]は、現在のstateに提供したオブジェクトをマージする
*例えば、いくつかの独立した変数を含む場合
constructor(props) {
super(props);
this.state = {
posts: []
comments: []
};
}
*これらを別のsetState() で更新
componentDidMount() {
fetchPosts().then(response => { this.setState({ posts: response.posts }); });
fetchComments().then(response => { this.setState({ commentss: response.comments }); });
}
*マージはシャローなので、setState({comment}) は、this.state.posts を損なわずに、this.state.comments を置き換える
====データは下へ流れる====
*親だけでなく子コンポーネントも確実にステートフルかステートレスか知ることはできない。
*状態はしばしばローカルから呼び出されるかカプセル化されていて、他からアクセスできない。
*コンポーネントは、自身の状態をpropsを通して子コンポーネントに渡す
<h2>It is {this.state.date.toLocalTimeString()}.</h2>
*これは、ユーザー定義コンポーネントでも動作する
<FormattedDate date={this.state.date} />
*FormattedDateコンポーネントは、propsにdateを受け取り、Clockの状態が何かは知らない。
function FormatterDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
*これは一般的に、トップダウン、もしくは、ユニディレクショナルデータフローという
*状態は常に特定のコンポーネントに属する。
*データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる
===イベントの処理===
*[[React]] 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。
**[[React]]イベントは、ロウアーケースではなく、キャメルケース
**JSXでは、stringではなく、関数をイベントハンドラーとして渡す。

=====[[HTML]]=====
<button onclick="test()" />
=====[[React]]=====
<button onClick={test} />

*もう一つの違いは、[[React]]では、falseを返しデフォルトのふるまいを防止することができない。
*明示的に、preventDefault を呼び出す必要がある。

=====[[HTML]]でデフォルトの新しいページを開くリンクのふるまいを防止する=====
<a href="#" onclick="console.log('hoge'); return false" >Click</a>
=====[[React]]=====
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('hoge');
}
return (
<a href="#" onClick={handleClick} >Click</a>
)
}
*e は、本物ではないイベント。Reactでは、[https://www.w3.org/TR/DOM-Level-3-Events/ W3C]に合わせるために定義している。
*なので、ブラウザの互換性を心配する必要はない。[https://facebook.github.io/react/docs/events.html リファレンス]を参照
*[[React]]では、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
*ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
class Toggle extends [[React]].Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevStae => ({
isToggleOn: !prevStae.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick} >
{this.state.isToggleOn?"ON":"OFF"}
</button>
);
}
}
[[React]]DOM.render(
<Toggle />,
document.getElementById('root')
);
*この文法の問題点は、LoggingButtonがレンダリングされるたびに、異なったコールバックが生成されること
*多くのケースで、これは問題ないが、このコールバックが下位のコンポーネントにpropとして渡される場合、コンポーネントは余分にレンダリングすることになる。
*コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。
===条件付きのレンダリング===
*[[React]]では、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。
*Reactの条件付きレンダリングは、[[JavaScript]]の条件が動作するのと同じ方法で動作する。
*[[JavaScript]]のifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
=====以下の2つのコンポーネントについて考える=====
*ユーザーがログインしているか否かによって使い分けたい。
*isLoggedIn により、異なるレンダリングがなされる。
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />
} else {
return <GuestGreeting />
}
}
[[React]]DOM.render(
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
====要素変数====
*要素を保持するのに変数を利用できる。
*これは、出力結果が変わらない間に、条件によりコンポーネントの一部をレンダリングするのを助ける。
function LoginButton(props) {
return (
<button onClick={props.onClick} >
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick} >
Logout
</button>
);
}
class LoginControl extends [[React]].Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick(){
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />
} else {
button = <LoginButton onClick={this.handleLoginClick} />
}
return (<div>{button}</div>);
}
}

[[React]]DOM.render(
<LoginControl />,
document.getElementById('root')
);
[[File:1085_react_debug.jpg]]
====インラインif と論理 && 演算子====
*true && 演算子の場合評価され、false && の場合、falseとなり[[React]]は無視する
function MailBox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['message1','message2'];
[[React]]DOM.render(
<MailBox unreadMessages={messages} />,
document.getElementById('root')
);
====インライン if-else とコンディション演算子====
*条件 ? true : false
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<UserGreeting />
) : (
<GuestGreeting />
)
}
</div>
);
}
[[React]]DOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
====コンポーネントのレンダリングさせない====
*他のコンポーネントからレンダリングされたとしてもコンポーネントを隠したい場合、render出力の代わりにnullを返す
function WarningBanner(props){
if(!props.warn) {
return null;
}
return (
<div>Warning!</div>
);
}
class Page extends [[React]].Component {
constructor(props) {
super(props);
this.state = {showWarning : true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState =>({showWarning : !prevState.showWarning}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

[[React]]DOM.render(
<Page />,
document.getElementById('root')
);
[[File:1095_react10.jpg]]
===リストとキー===
=====[[JavaScript]]でリストの変換には、map()を利用する=====
const numbers = [1,2,3,4,5];
const doubled = numbers.map((number)=> number * 2);
console.log(doubled)
> [2, 4, 6, 8, 10]
*[[React]] では同様に配列をリストに変換する
====複数のコンポーネントをレンダリングする====
const fruits = ['apple','orange','grape','banana'];
const listItems = fruits.map((fruit) => <li>{fruit}</li>);
[[React]]DOM.render(
<ol>{listItems}</ol>,
document.getElementById('root')
);

[[File:1096_react11.jpg]]
====基本的なリストコンポーネント====
*通常リストはコンポーネントに含まれる
=====Keys=====
*keyを指定しないと警告がでる
*keyは、[[React]]が、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
*文字列で兄弟間でユニークな値を設定するのが望ましい
function FruitList(props) {
const fruits = props.fruits;
const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====コンポーネントをKeyと取り出す====
*Keyが意味を持つのは、配列を囲むコンテキストにおいて
*兄弟間で同じKeyを持つとエラーとなる
function ListItem(props) {
// この<li> にKeyを設定するのは、ここがルートになるため間違い
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
// <ListItem>の配列となるため、ここでKeyを指定するのが正しい
const listItems = fruits.map((fruit) => <ListItem key={fruit} value={fruit} />);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====JSXでmap()を埋め込む====
*中括弧のインラインにmap()を置くことができる
function ListItem(props) {
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
return (
<ol>{fruits.map((fruit) => <ListItem key={fruit} value={fruit} />)}</ol>
);

}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
===Form===
*HTML Formは、[[React]]では、少し他のDOMとは動作が異なる。
*なぜなら Fromは通常内部状態をもつから。
====コントロールされたコンポーネント====
*[[HTML]]でFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。
*[[React]]では、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。
*"single source of truth"として[[React]] stateを作成することにより2つを結びつけることができる。
*[[React]]コンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。
*input Form 要素の値は、[[React]]によりこの方法で制御される。
*これは、「コントロールされたコンポーネント」と呼ばれる。

class NameForm extends [[React]].Component {
constructor(props) {
super(props);
this.state = {value : ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value });
}
handleSubmit(event) {
alert('A name was submitted ' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit"/>
</form>
);
}
}
[[React]]DOM.render(
<NameForm />,
document.getElementById('root')
);
[[File:1097_react12.jpg]]
*valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
*すべてのキーストロークで、handleChangeが起動し、[[React]]のstateを更新する
*表示されるvalueも更新される
handleChange(event) {
this.setState({value : event.target.value.toUpperCase() });
}
====textarea/select タグ====
class SelectParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {value: 'coconuts'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render(){
return(
<label>Select:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grape Fruit</option>
<option value="lime">Lime</option>
<option value="coconuts">Coconuts</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
class TextareaParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {
value : 'なにか書いて'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value});
}
render(){
return (
<label>Textarea:<textarea value={this.state.value} onChange={this.handleChange} /></label>
);
}
}
[[React]]DOM.render(
<div>
<SelectParts />
<TextareaParts />
</div>,
document.getElementById('root')
);
====複数入力項目の処理====
*複数のコントロールされた入力要素を処理したい場合、name属性を各要素に追加する
*ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
*ES6 [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 計算されたプロパティ名]構文をkey状態を更新するのに使用
class Reservation extends [[React]].Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = (target.type == 'checkbox') ? target.checked : target.value;
const name = target.name;
this.setState({[name]: value});
}
render(){
return (
<form>
<label>Is going:<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange}/></label>
<br />
<label>Number of guests:<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/></label>
</form>
);
}
}
[[React]]DOM.render(
<div>
<[[R]]eservation />
</div>,
document.getElementById('root')
);
[[File:1098_react13.jpg]]
====コントロールされたコンポーネント以外の方法====
*コントロールされたコンポーネントを利用するのが、冗長な場合がある。
*入力フォームを実装するための、[https://facebook.github.io/react/docs/uncontrolled-components.html コントロールされないコンポーネント]を参照。
===状態を持ち上げる===
*いくつかのコンポーネントは同じ変更をデータに反映させることを必要とする。
*共有状態をそれらの、最も近い共通の祖先に持ち上げることを推奨する。
=====水が沸騰しているかどうかの計算を行う。=====
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
this.setState({temprature: e.target.value});
}
render(){
const temprature = this.state.temprature;
return (
<fieldset>
<legend>Enter temprature in Celsius:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1099_react14.jpg]]
====2つ目の入力を追加する====
*華氏の入力を追加し同期させる
*[[React]]でstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
*TempratureInputのローカルstateをCalcuratorへ移動させる
*Calucratorの共有stateは、「真の情報源」となる
*TempratureInputにとって、tempuratureがローカルの場合、propsは読み取り専用となるので、this.setState()とするしかないが、tempratureが、親のpropsなので、管理する必要はなくなる。
const scaleName = {
c: '摂氏',
f: '華氏'
};
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function toFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function tryConvert(temprature, convert) {
const input = parseFloat(temprature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class TempratureInput extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
// before:this.setState({temprature: e.target.value});
this.props.onTempratureChange(e.target.value);
}
render(){
// before:const temprature = this.state.temprature;
const temprature = this.props.temprature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temprature in {scaleName[scale]}:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleCelsiumChange = this.handleCelsiumChange.bind(this);
this.handlFahrenheitChange = this.handlFahrenheitChange.bind(this);
this.state = {scale:'c', temprature:''};
}
handleCelsiumChange(temprature) {
this.setState({scale:'c', temprature});
}
handlFahrenheitChange(temprature) {
this.setState({scale:'f', temprature});
}
render() {
const scale = this.state.scale;
const temprature = this.state.temprature;
const celsius = scale == 'f' ? tryConvert(temprature, toCelsius) : temprature;
const fahrenheit = scale == 'c' ? tryConvert(temprature, toFahrenheit) : temprature;
return (
<div>
<TempratureInput scale="c" temprature={celsius} onTempratureChange={this.handleCelsiumChange} />
<TempratureInput scale="f" temprature={fahrenheit} onTempratureChange={this.handlFahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1100_react15.jpg]]
===コンポジションと継承===
*[[React]]は強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する
====封じ込める====
*一部のコンポーネントは自身の子供を事前に知ることができない
*これは、特にサイドバーやダイアログなどボックスを表現するコンポーネント共通
*このようなコンポーネントには特別な子供propを使用し直接その要素に出力する
*<FancyBorder>の内側に何があっても、JSXタグはFancyBorderコンポーネントをprops.children として経由する
<style type="text/css">
div.FancyBorder {
border : 2px dashed;
}
div.FancyBorder-blue {
border-color: blue;
}
</style>

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
</FancyBorder>
);
}
[[React]]DOM.render(
<div>
<WelcomDialog />
</div>,
document.getElementById('root')
);
[[File:1101_react16.jpg]]
====特殊化====
*コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
*[[React]]では、コンポジションを使って実現する
*クラスを用いても同様に記述できる
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">{props.title}</h1>
</FancyBorder>
);
}
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<Dialog title="Welcome" />
);
}

===[[React Router]]===
*[[React Router]]
===[[Redux]]===
*[[Redux]]
===[[Tips]]===
*[http://typea.info/blg/glob/2017/06/react.html React のシンタックスエラーをデバッグ]

{{ref example.zip}}
====ビルド====
*https://mae.chab.in/archives/2765
*https://mae.chab.in/archives/2891

React

2024-10-05T08:34:56Z

Piroto: /* ファイル拡張子 */

==[[React]]==
[[Node.js]] | [[Next.js]] |

{{amazon|4873117887}}

{{amazon|4815619484}}

===スケルトン作成===
#[https://www.typea.info/blog/index.php/2017/08/15/react_1/ 開発の全体像を把握しつつ開発環境を整える]
#[https://www.typea.info/blog/index.php/2017/08/16/react_router/ React の単純なサンプルに React Router を適用する]
#[https://www.typea.info/blog/index.php/2017/08/17/react_react_router_redux-saga/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する]
#[https://www.typea.info/blog/index.php/2017/08/19/react_react_router_redux-saga_ajax/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む]
#[https://www.typea.info/blog/index.php/2017/08/23/react-react_router-redux-saga-superagent_bootstrap/ React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する]

==導入==

===Create React App===
*Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
*Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
*より高度な環境としてNext.jsも存在

===Next.js===
*[[Next.js]]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

===Node===
[[Node.js]] のインストール

====npx====
*ローカルにインストールされたツールを実行するためのパッケージランナー

===Next.jsアプリの作成===
[[Next.js]]

===[[TypeScript]]の導入===
====ファイル拡張子====
*https://3chome.net/javascript-typescript/#:~:text=.tsx%EF%BC%88TSX%E3%83%95%E3%82%A1
*TypeScriptの拡張子は、.ts、.tsx

===導入(旧)===
----
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/[[R]]EADME.md#table-of-contents
*[[React]]のSPAを作成するのによい方法
[[npm]] install -g create-react-app
*https://ja.reactjs.org/docs/create-a-new-react-app.html
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
*[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
Creating a new [[React]] app in C:\workspaces\vscode\reactlesson\react-lesson.

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...
:
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> [[npm]] start
*実行された
[[File:1086_react01.jpg]]
*/src/App.js を書き換えてみる
import [[React]], { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const element = (<h1>Hello,world</h1>);
class App extends Component {
render() {
return (
element
);
}
}

export default App;
*反映された
[[File:1087_react02.jpg]]
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm]] run build

==クイックスタート==
===JSX===
const element = <h1>Hello,world!</h1>;
*文字列でも、[[HTML]]でもなく、JSX
*[[JavaScript]]の拡張文法
*テンプレートと思われるかもしれないが、完全な[[JavaScript]]
*JSXは[[React]]の要素を生成する
===JSX表現===
*どのような[[JavaScript]]の表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (<h1>Hello, {formatName(user)}!</h1>);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {firstName:'Hiroto', lastName:'Yagi'};
const element = (<h1>Hello, {formatName(user)}!</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>

*コンパイルされたJSXは通常の[[JavaScript]]オブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる

function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>;
} else {
return <h1> Hello {user.firstName + ' ' + user.lastName}.</h1>;
}
}
====属性に利用====
*中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。
<div id="root"></div>
<script type="text/babel">
function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return <h1> Good morning <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
} else {
return <h1> Hello <a href={user.webpageUrl}>{user.firstName + ' ' + user.lastName}</a>.</h1>;
}
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (<h1>{greeting(user)}</h1>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1089_react04.jpg]]
====子要素====
*子要素がない場合、[[XML]]同様　/> で閉じる
*子要素を含む
*JSXはHTMLより[[JavaScript]]により近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
function greeting(user) {
return <div>
<h1> Good morning {user.firstName + ' ' + user.lastName}.</h1>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1090_react05.jpg]]
====インジェクション[[攻撃]]の予防====
*デフォルトで[[React]] DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
*明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
*XSS[[攻撃]]の予防を助ける
function greeting(user, title) {
return <div>
<h1>{title}</h1>
<h2> Good morning {user.firstName + ' ' + user.lastName}.</h2>
<h2><a href={user.webpageUrl}>webpage</a></h2>
</div>
;
}
const title = "<input type='button'>";
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user,title));
[[React]]DOM.render(
element,
document.getElementById('root')
);
[[File:1091_react06.jpg]]
====JSX [[R]]epresent オブジェクト====
*Babelは、[[React]].createElement()を呼び出しコンパイルを行う
*以下の2つは同じ意味
const element1 = (<h1 className='greeting'>hello</h1>);
const element2 = [[React]].createElement('h1',{className:'greeting'},'hello');
*[[React]].createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
// 簡易表現
const element = {type:'h1',props:{className:'greeting',children:'hello'}};
*これらの要素を"[[React]] elements"と呼ぶ
*画面に表示させたいものの記述と考えることができる
*[[React]]はこれらのオブジェクトを読み、DOMの構築と最新化に利用する
===Elementsのレンダリング===
*Elements は[[React]] アプリケーションの最小のビルディングブロック
*1つの要素は、画面上に表示するものを表現する
*ブラウザのDOM要素と異なり、[[React]] Elements はプレーンなオブジェクトで生成のコストは小さい
*[[React]] DOMは、DOMを[[React]] Elementsに一致するように取り扱う
====1つの要素を[[DOM]]の中にレンダリング====
*[[HTML]]どこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ
*[[React]] DOM が管理するすべてが、この要素の中にある
<div id="root"></div>
====[[React]]要素の更新====
*[[React]]要素は不変。一旦生成したら、子要素、属性などは変更できない。
*UIを更新するには、新しい要素を作成し、[[React]]DOM.rendar()に引き渡す。
function tick() {
const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
[[React]]DOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick,1000);
[[File:1092_react07.jpg]]
<blockquote>通常の[[React]] アプリケーションでは、[[React]]DOM.rendar()は一度しか呼びださない。</blockquote>
====[[React]]は必要なもののみ更新する====
*[[React]] DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
*ブラウザツールで、上記のソースコードを確認する
[[File:1093_react08.jpg]]
<blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみ[[React]] DOMにより更新されている。</blockquote>
===コンポーネントと Props===
*コンポーネントはUIを独立し再利用可能な部分に分割する。
*概念的にコンポーネントは[[JavaScript]]の関数のようなもの。
*コンポーネントはpropsと呼ばれる任意の入力を受け付け、[[React]] Elementを返す。
====コンポーネントの機能とクラス====
*[[JavaScript]]の関数としてコンポーネントを定義する
*この関数は有効な[[React]]コンポーネント、なぜなら、単一のprops引数を引数として取り、[[React]] Elementを返す。
*このようなコンポーネントを"functional"と呼ぶ。
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
*ES6のクラスをコンポーネントの定義として利用できる
class Welcome extends [[React]].Component {
render() {
return <h1>Hello,{props.name}</h1>;
}
}
*上記2つのコンポーネントは[[React]]の視点からは同じ
====コンポーネントのレンダリング====
*Elementは、ユーザー定義コンポーネントも表すことができる
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
const element = <Welcome name='Hiroto' />
[[React]]DOM.render(
element,
document.getElementById('root')
);
*[[React]]がユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。

<blockquote>コンポーネント名はいつも大文字から始める。[[DOM]] タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>
====コンポーネントの構成====
*コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
*同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
*[[React]]でこれらは、一般にコンポーネントで表現される
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return ( <div>
<Welcome name="Yagi"/>
<Welcome name="Kaela"/>
<Welcome name="Hiroto"/>
</div> );
}
[[React]]DOM.render(
<App />,
document.getElementById('root')
);
*一般的に新しい[[React]]アプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションに[[React]]を統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。

<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>
====Propsは読み取り専用====
**[[React]]はかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。
===状態とライフサイクル===
*次のClockコンポーネントを再利用可能にカプセル化する
function Clock(props) {
return (
<div>
<h2>{props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
[[React]]DOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);

[[File:1094_react09.jpg]]

*実装のために、Clockコンポーネントにstateを追加する。
*状態は、propsと同様だが、private かつ、コンポーネントから完全に制御される
*クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる
====関数をクラスに変更する====
#[[React]].Component を継承して同名のES6クラスを作成する
#render()メソッドを作成し、処理を移動、functionを削除
#propsをthis.propsに変更
class Clock extends [[React]].Component {
render() {
return (
<div>
<h2>{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにローカル状態を追加する====
*date を props から state へ移動する
#render()メソッドの中の、this.props.date を this.state.date に変更
#クラスにコンストラクタを追加し、this.stateの初期状態を記述する
#<Clock date={new Date()} /> から dateを削除
class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
====クラスにライフサイクルメソッドを追加する====
*多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
*ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これを[[React]]では、"mounting" という
*また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これを[[React]]では、"unmounting"という
*コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
*componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
*どのようにtimer IDを thisに保存するか
**this.propsが[[React]]によりセットアップされる間、this.stateは特別な意味を持つ
**表示に使用しないならば、クラスに自由にフィールドを追加できる
**render()の中では、それらは利用できないし、ステートも持たない
*最後に、毎秒実行されるtick()メソッドを実装する。
*this.setState()でローカルコンポーネントの状態を更新する

class Clock extends [[React]].Component {
constructor(props) {
super(props);
this.state = {date : new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
[[React]]DOM.render(
<Clock />,
document.getElementById('root')
);
====状態を正しく使う====
=====stateを直接操作しない=====
// まちがい
this.state.comment = 'Hello';
*上記の代わりに、setState() を利用する
// 正しい
this.setSatate({comment:'Hello'});
<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>
=====stateは、非同期に更新される=====
*[[React]]は、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
*このため、this.propsとthis.stateは非同期に更新される
*これらの値を信頼して、次の状態への計算を行うべきではない
// まちがい
this.setState({
counter: this.state.counter + this.props.increament,
});
*修正するには、オブジェクトではなく関数を受け取る、setState()を使用する
*関数は、ひとつ前の状態(state)を最初の引数として、更新時のpropsを2つ目の引数として取る
// 正しい
this.setState((prevState, props) => ({
counter: prevState.counter + prpos.increament
}));
*通常の関数でもよい
// 正しい
this.setState(function(prevState, props) {
return { counter: prevState.counter + props.increament };
});
=====状態の更新はマージされる=====
*setState()を呼び出すと、[[React]]は、現在のstateに提供したオブジェクトをマージする
*例えば、いくつかの独立した変数を含む場合
constructor(props) {
super(props);
this.state = {
posts: []
comments: []
};
}
*これらを別のsetState() で更新
componentDidMount() {
fetchPosts().then(response => { this.setState({ posts: response.posts }); });
fetchComments().then(response => { this.setState({ commentss: response.comments }); });
}
*マージはシャローなので、setState({comment}) は、this.state.posts を損なわずに、this.state.comments を置き換える
====データは下へ流れる====
*親だけでなく子コンポーネントも確実にステートフルかステートレスか知ることはできない。
*状態はしばしばローカルから呼び出されるかカプセル化されていて、他からアクセスできない。
*コンポーネントは、自身の状態をpropsを通して子コンポーネントに渡す
<h2>It is {this.state.date.toLocalTimeString()}.</h2>
*これは、ユーザー定義コンポーネントでも動作する
<FormattedDate date={this.state.date} />
*FormattedDateコンポーネントは、propsにdateを受け取り、Clockの状態が何かは知らない。
function FormatterDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
*これは一般的に、トップダウン、もしくは、ユニディレクショナルデータフローという
*状態は常に特定のコンポーネントに属する。
*データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる
===イベントの処理===
*[[React]] 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。
**[[React]]イベントは、ロウアーケースではなく、キャメルケース
**JSXでは、stringではなく、関数をイベントハンドラーとして渡す。

=====[[HTML]]=====
<button onclick="test()" />
=====[[React]]=====
<button onClick={test} />

*もう一つの違いは、[[React]]では、falseを返しデフォルトのふるまいを防止することができない。
*明示的に、preventDefault を呼び出す必要がある。

=====[[HTML]]でデフォルトの新しいページを開くリンクのふるまいを防止する=====
<a href="#" onclick="console.log('hoge'); return false" >Click</a>
=====[[React]]=====
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('hoge');
}
return (
<a href="#" onClick={handleClick} >Click</a>
)
}
*e は、本物ではないイベント。Reactでは、[https://www.w3.org/TR/DOM-Level-3-Events/ W3C]に合わせるために定義している。
*なので、ブラウザの互換性を心配する必要はない。[https://facebook.github.io/react/docs/events.html リファレンス]を参照
*[[React]]では、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
*ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
class Toggle extends [[React]].Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevStae => ({
isToggleOn: !prevStae.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick} >
{this.state.isToggleOn?"ON":"OFF"}
</button>
);
}
}
[[React]]DOM.render(
<Toggle />,
document.getElementById('root')
);
*この文法の問題点は、LoggingButtonがレンダリングされるたびに、異なったコールバックが生成されること
*多くのケースで、これは問題ないが、このコールバックが下位のコンポーネントにpropとして渡される場合、コンポーネントは余分にレンダリングすることになる。
*コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。
===条件付きのレンダリング===
*[[React]]では、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。
*Reactの条件付きレンダリングは、[[JavaScript]]の条件が動作するのと同じ方法で動作する。
*[[JavaScript]]のifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
=====以下の2つのコンポーネントについて考える=====
*ユーザーがログインしているか否かによって使い分けたい。
*isLoggedIn により、異なるレンダリングがなされる。
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />
} else {
return <GuestGreeting />
}
}
[[React]]DOM.render(
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
====要素変数====
*要素を保持するのに変数を利用できる。
*これは、出力結果が変わらない間に、条件によりコンポーネントの一部をレンダリングするのを助ける。
function LoginButton(props) {
return (
<button onClick={props.onClick} >
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick} >
Logout
</button>
);
}
class LoginControl extends [[React]].Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick(){
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />
} else {
button = <LoginButton onClick={this.handleLoginClick} />
}
return (<div>{button}</div>);
}
}

[[React]]DOM.render(
<LoginControl />,
document.getElementById('root')
);
[[File:1085_react_debug.jpg]]
====インラインif と論理 && 演算子====
*true && 演算子の場合評価され、false && の場合、falseとなり[[React]]は無視する
function MailBox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['message1','message2'];
[[React]]DOM.render(
<MailBox unreadMessages={messages} />,
document.getElementById('root')
);
====インライン if-else とコンディション演算子====
*条件 ? true : false
function UserGreeting(props){
return <h1>Welcome to back!</h1>
}
function GuestGreeting(props) {
return <h1>Please Sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<UserGreeting />
) : (
<GuestGreeting />
)
}
</div>
);
}
[[React]]DOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
====コンポーネントのレンダリングさせない====
*他のコンポーネントからレンダリングされたとしてもコンポーネントを隠したい場合、render出力の代わりにnullを返す
function WarningBanner(props){
if(!props.warn) {
return null;
}
return (
<div>Warning!</div>
);
}
class Page extends [[React]].Component {
constructor(props) {
super(props);
this.state = {showWarning : true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState =>({showWarning : !prevState.showWarning}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

[[React]]DOM.render(
<Page />,
document.getElementById('root')
);
[[File:1095_react10.jpg]]
===リストとキー===
=====[[JavaScript]]でリストの変換には、map()を利用する=====
const numbers = [1,2,3,4,5];
const doubled = numbers.map((number)=> number * 2);
console.log(doubled)
> [2, 4, 6, 8, 10]
*[[React]] では同様に配列をリストに変換する
====複数のコンポーネントをレンダリングする====
const fruits = ['apple','orange','grape','banana'];
const listItems = fruits.map((fruit) => <li>{fruit}</li>);
[[React]]DOM.render(
<ol>{listItems}</ol>,
document.getElementById('root')
);

[[File:1096_react11.jpg]]
====基本的なリストコンポーネント====
*通常リストはコンポーネントに含まれる
=====Keys=====
*keyを指定しないと警告がでる
*keyは、[[React]]が、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
*文字列で兄弟間でユニークな値を設定するのが望ましい
function FruitList(props) {
const fruits = props.fruits;
const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====コンポーネントをKeyと取り出す====
*Keyが意味を持つのは、配列を囲むコンテキストにおいて
*兄弟間で同じKeyを持つとエラーとなる
function ListItem(props) {
// この<li> にKeyを設定するのは、ここがルートになるため間違い
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
// <ListItem>の配列となるため、ここでKeyを指定するのが正しい
const listItems = fruits.map((fruit) => <ListItem key={fruit} value={fruit} />);
return (
<ol>{listItems}</ol>
);
}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
====JSXでmap()を埋め込む====
*中括弧のインラインにmap()を置くことができる
function ListItem(props) {
return <li>{props.value}</li>
}
function FruitList(props) {
const fruits = props.fruits;
return (
<ol>{fruits.map((fruit) => <ListItem key={fruit} value={fruit} />)}</ol>
);

}
const fruits = ['apple','orange','grape','banana'];
[[React]]DOM.render(
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
===Form===
*HTML Formは、[[React]]では、少し他のDOMとは動作が異なる。
*なぜなら Fromは通常内部状態をもつから。
====コントロールされたコンポーネント====
*[[HTML]]でFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。
*[[React]]では、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。
*"single source of truth"として[[React]] stateを作成することにより2つを結びつけることができる。
*[[React]]コンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。
*input Form 要素の値は、[[React]]によりこの方法で制御される。
*これは、「コントロールされたコンポーネント」と呼ばれる。

class NameForm extends [[React]].Component {
constructor(props) {
super(props);
this.state = {value : ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value });
}
handleSubmit(event) {
alert('A name was submitted ' + this.state.value);
event.preventDefault();
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<label>Name: <input type="text" value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit"/>
</form>
);
}
}
[[React]]DOM.render(
<NameForm />,
document.getElementById('root')
);
[[File:1097_react12.jpg]]
*valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
*すべてのキーストロークで、handleChangeが起動し、[[React]]のstateを更新する
*表示されるvalueも更新される
handleChange(event) {
this.setState({value : event.target.value.toUpperCase() });
}
====textarea/select タグ====
class SelectParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {value: 'coconuts'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render(){
return(
<label>Select:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grape Fruit</option>
<option value="lime">Lime</option>
<option value="coconuts">Coconuts</option>
<option value="mango">Mango</option>
</select>
</label>
);
}
}
class TextareaParts extends [[React]].Component {
constructor(props){
super(props);
this.state = {
value : 'なにか書いて'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value : event.target.value});
}
render(){
return (
<label>Textarea:<textarea value={this.state.value} onChange={this.handleChange} /></label>
);
}
}
[[React]]DOM.render(
<div>
<SelectParts />
<TextareaParts />
</div>,
document.getElementById('root')
);
====複数入力項目の処理====
*複数のコントロールされた入力要素を処理したい場合、name属性を各要素に追加する
*ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
*ES6 [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 計算されたプロパティ名]構文をkey状態を更新するのに使用
class Reservation extends [[React]].Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = (target.type == 'checkbox') ? target.checked : target.value;
const name = target.name;
this.setState({[name]: value});
}
render(){
return (
<form>
<label>Is going:<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange}/></label>
<br />
<label>Number of guests:<input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange}/></label>
</form>
);
}
}
[[React]]DOM.render(
<div>
<[[R]]eservation />
</div>,
document.getElementById('root')
);
[[File:1098_react13.jpg]]
====コントロールされたコンポーネント以外の方法====
*コントロールされたコンポーネントを利用するのが、冗長な場合がある。
*入力フォームを実装するための、[https://facebook.github.io/react/docs/uncontrolled-components.html コントロールされないコンポーネント]を参照。
===状態を持ち上げる===
*いくつかのコンポーネントは同じ変更をデータに反映させることを必要とする。
*共有状態をそれらの、最も近い共通の祖先に持ち上げることを推奨する。
=====水が沸騰しているかどうかの計算を行う。=====
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
this.setState({temprature: e.target.value});
}
render(){
const temprature = this.state.temprature;
return (
<fieldset>
<legend>Enter temprature in Celsius:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1099_react14.jpg]]
====2つ目の入力を追加する====
*華氏の入力を追加し同期させる
*[[React]]でstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
*TempratureInputのローカルstateをCalcuratorへ移動させる
*Calucratorの共有stateは、「真の情報源」となる
*TempratureInputにとって、tempuratureがローカルの場合、propsは読み取り専用となるので、this.setState()とするしかないが、tempratureが、親のpropsなので、管理する必要はなくなる。
const scaleName = {
c: '摂氏',
f: '華氏'
};
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function toFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function tryConvert(temprature, convert) {
const input = parseFloat(temprature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
class TempratureInput extends [[React]].Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temprature: ''};
}
handleChange(e){
// before:this.setState({temprature: e.target.value});
this.props.onTempratureChange(e.target.value);
}
render(){
// before:const temprature = this.state.temprature;
const temprature = this.props.temprature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temprature in {scaleName[scale]}:</legend>
<input value={temprature} onChange={this.handleChange} />
<BoilingVerdict celsius={parseFloat(temprature)} />
</fieldset>
);
}
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
this.handleCelsiumChange = this.handleCelsiumChange.bind(this);
this.handlFahrenheitChange = this.handlFahrenheitChange.bind(this);
this.state = {scale:'c', temprature:''};
}
handleCelsiumChange(temprature) {
this.setState({scale:'c', temprature});
}
handlFahrenheitChange(temprature) {
this.setState({scale:'f', temprature});
}
render() {
const scale = this.state.scale;
const temprature = this.state.temprature;
const celsius = scale == 'f' ? tryConvert(temprature, toCelsius) : temprature;
const fahrenheit = scale == 'c' ? tryConvert(temprature, toFahrenheit) : temprature;
return (
<div>
<TempratureInput scale="c" temprature={celsius} onTempratureChange={this.handleCelsiumChange} />
<TempratureInput scale="f" temprature={fahrenheit} onTempratureChange={this.handlFahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
[[React]]DOM.render(
<div>
<Calculator />
</div>,
document.getElementById('root')
);
[[File:1100_react15.jpg]]
===コンポジションと継承===
*[[React]]は強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する
====封じ込める====
*一部のコンポーネントは自身の子供を事前に知ることができない
*これは、特にサイドバーやダイアログなどボックスを表現するコンポーネント共通
*このようなコンポーネントには特別な子供propを使用し直接その要素に出力する
*<FancyBorder>の内側に何があっても、JSXタグはFancyBorderコンポーネントをprops.children として経由する
<style type="text/css">
div.FancyBorder {
border : 2px dashed;
}
div.FancyBorder-blue {
border-color: blue;
}
</style>

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
</FancyBorder>
);
}
[[React]]DOM.render(
<div>
<WelcomDialog />
</div>,
document.getElementById('root')
);
[[File:1101_react16.jpg]]
====特殊化====
*コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
*[[React]]では、コンポジションを使って実現する
*クラスを用いても同様に記述できる
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">{props.title}</h1>
</FancyBorder>
);
}
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomDialog() {
return (
<Dialog title="Welcome" />
);
}

===[[React Router]]===
*[[React Router]]
===[[Redux]]===
*[[Redux]]
===[[Tips]]===
*[http://typea.info/blg/glob/2017/06/react.html React のシンタックスエラーをデバッグ]

{{ref example.zip}}
====ビルド====
*https://mae.chab.in/archives/2765
*https://mae.chab.in/archives/2891

TypeScript

2024-10-05T08:25:16Z

Piroto:

| [[Node.js]] | [[Angular]] | [[Google Cloud Platform]] | [https://www.typea.info/blog/index.php/category/typescript/ ブログカテゴリ(TypeScript)] | [[JavaScript]] | [[React]] | [[Nextjs]] |

{{amazon|4873119049}}

==[[TypeScript]]==
*https://www.typescriptlang.org/docs/home.html

===準備===
----
====install====
----
[[npm]]

> [[npm]] install -g typescirpt

====init====
----
=====tsconfig.json の生成=====
----
> tsc --init
====[[Visual Studio Code]] タスク====
----
F1 - task run - build tsconfig.json

====Proejctテンプレート====
----
*https://www.typescriptlang.org/docs/bootstrap
*TypeScriptはJavaScriptのスーパーセットであるため、デフォルトのテンプレートはありません -
*代わりに、他のプロジェクトが独自のコンテキストを持つ独自のTypeScriptブートストラップ・テンプレートを用意しています。

====Playground====
----
*動作確認や、どのような[[Java]]scriptに変換されるか確認
*https://www.typescriptlang.org/play/
[[File:1217_ts_playground.jpg]]

==モジュール==
*CommonJSのモジュール標準requreでは、同期的呼び出しになる、静的に解析可能でない場合がある。
*module.exportsもrequire もコードのどこでも使用可能で任意の文字列、式を含むことができる。
var hogeModule = require('hogeModule');
module.exports.hoge = function() {}
*ES2015(JavaScript 6thエディション)では静的に解決可能な簡潔な公文を導入
*TypeScriptでの使用標準
import hoge from 'hogeModule';
export function hoge() {}
===インポート・エクスポート===
*[https://qiita.com/rooooomania/items/4c999d93ae745e9d8657 CommonJS と ES6の import/export で迷うなら]

====ES2015のimport/export構文を使用すべき====
*a.ts
export function foo() {}
export function bar() {}
*b.ts
import { foo, bar } from './a';
foo();
export let result = bar();
====ES2015ではデフォルトエクスポートをサポート====
*c.ts
export default function hoge(param: number) {}
*d.ts
import hoge from './c';
hoge(12);
====ワイルドカードで全てをインポート可能====
*e.ts
import * as a from './a';
a.foo();
a.bar();
====モジュールから再エクスポート可能====
*f.ts
export * from './a';
export { result } from './b';
export hoge from './c';
====TypeScriptでは型やインターフェースもエクスポート可能====
*g.ts
export let X = 3;
export type Y = { y: string };

===名前空間===
<q>TypeScriptで名前空間はサポートされているが、カプセル化のための望ましい方法ではない。名前空間とモジュール化のどちらを選択するか確信を持てない場合、モジュール化を選択する。JavaScriptの標準により従うことになり、依存関係がより明示的になる。特に中、大規模プロジェクト</q>

*namespace ブロックで定義
*exportで外側からアクセス可能なことを明示
*完全修飾名で呼び出す
namespace NameA {
export class Foo {
name() {
console.log("NameA.Foo");
}
}
export function bar(){
console.log("NameA.bar()");
}
}
let foo = new NameA.Foo();
foo.name();
NameA.bar();
====名前空間のネスト====
namespace NameB {
export namespace NameC {
export function bar(){
console.log("NameB.NameC.bar()");
}
}
}
NameB.NameC.bar();

==変数・型==
===変数・定数===
{|class="wikitable"
!変数宣言
!ブロックスコープ
!同じスコープでの重複宣言
!備考
|-
|var
|認識しない
|認める
|-
|let
|認識する
|認めない
|-
|const
|認識する
|認めない
|再代入不可
|-
|}
===型===
{|class="wikitable"
!型
!説明
|-
|any
|任意、型がわからない場合。型チェックされずなんでもできてしまうため、できれば避ける。
|-
|unknown
|any同様任意の型をあらわすが、前もって型がわからない場合、anyではなくこちらの利用を推奨
|-
|number
|数値
|-
|bigint
|まるめ誤差なく大きな整数を扱うことができる(プラットフォームでサポートされているか確認が必要) let bi = 123n
|-
|string
|文字列
|-
|boolean
|真偽
|-
|symbol
|シンボル
|-
|object
|オブジェクト
|-
|T[]
|配列 number[],string[]
|}

====unknown型====
*値の比較、否定、typeof,instanceofが使用可能。以下のように利用する
let foo: unknown;
foo = 1;
// let bar = foo + 2; // unknown のためエラー
if (typeof foo == 'number') {
let bar = foo + 2; // OK
console.log(bar);
}

====undefinedも許可====
*string もしくは undefined
*aa 初期化時に必須だが、bbは指定しなくてもエラーとならない。
interface hoge {
aa : string,
bb? : string
}
var h: hoge = {aa:'aaa'};

===演算子===
*基本的に[[JavaScript]]と同じ
*https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

{|class="wikitable"
!演算子
!説明
|-
|??
|[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator Null合体] 左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|}

===文字列リテラル===
====`バッククオートで囲む(変数展開）====
*改行もそのまま
*${...} ...に変数、式を埋め込み
class Program {
static main() {
let name: string = "Hiroto Yagi";
let age = 46; // 型推論
// age = "Hello"; // 数値型に文字列代入エラー
let msg = null; // 初期値未指定、null指定など、any型と類推され型チェックは働かない
msg = 100; // noImplicitAny:true とすると、暗黙的 anyは許容しない
msg = "Hello";

// テンプレート文字列
console.log(`
${msg}
my name is ${name}
age ${age}
${new Date()}`);
}
}

Program.main();
=====結果=====
> node ./src/app.js

Hello
my name is Hiroto Yagi
age 46
toda Tue Nov 07 2017 18:59:23 GMT+0900 (東京 (標準時))

===型アサーション===
====キャスト====
function show(message: string) {
console.log(`${message}`);
}
class TypeAssartion {
static main() {
// show(10); // E[[R]][[R]]O[[R]]
show(<any>10); // OK
show(10 as any); // as もOK
}
}

===コレクション/インターフェース===
*配列
*連想配列
*インデクスシグネチャはinterfaceとして事前定義可
interface StringMap {
[index:string]:string;
}
class Collection {
static main() {
// 配列
let languages: string[] = ['java','C#','python'];
console.log(languages);

// 連想配列
let fwMap: {[key:string]:string} = {
'java':'[[Spring]]',
'[[C#]]':'Asp.net',
'python':'[[Django]]'
};
console.log(fwMap);

// インデクスシグネチャはinterfaceとして事前定義可
let fwMap2: StringMap = {
'java':'[[Spring]]',
'[[C#]]':'Asp.net',
'python':'[[Django]]'
};
console.log(fwMap2);
}
}

===列挙===
enum Animal {
DOG,
CAT,
MOUSE,
ELEPH[[ANT]]
}
enum Fruit {
APPLE = "A",
O[[R]]ANGE = "O",
PAINAPPLE = "P"
}
class EnumSample {
static main() {
let mypet: Animal = Animal.DOG;
// デフォルトで0からの数値が割り当てられる
console.log(mypet);
console.log(Animal[mypet]);

let myfavarit: Fruit = Fruit.PAINAPPLE;
// 列挙子に値を割り当てることも可能
console.log(myfavarit);
}
}
=====結果=====
0
DOG
P
===タプル===
*配列のサブタイプ
*固定長の配列を型づけ
let tpl: [string, number, boolean] = ['Yagi', 46, true];
console.log(`name:${tpl[0]} age:${tpl[1]} marriged:${tpl[2]}`);

===合併型(共用型)と交差型===
*型の合併と交差を表現する特別な演算子が用意されている。
*合併 | と交差 &
*型エイリアスの例
type Sales = { dept: string, product: string};
type Engineer = { dept: string, project: string };

type SalesOrEngineewOrBoth = Sales | Engineer; // 合併
type DeptPerson = Sales & Engineer; // 交差

*合併型(共用型)使用例
let data: string | boolean;
data = 'foo';// OK
data = true; // OK
// data = 1; // NG

let datas: (boolean | number)[] = [true, false, 1, 0];

===型エイリアス===
*型の別名を定義できる
*ブロックスコープ
type Age = number;
let myage: Age = 48;

*主にタプル、共用型に別名を付与。インターフェースでできる場合に使用しないほうがよい
type ProfileTuple = [string, number, boolean];
let me = ['yagi', 46, true];
console.log(`name:${me[0]} age:${me[1]} marriged:${me[2]}`);

===文字列リテラル===
type Season = 'spring' | 'summer' | 'autumn' | 'winter';
class StringLiteralType {
printSeason(s: Season) {
console.log(s);
}
static main() {
let me = new StringLiteralType();
me.printSeason('summer'); // OK
// me.printSeason('hoge'); // NG
}
}

===keyof演算子===

==関数==
*function命令
*関数リテラル
*アロー関数
===関数、関数リテラル、アロー関数===
*関数リテラル(型推論)
*関数リテラル(型明示)
*アロー関数(ラムダ式)
[[Category:ラムダ]]

function squire(x: number, y: number) :number {
return x * y;
}
class FunctionSample{
static main() {
// 関数の使用
console.log(squire(8,8));

// 関数リテラル(型推論)
let m3 = function(x :number, y: number, z: number): number {
return x * y * z;
} ;
console.log(m3(8,8,8));

// 関数リテラル(型明示)
let m2: (x: number, y: number) => number = function(x: number, y: number) {
return x * y;
};
console.log(m2(9,9));

// アロー関数(ラムダ式)
// this は宣言された場所によって変わる
let m22 = (x: number, y: number): number => x * y;
console.log(m22(5,5));
}
}

===引数の省略、デフォルト引数、可変長引数===
*TypeScriptでは宣言された引数はすべて必須
**引数を省略したい場合、仮引数の名前の後ろに ? を付与
*関数のデフォルト値を設定するには、仮引数の後に=デフォルト値
**デフォルト値には、式も利用できる
**明示的に undefined を渡した場合もデフォルト値が利用される
*可変長引数
**仮引数の前に、... とすることで可変長引数となる
**関数に1つ、最後のパラメータのみ

class FunctionApplySample {
static main(){
// TypeScript]は宣言された引数はすべて必須
// 引数を省略したい場合、仮引数の名前の後ろに ? を付与
let greet = function(message?: string){
message = (message === undefined)?"hello":message;
console.log(message);
}
greet();
greet("good evening");

// 関数のデフォルト値を設定するには、仮引数の後に=デフォルト値
// デフォルト値には、式も利用できる
// 明示的に undefined を渡した場合もデフォルト値が利用される
let greet2 = function(message: string=`hello ${new Date()}`) {
console.log(message);
}
greet2();
greet2("good night");
greet2(undefined);

// 可変長引数
// 仮引数の前に、... とすることで可変長引数となる
let sum = function(...nums: number[]):number {
let ttl: number = 0;
nums.forEach((value,index,array) => ttl += value);
return ttl;
}
console.log(sum(1,2,3,4,5));
}
}

===thisの型を明示===
*thisが望むものであることを強制
*thisが関数シグネチャの一部として用いられる場合、予約語
function printMonth(this:Date) {
console.log(`${this.getMonth()+1}`);
}
printMonth.call(new Date());
printMonth.call(1); // チェックでエラー表示される

===関数のオーバーロード1===
#シグネチャのみの関数を用意
#具体的な実装を直後に定義
#実装の中で、typeof/instanceof を用いて型を判定し処理を記述

function showMessage(value: number): void;
function showMessage(value: boolean): void;
function showMessage(value: any): void {
let message: string | undefined;
if (typeof value === 'number') {
message = `${value} is number.`;
}
if (typeof value === 'boolean') {
message = `${value} is boolean`;
}
console.log(message);
}

class FunctionApplySample2 {
static main(){
console.log("*** 関数応用2 ***");
// 1.シグネチャのみの関数を用意
// 2.具体的な実装を直後に定義
// 3.実装の中で、typeof/instanceof を用いて型を判定し処理を記述
showMessage(123);
showMessage(false);
showMessage("Hello" as any);
}
}
===ユーザー定義型ガード===
*typeaof/instanceof は組み込みの型を絞り込むための機能
*is 演算子を使用して独自に定義可能
function hoge(val:string | number) {
if (isString(val)) {
console.log(val.toUpperCase());
} else {
console.log(val);
}
}
// boolean を返す関数の場合、型の絞り込みを行うことができる
function isString(val: unknown): val is string {
return typeof val === 'string';
}
hoge(1);
hoge('a');
*結果
1
A

===関数のオーバーロード2===
*オーバーロードされた関数２つのシグネチャを宣言
*実装のシグネチャは２つの宣言を結合したもの
* 呼び出すときに結合されたシグネチャは見えない

// オーバーロードされた関数２つのシグネチャを宣言
type ShowMessage = {
(value: number):void,
(value: boolean):void
}

// 実装のシグネチャは２つの宣言を結合したもの
let showMessage: ShowMessage = (
value : number | boolean
) => {
let message: string | undefined;
if (typeof value === 'number') {
message = `${value} is number.`;
}
if (typeof value === 'boolean') {
message = `${value} is boolean`;
}
console.log(message);
}
*実行
// 呼び出すときに結合されたシグネチャは見えない
showMessage(12);
showMessage(true);
＊結果
12 is number.
true is boolean

===ジェネレーターとイテレーター===
*ジェネレーター関数(function* )により生成
*生成されたオブジェクトは、反復可能なイテレーター
*利用者が要求したときだけ値を生成する
function* increament(start: number) {
　while (true) {
start++;
yield start;
}
}

let i = increament(10);
console.log(i.next().value);
console.log(i.next().value);
console.log(i.next().value);

*結果
11
12
13

==オブジェクト指向==
===クラス定義===
class Person {
// メンバー
name: string;　// デフォルト public
private _age: number;

// 静的メンバー
public static CHEAT_AGES: number = 2;

// コンストラクター
constructor(name: string, age: number){
this.name = name;
this._age = age;
}

// 以下のコンストラクターでメンバーの宣言と代入を省略できる
// アクセス修飾子必須
// constructor(public name: string, private _age: number) {
// }

// アクセッサー
get age(): number {
return this._age - Person.CHEAT_AGES;
}
set age(value: number) {
this._age = value;
}

// メソッド
print[[Profile]](){
console.log(`name=${this.name},age=${this.age}`);
}
}
console.log(Person.CHEAT_AGES);
let me = new Person('Yagi', 46);
//console.log(me.age); // NG
me.print[[Profile]]();
me.age = 50;
me.print[[Profile]]();
=====結果=====
2
name=Yagi,age=44
name=Yagi,age=48

====コンストラクタ====
* コンストラクター
name: string;　// デフォルト public
private _age: number;
constructor(name: string, age: number){
this.name = name;
this._age = age;
}

*以下のコンストラクターでメンバーの宣言と代入を省略できる
**アクセス修飾子必須
constructor(public name: string, private _age: number)
}
====アクセス修飾子====
{|class="wikitable"
!修飾子
!説明
|-
|public
|どこからでもアクセス可能。デフォルト。
|-
|protected
|このクラスと、サブプラスのインスタンスからアクセス可能。
|-
|private
|このクラスのインスタンスのみからアクセス可能
|}

===継承===
class Guiter {
constructor(public maker: string, public type: string){}
print() {
console.log(`${this.type} by ${this.maker}`);
}
}
class Lespaul extends Guiter {
constructor(){
super("Gibson","Lespaul");
}
}
(new Lespaul()).print();
===抽象クラス===
*直接インスタンス化しようとするとエラー
// 抽象クラス
abstract class Viecle {
// 抽象メソッド
abstract getEngineDisplacement(): number;
printDisplacement() {
console.log(`${this.getEngineDisplacement()}`);
}
}
class Premacy extends Viecle {
// 抽象メソッドのオーバーライド
getEngineDisplacement(): number {
return 2000;
}
// メソッドオーバーライド
printDisplacement() {
console.log("******");
super.printDisplacement();
console.log("******");
}
}
(new Premacy()).printDisplacement();

===インターフェース===
*型エイリアスと同様、インターフェースは型に名前をつけるための方法
**ほぼ同じだが、細かな差異もある。
*インラインで型を定義する必要がなくなる。

interface Color {
// メソッドはすべて抽象メソッド
// abstract 指定は不要
get[[R]]GB(): string;
}
class [[R]]ed implements Color {
get[[R]]GB(): string {
return "#FF0000";
}
}
console.log((new [[R]]ed()).get[[R]]GB());

====型とインターフェースの違い====
*型は右辺に任意の値をおけるがインターフェースはそうではない。
*以下のようなコードはインターフェースに書き換えられない
type A = number;
type B = A | string;
*インターフェースを拡張する場合、拡張元が拡張先に適用できるかチェックする。型エイリアスの場合拡張元と先を結合するために最善を尽くす
*同じスコープに同じ名前のインターフェースが複数存在する場合、自動的にマージされる。

===super===
*親クラスのメソッドを呼び出すことができる。super.hoge();
*コンストラクターとして呼び出す。super();

===構造的部分型(Structual subtyping)===
class Hoge {
constructor(public name: string, public age: number){}
}
class Spam {
constructor(public name: string, public age: number){}
}
// 継承による明示的な互換性(Nominal subtyping)がなくても構造が一致していれば代入可能
let h: Hoge = new Spam("spam",10);
console.log(h);

===型注釈としてのインターフェース===
*インターフェースを型注釈として利用できる
interface Shape {
// プロパティシグネチャ
name: string;
// メソッドシグネチャ
draw():void;
}
let c : Shape = {
name:'circle',
draw() {
console.log(`${this.name}:○`);
}
};
c.draw();

====オブジェクトリテラル====
*インターフェースを定義するまでもないが、型情報は明示しておきたい場合
let t : { name: string, sides: number} = {name: 'triangle', sides: 3};
===型としてのthis===
*自分自身を返すことで、メソッドチェーンのような記述が可能となる
*派生クラスなど、呼び出し元のクラスに応じ型が変化する
class StringBuilder {
constructor(protected _value: string){
}
toString(): string {
return this._value;
}
wrap(value: string) :string{
return `${value}`;
}
// 自分自身を返すことで、メソッドチェーンのような記述が可能となる
// 派生クラスなど、呼び出し元のクラスに応じ型が変化する
append(value: string): this {
this._value = this._value + this.wrap(value);
return this;
}
}
let buf = new StringBuilder('a');
buf.append('b').append('c').append('d');
console.log(buf.toString());

class CsvBuilder extends StringBuilder {
constructor(protected _value: string){
super(_value);
}
wrap(value: string) {
return `,${value}`;
}
}
let csv = new CsvBuilder('a');
csv.append('b').append('c').append('d');
console.log(csv.toString());
=====出力=====
abcd
a,b,c,d

===ジェネリック===
let numary: Array<number> = [1,2,3,5,8];
====ジェネリック型の定義 ====
*StringBuilder型は、上記で定義参照
*型引数に制約を付与する場合、extends を使用する。
*使用しなければ、あらゆる型を渡すことができる

class XmlBuilder extends StringBuilder {
constructor(protected _value: string){
super(_value);
}
wrap(value: string) {
return `<value>${value}</value>`;
}
toString(): string {
return `<values>${this._value}</values>`;
}
}

// 型引数に制約を付与する場合、extends を使用する。
// 使用しなければ、あらゆる型を渡すことができる
class [[R]]eport<T extends StringBuilder> {
builder: T;
getBuilder(): T {
return this.builder;
}
addLine(line: string) {
this.getBuilder().append(line);
}
report() {
console.log(this.getBuilder().toString());
}
}
let rep = new [[R]]eport<XmlBuilder>();
//　ジェネリック型に具体的なインスタンスを紐づけ
rep.builder = new XmlBuilder('');
rep.addLine("this is lesson.");
rep.addLine("of [[TypeScript]].")
rep.report();
=====出力例=====
<values><value>this is lesson.</value><value>of [[TypeScript]].</value></values>

====ジェネリックメソッド====
function reverse<T>(data: T[]): T[] {
let ary: T[] = new Array();

let j=0;
for(let i=data.length-1; i>=0; i--) {
ary[j++] = data[i];
}
return ary;
}
console.log(reverse<number>([1,2,3,4]));
console.log(reverse<string>(["a","b","c","d"]));
=====出力例=====
[ 4, 3, 2, 1 ]
[ 'd', 'c', 'b', 'a' ]

===サンプル===
{{ref app.ts}}

==非同期プログラミングと並行・並列処理==
===ObservableとPromise===
*https://angular.jp/guide/comparing-observables
====比較====
*Observable は宣言型で、購読するまで処理が開始されない。Promise は作成時に直ちに実行される。
**結果が必要なときにいつでも実行できるレシピを定義するために、Observable が役立つ。
*Observable は多くの値を提供します。Promise は1つです。
**時間の経過とともに複数の値を取得するのには Observable が有効
*Observable は、連鎖とサブスクリプションを区別します。Promise は .then() 句しかありません。
**Observableは、作業を実行させることなく、システムの他の部分で使用される複雑な変換レシピを作成するのに便利
*Observable の subscribe() はエラーを処理します。Promise は子の Promise にエラーをプッシュします。
**Observable は集中管理され、予測可能なエラー処理に役立

===Observable===
*RxJsライブラリ
*https://angular.jp/guide/rx-library

リアクティブプログラミングは、データストリームと変更の伝播に関する非同期プログラミングのパラダイムです。
RxJS (Reactive Extensions for JavaScript) は、非同期またはコールバックベースのコード (RxJS Docs) の作成を容易にする
observables を使用したリアクティブプログラミング用のライブラリ

*非同期処理の既存のコードを observables に変換する
*ストリーム内の値を反復処理する
*異なる型への値のマッピング
*ストリームのフィルタリング
*複数のストリームの作成

====Observable 作成関数====
ベント、タイマー、promise などから observables を作成するプロセスを簡素化
====promise から observable を作成====
import { from } from 'rxjs';

// promise から Observable を作成
const data = from(fetch('/api/endpoint'));
// 非同期の結果の購読を開始
data.subscribe({
next(response) { console.log(response); },
error(err) { console.error('Error: ' + err); },
complete() { console.log('Completed'); }
});

====カウンターから observable を作成する====
import { interval } from 'rxjs';

// 一定間隔でで値を発行するObservable を作成
const secondsCounter = interval(1000);
// 発行される値の購読を開始
secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`));

====イベントから observable を作成する====
import { fromEvent } from 'rxjs';

const el = document.getElementById('my-element');

// マウスの移動を発行する Observable の作成
const mouseMoves = fromEvent(el, 'mousemove');

// マウス移動イベントを購読開始
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);

// スクリーンの左端をマウスが越えたら購読中止
if (evt.clientX < 40 && evt.clientY < 40) {
subscription.unsubscribe();
}
});

====AJAX リクエストから observable を作成====

import { ajax } from 'rxjs/ajax';

// AJAXリクエストを生成する Observable の作成
const apiData = ajax('/api/data');
// リクエストの生成を購読
apiData.subscribe(res => console.log(res.status, res.response));

===Promise===
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
*非同期の作業を抽象化して、それらを組み立てたり順番に並べる方法
import { isNumber } from "util";

function getPromise(waittime:string): Promise<string> {
return new Promise<string>((resolve, reject) => {
if (isNaN(Number(waittime)) ) {
reject("error");
} else {
const wt = parseInt(waittime);
setTimeout(() => {
resolve(`WAIT ${wt}`);
}, wt);
}
});
}

function usePromise() {
getPromise("2000")
.then((v) => {
console.log(v);
})
.catch((e) => {
console.log(e);
});
getPromise("aaaaa")
.then((v) => {
console.log(v);
})
.catch((e) => {
console.log(e);
});
}

usePromise();
*結果
非同期で呼び出すため、呼び出し結果と出力順序が入れ替わる
error
WAIT 2000

===async , await===
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
*Promiseはとてもポピュラーなパターンなので、JavaScript(TypeScript)では独自の構文が用意されている。
*await は .then に対するシンタックスシュガーと言える
*await を使ってPromiseを待機する場合、async ブロックの中で行う
*ラムダの場合 hoge(async ()=> {})
import { isNumber } from "util";

function getPromise(waittime:string): Promise<string> {
return new Promise<string>((resolve, reject) => {
if (isNaN(Number(waittime)) ) {
reject("error");
} else {
const wt = parseInt(waittime);
setTimeout(() => {
resolve(`WAIT ${wt}`);
}, wt);
}
});
}

async function usePromise() {
try {
let result = await getPromise("2000")
console.log(result);
let result2 = await getPromise("aaaa")
console.log(result2);
} catch(e) {
console.log(e);
}
}

usePromise();
*結果
await で同期されるため、呼び出し順に出力される
WAIT 2000
error

===非同期ストリーム===
*一般的には、イベントエミッター(Node.jsでは、EventEmitter)、リアクティブプログラミングライブラリー([https://www.npmjs.com/package/rxjs RxJS]、[https://github.com/mostjs/core MostJS] など)を利用する
*2つの違いはコールバックとPromiseに似ている。イベントエミッターは軽量、迅速であり、リアクティブプログラミングは強力でイベントストリームを組み立てたり並べたりが可能
===マルチスレッディング===
*上記までは非同期処理
*マルチスレッドによる並列処理を行う
*[[TypeScript 並列処理]]

==Node.jsを使う==
[[Node.js]]

*https://ics.media/entry/4682/
*[https://www.typea.info/blog/index.php/2020/07/23/typescript_node_environment/ ローカルにTypeScriptの動作確認環境をNode.jsで作成]
===環境構築===
*作業ディレクトリで実行
$ npm init -y
Wrote to /Users/hirotoyagi/Workspaces/Node/sample/package.json:

{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
*package.jsonを編集
"scripts": {
"build": "tsc",
"watch": "tsc --watch"
},
*TypeScriptのインストールと確認
$ npm install --save-dev typescript
$ node_modules/.bin/tsc --version
Version 3.9.7
*初期化
$ node_modules/.bin/tsc --init
message TS6071: Successfully created a tsconfig.json file.
*[[Node.js]]の型定義をインストール
$ npm install --save @types/node
*tsをTypeScriptで記述しjsにコンパイル
app.ts
console.log("test");

$ npm run build
*app.js が生成されるので、Nodeで実行
app.js
"use strict";
console.log("test");

$ node app

==[[Tips]]==
===TypeDoc===
*https://qiita.com/Mic-U/items/961ce4e0c2a1def1dbd3
*https://qiita.com/ConquestArrow/items/eb4a0dfb13497be4d6a3
====インストール====
> [[npm]] install typedoc -g
====作成====
> typedoc --out ./docs/ ./src/ --module commonjs

===ASP.NET===
*[https://docs.microsoft.com/ja-jp/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019 TypeScript を使用した ASP.NET Core アプリの作成]

===GAE===
*https://cloud.google.com/appengine/docs/standard/nodejs/running-custom-build-step?hl=ja
[[Google App Engine]]

{{amazon|B0733113NK}}
===配列===
====[[JavaScript Array|配列でなければ配列に、配列ならそのまま（もしくは追加)]]====
*[[JavaScript Array|配列でなければ配列に、配列ならそのまま（もしくは追加)]]

[[category:プログラミング言語]]

MUI

2024-10-05T05:48:17Z

Piroto: /* インストール */

[[React]] | [[Next.js]]

*https://mui.com/
*Material UI (MUI) はReactアプリで利用できるコンポーネントを集めたライブラリ

==主なコンポーネント==
*MUI Core　：基本コンポーネント(無償)
*MUI X :　より複雑なユースケースに対応下コンポーネント群(一部有償)
*Templates : MUIベースで構築されたテンプレート群

==インストール==
<pre>
$ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
</pre>

*内部的に[https://emotion.sh/docs/introduction Emotion](フレームワークにとらわれず使うことができるCSS in JSのフレームワーク)を利用している

==使用==
<pre>
import { Button } from '@mui/material';
:

<Button variant="text">Text</Button>
</pre>

MUI

2024-10-05T05:43:26Z

Piroto: /* インストール */

MUI

2024-10-05T05:40:55Z

Piroto: /* 主なコンポーネント */

Next.js

2024-10-05T05:38:28Z

Piroto: /* フォント */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

==実装==

===ルートレイアウト===
====アプリ内のリンクにはLinkコンポーネントを利用====

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

====メタデータ====
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

==フォント==
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

==MUI==
[[MUI]]

Next.js

2024-10-05T05:37:49Z

Piroto: /* Tailwind CSS */

[[React]] | [[MUI]] |

{{amazon|4815619484}}

*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind　CSSへの標準対応

=導入=
<pre>
newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.
</pre>

==実行==
===開発===
<pre>
npm run dev
</pre>

[[File:Start_next_js.png | 300px]]

===本番ビルド＋実行===
<pre>
npm run build
npm start
</pre>

==App Router==
*React Routerとは異なる独自のルーターを標準で提供
*コンポーネントそのものはReactと変わらない

===2種類のルーター===

*Pages Router : 旧来から提供されている
*App Router : Next.js 13から導入された新しいルーター(推奨)

====App Router====
*フォルダベースのルーター
*ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
*page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される

=====アプリ共通の外枠=====
*layout.js
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

===ルートパラメータ===
*[名前] ：単一パラメータ
*[...名前] : キャッチオールセグメント
*<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント

{| class="wikitable"
|+ App Routerのルートパラメータ
|-
! フォルダ階層 !! 対応リクエスト !! パラメータ
|-
| /app/hoge/[id]/page.js || /hoge/001 || { id : '001' }
|-
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] }
|-
| /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {}
|-
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] }

|}

==Tailwind CSS==
*https://tailwindcss.com/
*ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
*ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
*標準のサイズ、カラーなどは用意されている

[https://tailwindcsscheatsheet.com/ Cheat Sheet]

*Tailwind　CSSによるスタイルを適用

<pre>
import "./globals.css";
:

<ul className="fle bg-blue-600 mb-4 pl-2">...</ul>
</pre>

==Prisma==
*JavaScriptアプリからデータベース操作を取り持つO/Rマッパー
===インストール===
*成功すると以下のファイルが生成される
**.env : 環境変数ファイル、gitignore に追加する
** prisma/schema.prisma : Prismaのスキーマファイル

sqliteでの構成例
<pre>
$ npm install prisma --save-dev
$ npx prisma init --datasource-provider sqlite
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
</pre>

===データモデルの定義===
*prisma/schema.prisma に追記
<pre>
model　reviews {
id String @id
title String
author String
price Int
publlisher String
published String
image String
read DateTime @default(now())
memo String
}
</pre>

*DBに反映
<pre>
$ npx prisma db push
</pre>

*Prisma Studio(Webベース管理ツール)で確認
<pre>
$ npx prisma studio
</pre>

==サーバーアクション==
*Next.js内蔵の仕組み
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
*現時点ではα版

===有効化===

next.config.[https://qiita.com/taisei-ide-lyd/items/f3673e913e8b658946a6#:~:text=%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%81%8C.mjs%E3%81%A8. mjs]
<pre>
const nextConfig = {
experimental: {
serverActions: true
}
};
</pre>

==実装==

===ルートレイアウト===
====アプリ内のリンクにはLinkコンポーネントを利用====

<pre>
import Link from "next/link";
</pre>

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる
{| class="wikitable"
|+ コンポーネント
|-
! コンポーネント !! 概要
|-
| <Link> || リンクを生成
|-
| <Script> || スクリプトのロード
|-
| <Image> || 画像を表示
|}

====メタデータ====
*メタデータを定義しておくことで、個々のページに適切なヘッダーなどを埋め込める
*複数箇所で宣言された場合、シャローマージされる
<pre>
export const metadata: Metadata = {
title: "Reading Recorder",
description: "自分が読んだ書籍の記録を残す",
};
</pre>

*generateMetadata関数を利用しデータベースなどから取得した結果を元に動的に生成も可能
<pre>
export async function generateMetadata({ params, searchParams }) {
:
return {
title : result.title,
:
}
}
</pre>

==フォント==
*Googleフォント(無償フォントのディレクトリサービス)を有効化
*具体的なフォントはGoogleフォントから自由に選択できるが一般的にはバリアブルフォント推奨(下例ではInconsolata)
*フォントはファイルサイズが大きいので、subsetで利用する文字のみ取り出す
*fnc.className でフォントを適用できる
<pre>
import { Inconsolata } from 'next/font/google';
const fnt = Inconsolata({ subsets: ['latin'] });

:
<body className={`${fnt.className}` }>
</pre>

MUI

2024-10-05T05:30:36Z

Piroto: