<h2 id="h8d027c8ed3">はじめに</h2><p>前回は編集の部分を実装しました。今回でラスト、削除の部分を作成します。<br>実装量は少ないので頑張りましょう！</p><h2 id="h922edff87b">実装</h2><h3 id="h176470031c">1 リンクファイルの編集</h3>

<h3 id="hd9d956a62f">2 APIを叩くコードを作成</h3><p>今回はuseridとitemidを使います。<br>あとは今までのコードとほとんど変わらず実装できます。</p>

<h3 id="h2f54a789fd">3 deleteButtonの編集</h3><p>上記名前のフォルダの編集をしていきます。<br></p>

<p>今までの総復習のようなもんですね。<br>引数でitemidとuseridを渡しています。<br>そしてタスクが完了か未完了かを分けています。</p><h3 id="h72c8eb9b0b">4 todoItemの編集</h3><p>もうお分かりだと思います。<br>propsが増えたので渡すものを宣言してあげなければなりません。<br>コードは一部を記載します。</p>

<h3 id="hc5aa262454">5 signoutButtonを作成する</h3><p>一応サインアウトボタンも作ります。<br>今回はホームへの遷移だけですが、本来であればDBの仕様を使ってログインしてるかしてないかの状態を保存し〜とか<br>やるんでしょうけど今回は全く考えていなかったので遷移だけにします。</p>

<p>marginTopだけつけようと思います。stylesheetを書いてください。</p>

<h3 id="hbe03a0be37">6 page.tsxにコンポーネントを追加</h3><p><br></p>

<p>こんな感じで一連の流れの処理ができたと思います。</p><h2 id="ha214098e44">まとめ</h2><p>今回はバックエンドからフロントエンドでtodoを作っていきました。<br>長い時間をかけてこの記事を書きましたがなかなか難しいなと思いました。<br>さらに、実装していくうちにこうすると良いかもと思ったのでリファクタをしていこうと思います。<br>それではまた！！！！</p>

削除部分の作成

<h2 id="h8d027c8ed3">はじめに</h2><p>前回は一通り画面を作りました。今回は編集の処理を中心に書いていきます。<br>このアプリも残りわずかで完成というところまで来ました。<br>頑張っていきましょう！！！！</p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/2595f66c28ff4a10a8ea0475386d0f6d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-21%2018.27.05.png?w=270&amp;h=385" alt=""><br>編集ボタンをクリックすると、<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/3fde0524570845cc85fe796b3a386771/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-21%2018.28.04.png?w=268&amp;h=359" alt=""><br>入力することができる。この間に、チェックボックスを押すことはできない。<br>入力してクリックしたら編集が完了する。<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/70e1f089c580417b9b627962827ab66b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-21%2018.31.08.png?w=270&amp;h=508" alt=""><br>チェックボックスを押すと完了タスクの方に移動する。</p><h2 id="hfb15b1be5a">実装開始</h2><h3 id="h9078388cb5">1 リンクファイルにリンクを追加</h3>

<h3 id="h16efb47536">2 apiを叩くコードを作成</h3><p>APIを叩くコードを書きます。<br>今回はPUTメソッドを使います。<br>ですが、今までやってきたコードとあまり変わりはないかなと思います。<br>それでは「api」フォルダの<strong>todo.ts</strong>を開いてください。</p>

<p>基本的には今までのAPIの叩き方と変わりません。<br>methodを<span style="color:#cf3e51">PUT</span>にして引数で受け取ったデータをbodyにして叩くコードになります。</p><h3 id="hf8db7bd5fd">3 editButtonの編集</h3><p>まずはeditButtonの編集です。muiを活用しましょう。<br>編集中の時と編集していない時でアイコンを分けます。<br>さらにAPIを叩いている関数を呼び出す部分も書いています。</p>

<p>編集の完了ボタンが押されたら編集中という状態を変えるだけでなくAPIを叩く関数を呼び出しています。<br>編集してない時の場合はボタンが押されたら状態を変えるだけでOKです。<br>この編集中かそうでないかはチェックボックスのコンポーネントでも使います。</p><h3 id="h31ebdcfa77">4 checkButtonの編集</h3><p>チェックされたかされてないかで完了タスクに移動するかしないかを決めます。<br>編集中の状態も渡し、活性化にするか非活性化にするかを判断させます。<br>また、上記同様にAPIを叩く関数を呼び出す処理を含んだ関数を宣言します。</p>

<p>コードを除く感じだと今までの内容がわかっていれば難しくはないんじゃないかな？って思います。</p><h3 id="hdada12d130">5 todoItemの編集</h3><p>propsが増えたのとその他の処理もちょくちょく増えたので、編集していきましょう。<br>おそらく開いたらエラーが吐かれているかと思います。</p>

<p>編集中かそうでないかの状態変数と編集の際に書き込んだデータを保持しておく状態変数が追加されています。<br>この状態変数を使って文字列が何もなかったら完了ボタンは押せないようにしています。<br>これは、、、editButtonの時の話ですね笑<br>ここでまた新しくEditTextFieldというものが出てきたのでこのコンポーネントを作っていきます。</p><h3 id="h4d770b016c">6 editTextFieldの作成</h3><p>上記のフォルダを作成してコードを書いていきます。</p>

<p>muiって本当に便利ですよね。<br>textFieldの値が変わった時に状態変数に代入するくらい処理でほとんど難しいことはしていません。</p><h3 id="h2cef30f395">7 todoListの編集</h3><p>最後にtodoListの編集をしていきます。<br>といってもpropsが変わっただけです。(確かそうだった気がします。。。)</p>

<p>なんか足らない気がしますが、これで一応編集部分はできたはずです。<br>この通りにやっていってなんかエラーが出たら報告してください。。。<br>数時間前にこのコードを書いたのですが、まとめるのが難しいです。<br>というかどこからどうやって書いたっけ現象が多々起きました。<br>今日はこれで終わりです。次回でラストです。<br></p><h2 id="h66dbaec65f">次回</h2><p>todo削除。</p>

編集部分の作成

<h2 id="h8d027c8ed3">はじめに</h2><p>前回はtodoの投稿部分を作成しました。<br>編集と削除の部分を作成する前にある程度画面を作成してしまおうと思います。<br>間が空いてしまったので抜けている部分があるかもしれないのでそこはご了承ください。</p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/c43b030e1c94419392a61c28c6220af5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-20%2022.01.32.png?w=270&amp;h=476" alt=""><br>未完了の部分と<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/9a6dddf10ed348b6b35af1a02ed579e9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-20%2022.08.00.png?w=270&amp;h=564" alt=""><br>完了部分に分けている</p><h2 id="hfb15b1be5a">実装開始</h2><h3 id="hac226b64f0">1 文言ファイル</h3><p><br></p>

<h3 id="hdda4e60ce1">2 型定義ファイルの設定</h3><p>toggleの属性の型を保存しておきます。</p>

<h3 id="h6b668ac64f">3 静的データファイル(data.ts)にデータ追加</h3><p>toggleの属性を保存しておきます。</p>

<h3 id="h34d603f472">4 todoのmainのファイルであるpage.tsxを修正する</h3><p>未完了と完了を分けます。<br>その関係で<strong>page.tsx</strong>を編集します。</p>

<p>未完了と完了をそれぞれ保存する<span style="color:#cf3e51">useState</span>の部分とtoggleの属性を保存しておく<span style="color:#cf3e51">useState</span>を追加しています。<br>さらに、これから作成するtoggleのcomponentを宣言しておりそこにtoggleの属性を保存する<span style="color:#cf3e51">useState</span>をpropsとして宣言します。<br>TodoList、TodoInputFormに未完了と完了の状態を保存するものをpropsに追加しています。<br><strong>page.tsx</strong>はエラーだらけなはずですが、一旦無視して次へ行きましょう！</p><h3 id="h0ec86c49cb">5 todoInputFormの編集</h3><p>「todoInputForm」のフォルダの中のコードを直していきましょう。<br>直すのは<span style="color:#cf3e51">onClick</span>関数の部分ですが全体像を一応載っけておきます。</p>

<p>新しく出てきたメソッドがありますね。<br>filterが登場です。これは条件に合ったものをリストに入れていくものになります。<br>完了は1で未完了は0なのでそれぞれ、その条件を利用して完了と未完了を分けます。</p><h3 id="hd62958e3f4">6 todoListの編集</h3><p>このフォルダを編集していきます。<br>編集部分が多いですが、一旦コードを載せます。<br>エラーが多くなると思いますが一旦無視しましょう。</p>

<p>ここでは全てのtodoを取得する関数<span style="color:#cf3e51">firstFunction</span>に完了タスクと未完了タスクを分けるコードを追加しています。<br>また、描画の部分では三項演算子とtoggleの属性をうまいこと使って完了部分と未完了部分で分けます。<br>そしてまだ、作成していないが<span style="color:#cf3e51">IsComplete</span><span style="color:#333333">コンポーネントに「完了タスク」か「未完了タスク」かのタイトル、完了しているかしていないかのboolean、お互いの配列の長さをpropsにしている。</span></p><h3 id="h422fde7e54"><span style="color:#333333">7 isCompleteを作成</span></h3><p>上記の名前のフォルダを作りそこにコードを書いていきましょう。</p>

<p>新しく出てきたものがまたあります。Reactnodeの<span style="color:#cf3e51">children</span>です。todoListの部分でいつもとcomponentの宣言が違いましたよね。<br>componentはhtmlタグ自体をpropsとして渡すことができます。複数のタグを渡しているので配列の型になっています。<br>この部分はstyleを振る必要があるのでstylesheetも書いていきましょう。</p>

<p>完了と未完了で背景色を変えているのでその辺のコードも注目しながら見てください。</p><h3 id="heca0fbd71b">7 todoItemの作成</h3><p>上記フォルダを作成し書いていきます。<br></p>

<p>また、componentがありますね。<br>その前にstylesheetを書きます。</p>

<p>stylesheetに関してはあまり説明はしません。<br>では3つのcomponentを作っていきましょう。</p><h3 id="h2359b132f6">8 editButton、checkButton、deleteButtonの作成</h3><p>3つのcomponentを作成していきます。基本的にはmuiを使っていきます。<br>まず、EditButtonから。</p>

<h3 id="hd1eae9dbe8">9 toggleボタンを作る</h3><p>あと一息です。頑張りましょう。<br>最後にtoggleボタンを作ります。<br>これもmuiの素材をパクってきます。<br>「isCompleteToggle」フォルダを作成して書いていきます。</p>

<p>toggleの属性を定義した配列オブジェクトとmap関数を利用してtoggleボタンを作成しています。<br>また、toggleの状態が変わった時にその属性を入れ替えるよう<span style="color:#cf3e51">handleChange</span>関数で処理を書いています。<br>これで画面が出来上がったはずです。(抜けていたらごめんなさい。)</p><h2 id="h66dbaec65f">次回</h2><p>編集の処理</p>

todoのリスト部分の画面作成

<h2 id="h8d027c8ed3">はじめに</h2><p>前回まではログインの機能を作っていましたね。<br>今回からはメインのtodo機能を作っていきます。<br>APIを叩くイメージ等がここでついていくのではないかと思いますので<br>頑張ってやっていきましょう。<br>作っていく機能はtodoの投稿部分と取得部分です。</p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/8527c7bb36074f5494fd7aecbfaf1058/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-10%2015.15.28.png?w=270&amp;h=717" alt=""><br>このように登録したものが見れて<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/f49d88edc9434a55b2ec5effae6e311b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-10%2015.19.05.png?w=270&amp;h=221" alt=""><br>このように内容を入れると<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/6250495e427842f18d3a565f6c06be52/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-10%2015.19.20.png?w=270&amp;h=430" alt=""><br>ちゃんと朝食というものが入っていますね。<br>他の工夫点としては、<br>このtodoリストが出る前に「Loding...」というものが出たり<br>textFieldが空の時はボタンを押せなくしたりといった工夫をしています。</p><h2 id="hfb15b1be5a">実装開始</h2><h3 id="h9c9442dad9">1 文言ファイルの修正</h3>

<h3 id="h1c788f30b9">2 APIを叩くURLの追加</h3>

<h3 id="h8897cfdcfc">3 型定義をする</h3><p><br></p>

<p>ここまでは前準備です。</p><h3 id="hb8ea520222">3 APIを叩くコードを作成する</h3><p>今回は「api」というフォルダに<strong>todo.ts</strong>というファイルを作ってここにtodo系のAPIを叩くコードを書いていきたいと思います。<br>まずは投稿の部分から実装しておきます。<br><strong>動作確認のために新規登録、もしくはログインをしてtodoの画面に遷移しておいてください。</strong><br><br></p>

<p>この関数は入力したデータとユーザidを引数としてそのうちのidを使って元のURLと組み合わせています。<br>バックエンドではidをパラメータにしてDBのテーブルを作成していたのでユーザのテーブル名は<br>idとなります。それらを利用してdataをbodyとしてPOSTしています。レスポンスとして全てのtodoリストが返ってくるのでそれをreturnしておきましょう。<br>次にリスト取得のAPIです。</p>

<p>こちらは非常にシンプル。<br>APIを叩いてレスポンスを返すだけです。<br>今回はログインしてから取りに行くのでCSR(クライアントサイドレンダリング)でレンダリングするのでこのファイルに書く必要はないのですが<br>APIを叩く関数はAPIを叩く関数のファイルとまとめておきたいのでそうしています。<br>全体コードをここに載せておきます。</p>

<h3 id="h040396870f">3 画面の作成</h3><h4 id="h86063d7cd3">3.1 textFieldの作成</h4><p>新規登録やログインの画面でも作りましたが、今回はvalidation機能を入れないので別で作ります。<br>「todo」フォルダの中に「inputForm」フォルダを作成してその下のファイルでコードを書いていきます。</p>

<p>新たに<span style="color:#cf3e51">onChange</span><span style="color:#333333">が入っています。textFieldの中身が変わるごとに発火されるものであり今回はその部分の値をvalueに保存しています。</span><br><span style="color:#cf3e51">Dispatch&lt;SetStateAction&lt;string&gt;&gt;;</span><span style="color:#333333">は</span><span style="color:#cf3e51">useState</span><span style="color:#333333">の代入する方ですね。</span><br></p>

<p>の部分の<span style="color:#cf3e51">setState</span><span style="color:#333333">にあたるものです。Reactが出て仮想DOMというものが出てきました。通常のHTML、CSS、JSの場合は一部分が変更されたら全ての画面の要素を描画し直していました。では仮想DOMになって何が変わったかというと以前の状態と現在の状態の差分を見て変更部分のみを描画するようになりました。</span></p><h4 id="h4eb8703566">3.2 ボタンの作成</h4><p>ボタンに関しては今回はinputTextが空になったらボタンを押せなくする(disabledする)という形にしようと思います。<br>「todo」フォルダの下に「postButton」というフォルダを作りましょう。そのフォルダでコードを書いていきます。</p>

<h4 id="h1a06407fee">3.3 textFieldとボタンの部分のcomponentを呼び出す、及び処理をするコード作成</h4><p>では作ったcomponentを呼び出しさらに処理を加えていきたいと思います。<br>「todo」フォルダの下に「todoInputForm」というフォルダを作ってそこでコードを書いていきましょう。</p>

<p>ここではuuidをimportしていますが、<strong>uuidと＠types/uuidをinstall</strong>しておいてください。<br><strong>定数setTodoを紛らわしくしてしまいましたが、こちらはtextField用のものでsetTodosはデータが入ったものです。</strong><br><span style="color:#cf3e51">onClick</span>関数ではidを作りAPIを叩くコードを呼び出しています。<br>呼び出して返ってきたデータを<span style="color:#cf3e51">setTodos</span>に入れています。さらにtextFieldの部分を空文字にしています。</p><h4 id="hbb3aee87cb">3.4 todoのリストを表示する部分の作成</h4><p>todoのリストを表示するcomponentを作成します。<br>「todo」フォルダに「todoList」というフォルダを作ります。</p>

<p>propsとしてユーザidとtodoのデータ等を受け取っています。<br>idが受け取れてない場合があるのでその時のために「Loding...」を描画させておきます。<br>なので、<span style="color:#cf3e51">useState</span>を宣言しておきます。さらに、今回は<span style="color:#cf3e51">useEffect</span>を使用しています。<br>ユーザidが変わった時に 第一引数の関数を発火させるようにしてあります。<br>第二引数を宣言しないと無限に第一引数の関数が呼ばれるので注意です。<br>初回時の時のみ発火させたい場合は第二引数を<span style="color:#cf3e51">[]</span><span style="color:#333333">と空の配列を宣言しておきましょう。</span><br><span style="color:#333333">そして描画部分では「?」を使って場合分けをしています。ここでは「lodingMsg」に文字が入っているか否かの</span><br>判定をしています。<strong>普通if文を思い浮かべるかもしれませんがjsx形式ではifを使うことはできません。forも同様です。</strong><br>ifやfor以外の書き方でうまいこと書いていかなくてはならないのです。条件分岐の場合は基本的に「三項演算子」と呼ばれる「?」を用います。<br>これで分岐を描くことができます。「()」の中身は基本的に親タグは1つと決められています。複数のタグを書く事ができないためその場合は、<br>「&lt;&gt;&lt;/&gt;」や「&lt;div&gt;&lt;/div&gt;」で囲いましょう。<br>ここでは条件分岐以外にmap関数を使って要素を順番に描画しています。<br>「&lt;li&gt;」を使っていますが「key」という属性があると思います。map関数で描画するときは固有のキーを宣言してあげる必要があります。<br>今回はidを指定します。idなど固有のキーがない場合はmap関数の第二引数がindexなのでそれを指定してあげると良いでしょう。型はnumber型になります。</p><h4 id="hf430a790a5">3.5 挨拶部分のcomponentを作成。</h4><p>「Hello!!!〇〇」と描画させるcomponentを作成します。<br>「todo」フォルダの下に「greeting」フォルダを作成します。</p>

<h4 id="hd6eaa9e922">3.6  「ログインしろ」と警告するcomponentを作成</h4><p>idとnameがない場合はログインされていない状況です。<br>なので警告するcomponentを作っておきます。<br>「todo」フォルダの下に「notLogin」フォルダを作ります。</p>

<h4 id="h9f012a675d">3.7 最後にpage.tsxとstyleをふる</h4><p>page.tsxにて今まで作ってきたcomponentを呼び出していきます。<br></p>

<p>最後にstylesheetを書きますが、各ページフォルダ直下のstyle.css.tsと変わらないのでファイルをコピーして貼り付けても問題ないです。<br>一応記述はしておきます。</p>

<p>少し長かったですが、お疲れ様でした。</p><h2 id="h66dbaec65f">次回</h2><p>todoの画面を作り終える</p>

todoの投稿部分と取得部分を作成する

<h2 id="h8d027c8ed3">はじめに</h2><p>前回は新規登録の機能を実際に実装して見ました。。<br>今回はログインの機能を作成していきます。<br>コードの内容は前回とほぼほぼ一緒です。<br><strong>ここでお詫びですがサーバー側でミスが発覚しました。</strong><br><strong>ログイン機能の記事を2023年10月9日に直しました。</strong><br><strong>それ以前にやってくれた方は申し訳ありませんが、</strong><br><strong>サーバー側の修正をお願いいたします。</strong></p><h2 id="hb0915c03af">完成のイメージ</h2><p>前回と変わりません。<br>なので画像は貼りません。<br>メールアドレスとパスワードを入力して前回と同じところに遷移するイメージです。</p><h2 id="h9e26754835">コーディング開始</h2><h3 id="he1cb9650cc">1 文言ファイルに文言を追加</h3><p>login部分の文言に以下を追加します。<br></p>

<h3 id="hdbbe28c2b5">2 LINKファイルにURLを追加</h3>

<h3 id="h5155f905ff">3 APIを叩くコードを作成</h3><p>新規登録の時のAPIを作成したファイルの下に以下のコードを書きます。<br>ほとんど一緒ですが、書き換わっている部分がいくつかあるので注意してください。</p>

<h3 id="h6d7a531bc6">4 submitボタンを押したらAPIを叩いて遷移する部分を実装</h3><p>前回は「signupForm」でしたが今回は「loginForm」です。<br>そこに<span style="color:#cf3e51">onSubmit</span>とあるはずなのでそこの関数を書き換えます。</p>

<p>一応コードの全体像も載せておきます。</p>

<p>私のこの記事にて処理の漏れがなければ前回同様にログインができるかと思います。</p><h2 id="h66dbaec65f">次回</h2><p>todoの投稿、取得</p>

ログイン機能の実装(前回の部分がわかっていればいける)

<h2 id="h8d027c8ed3">はじめに</h2><p>前回はログイン部分の画面を作成しました。今回は実際にバックエンドと連携して新規登録をしてみたいと思います。</p><h2 id="h31fc5cbc4a">事前準備</h2><p>事前準備として以前に作ったバックエンドのローカルサーバーを立ち上げておきましょう。<br>立ち上げておかないとリクエストすら送れない状態になります。</p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/9ceab5e4ed8448ada82b2e5bf7a94aa7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-09%200.37.25.png?w=270&amp;h=431" alt=""><br>既に登録されているユーザであればアラートが出て<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/26426ac111a8487d8c713caf8a0c0587/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-09%200.37.53.png?w=269&amp;h=382" alt=""><br>まだ登録されていないユーザを登録してみると、<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/ed506037b1dc4c06ad1f127ef9d23be2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-09%200.38.27.png?w=270&amp;h=515" alt=""><br>このように登録した名前が出力される。</p><h2 id="h9e26754835">コーディング開始</h2><h3 id="ha0c3a5f82c">1 文言の追加</h3>

<h3 id="hb9a34bac27">2 URLの追加</h3><p>APIのURLを<strong>linkName.ts</strong>に追加します。<br></p>

<h3 id="h5857a960b2">3 型定義</h3><p>以下の型を追加します。</p>

<h3 id="h48c7f6941a">4 APIを叩くコードおよびユーザ情報の取得</h3><p>ではAPIを取得するコードを書いていきます。「api」フォルダの中に<strong>auth.ts</strong>を作りましょう。<br>処理の流れとしては、</p><ol><li>APIを叩く</li><li>レスポンスをjson形式に直す</li><li>「<span style="color:#333333">データはもうすでにあります</span>」というレスポンスが返ってきたら空の配列を渡す</li><li>それ以外ならユーザ情報を返す</li></ol><p>です。実際のコードを見ていきましょう。</p>

<p>APIを叩くときは<span style="color:#cf3e51">fetch</span><span style="color:#333333">関数を使います。こいつは非同期処理になるので</span><span style="color:#cf3e51">async/await</span><span style="color:#333333">を使いましょう。</span><br>後は上記の処理のままのコードを書いています。</p><h3 id="h41b3e4d91b">5 遷移先のページを簡単に作っておく</h3><p>遷移先はtodoのページになるため「app」フォルダに「todo」を作っておき<strong>page.tsx</strong>に以下のコードを書いておきます。<br></p>

<p>ここのコードではqueryパラメータを読み取っています。idとnameをqueryパラメータとここではしています。queryパラメータというのはよくGoogle検索に使われているやつです。APIで送られてきたユーザ情報を受け取ってidとnameをqueryパラメータとして渡しそれを受け取って入力した名前を画面に出力します。本来であればJWTというものを使ったりuseContextなどを使って管理したりとするのですが、今回はゆるゆるのセキュリティですがこのやり方でいきたいと思います。</p><h3 id="hb859ae65e6">6 APIを取得して処理するコードを書く</h3><p>「signup」フォルダの「signupForm」フォルダの<strong>index.tsx</strong>にて<span style="color:#cf3e51">onSubmit</span>関数が存在すると思うがそこを書き換える。<br>以下のように書き換える。</p>

<p>処理としては</p><ol><li>APIを叩く関数を呼び出す。</li><li>返ってきた配列の長さが0の場合はアラートでメッセージを出す。</li><li>それ以外の場合はidとnameをqueryパラメータとしてページ遷移する</li></ol><p>です。<br>これで上記画像のような結果になるのではないでしょうか？<br>APIとの連携はどうでしたか？<br>このようにフロントとバックエンドの繋ぎの部分をやっていくとバックエンドの方が何をしているのかがわかってくるはずです。<br>ということで次回はログインの方をやっていきましょう。</p><h2 id="h66dbaec65f">次回</h2><p>実際にログインしてみる。</p>

実際に新規登録してTodoのページに遷移する

<h2 id="h8d027c8ed3">はじめに</h2><p>前回は新規登録画面を作成しました。<br>今回はログイン画面です。ですが、前回の内容がわかっていればほとんどこの記事を見なくてもいけるでしょう。<br>わからない方は前回の記事を見ながら試行錯誤してみてください。<br>今回はほとんど解説をしないのでご了承ください。</p><h2 id="h14d9a768cd">完成の画面</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/3f451f79b3ca437e885d455da0660f4d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2018.40.02.png?w=270&amp;h=542" alt=""><br>前回とほとんど変わりませんね。<br>今回はコードを羅列していくだけにします。</p><h2 id="h30fa20b7e1">コーディング</h2><h3 id="hac226b64f0">1 文言ファイル</h3><p><br></p>

<h3 id="ha65cbd37c9">2 型定義のファイル</h3><p><br></p>

<h3 id="h22b017d637">3 validation rulesファイル</h3><p><br></p>

<h3 id="hbf1bf60b7f">4 loginFormの実装</h3><p>「login」フォルダの下に「loginForm」フォルダを作成してください。<br>.tsxは以下の通り。</p>

<h3 id="hf4d22d0613">5 page.tsxおよびstyle.css.tsの作成</h3><p>TextField等は共通のcomponentとして作っているので実装する必要はありません。<br>最後に上2つのファイルを実装して終わりです。</p>

<p>流れるように飛ばしてしまいましたが、何度も言う通り前回のコードとほとんど差異はありません。<br>前回のコードを理解上で実施することを強くお勧めします。</p><h2 id="h66dbaec65f">次回</h2><p>APIを叩いてログイン機能を作成する。</p>

ログインの画面を作成する(前回の内容が分かってれば今回は楽勝)

<h2 id="h8d027c8ed3">はじめに</h2><p>前回はホーム画面を作りましたね。今回は新規登録作成の画面を作成します。<br>機能が多いのでAPIを叩くということは今回はしません。<br>ひとまず画面を作ってバリデーション機能まで作ることをゴールとします。</p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/9e0cbc837f41425aad2f13c175f788e7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2015.02.30.png?w=270&amp;h=604" alt=""><br>見た目はこのような感じで<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/3340c8a0c977482a82ebbec150f95b14/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2015.02.46.png?w=270&amp;h=585" alt=""><br>バリデーション機能がついていて<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/e881ef25ec184d8ab6e927deb006a49a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2015.03.13.png?w=270&amp;h=584" alt=""><br>正しい形式で入力すると<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/b8f90964b4c349d382d2c3408ae7c197/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2015.03.35.png?w=270&amp;h=256" alt=""><br>このようにgoogleのデベロッパーツールのconsoleにて入力情報が出てくるところまでやりましょう。</p><h2 id="he8c28afb39">packege install</h2><p>早速本日使うpackegeをinstallしていきましょう。</p>

<p>今回のpackegeはvalidation系のものになっています。validationは何かというと私のイメージでは入力形式のことでメールアドレスの形式が合っているか必須項目にテキストが入っているかなどのチェックをするためのものになります。</p><h2 id="h9ff89bd48f">ディレクトリ構成</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/e8e6aaa9d4b24145a2d92887a1f20349/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-08%2016.31.52.png?w=270&amp;h=769" alt=""><br>大分、ファイル数も多くなってきました。<br>前回と変わったところが何点かあります。</p><ul><li><strong>rules.ts</strong>を作成しここにバリデーション機能のコードを書く</li><li>以前「home」ディレクトリにあった「routingButton」を共通部品として保存する「components」に移動し「home」ディレクトリを削除</li></ul><p>です。この点が変わったのでよろしくお願いします。尚、コードの中身自体は前回と同じなのでその辺は心配いりません。vscodeを使っている人は特に心配はいらず、ドラッグ&amp;ドロップで移動すれば自動でimportのパスを書き換えてくれます。<br>ちなみに今回は、<strong>「auth」フォルダの「signup」フォルダ</strong>の中を中心に追加・編集していきます。また、共通のcomponentも出てくるので「components」フォルダの中にも追加していきます。</p><h2 id="hfb15b1be5a">実装開始</h2><h3 id="h99def16fba">1 文言ファイルの設定</h3><p>まずは文言ファイルの設定です。<strong>ja.ts</strong>を開いてください。今回は全体コードを記述しておきますが、次回からは長くなってしまうので追加する部分のみを記述します。どこに追加して良いかわからない人もいると思うので今回はそのようにしています。<br></p>

<h3 id="he9e16b2a78">2 リンクファイルの設定</h3><p>今回はホームに戻るという処理をするためにホームのパスをリンクファイルに追加します。<strong>linkName.ts</strong>を開いてください。</p>

<h3 id="hd3d5769a36">3 titleの部分を作成する</h3><p>title部分というのは「新規登録」という部分と「名前、メールアドレス。。。」という部分です。ここを一つのcomponentとします。<br>ログインの部分でも用いるので「components」に保存していきましょう。「component」フォルダの下に「loginTitle」というフォルダ名にしましょう。そして<strong>index.tsx</strong>をその下に作成します。前回とほぼ変わらないコードなので説明はあまりしません。実際のコードは以下のようになります。</p>

<h3 id="h8f2000e034">4 フォーム部分を作成する</h3><h4 id="h9f847b611d">4.1 フォームのcomponentを作成</h4><p>編集するといった「signup」ディレクトリの下に「signupForm」ディレクトリを作りましょう。今回はstyleも振るので<strong>index.tsx</strong>と<strong>style.css.ts</strong>を用意しておきます。基本的にpageになるのは<strong>page.tsx</strong>でcomponentは<strong>index.tsx</strong>でstyleに関しては<strong>style.css.ts</strong>です。今後は細かく言わないので今のうちに覚えておいてください。では、「signupForm」ディレクトリのコードを書いていきます。</p>

<p>いくつかのcomponentを作っていないのでエラーがたくさんあると思いますが、気にしないでください。後に作るので。<br><span style="color:#cf3e51">onSubmit</span><span style="color:#333333">関数はクリックされた後の処理の関数です。今のところは入力したものをconsoleに出すということしかしていませんが、後にAPIを叩く処理をここに書いていきます。</span>ここでは<span style="color:#cf3e51">react-hooks-forms</span>を使ってvalidation機能の基盤を作成しています。そして、これから作るTextfieldにpropsを渡します。まだ、入力要素である、nama,email,passwordのそれぞれのルールを設定していないので次のsectionでルールを記述していこうと思います。<br>ちなみに上に「'use client'」と書いてあるのはこれはCSR(クライアントサイドレンダリング)を宣言しています。reactのhooksを使う場合はCSRでないといけません。hooksを使うであったりクリック操作をするなどクライアント側が操作するものはCSRで宣言しましょう。appルータではデフォルトがSSR(サーバーサイドレンダリング)となっています。ここは覚えておきましょう。</p><h4 id="h8f6bb04ef7">4.2 validation rulesの設定</h4><p>ということでルールを決めていきましょう。今回は<span style="color:#cf3e51">yup</span><span style="color:#333333">というのを使ってみました。使わないとしたら、メールアドレスの形式を正規表現で自ら作らないといけないのでちょっと頭が痛いです。その作業がなくなるのは個人的に嬉しかったので使ってみました。では</span><strong style="color:#333333">rules.ts</strong><span style="color:#333333">に記述していきましょう。</span><br></p>

<p>validation機能のルールをここで作りました。各項目を必須とし、 メールアドレスは<span style="color:#cf3e51">email()</span>にて形式をチェック、パスワードは最低8文字に設定しています。</p><h4 id="h3cdb3d6bf7">4.3 TextFieldの作成</h4><p>ではTextFieldをmuiを用いて作っていきたいと思います。<br>「components」フォルダに「inputForm」というフォルダを作成します。その下でコードを書いていきましょう。<br><br></p>

<p>muiのTextFieldを使っています。ドキュメントを見るとわかるのですが、errorの属性がtrueだった場合は赤くなり同時にhelperTextには検知したエラーのメッセージが出されます。個人で開発するときはかなり楽に実装ができるので嬉しい限りです。typeにemailやpasswordを入れるとログインで使っているような入力欄になります。passwordが特にわかりやすいかと思います。もう少しこだわるとしたら目のアイコンを入れて見れるようにしたり見れないようにしたりといった設定もできるのですが、今回は実装しません。ドキュメントにはそのような実装方法も載っているのでぜひアレンジしても良いかもですね。<br><a style="color:#1995b7" href="https://mui.com/material-ui/react-text-field/" target="_blank" rel="noopener noreferrer">ドキュメント</a></p><h4 id="hd209c18db3">4.4 submitボタンの作成</h4><p>こちらもmuiを使ってボタンを作成していきます。<br>「components」フォルダに「submitButton」というフォルダを作りましょう。<br>ではコードを書いていきます。</p>

<p>ここではmuiを用いてボタンを作成しておりクリックの際は先程validationチェックが通ったらonSubmit関数を発火させる関数を宣言しています。</p><h4 id="hbe0b77bc36">4.5 signupFormのstyle</h4><p>styleをあてていなかったので「signupForm」フォルダの中のstylesheetファイルでstyleをあてておきましょう。<br></p>

<h4 id="h3d148e1443">4.6 page.tsxおよびそのstyle</h4><p>描画されるファイルである<strong>page.tsx</strong>を記述していきます。フォルダは「signup」です。<br></p>

<p>これで実装は新規登録の画面の実装は終わりです。</p><h2 id="h6d80f1b4ba">layout.tsxの修正</h2><p>buildをしたらlayout.tsxのところで引っかかったので、修正します。</p>

<p>これでbuildが通るかと思います。</p><h2 id="h66dbaec65f">次回</h2><p>ログインの画面(APIを叩くのは画面ができてからにしようと思います。)</p>

新規作成画面作成(画面とvalidation機能のみ)

<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsの環境構築等を前回はしました。今回からいよいよページを作成していきます。<br>ここで注意なのですが、<span style="color:#cf3e51;background-color:#ffe924">私は非常にデザインが苦手です！！！</span><span style="color:#333333">(☜勉強しろ)</span><br><span style="color:#333333">その点はご理解いただきたいです。</span></p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/d95cca14ea4145de889c48979015e4d0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-07%2023.48.59.png?w=270&amp;h=260" alt=""><br><span style="color:#333333">完成ページはこんな感じです。(ちょーシンプル)</span><br><strong style="color:#333333">ここでお詫びなのですが現時点ではmicroCMSのリッチエディタによる画像レスポンシブが対応する方法が見つかっておりません。</strong><br><strong>PCでご覧になっている方は非常に見づらいかと思いますが、ご了承ください。ですので実際に実装してみて自分が実装したものを直接ご覧になって理解を深めってってください。私の方でももう少し調査をしてみます。</strong></p><h2 id="hfb15b1be5a">実装開始</h2><h3 id="h35ef25c713">1 文言ファイルに文言の登録</h3><p>文言ファイルに上記文言を登録していきましょう。<br>ファイル名は<strong>ja.ts</strong>でしたね。<br><br><br></p>

<p>文言はこのようにこのファイルに記述していきます。</p><h3 id="hd9684c8dd3">2 link集のファイルにlinkのパスを記述する</h3><p><strong>linkName.ts</strong>があると思うので以下のように記述します。</p>

<p>ルーティング用のパスをこのように書いておきます。</p><h3 id="h90719f1cbc">3 titleの部分とその下のフレーズのcomponentとして分ける</h3><p>Reactの良いところはcomponent(部品)として分けてコーディングすることができることです。そうすることで共通で同じ部品を使い回ししたり、mainのファイルが短い行数で書かれることができます。これが利点かなと思っています。私、個人的には1ファイルが長く書いてあるとすごく気持ちが悪くなります。中には「別に気にしないし動けばいいんだよ」という人がいますが大規模開発になったらそれは通用しないのではないでしょうか？<br>話を戻して実装に移ります。「app」フォルダの中に「components」というフォルダを作ります。こいつはメインのtodoの部分でも使おうと思うので共通のcomponentを扱うここのフォルダに保存していきます。その下に「title」というフォルダを作り<strong>index.tsx</strong>を作成してください。そして以下のように記述をしてください。</p>

<p>ここでまず注意ですが、この描画部分の関数名の最初の文字は必ず大文字で書いてください。もし<span style="color:#cf3e51">useState</span>などのhooksを使うときにerrorに引っ掛かります。<br>コードを見てみると&lt;h1&gt;タグと&lt;p&gt;タグがありその中から文言ファイルにあるタイトル部分と詳細メッセージが呼び出されれています。</p><h3 id="ha84c270733">4 新規登録ページ、ログインページに遷移するボタンを作成する</h3><p>次に「app」フォルダの下に「home」というフォルダを作成します。<br>ここにはそのページでしか使わないcomponentのソースコードを置いていきます。<br>では「routingButton」というフォルダを作成してその下に<strong>index.tsx</strong>と<strong>style.css.ts</strong>というファイルを作成します。<br>まずは<strong>index.tsx</strong>からです。</p>

<p>関数の引数には二つほど指定してあります。<br>これはmainであるこれは親のcomponentやメインのページから受け取るpropsというもので同じ部品なんだけど一部の文言が違うといった時に用います。今回はTypescriptで書いているのでinterfaceでそのpropsの型を定義します。propsは<strong>type.ts</strong>には書かずにしたいと思います(実際の案件でもそうでした)。理由はまだわかっていないでのわかったら記事にでもしようかなと思います。<br>ルーティング部分は&lt;Link&gt;タグを使います。これはNext.jsが用意しているcomponentです。<br>そして、その子タグにはmuiで用意されたボタンを宣言します。これはクリックしたらリップルエフェクトでしたっけ？波紋のように「モワーン」という感じのアクションが起こります(語彙力なさすぎだろ🌱)。<br>この時点ではエラーが起こっているはずです。そうstylesheetを書いていません。<br>ということで<strong>style.css.ts</strong>を書いていきましょう。</p>

<p>cssみたいですが.tsで書けるのは本当に良いなと思います。<br>書き方は上記で書いた通りです。ボタンとボタンの間を開けたかったのでmarginを入れています。</p><h3 id="hbd12d6aa2f">5 page.tsxで作成したcomponent等を呼び出す</h3><p>もう少しです。頑張っていきましょう。<br>「app」フォルダの中の<strong>page.tsx</strong>で先ほど作ってきたcomponent等を呼び出していきましょう。</p>

<p>ボタン部分に関してはpathとその表示するタイトルをpropsに渡しています。この書き方は多く使うので覚えておいてください。<br>1ファイルの記述量が少ないと気持ちが良いですね！<br>最後にstyleをあてて終わりにしましょう。「app」フォルダに<strong>style.css.ts</strong>を作成してください。</p>

<p>これで中央に要素が寄せられたかと思います。<br>ボタンは現時点でクリックすると404 NOT FOUNDになってしまいますが<br>次回はそれらのページを作ってtodoのページまでルーティングする実装をしていこうと思います。</p><h2 id="h66dbaec65f">次回</h2><p>新規登録ページの実装</p>

一番最初の画面を作成する

<h2 id="h8d027c8ed3">はじめに</h2><p>今までの章はバックエンド(サーバーサイド)側を実装していました。今回からはフロントエンドということで画面の方を作成していきたいと思います。バックエンドからデータを受け取り表示したり画面から送った内容をバックエンドに送信したりといった部分を実装していこうと思っています。今回は環境構築についてです。</p><h2 id="h4f00108402">主に使っていく技術</h2><p>主に使っていくものは</p><ul><li>Next.js</li><li>material-ui</li><li>vanilla-extract</li></ul><p>です。</p><h3 id="h96d5b7c1a8">1 Next.js</h3><p>公式には</p><blockquote><span style="color:#171717">Next.js is a React framework for building full-stack web applications.</span></blockquote><p><span style="color:#171717">と書いています。訳すと「Next.jsはフルスタックwebアプリケーションを構築するReactのフレームワークです」となります。</span><br><span style="color:#171717">細かな部分は詳しく説明はできないのですが(☜もっと勉強しろ！！)UI構築のためのJavascriptライブラリであるReactをもっとよくしたもの</span><br>と私の頭の中ではそう思っています。Reactをよく知らない人は<a style="color:#1995b7" href="https://ja.legacy.reactjs.org/" target="_blank" rel="noopener noreferrer">ドキュメント</a>を眺めてみてください。<br>Reactとの大きな違いはSSRやSSGの機能が実装することができて初期表示が早いという点です。<br>今回はそのNext.jsを使っていきます。<br><a style="color:#1995b7" href="https://nextjs.org/" target="_blank" rel="noopener noreferrer"><strong>公式ドキュメント</strong></a></p><h3 id="h3858e81c99">2 material-ui</h3><p>これはGoogleが公開しているデザインに「material design」というものがありますがそれに従って作られたReactのUIパーツです。実際の案件に入ってしまうと使う部品が少なくなると思いますが、今回はこちらを利用していきたいと思います。<br><a style="color:#1995b7" href="https://mui.com/" target="_blank" rel="noopener noreferrer"><strong>公式ドキュメント</strong></a></p><h3 id="h081a042cfa">3 vanilla-extract</h3><p>こちらはcssをTypescriptで書くことができるものです。実行時にcssに変換するのではなくbuild時にcssに変換するのでパフォーマンス等が向上されるんだとか。気がついたらこいつを使うようになっていたので今回もこちらを使っていきたいと思います。<br><a style="color:#1995b7;background-color:#ffffff" href="https://vanilla-extract.style/" target="_blank" rel="noopener noreferrer"><strong>公式ドキュメント</strong></a><br><span style="background-color:#ffffff">どうでも良いですがこのアイコンのカップケーキ？美味しそうですね。</span></p><h2 id="h0ef859a5d4"><span style="background-color:#ffffff">環境構築</span></h2><p>まずは、「server」というフォルダがある階層に移動してください。</p><h3 id="h96d5b7c1a8">1 Next.js</h3><p>階層に移動したら以下のコマンドを実行してください。</p>

<p>このコマンドを実行するといくつかの質問がされます。<br>その際は以下のように答えてください。</p><ol><li>Typescriptを使いますか？・・・yes</li><li>ESLintを適用しますか？・・・yes</li><li>Tailwind CSSを使いますか？・・・no</li><li>srcディレクトリを適用しますか？・・・yes</li><li>App router を適用しますか？・・・yes</li><li>importエリアをカスタマイズしますか？・・・no</li></ol><p>今回はこちらで答えてください。<br>Tailwindを今後使いたい人はそこをyesにしてもらっても全然大丈夫だと思いますが、アンチと推しがいるのでここも議論すると面白いかもしれません。<br>質問に答えるとプロジェクトが作成されます。完了すると「frontend」というディレクトリが出来上がっているのでそちらに移動してください。<br>そしてそこでvscodeを立ち上げましょう。</p><h3 id="heeb39a458c">2 packegeのinstall</h3><p>packegeインストールの前にyanrにしたい人はこのタイミングでyarnにしましょう。<br>今回は以下のコマンドを実施しpackegeをinstallします。</p>

<p>material ui関連のものとvanilla-extract関連のpackageをinstallしました。<br>今回のコーディングでは使いませんが、次回以降使っていきたいと思います。</p><h3 id="h77399d0d63">3 next.config.jsonの編集</h3><p>vanilla-extract関係のpackageをinstallしたら<strong>next.config.json</strong>を編集します。</p>

<p>これで前準備は終わりです。</p><h2 id="h629b159076">Next.jsはじめの一歩</h2><p>Next.jsのプロジェクトの「src」を見てみましょう。<br>そこに「app」というディレクトリがあるのでそこを開きます。<br>中にcssが2つあると思うので全部消してしまって大丈夫です。</p><h3 id="h09982eb151">layout.tsxの編集</h3><p>まずlayout.tsxを開きます。以下のように編集してください。</p>

<p>ここにはhtmlに必要なhtmlタグやbodyタグが書いておりまた、アプリのタイトルやその詳細を設定することができます。<br>先ほどglobal.cssを消したのでimport文の最初の1行目が消えています。また、titleやdiscription等を書き換えてあります。<br>またbodyタグでデフォルトで余計なmarginが入っているのでそちらも消しました。</p><h3 id="h6e126569c2">page.tsx</h3><p>ここがURLにて最初にアクセスされるページとなります。<br>ではこのファイルを編集してみましょう。</p>

<p>以上のコードを書いたら以下のコマンドを実行してローカルサーバーを立ち上げましょう。<br></p>

<p>ブラウザでhttp://localhost:3000にアクセスすると先ほど書いた文が画面に出てきます。これではじめの一歩は終わりです。<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/c6209943549142bb975153a7d6c4aacb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-07%2018.06.47.png?w=270&amp;h=256" alt=""></p><h2 id="h1eb43247fe">フォルダ構成</h2><p>フォルダ構成について説明します。<br>複数人プロジェクトになった時に一人一人が管理しやすく修正しやすいコードにするためにファイルやフォルダを分けることが大事になると思います。ファイルを分けることによって1ファイルに対するソースコードの量が減ります。1ファイルに1000行も書いてあったら吐き気がしますよね？そうならないようにここでしっかりとルールを決めておきましょう。<br><img src="https://images.microcms-assets.io/assets/94b19392d16143739fdc8c90966efc7c/3559323f960249029f604c921d4ae6ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-07%2018.57.23.png?w=270&amp;h=1100" alt=""><br><br>フォルダ構成は上記画像のようにします。</p><h3 id="h0486f8d9a1">appフォルダ</h3><p>まずはappフォルダから見ていきましょう。</p><h4 id="h8d76f7a4a0">components</h4><p>複数のページに適応したい部品(component)はこちらのフォルダに置いておきます。<br>その下にコンポーネント名のフォルダを置いてその下に<strong>index.tsx</strong>と<strong>style.css.ts</strong>を置く構成にします。</p><h4 id="h5ab1cf77d0">home</h4><p>ここは最初のトップページのコンポーネントでそのページしか使わない場合のものをこちらに配置します。<br>構成は上記componentsと同じ形で作っていきます。</p><h4 id="h187351279b">その他のルーティングページ</h4><p>Next.jsを触ったことがある人はわかるかもしれませんが「app」フォルダのところに任意の名前のフォルダを作りその中に<strong>page.tsx</strong>を作るとその任意のフォルダがルーティングのエンドポイントとなります。ここでルールを含めたポイントを記述しておきます。</p><ul><li>appディレクトリの下にフォルダを作りpage.tsxを作るとそのフォルダ名がそのままURLのエンドポイントとなる</li><li>そのページでしか使われない部品はそのフォルダの中に部品名のフォルダを作成しindex.tsxとstyle.css.tsを作成する</li></ul><p>正直これは今後やりながら覚えていきましょう。<br>このルーティングのやり方もNext.jsの特徴の一つになります。</p><h3 id="h79e4c94279">apiフォルダ</h3><p>こちらはAPIへのアクセスをする関数を記述しようと思います。</p><h3 id="h75cfa664b1">sharedフォルダ</h3><h4 id="h4cadb7cbf7">type.ts</h4><p>形定義を宣言するファイルにしたいと思っています。</p><h4 id="ha5177008f6">data.ts</h4><p>静的なデータはここで保存をしようと思います。</p><h4 id="hfee4e45f96">ja.ts</h4><p>文言はこちらで管理をしようと思います。<br>appディレクトリの.tsxファイルで文言を書かずに<br>文言の部分は文言のファイルでと管理します。</p><h4 id="hb46d6c240a">linkName.ts</h4><p>ルーティングの時のリンクの名前はここに保存しておきます。<br><br>といった感じで今後はこのルールでコーディングしていこうと思っています。<br>今回のセクションはここまでです。</p><h2 id="h66dbaec65f">次回</h2><p>ホームの画面を作成する。<br><br></p>

TERUSIの技術勉強まとめ(コーディング編)

ExpressとNextjsでtodoを作る