JavaScript関連のことを調べてみた2020年08月25日

JavaScript関連のことを調べてみた2020年08月25日

クッキー、セッション、キャッシュを簡単にまとめ

## クッキー

・「誰が?」の情報を取得し、保存してる。

・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