フロントエンド開発
記事数
21
【ToDoアプリを作る】データベースを作ってデータを保存する。
前回に引き続きToDoアプリの作成を進めます。前回までの記事でアプリの機能としては完成になりますが、ローカルホストにアクセスすると毎回タスクは空になっており、登録したタスクを保存することができません。そこで今回からはデータベースを用意して、タスクを保存できるようにします。
【ToDoアプリを作る】条件分岐によるバリデーション機能
前回の記事ではタスクの削除機能を実装しました。https://build-up.tech/todoapp-6/これまでの記事にて作成したToDoアプリの機能は、タスクを登録することができて、登録したタスクを完了時に削除することができるようになっています。しかし、この状態
【ToDoアプリを作る】filterを使って配列から特定の要素を削除する。
今回はpropsを渡すおさらいをしながら、登録したタスクの完了時にリストから削除するようにします。今回も前回の続きからの作業になりますので過去の記事をまだご覧にあってない方は是非参考にしてください。https://build-up.tech/todoapp-5/butt
【ToDoアプリを作る】React Hooksを使って繰り返し処理をする。
今回もToDoアプリの制作について解説します。今回はインプットボックスに文字を入力して「登録」ボタンをクリックするとリストにタスクが追加されるところまでを作ります。今回の記事のメインの繰り返し処理については記事の後半で解説します。前回までのコードを修正しますので、まだ過去の
【ToDoアプリを作る】propsでコンポーネント間のデータの受け渡しをする。
過去の記事でToDoアプリの作成を進めており、見た目についてはMantineを使って整えることができました。次に、ToDoアプリの機能面を作成したいと思います。前回までで作成した内容は以下の記事を参照していただければと思います。https://build-up.tech/
【React】React Hooksの概要説明①
React16.8より以前はstateの管理をするためにclassコンポーネントを使用していました。しかしReact16.8からHooksが登場し、関数コンポーネントでもstateの管理ができるようになりました。これにより記述量が少なくなり、state管理が非常に楽になったので、現
【React】複数のデータを扱う配列とオブジェクト その2
前回の記事では、複数のデータを管理するためのオブジェクトと配列についてご説明しました。https://build-up.tech/typescript-basic2/今回の記事では、配列とオブジェクトの値取得やデータ更新などの操作方法についてご説明します。配列の操作
【React】複数のデータを扱う配列とオブジェクト その1
React開発では一つのデータのみを扱うということは珍しく、ほとんどの場合が複数のデータを利用することになります。現在作成しているToDoアプリの場合を例に挙げると、一般的にはタスクは複数登録して管理することができます。登録する内容についてもアプリによっては、タスクと登録した日付を
【TypeScript】扱うデータの型を理解する。
今回はTypeScriptで必須となる型に関する記事です。Reactでは頻繁にconstを使って定数を宣言します。定数とは内容を変更することのできない記述の塊のことを意味しており、TypeScriptにおいてはconstに型の定義をする必要があります。型の種類はさほど多くな
【ToDoアプリを作る】React × Mantineでコンポーネントの配置を調整する。
前回に引き続き今回もToDoアプリの作成を進めます。前回紹介した内容で、必要となるコンポーネントの作成が完了しました。https://build-up.tech/mantine-todoapp-2/今回は作成したコンポーネントの配置を調整してみましょう。今回は以