はてなブックマーク

Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して

目標 メールアドレス・パスワードを用いて、ユーザー認証ができる API（/login）の作成 ログイン成功時に認証トークンを生成し、Cookie に保存。保存したトークンを用いてログイン状態を保持 Cookieに保存されたトークンの整合性をチェックするミドルウェアの作成 認証チェックのミドルウェアを通過後は、Express のリクエストオブジェクトを介してログインしているユーザーの ID を参照できる 前提 パスワードのハッシュ化・照合に使用するライブラリ「bcrypt」、トークンの生成・照合に使用するライブラリ「jsonwebtoken」がインストールされていること usersテーブルが作成されていること usersテーブルにはemailカラム、passwordカラムが存在すること passwordカラムには、暗号化ライブラリ「bcrypt」を使用してハッシュ化されたパスワードが保存され

Vue3のリリースから、Vuexに取って代わる状態管理ツールとして誕生したPiniaについて、Vue2までメジャーだったVuexとの比較を交えながら使用方法を解説していきたいと思います。 本記事のコードサンプルは、Vue3のCompositionAPIで記述しています。「Vue2は分かるけど、Vue3はあんまり...」「CompositionAPI...?」という方はこちらの記事でVue3/CompositionAPIについて解説していますので、是非ご覧ください！✨ Piniaとは Vue.jsのコアチームの1人でVueRouterの開発者でもあるEduardo San Martin Moroteによって開発が進められ、2019年にリリースされたコンパクトで使いやすい状態管理ツールです。 Vue2まではVuexが公式で推奨された状態管理ツールでしたが、Vue3からはPiniaを使用すること

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 仕事でもプライベートでもVue2しか書かず、Vue2一筋でVue3を食わず嫌いして勉強を先延ばしにしていたのですが「そろそろ勉強せんとな...」ということで最近やっと手をつけました。しかし最終的には「Vue3超イイネ！」となって嬉しかったので、学習した際のメモを元にチュートリアル記事にしてみました。 Vue2と比べて何が良いのか、目玉機能のCompositionAPIについてまとめましたので、同じくVue3の学習を始めたVue2好きの同志のお役に立てると幸いです😊 Vue3 2016年のVue2リリースから4年ぶりのメジャーアップデー

先日、AWS Summit Tokyoに行ってきました！とても楽しかったです。 私はフロントエンド実装が大好きな生き物なので、AWSのブースで紹介されていた、Amplify StudioをFigmaと同期することでReactコンポーネントを自動生成できる機能に感動しました。 ブースにいたAWSの方に機能の紹介をしてもらい、帰宅後に自分でもやってみましたが、結構苦戦しました...。なんとかコンポーネントを表示するところまではいけたので、いつか利用する時にまた躓かないように手順をまとめてみました。この記事がどこかで誰かの役に立てると幸いです。是非ご覧ください(^｡^) AWS Amplifyとは AWS Amplifyとは、Webアプリ、モバイルアプリの開発が出来るプラットフォームサービスです。Amplifyでは、アプリケーションの開発からホスティングまでを手助けする複数のツールが展開されてい