Nuxtでページネーションを実装する練習
リアクティブの便利さに感動しています。
参考元 なしapplication
学習や追究をする上で取り組んだ自主制作
参考元が不明でない限り、
参考にしたものを明記しております
Nuxtでページャー周りを実装する練習
リアクティブの便利さに感動しています。
参考元 なし動的にファイルを生成する練習
ブラウザからDBにデータを挿入し、それをトリガーにサーバー上にファイルを生成する練習。
参考元 なしwebサーバーを構築する練習
インフラの基礎を理解するために自宅でwebサーバーをオンプレミスで構築する練習。UbuntuでApacheでPHPを動かして自前で証明書を発行してhttpsを使えるようにできた。
参考元 作りながら学ぶWebシステムの教科書排他ロック・共有ロック・デッドロックを試す
排他ロック・共有ロックを試し、わざとデッドロックを引き起こしてロールバックを実行、リトライさせてみる練習。
参考元 Zenn データベースのロックの基礎からデッドロックまで一つの投稿に複数のカテゴリーを紐づける練習
多対多の関係を作るために中間テーブルというアプローチに触れられた。
参考元 なし自作CMSにカスタムフィールドを追加
カスタムフィールド用のテーブルを新しく作り、投稿画面や編集画面で編集増減できるようにする練習。APIに渡すときはポストテーブルと結合する。
参考元 なしCMS自作
phpでCMSのシステムと管理画面を作り、記事データをjsonにして返すAPIを作る。フロントエンドからリクエストヘッダーにAPIキーを付与してfetchする。
参考元 なし無限スクロールで記事表示
表示済みの記事の最下部まで到達したら次の記事を取得して表示する練習。
参考元 なしページネーション
取得数制限のあるAPIをページネーションで表示する練習。URLパラメータとfetchで実装。
参考元 なしSNSっぽい機能をつくる
phpとmySQLをdockerで構築し、SNSでありそうな機能を作る練習。
参考元 なしTestの導入
フロントエンドのコンポーネントをユニットテストしてみる練習。Vitestを使用。
参考元 フロントエンド開発のためのテスト入門huskyの導入
commit時に指定したLinterを実行させる検証。huskyやzodなどの、予め開発環境に導入されているライブラリに対する解像度を上げる試み。
参考元 chatGPTNuxtに入門
Vue、Nuxtのドキュメントに書かれている機能を大体試してみる練習。スライダーのロジックはVueの作法で手作り。build方式はSSG。
参考元 Nuxt公式ドキュメントNode.jsに入門
Node.jsとは何なのかを理解するために、ファイルの複製、リネーム、パスの表示を行ってみる練習。
参考元 実践Node.js入門APIをフロントエンドからfetchする
バックエンド側で作った処理をwebAPIにして、フロントエンドからfetchしてCRUD処理を行う練習。XSS対策、SQLインジェクション対策、webAPIでのCSRF対策付き。
参考元 chatGPTAPI化の練習
データベースのデータを取得して返す処理をバックエンド側でつくり、APIのエンドポイントをhttp/httpsでアクセスできるようにURLの形式で公開して、フロントエンド側でそのURLをfetchして表示する練習。
参考元 chatGPTphpとSQLでサイト内検索
サイト内検索、データ検索を行う練習。SQL文の練習になった。
参考元 chatGPTphpとSQLでログイン機能を作る練習
XSS対策・CSRF対策・SQLインジェクション対策付き。
参考元 chatGPTphpでメールフォームを自作する練習
バックエンド側でのバリデーションとXSS対策とCSRF対策とメールヘッダーインジェクション対策もやれた。
参考元 小山健人さんCRUDを行う練習
素のphpとSQLでCRUDをやってみる練習。
参考元 web上