- 1. クッキー、セッション、キャッシュを簡単にまとめ
- 2. 【Nuxt.js】データ・状態の一元管理を試してみた【勉強3】
- 3. Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう
- 4. FullCalenderの使い方まとめメモ(v5.3.0)
- 5. 【firebase】firebase.関数名() is not a function がでた際に確認する事【Javascript】
- 6. Mixed Content: The page at 'https://〜〜〜' was loaded over HTTPS,というエラーが出た時の対処
- 7. JavaScriptのクラスと継承
- 8. Promise~async-await
- 9. WEBフロントエンドパフォーマンス要約 基礎編 2020年
- 10. Phaser3でボタンクラスを作る
- 11. esbuildがwebpackより187倍早いらしいので環境構築しよう
- 12. confirm内で改行する
- 13. 【ES6】配列メソッド~findIndex編~【JavaScript】
- 14. JavaScriptのpostMessageでDOMツリーのノード参照を渡す方法[Xpath]
- 15. webサービス(SPA)の読み込み速度を改善する備忘録(JS編)
- 16. 【Rails】Amazon PA API v5.0 で書籍検索(非同期通信)
- 17. 同期非同期コールバック
- 18. Next.jsのプリレンダリング方式についてまとめてみた
- 19. 【JavaScript】基礎
- 20. summernoteで動画ファイルをアップロードする
クッキー、セッション、キャッシュを簡単にまとめ
## クッキー
・「誰が?」の情報を取得し、保存してる。
・passwordやuser_idなどがあるためセキュリティ上危険。そのためセッションにより安全に情報を保持する。
・保存場所は、自分のPC(主にブラウザ)
・クッキーは無効にできる。
## セッション
・「何をしたか?」という情報を取得し、保存してる。
・クッキーと連動して生成されてることが多い。
・保存場所はブラウザだけでなく、サーバーにも情報が保存されてるから、追える。
・セッションは無効にできない。
## キャッシュ
・よく使うデータへのアクセスを速くするために、より高速な記憶装置に一時的に保存する仕組み。
・高速化のための情報を保存してる。
## 3つの違い
キャッシュとクッキーおよびセッションとの大きな違いは、
キャッシュが表示の高速化のために情報を保存しているのに対して、
クッキーやセッションはユーザーの情報を保存していること。
【Nuxt.js】データ・状態の一元管理を試してみた【勉強3】
## はじめに
自分が勉強した内容のまとめなので、正確性は保証しません。
[こちらのサイト](https://moneyhack.tech/Nuxt.js/07-Nuxt/)にcodesandboxを埋め込んでいます。
実際の振る舞いを見ながらコードの確認ができるので非常に便利です。
https://moneyhack.tech/Nuxt.js/07-Nuxt/
シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。
# データ・状態の一元管理(Vuex)とは
今回はデータ・状態の管理に用いられる Vuex について紹介します。
プロジェクト内で複数のページ、コンポーネントを作成していると、
共通のデータを用いたい時が出てくると思います。
そんな時にデータの保管場所となってくれるのが、「Vuex」というプラグインです。
[Vuex の公式サイト](https://vuex.vuejs.org/ja/)
**※対象読者**
Vue.js – HTML/CSS/Javascript を簡単に書けるフレームワーク
Nuxt.js
Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう
今回は、Next.jsで全体の設定ができる`_document.js(tsx)` と`_app.js(tsx)` について解説してききます✍️
# _document.js(.tsx)
Next.jsのPageコンポーネントはデフォルトでは``・`
`タグの定義を行いますが、それらを拡張したい場合は `_documet.js(tsx)` を作成し、その中で `Document` コンポーネントを継承したクラスを実装しましょう。“`jsx:_document.js
class SampleDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { …initialProps }
}render() {
return (
FullCalenderの使い方まとめメモ(v5.3.0)
FullCalenderを使用した備忘録をまとめます。
### ダウンロード
https://fullcalendar.io/docs/getting-started– 今回はPre-built Bundlesのzipファイルをダウンロードして使用
Download: fullcalendar-5.3.0.zip– ダウンロードして展開したlibディレクトリの中身を使用するプロジェクトに移す
### カレンダーの表示
https://fullcalendar.io/docs/initialize-globals
こちらを参考に記載“`calender.html