<h2 id="h8d027c8ed3">はじめに</h2><p><span style="color:#333333">Next.jsを使用しているプロジェクトにアニメーションを使用する機会があり、そこで、Next.jsの概念周りで理解力不足ではまった点があるので、記録として残しておきます。</span><br></p><h2 id="h4f983c1ec2">Next.js(ssgやssr)でアニメーションをする際の注意点</h2><p><span style="color:#333333">自分がハマったのが、ScrollRevealというパッケージを使用して、スクロールすると対象の要素がふわっと浮き上がるアニメーションを実装しようとした時です。</span><br><br><a style="color:#4aac00;background-color:#ffffff" href="https://scrollrevealjs.org/" target="_blank" rel="noopener noreferrer">https://scrollrevealjs.org/</a><br><br>以下コマンドで、パッケージをインストール<br><code>yarn add scrollreveal </code><br><code>yarn add @type/scrollreveal</code><br><br>以下の素のReactコードを見ていきます。</p><pre><code>import { useRef, useEffect } from "react";
import { NextPage } from "next";
// ビルド時にimportしている
import scrollReveal from "scrollreveal";

type Props = {
  move: string;
  delay: number
  className?: string
}

const ScrollReveal: NextPage&lt;Props&gt; = ({
  children,
  move,
  delay,
  className
}) =&gt; {
  const sectionRef = useRef&lt;HTMLDivElement&gt;(null);
  useEffect(() =&gt; {
    async function animate() {
      if (sectionRef.current) {
        //ここに注目
        scrollReveal().reveal(sectionRef.current, {
          delay: delay,
          opacity: 0,
          origin: move,
          distance: "20px",
          viewFactor: 0.2
        })
      }
    }
    animate()
  }, [sectionRef])
  return &lt;div className={`${className}`} ref={sectionRef}&gt;{children}&lt;/div&gt;
};
export default ScrollReveal;</code></pre><p><br>このように、記述できます。<br><br>しかし、Next.jsでSSG(静的サイトジェネレーション)、SSR(サーバーサイトジェネレーション)を用いた開発を行う際、yurn build もしくは npm run buildする際に document is not defined というエラーが出てきます。<br></p><h3 id="h70c4ac2924">エラーの原因</h3><p>ScrollRevealパッケージをimportする際、パソコンの情報(windowの横、縦幅など)が必要なんですが、ビルド時には、それらの情報は存在しないのでエラーが出ます。<br></p><h3 id="hc4c05c18f9">解決策</h3><p>ビルド時にScrollRevealをimportせずに、ユーザーがパソコンでサイトを開いたタイミングでScrollRevealをimportする。<br></p><h3 id="h48efa69dd6">具体的な解決策</h3><p>まず、Next.jsには&nbsp;<strong>Dynamic import</strong>&nbsp;というパッケージのimport方法があるのでこの技術を使用してエラー回避します。<br></p><h4 id="h8f47a4eb8c"><a style="color:#4aac00" href="https://nextjs.org/docs/advanced-features/dynamic-import" target="_blank" rel="noopener noreferrer">Dynamic Import</a></h4><p>これは、動的にパッケージをimportする技術です。(動的というとわかりにくいので、ユーザーがサイトを開いたタイミングというふうに認識しています。間違ってたらごめんなさい。。。)<br>つまり、ビルド時、サーバーサイドではScrollRevealパッケージをimportせずに、ユーザーがサイトを訪れたタイミングで初めてimportし、document is not definedを回避するということです。<br><br>以下、修正後のコード</p><pre><code>import { useRef, useEffect } from "react";
import { NextPage } from "next";
//importしていない


type Props = {
  move: string;
  delay: number
  className?: string
}

const ScrollReveal: NextPage&lt;Props&gt; = ({
  children,
  move,
  delay,
  className
}) =&gt; {
  const sectionRef = useRef&lt;HTMLDivElement&gt;(null);
  useEffect(() =&gt; {
    async function animate() {
      if (sectionRef.current) {
        //Dynamic import
        const sr = (await import("scrollreveal")).default
        sr().reveal(sectionRef.current, {
          delay: delay,
          opacity: 0,
          origin: move,
          distance: "20px",
          viewFactor: 0.2
        })
      }
    }
    animate()
  }, [sectionRef])
  return &lt;div className={`${className}`} ref={sectionRef}&gt;{children}&lt;/div&gt;;
};
export default ScrollReveal;</code></pre><p><br><span style="color:#333333">このように記述を変更すれば、エラー回避できます！！</span><br></p><h3 id="ha214098e44">まとめ</h3><p>Next.jsでは、概念から理解しないとハマるところではハマるので難しいです。</p>

Next.jsでアニメーションパッケージを使用する際の注意点

Next.jsでアニメーションパッケージ(ScrollReveal)を使用する際の注意点

<h2 id="he2485005d0">目的</h2><p>この記事は、webpackを使用し、React の開発環境を作成することを目的とした記事になります。<br></p><h2 id="hc354d8821e">方法</h2><p>方法として、webpackをベースにReact+ Typescript + Sass の環境構築をcreate-react-appを使用せず最小単位で作成します。<br>その環境構築を通して、裏ではどのようにフロントエンドが動作していたのかを把握することを目指しました。<br>以下、今回の記事の登場技術です。</p><ul><li>webpack</li><li>bubel</li><li>Sass</li><li>Typescript</li><li>React</li></ul><h2 id="h0123682dfe">webpack</h2><h3 id="h9cfcca6ec5">webpackとは</h3><p>モジュールバンドラー<br>複数のフロントエンドで必要なファイルを1つのjavascriptファイルに束ね(バンドル)出力してくれるツール。<br>他にもモジュールバンドラーはありますが、現状webpackが1強のようです。<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>複数のファイルに分け開発できる。</li><li>依存関係を解決してくれる。</li><li>1ファイルにまとめることでウェブコンテンツの読み込み速度が向上する。</li><li>jsだけでなく、css、画像ファイルなどもバンドルできる。</li></ul><h2 id="h337926bd96">Babel</h2><h3 id="h8bbd9fd38a">Babelとは？</h3><p>javascriptに特化したコンパイラー<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>Javascriptの新しい記法を古い記法に変換してくれる。</li><li>古い記法に変換することで、IEなどのブラウザにも対応させることができる。</li></ul><h2 id="h6321f8cf3a">Sass</h2><h3 id="h68589009d2">Sassとは？</h3><p>cssを拡張子、記述しやすく、みやすくしたスタイルシート。<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>ネストしてcssを記述できる。</li><li>変数を利用できる。</li><li>メソッドを記述できる。</li></ul><h2 id="hf8b0df4ff0">Typescript</h2><h3 id="h92ee23f700">Typescriptとは？</h3><p>型を定義できるAltJs<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>変数に型を定義できるため、コンパイルエラーでエラーを発見しやすい。</li></ul><h2 id="h45bcf234d3">環境構築スタート</h2><p>今回の最終着地点は、webpack + Typescript + Sass + Reactの開発環境です。<br>以下のような流れで構築を行います。</p><ol><li>package.jsonの作成</li><li>webpackのインストール</li><li>webpackの設定</li><li>ローダーの設定</li><li>Htmlファイルの作成</li><li>Scssファイルの作成</li><li>Reactファイルの作成</li><li>動作確認</li></ol><p>※node npmはインストール済みで話を進めます。<br><br>最終的なディレクトリ構成は以下のようになっています。</p><pre><code>project_name/
     |
     |- dist/
     |   | - index.html
     |   | - main.js
     |   L - style.css
     |
     |- node_module/
     |
     |- public
     |    L style
     |        L style.scss
     |
     |- src
     |   | - App.tsx
     |   L - index.tsx
     |
     |- package-lock.json
     |- package.json
     |- tsconfig.json
     L- webpack.config.js
     </code></pre><h3 id="hdbc024acee">1. npm init で package.jsonを作成</h3><p>まず、package.jsonファイル作成のため以下のコマンドを打ちます。<br>以下のコマンドで</p><pre><code>npm init -y</code></pre><p>package.jsonはプロジェクトが依存するパッケージをまとめたものです。<br>以下のような内容で記述されています。<br>package.json</p><pre><code>{
  "name": "frontend_dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
　//開発環境でのみ使用するパッケージが入る。
  "devDependencies": {
  },
  //実行環境で使用するパッケージが入る。
  "dependencies": {
  }
}

</code></pre><p>今後、devDependencies、dependenciesの部分にパッケージを追加していきます。<br></p><h3 id="h8cbf46312a">2. webpackのインストール</h3><p>以下のコマンドでwebpackで必要なパッケージのインストール。<br></p><pre><code>npm i -D webpack webpack-cli</code></pre><h3 id="h5c759c767f">3. webpackの設定</h3><p>パッケージのインストール後、webpackの設定を記述していくファイルを以下のコマンドで作成します。<br></p><pre><code>touch webpack.config.js</code></pre><p>以下、webpack.config.jsファイルの初期設定<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //ビルドのタイプを設定(デフォルトではproduction)
  mode: "development",
  //起点となるファイルの場所
  entry: "./src/index.tsx",
  //バンドルファイルを出力
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
  //import時にファイルの拡張子を省略する設定
  resolve: {
    extensions: [".js",".jsx",".ts", ".tsx", ".json"],
  },
  //リアルタイムで変更を確認しながら開発を行う設定
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    //3000番ポートに吐き出します。
    port: 3000,
  },
  //サーバー対応なのか、ブラウザ対応なのかの指定(今回はブラウザなのでweb)
  target: ["web"],
 //ローダーの設定
　module:{}
};

</code></pre><p><strong>mode</strong><br>ビルドのタイプを指定するプロパティです。<br>developとproductionの2つを指定できます。<br>develop(開発環境)</p><ul><li>ビルド時間が短くなる</li><li>容量が大きくなる</li></ul><p>production(本番環境)<br></p><ul><li>ファイルが圧縮され容量が小さくなる。</li><li>難読化される。</li><li>ビルド時間が長い。</li></ul><p><strong>entry</strong><br>起点となるファイルを指定する。<br>設定したファイルを起点とし、そのファイルから依存関係にあるファイルを芋づる式に特定し、全てのファイルを1つのファイルにバンドルするために、起点ファイルをここで設定する。<br>今回はsrc/index.tsxファイルを起点ファイルにしています。<br><strong>output</strong><br>バンドルファイルを出力する場所を指定する。<br>バンドルされた1つのファイルを出力する場所を指定。<br>今回は、distディレクトリ内に、bundle.jsというファイルで出力しています。<br><strong>resolve</strong><br>ファイルの拡張子を省略できる。<br><strong>devServer</strong><br>ローカルでサーバーを立ち上げる。<br>リアルタイムで変更を確認しながら開発が可能。<br><strong>target</strong><br>サーバーなのか、ブラウザなのかの指定。<br><strong>module</strong><br>ローダーの設定を記述する。</p><h3 id="h9c0b13a2da">4. ローダーの設定</h3><p>ローダーとは、あるファイルを別のファイルに変換するものです。<br>例えば、scssファイルをcssファイルに変換する。Typescriptファイルをjavascriptファイルに変換するなどです。<br>今回設定するのは、</p><ul><li>Scss</li><li>Typescript</li><li>Babel</li></ul><p>です。<br></p><h4 id="h851eb33bfb"><strong>Scssを扱う</strong></h4><p>今回は、Scssを使用するので、必要なローダーたちの設定を記述します。<br>以下のコマンドを打ち、必要なプラグインをインストールします。</p><pre><code>npm i -D style-loader css-loader sass-loader sass</code></pre><ul><li>style-loader</li><li>バンドルされたcssファイルをhtmlで使用するためのloader</li><li>css-loader</li><li>cssファイルをjavascriptファイルにバンドルするためのloader</li><li>scss-loader</li><li>scssファイルをcssファイルにコンパイルするloader</li></ul><p>次に、loaderをwebpackのmoduleプロパティ内で設定します。<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //省略
  //loaderの設定を記述する場所
  module: {
    rules: [
      {
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};</code></pre><p><strong>module</strong><br>loaderを設定するプロパティ<br><br><strong>rules</strong><br>各loaderのルールを設定するプロパティ<br><br><strong>test</strong><br>対象ファイルを設定するプロパティ<br>ファイルの拡張子を指定、今回はscssが対象なのでscssを指定<br><br><strong>use</strong><br>どのloaderをどの順番で使用するかの設定。<br>後ろから順番に処理がされます。<br>つまり今回は、<br>sass-loader → css-loader　→ style-loader<br>の順番ですので、<br>scssをcssに変換 → 変換されたcssをjavascriptファイルにバンドル → バンドルされたcssファイルをHTMLで使用。<br>以上の設定でscssを使用することができます。<br></p><h4 id="hfd9898337e"><strong>Typescriptを扱う</strong></h4><p>Scssの設定ができたので次にTypescriptの設定を扱います。<br>scss同様、以下の必要なプラグインをインストールします。</p><pre><code>npm i -D typescript ts-loader</code></pre><ul><li>ts-loader</li><li>Typescriptをjavascriptに変換(トランスパイル)するプラグイン</li></ul><p>webpack.config.jsは以下のようになります。<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //省略
  //
  //loaderの設定を記述する場所
  module: {
    //TypeScript や Scssのローダー設定
    rules: [
      {
        //typescriptをjavascriptに変換
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "ts-loader",
            },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
}</code></pre><p>scssの時と同様、testには変換対象のファイルを、useには使用するloaderを設定します。<br>また、Typescriptの設定ファイルである、tsconfig.jsonを作成します。<br>tsconfig.json</p><pre><code>{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "esnext",
    "outDir": "./dist",
    "jsx": "preserve",
    "moduleResolution": "Node",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["./src"],
  "exclude": ["./node_modules"]
}</code></pre><p>ts-loaderのおかげで、厳密な型チェックをtsconfig.jsonをもとに行ってくれます。<br>以下のようなコードを記述すると、ビルド時にエラーを吐いてくれます。</p><pre><code>const value: number = "Test"
// 数値に文字列を入れようとすると以下のエラーがはかれる
// TS2322: Type 'number' is not assignable to type 'string'.</code></pre><h4 id="h74742a8f7d">Babelを扱う</h4><p>TypescriptをjavascriptにトランスパイルできてもES5に対応できていなかったら動作しない環境(Internet Exploreなど)があります。<br>なので、ES5に対応させるためにBabelを使用します。<br>これまで同様必要なプラグインをインストールします。</p><pre><code>npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react</code></pre><p>以下、webpack.config.jsonファイルです。<br><br>webpack.config.js</p><pre><code>const path = require("path");
  //省略
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          //追記
          {
            loader: "babel-loader",
            options: { presets: ["@babel/preset-env", "@babel/react"] },
          },
          {
            loader: "ts-loader",
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
}</code></pre><p>ts-loaderの上にbabel-loaderを追記しました。<br></p><ul><li>@babel/preset-env</li><li>ES6以降のものをES5にトランスパイル</li><li>@babel/react</li><li>JSXをJSにトランスパイル</li></ul><p>ここでは、babelで提供されているプラグインを使用し、reactの対応も行っております。<br><br>順序は、<br>Typescript(tsx)　→ javascript(jsx) → js(ES6) → javascript(ES5)<br>のような変更です。<br>注意<br>Babelには、@babel/typescriptプラグインも存在します。<br>これはビルド時にTypescriptからjavascriptの変換は行ってくれますが、ts-loaderのように型チェックは行ってくれません。<br>(ts-loaderのところで説明したエラーが出ない)<br>以上でローダー周りの設定は完了です。<br></p><h3 id="h5fc5a8be30">5.ベースとなるHtml作成</h3><p>ベースとなるHtmlを作成します。<br><br>./dist/index.html</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Webpack&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p>scriptタグで、webpackで1つにまとめたjsファイルを挿入します。(bundle.jsの中にcssも含まれている。)<br></p><h3 id="h03c74c7e7d">6.Scssファイル作成</h3><p>Scssを記述します。<br>Sassをインストールします。</p><pre><code>npm i -D sass</code></pre><p>今回は、./public/style/style.scssに作成しました。<br><br>./public/style/style.scss</p><pre><code>.l-index {
  color: red;
  background-color: blue;
}

</code></pre><h3 id="hb01aaafc74">7.Reactファイル作成</h3><p>Reactを記述していきます。<br>その前に、Reactで必要なパッケージをインストールします。<br>以下の4つです。</p><pre><code>npm i react react-dom @types/react @types/react-dom</code></pre><p>以下のファイルを作成します。<br><br>index.tsx</p><pre><code>import React from "react";
import ReactDOM from "react-dom";
import { App } from "../src/App";
//ここでscssをインポート
import "../public/style/style.scss";

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById("root")
);</code></pre><p>App.tsx</p><pre><code>import React from "react";

export const App: React.FC = () =&gt; {
  return &lt;h1 className="l-index"&gt;カープ優勝&lt;/h1&gt;;
};</code></pre><h3 id="hcfbe168d1c">8.動かす</h3><p>それでは、実際に画面に「カープ優勝」が表示されるか見てみましょう。<br><br>そのためには、package.jsonの設定を行います。<br>以下のようにscriptsの部分にコマンドを設定しておきます。<br>package.json</p><pre><code>  "scripts": {
    //production環境でビルド
    "build": "webpack --mode production",
    //開発環境でビルド
    "dev": "webpack-dev-server --open",
  },</code></pre><p>それでは以下のコマンドを打ち、動作確認します。<br></p><pre><code>npm run dev</code></pre><p>自動で<a style="color:#4aac00" href="unsafe:null">localhost:3000</a>が開き赤文字で「カープ優勝」が表示されました！<br><br><img src="https://images.microcms-assets.io/assets/4a28548190c8431e99dcc2e69b4a646f/7d95e75e69134c1da1ee31aa06cdb11f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-10%2012.19.29.png" alt=""><br><br>App.tsxの文字を変更したり、style.scssのスタイルを変更したりして変更がリアルタイムで反映されていたら成功です。<br></p><h2 id="h5fcec0cf90">所感</h2><p>今回、weboackをベースにReact + Typescript + Sassの開発環境を作成しました。<br>今回の実戦でよりフロントエンドの裏の動きをなんとなく把握できたなと感じます。<br>具体的には、以下の2つのことを学びました。</p><ol><li>人が使いやすい言語やフレームワーク(React、Typescript...)をブラウザで動かせる言語や仕様(javascript、css、ECMAScript5)に変換する</li><li>人が管理、開発をしやすいように複数のファイルで開発を行う(モジュール化)が、パフォーマンスを考え1つのファイルにまとめブラウザで動作させる</li></ol><p>以上の学んだことは、今後フロントエンドの流行が変化しても、不変な部分であると感じます。<br></p><h2 id="h3de35099b3"><strong>参考</strong></h2><p><a href="https://ics.media/entry/12140/" target="_blank" rel="noopener noreferrer">https://ics.media/entry/12140/</a><br><a href="https://ics.media/entry/17376/" target="_blank" rel="noopener noreferrer">https://ics.media/entry/17376/</a><br><a href="https://zenn.dev/hrkmtsmt/articles/93653309e2a13d" target="_blank" rel="noopener noreferrer">https://zenn.dev/hrkmtsmt/articles/93653309e2a13d</a><br><a href="https://tech.playground.style/javascript/babel-webpack/" target="_blank" rel="noopener noreferrer">https://tech.playground.style/javascript/babel-webpack/</a></p>

create-react-appは使用せずwebpackでReactの環境構築を行う。webpackの学びにもなるのでぜひこの機会に触れてみてください。

create-react-appは使用しない！webpackでReactの環境構築

<h2 id="h6e44630e1e">プライバシーポリシー(Merubo)</h2><p>小川翔生（以下，「提供者」といいます。）は，iOS、Androidアプリで提供されるMeruboのサービス（以下,「本サービス」といいます。）における，ユーザーの個人情報の取扱いについて，以下のとおりプライバシーポリシー（以下，「本ポリシー」といいます。）を定めます。<br></p><h3 id="h31cbdd5e8e">第1条（個人情報）</h3><p>「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。<br></p><h3 id="ha46c45ecec">第2条（個人情報の収集方法）</h3><p>提供者は，ユーザーが利用登録をする際に氏名，生年月日，住所，電話番号，メールアドレス，銀行口座番号，クレジットカード番号，運転免許証番号などの個人情報をお尋ねすることがあります。また，ユーザーと提携先などとの間でなされたユーザーの個人情報を含む取引記録や決済に関する情報を,提供者の提携先（情報提供元，広告主，広告配信先などを含みます。以下，｢提携先｣といいます。）などから収集することがあります。<br></p><h3 id="h25d90912af">第3条（個人情報を収集・利用する目的）</h3><p>影響者が個人情報を収集・利用する目的は，以下のとおりです。</p><ol><li>本サービスの提供・運営のため</li><li>ユーザーからのお問い合わせに回答するため（本人確認を行うことを含む）</li><li>ユーザーが利用中のサービスの新機能，更新情報，キャンペーン等及び提供者が提供する他のサービスの案内のメールを送付するため</li><li>メンテナンス，重要なお知らせなど必要に応じたご連絡のため</li><li>利用規約に違反したユーザーや，不正・不当な目的でサービスを利用しようとするユーザーの特定をし，ご利用をお断りするため</li><li>ユーザーにご自身の登録情報の閲覧や変更，削除，ご利用状況の閲覧を行っていただくため</li><li>有料サービスにおいて，ユーザーに利用料金を請求するため</li><li>上記の利用目的に付随する目的</li></ol><p><br></p><h3 id="h6bc158d63e">第4条（利用目的の変更）</h3><ol><li>提供者は，利用目的が変更前と関連性を有すると合理的に認められる場合に限り，個人情報の利用目的を変更するものとします。</li><li>利用目的の変更を行った場合には，変更後の目的について，提供者所定の方法により，ユーザーに通知し，または本ウェブサイト上に公表するものとします。</li></ol><p><br></p><h3 id="h3a09f03885">第5条（個人情報の第三者提供）</h3><ol><li>提供者は，次に掲げる場合を除いて，あらかじめユーザーの同意を得ることなく，第三者に個人情報を提供することはありません。ただし，個人情報保護法その他の法令で認められる場合を除きます。</li><li>人の生命，身体または財産の保護のために必要がある場合であって，本人の同意を得ることが困難であるとき</li><li>公衆衛生の向上または児童の健全な育成の推進のために特に必要がある場合であって，本人の同意を得ることが困難であるとき</li><li>国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行することに対して協力する必要がある場合であって，本人の同意を得ることにより当該事務の遂行に支障を及ぼすおそれがあるとき</li><li>予め次の事項を告知あるいは公表し，かつ提供者が個人情報保護委員会に届出をしたとき</li><li>利用目的に第三者への提供を含むこと</li><li>第三者に提供されるデータの項目</li><li>第三者への提供の手段または方法</li><li>本人の求めに応じて個人情報の第三者への提供を停止すること</li><li>本人の求めを受け付ける方法</li><li>前項の定めにかかわらず，次に掲げる場合には，当該情報の提供先は第三者に該当しないものとします。</li><li>提供者が利用目的の達成に必要な範囲内において個人情報の取扱いの全部または一部を委託する場合</li><li>合併その他の事由による事業の承継に伴って個人情報が提供される場合</li><li>個人情報を特定の者との間で共同して利用する場合であって，その旨並びに共同して利用される個人情報の項目，共同して利用する者の範囲，利用する者の利用目的および当該個人情報の管理について責任を有する者の氏名または名称について，あらかじめ本人に通知し，または本人が容易に知り得る状態に置いた場合</li></ol><p><br></p><h3 id="h4a167ebd9b">第6条（個人情報の開示）</h3><ol><li>提供者は，本人から個人情報の開示を求められたときは，本人に対し，遅滞なくこれを開示します。ただし，開示することにより次のいずれかに該当する場合は，その全部または一部を開示しないこともあり，開示しない決定をした場合には，その旨を遅滞なく通知します。なお，個人情報の開示に際しては，1件あたり1，000円の手数料を申し受けます。</li><li>本人または第三者の生命，身体，財産その他の権利利益を害するおそれがある場合</li><li>提供者の業務の適正な実施に著しい支障を及ぼすおそれがある場合</li><li>その他法令に違反することとなる場合</li><li>前項の定めにかかわらず，履歴情報および特性情報などの個人情報以外の情報については，原則として開示いたしません。</li></ol><p><br></p><h3 id="h263f415a86">第7条（個人情報の訂正および削除）</h3><ol><li>ユーザーは，提供者の保有する自己の個人情報が誤った情報である場合には，提供者が定める手続きにより，提供者に対して個人情報の訂正，追加または削除（以下，「訂正等」といいます。）を請求することができます。</li><li>提供者は，ユーザーから前項の請求を受けてその請求に応じる必要があると判断した場合には，遅滞なく，当該個人情報の訂正等を行うものとします。</li><li>提供者は，前項の規定に基づき訂正等を行った場合，または訂正等を行わない旨の決定をしたときは遅滞なく，これをユーザーに通知します。</li></ol><p><br></p><h3 id="h73465ee8f8">第8条（個人情報の利用停止等）</h3><ol><li>提供者は，本人から，個人情報が，利用目的の範囲を超えて取り扱われているという理由，または不正の手段により取得されたものであるという理由により，その利用の停止または消去（以下，「利用停止等」といいます。）を求められた場合には，遅滞なく必要な調査を行います。</li><li>前項の調査結果に基づき，その請求に応じる必要があると判断した場合には，遅滞なく，当該個人情報の利用停止等を行います。</li><li>提供者は，前項の規定に基づき利用停止等を行った場合，または利用停止等を行わない旨の決定をしたときは，遅滞なく，これをユーザーに通知します。</li><li>前2項にかかわらず，利用停止等に多額の費用を有する場合その他利用停止等を行うことが困難な場合であって，ユーザーの権利利益を保護するために必要なこれに代わるべき措置をとれる場合は，この代替策を講じるものとします。</li></ol><p><br></p><h3 id="he91a8b1a11">第9条（プライバシーポリシーの変更）</h3><ol><li>本ポリシーの内容は，法令その他本ポリシーに別段の定めのある事項を除いて，ユーザーに通知することなく，変更することができるものとします。</li><li>提供者が別途定める場合を除いて，変更後のプライバシーポリシーは，本ウェブサイトに掲載したときから効力を生じるものとします。</li></ol><p><br></p><h3 id="hbc7f897b96">第10条(統計処理されたデータの利用)</h3><p>提供者は、提供を受けた個人情報をもとに、個人の特定できないよう加工した統計データをもとに、個人を特定できないように加工した統計データを作成することがあります。個人を特定できない統計データについて、提供者は、法令に従ってこれを利用することができます。<br>本サービスは、Cookie及び、これに類する技術(IDFA及びAAID等を含みます。)を利用することがあります。また、本サービスはこれからの技術と併せてGoogleアナリティクス及び、Firebaseを利用することがあります。これらの技術並びにGoogleアナリティクス及びFirebaseは、提供者による本サービスの利用状況等の把握に役立ち、サービス向上に資するものです。<br>Googleアナリティクスでデータが収集、処理される仕組みについては、下記URLのGoogleアナリティクスのウェブサイトでご確認いただけます。<br><a style="color:#337ab7" href="http://www.google.com/policies/privacy/partners/" target="_blank" rel="noopener noreferrer">www.google.com/policies/privacy/partners/</a><br>Firebaseでデータが収集、処理される仕組みについては、下記URLのFirebaseのウェブサイトでご確認いただけます。<br><a style="color:#337ab7" href="https://firebase.google.com/support/privacy?hl=ja" target="_blank" rel="noopener noreferrer">https://firebase.google.com/support/privacy?hl=ja</a></p>

meruboのプライバシーポリシーです。
同意の上、meruboをご利用ください。


プライバシーポリシー

<h2 id="h889b1eb88e">利用規約 (Merubo)</h2><p>利用規約<br>この利用規約（以下，「本規約」といいます。）は，小川翔生（以下，「提供者」といいます。）が提供するmerubo（以下，「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下，「ユーザー」といいます。）には，本規約に従って，本サービスをご利用いただきます。<br></p><h3 id="h5a9ca5c500">第1条（適用）</h3><ul><li>本規約は，ユーザーと提供者との間の本サービスの利用に関わる一切の関係に適用されるものとします。</li><li>提供者は本サービスに関し，本規約のほか，ご利用にあたってのルール等，各種の定め（以下，「個別規定」といいます。）をすることがあります。これら個別規定はその名称のいかんに関わらず，本規約の一部を構成するものとします。</li><li>本規約の規定が前条の個別規定の規定と矛盾する場合には，個別規定において特段の定めなき限り，個別規定の規定が優先されるものとします。</li></ul><p><br></p><h3 id="hdfe3ac032d">第2条（禁止事項）</h3><p>ユーザーは，本サービスの利用にあたり，以下の行為をしてはなりません。</p><ul><li>法令または公序良俗に違反する行為</li><li>犯罪行為に関連する行為</li><li>提供者，本サービスの他のユーザー，または第三者のサーバーまたはネットワークの機能を破壊したり，妨害したりする行為</li><li>提供者のサービスの運営を妨害するおそれのある行為</li><li>他のユーザーに関する個人情報等を収集または蓄積する行為</li><li>不正アクセスをし，またはこれを試みる行為</li><li>他のユーザーに成りすます行為</li><li>提供者のサービスに関連して，反社会的勢力に対して直接または間接に利益を供与する行為</li><li>提供者，本サービスの他のユーザーまたは第三者の知的財産権，肖像権，プライバシー，名誉その他の権利または利益を侵害する行為</li><li>以下の表現を含み，または含むと提供者が判断する内容を本サービス上に投稿し，または送信する行為</li><li>過度に暴力的な表現</li><li>露骨な性的表現</li><li>人種，国籍，信条，性別，社会的身分，門地等による差別につながる表現</li><li>自殺，自傷行為，薬物乱用を誘引または助長する表現</li><li>その他反社会的な内容を含み他人に不快感を与える表現</li><li>以下を目的とし，または目的とすると提供者が判断する行為</li><li>営業，宣伝，広告，勧誘，その他営利を目的とする行為（提供者の認めたものを除きます。）</li><li>性行為やわいせつな行為を目的とする行為</li><li>面識のない異性との出会いや交際を目的とする行為</li><li>他のユーザーに対する嫌がらせや誹謗中傷を目的とする行為</li><li>提供者，本サービスの他のユーザー，または第三者に不利益，損害または不快感を与えることを目的とする行為</li><li>その他本サービスが予定している利用目的と異なる目的で本サービスを利用する行為</li><li>宗教活動または宗教団体への勧誘行為</li><li>その他，提供者が不適切と判断する行為</li></ul><p><br></p><h3 id="hbc80a833d7">第3条(利用登録)</h3><ol><li>提供者は、ユーザーが本サービスを利用するにあたって、ユーザー登録を求める場合があります。この場合、ユーザーは提供者の定める一定の情報(以下「登録情報」といいます。)を提供者に提供することにより、提供者に対し、本サービスの利用の登録を申請するものとします。</li><li>登録の申請は、必ず本サービスを利用する個人自身が行わなければならず、原則として代理人による登録申請は認められません。また、ユーザーは、登録の申請にあたり、真実、正確かつ最新の情報を提供者に提供しなければなりません。</li></ol><p><br></p><h3 id="h5c68c763b3">第4条(利用環境)</h3><p>本サービスはiOSアプリ、Androidアプリでのご提供となっております。提供者は、ユーザーが本サービスを利用するための環境(スマートフォン等の端末機器、ソフトウェアおよび通信回線等を含む。)に関して一切の責任を負わないと共に、接続環境設備等のための助言、サポート等は行いません。<br></p><h3 id="h49798703d7">第5条（本サービスの提供の停止等）</h3><ul><li>提供者は，以下のいずれかの事由があると判断した場合，ユーザーに事前に通知することなく本サービスの全部または一部の提供を停止または中断することができるものとします。</li></ul><ol><li>本サービスにかかるコンピュータシステムの保守点検または更新を行う場合</li><li>地震，落雷，火災，停電または天災などの不可抗力により，本サービスの提供が困難となった場合</li><li>コンピュータまたは通信回線等が事故により停止した場合</li><li>その他，提供者が本サービスの提供が困難と判断した場合</li><li>提供者は，本サービスの提供の停止または中断により，ユーザーまたは第三者が被ったいかなる不利益または損害についても，一切の責任を負わないものとします。</li></ol><p><br></p><h3 id="h501dc01063">第6条（著作権）</h3><ul><li>ユーザーは，自ら著作権等の必要な知的財産権を有するか，または必要な権利者の許諾を得た文章，画像や映像等の情報に関してのみ，本サービスを利用し，投稿ないしアップロードすることができるものとします。</li><li>ユーザーが本サービスを利用して投稿ないしアップロードした文章，画像，映像等の著作権については，当該ユーザーその他既存の権利者に留保されるものとします。ただし，提供者は，本サービスを利用して投稿ないしアップロードされた文章，画像，映像等について，本サービスの改良，品質の向上，または不備の是正等ならびに本サービスの周知宣伝等に必要な範囲で利用できるものとし，ユーザーは，この利用に関して，著作者人格権を行使しないものとします。</li><li>前項本文の定めるものを除き，本サービスおよび本サービスに関連する一切の情報についての著作権およびその他の知的財産権はすべて提供者または提供者にその利用を許諾した権利者に帰属し，ユーザーは無断で複製，譲渡，貸与，翻訳，改変，転載，公衆送信（送信可能化を含みます。），伝送，配布，出版，営業使用等をしてはならないものとします。</li></ul><p><br></p><h3 id="h582a606195">第7条（ユーザーのデータの保存について）</h3><p>ユーザーは、自己の作成したコンテンツを構成するテキストや、その他データ等について、自己の責任において保存するものとします。提供者では、これらのデータ保存内容について保証しません。提供者は提供者の裁量によってユーザーが作成したデータを削除することができるものとします。提供者は、ユーザーが本サービスで保存するデータの消失、削除とうについて一切の責任を負いません。<br></p><h3 id="h4005b55e68">第8条（保証の否認および免責事項）</h3><ol><li>提供者は，本サービスに事実上または法律上の瑕疵（安全性，信頼性，正確性，完全性，有効性，特定の目的への適合性，セキュリティなどに関する欠陥，エラーやバグ，権利侵害などを含みます。）がないことを明示的にも黙示的にも保証しておりません。</li><li>提供者は，本サービスに起因してユーザーに生じたあらゆる損害について一切の責任を負いません。ただし，本サービスに関する提供者とユーザーとの間の契約（本規約を含みます。）が消費者契約法に定める消費者契約となる場合，この免責規定は適用されません。</li><li>前項ただし書に定める場合であっても，提供者は，提供者の過失（重過失を除きます。）による債務不履行または不法行為によりユーザーに生じた損害のうち特別な事情から生じた損害（提供者またはユーザーが損害発生につき予見し，または予見し得た場合を含みます。）について一切の責任を負いません。また，提供者の過失（重過失を除きます。）による債務不履行または不法行為によりユーザーに生じた損害の賠償は，ユーザーから当該損害が発生した月に受領した利用料の額を上限とします。</li><li>提供者は，本サービスに関して，ユーザーと他のユーザーまたは第三者との間において生じた取引，連絡または紛争等について一切責任を負いません。</li><li>提供者は、ユーザーが使用するいかなる機器、ソフトウェアについても、その動作保証を一切行いません。本サービスを利用の際に発生した、電話会社その他の通信業者からの請求される通信費用はユーザーが自己責任において管理するものとし、提供者はいかなる保証も行いません。</li><li>本サービスから他のウェブサイトへのリンク又は他のウェブサイトから本サービスへのリンクが提供されている場合でも、提供者は、他のウェブサイト及びそこから得られる情報に関して一切責任を負いません。</li></ol><p><br></p><h3 id="hb4c7332137">第9条（サービス内容の変更）</h3><p>提供者は，ユーザーに通知することなく，本サービスの内容を変更しまたは本サービスの提供を中止することができるものとし，これによってユーザーに生じた損害について一切の責任を負いません。<br></p><h3 id="h51041da6e8">第10条（利用規約の変更）</h3><p>提供者は，必要と判断した場合には，ユーザーに通知することなくいつでも本規約を変更することができるものとします。なお，本規約の変更後，本サービスの利用を開始した場合には，当該ユーザーは変更後の規約に同意したものとみなします。<br></p><h3 id="h531195eef4">第11条（個人情報の取扱い）</h3><p>提供者は，本サービスの利用によって取得する個人情報については，提供者「プライバシーポリシー」に従い適切に取り扱うものとします。<br></p><h3 id="h70a49ca544">第12条（通知または連絡）</h3><p>ユーザーと提供者との間の通知または連絡は，提供者の定める方法によって行うものとします。提供者は,ユーザーから,提供者が別途定める方式に従った変更届け出がない限り,現在登録されている連絡先が有効なものとみなして当該連絡先へ通知または連絡を行い,これらは,発信時にユーザーへ到達したものとみなします。<br></p><h3 id="h39b4573a1c">第13条（権利義務の譲渡の禁止）</h3><p>ユーザーは，提供者の書面による事前の承諾なく，利用契約上の地位または本規約に基づく権利もしくは義務を第三者に譲渡し，または担保に供することはできません。<br></p><h3 id="h11c036a80b">第14条（準拠法・裁判管轄）</h3><ul><li>本規約の解釈にあたっては，日本法を準拠法とします。</li><li>本サービスに関して紛争が生じた場合には，提供者の本店所在地を管轄する裁判所を専属的合意管轄とします。</li></ul><p><br></p><h3 id="h8c53c592f2">第15条（有効期間）</h3><p>本サービスに入力したユーザーの情報及びデータは、提供者が定めた期間、提供者のサーバに保持されるものとします。<br></p><h3 id="h33712ee67b">第16条（協議)</h3><p>本規約に関して疑義あるいは、本規約に取り決めのない事項が生じた場合、信義誠実の原則に従って協議し、解決を図ることとします。</p>

meruboの利用規約です。
同意のうえ、meruboをご利用ください。

エンジニア図書館

最新記事一覧

Next.jsでアニメーションパッケージ(ScrollReveal)を使用する際の注意点

create-react-appは使用しない！webpackでReactの環境構築

プライバシーポリシー

利用規約