primal - デジナーレ

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、useEffect()について説明します。

useEffect()
クリーンアップ関数
ライフサイクル

useEffect()

useEffect()は、コンポーネントを

外部システムと同期させるためのReactフック

・・・＊外部システム（副作用）・・・

React の state に基づいて非React 製コンポーネントを制御したり、

サーバとの接続を確立したり、

コンポーネントが画面に表示されたときに

分析用のログを送信したりするもの。

Reactではレンダーによって引き起こされる副作用のことを指す。

■useEffect(setup, dependencies?)

//【例】
import { useEffect } from 'react';

const sample = () => {
 // 関数を宣言
 const setup = () => console.log("関数が実行されました");

 // 第ー引数に実行したい関数、第二引数に依存配列を設定する
 useEffect(() => setup, [dependencies]);
};

1

2

3

4

5

6

7

8

9

10

//【例】

import { useEffect } from 'react';

const sample = () => {

// 関数を宣言

const setup = () => console.log("関数が実行されました");

// 第ー引数に実行したい関数、第二引数に依存配列を設定する

useEffect(() => setup, [dependencies]);

};

useEffect()はコンポーネントの

トップレベルでuseEffectを呼び出して、Effectを宣言する。

＊マウント　　コンポーネントに対応するDOMノードを作成し、

　　既存のDOMツリーに挿入して最終的なUIに出力するプロセスのこと。

＊アンマウント　DOMノードが既存のDOMツリーから削除されること。

＊更新　　　　　既存のDOMツリーに存在するDOMノードに変更を加えること。

setup(第一引数):

＊初めてDOMに追加された時

Reactはセットアップ関数を実行する。（マウント時）

（初回レンダー時は、すべての副作用はクリーンアップされている前提で、

　セットアップ関数のみ行う。）

＊dependencies(依存配列)が変更された再レンダー時

Reactは古い値を使ってクリーンアップ関数を実行

→その後新しい値を使用し、セットアップ関数を実行する。（更新時）

（更新時は、セットアップ関数を実行するので、

　先にクリーンアップを実行する。）

＊コンポーネントがDOMから削除された時

Reactはクリーンアップ関数を最後にもう一度実行する。（アンマウント時）

（削除時は、次回コンポーネントが呼ばれて、

　レンダリングされる際に、セットアップできるようにクリーンアップする。）

-- ＊第二引数を省略した場合 --

コンポーネントがレンダリングされるたびに、

Reactは古い値を使ってクリーンアップ関数を実行、

その後新しい値を使用し、セットアップ関数を実行する。

//【例】
import { useEffect } from 'react';

const sample = () => {
  // 関数を宣言
  const setup = () => console.log("関数が実行されました");

  // <span>毎回のレンダー後に実行される</span>
  useEffect(() => setup );
};

1

2

3

4

5

6

7

8

9

10

//【例】

import { useEffect } from 'react';

const sample = () => {

// 関数を宣言

const setup = () => console.log("関数が実行されました");

// <span>毎回のレンダー後に実行される</span>

useEffect(() => setup );

};

-- ＊空の依存配列を渡した場合 --

セットアップ関数を

初回レンダリング時の一度だけ実行する。

//【例】
import { useEffect } from 'react';

const sample = () => {
  // 関数を宣言
  const setup = () => console.log("関数が実行されました");

  // <span>マウント時（コンポーネント出現時）のみ実行される</span>
  useEffect(() => setup, []);
};

1

2

3

4

5

6

7

8

9

10

//【例】

import { useEffect } from 'react';

const sample = () => {

// 関数を宣言

const setup = () => console.log("関数が実行されました");

// <span>マウント時（コンポーネント出現時）のみ実行される</span>

useEffect(() => setup, []);

};

-- ＊依存配列を渡した場合 --

依存配列を設定すると、

エフェクトは最初のレンダー後及び

依存配列が変わった後のレンダー後に実行される。

Reactは古い値を使ってクリーンアップ関数を実行

→その後新しい値を使用し、セットアップ関数を実行する。

//【例】
import { useEffect, useState } from 'react';

const sample = () => {
const [dependencies, setDependencies] =useState()

// 関数を宣言
const setup = () => console.log("関数が実行されました");

//<span>マウント時と、dependenciesの値が前回のレンダーより変わった場合に実行される</span>
 useEffect(() => setup, [dependencies]);
};

1

2

3

4

5

6

7

8

9

10

11

12

//【例】

import { useEffect, useState } from 'react';

const sample = () => {

const [dependencies, setDependencies] =useState()

// 関数を宣言

const setup = () => console.log("関数が実行されました");

//<span>マウント時と、dependenciesの値が前回のレンダーより変わった場合に実行される</span>

useEffect(() => setup, [dependencies]);

};

クリーンアップ関数

useEffect()のセットアップ関数から

返された関数をクリーンアップ関数と呼ぶ。

セットアップを実行する前には、

必ずクリーンアップされている必要がある。

（初期状態である必要がある）

  useEffect(() => {
    //1秒後にコンソールに出力する処理
    setTimeout(() =>{
      console.log("関数が実行されました")
    }, 1000)

    return () => {
      clearTimeout();
    };
  }, []);

1

2

3

4

5

6

7

8

9

10

useEffect(() => {

//1秒後にコンソールに出力する処理

setTimeout(() =>{

console.log("関数が実行されました")

}, 1000)

return () => {

clearTimeout();

};

}, []);

クリーンアップとは、エフェクトを停止させる、

もしくはもとに戻す処理のことを指す。　　　　

ライフサイクル

useEffect()は、

周囲のコンポーネントとは異なるライフサイクルを持つ。

コンポーネントは

マウント、更新、アンマウントを行うことができる。

しかしエフェクトは

同期の開始と同期の停止の2つのことしかできない。

エフェクトが、propsやstateに依存し、

これらが時間とともに変化する場合

このサイクルは繰り返し発生する。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、 fetch APIについて説明します。

fetchとは
axiosとの違い

fetchとは

サーバーからデータやファイルを取得するときに使うもので、

WebAPIの一種。

fetch APIはPromiseを返すので、

処理を分岐させたい場合は、

fetchの後に

.then（成功した際の処理）や

.catch（失敗した際の処理）を使用して、

処理をする必要がある。

fetch(resource, options)
    .then(() => '成功した際に行う処理')
    .catch(() => '失敗した際に行う処理')

1

2

3

fetch(resource, options)

.then(() => '成功した際に行う処理')

.catch(() => '失敗した際に行う処理')

※optionsは省略可能

JSONPlaceholderを使用してAPIを叩く

JSONPlaceholder :　 https://jsonplaceholder.typicode.com/

  (async () => {
    const result = await fetch("https://jsonplaceholder.typicode.com/uers")
      .then((response) => {
        if (!response.ok) {
          console.error("response.ok:", response.ok);
          throw new Error(response.status);
        }
        return response.json();
      })
      .catch((error) => {
        return error;
      });
    await console.log(result);
  })();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

(async () => {

const result = await fetch("https://jsonplaceholder.typicode.com/uers")

.then((response) => {

if (!response.ok) {

console.error("response.ok:", response.ok);

throw new Error(response.status);

}

return response.json();

})

.catch((error) => {

return error;

});

await console.log(result);

})();

thenで結果が返却された場合

catchで結果が返却された場合

axiosとの違い

axiosはHTTPリクエストのやり取りができる

Promiseベースのライブラリ。

シンプルなAPIを提供するためHTTPリクエスト

(GET・POST・PUT・DELETE通信等)の処理が簡単に行える。

fetchはブラウザに組み込まれているため、

追加のインストールが不要だが、

axiosはライブラリのため、インストールする必要がある。

$ npm install axios

1	$ npm install axios

axiosは、

JSONデータの自動変換も行ってくれるため、

レスポンスデータの処理がしやすい。

axiosの場合

axios.get("https://jsonplaceholder.typicode.com/users")
  .then(response => {
    console.log(response.data); // JSON 形式に変換済
  });

1

2

3

4

axios.get("https://jsonplaceholder.typicode.com/users")

.then(response => {

console.log(response.data); // JSON 形式に変換済

});

fetchの場合

  fetch("https://jsonplaceholder.typicode.com/users").then((response) => {
    // json() を使用してJSON 形式に変換
    console.log(response.json());
  });

1

2

3

4

fetch("https://jsonplaceholder.typicode.com/users").then((response) => {

// json() を使用してJSON 形式に変換

console.log(response.json());

});

エラーハンドリング

axiosを使用する場合 .catch()を使用し、

簡単にエラーハンドリングができるが、

fetchではレスポンスのokプロパティをチェックし、

エラーハンドリングをする必要がある。

 (async () => {
    const result = await fetch("https://jsonplaceholder.typicode.com/uers")
      .then((response) => {

        return response.json();
      })
      .catch((error) => {
        return error;
      });
    await console.log(result);
  })();

1

2

3

4

5

6

7

8

9

10

11

(async () => {

const result = await fetch("https://jsonplaceholder.typicode.com/uers")

.then((response) => {

return response.json();

})

.catch((error) => {

return error;

});

await console.log(result);

})();

上記のように、エラーハンドリングをしていない状態だと、

fetchで情報を取得する際にエラーが発生するが、

catchの処理をしてくれない。

MDNより引用

fetch() のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定

（通常はアクセス権の問題など）が間違っていたりすると、

TypeError で拒否されます。

例えば、 404 はネットワークエラーにはなりません。

fetch() が成功したかどうかを正確に判定するには、

プロミスが解決された後で、

Response.ok プロパティが true になっているかを確認してください。

fetch は
　・ネットワーク通信に失敗した際に、.catch() が動く
　・リクエストが失敗したかの確認は、response.okで返却値を確認する
　　レスポンスが成功（200-299 の範囲のステータス）

  (async () => {
    const result = await fetch("https://jsonplaceholder.typicode.com/uers")
      .then((response) => {
        if (!response.ok) {
          console.error("response.ok:", response.ok);
          throw new Error(response.status);
        }
        return response.json();
      })
      .catch((error) => {
        return error;
      });
    await

1

2

3

4

5

6

7

8

9

10

11

12

13

(async () => {

const result = await fetch("https://jsonplaceholder.typicode.com/uers")

.then((response) => {

if (!response.ok) {

console.error("response.ok:", response.ok);

throw new Error(response.status);

}

return response.json();

})

.catch((error) => {

return error;

});

await

Fetch API はネットワークエラーに遭遇したときに reject になるが、

エラーが発生していてもエラー処理がされない為、

上記記述のif文のように、

response.okで、エラーハンドリングをする必要がある。

promiseの中で、throw new Error() することで

その時点で処理を終了し、エラー処理をしてくれるようになる。

ブラウザ互換性

axiosはブラウザとNode.jsの両方で動作するが、

fetchはブラウザのみで動作する

axiosにあって、fetchにない機能

・リクエストのタイムアウト設定

・進行状況のモニタリング

axiosはfetchよりも簡単にHTTPリクエストの処理が行える、

エラーハンドリングも.catchを使用し

比較的簡単に設定できるというメリットがあるが、

fetchよりもメモリ使用量が多く、

大量のリクエストを行う場合には

パフォーマンスの問題が生じる場合がある。

特徴や使い勝手が異なる為、案件の規模や要件に合わせて、

適切に選択する必要がある。

ここまで読み進めていただきありがとうございます。

こんにちは！デジナーレ広報の西田です。

この記事では前編後編の2回にわたり、デジナーレ(東京)で実施されているTipsの発表・面白いサービスの共有について取り上げ、どんなひとがデジナーレで活躍していけるかを考え、発信しています。

さて、前編のTipsに続き、後編では面白いサービスの共有と、デジナーレで活躍していけるひとや、どんなひとと一緒に働いていきたいかを深堀りしていきます。

まだ前編を読んでいない方は、是非前編の記事と合わせてお読みください。

◆面白いサービスを共有するようになったきっかけを教えてください！

UI・UXを扱う仕事なので、各自の発想を活性化させていくためにこの共有をはじめました。具体的な共有のやり方は、以下の考え方を参考にしています。

図）アイディアは「既知」×「既知」から生まれる

新しいアイディアを見つけたい時に、
“多種多様なアイディアを取り入れて自分の発想を活性化させる”という方法が有効だそうで、自分が面白いと思ったものや、他のメンバーが知らないサービスがあれば共有していこう！という活動です。

ありがとうございます。今までは、最近あった面白いことや、いいなと思ったサービスを発表していましたが、この活動がはじまったきっかけを知れたことで、どんなところに面白さを感じたのかを、より敏感に考えることができそうです。

◆アイディアの交換にはどんなメリットがあると感じていますか？

1人ではなく複数名でアンテナを張っていることで、情報が早く多く集まることが良い点だと考えています。また、いろんな価値観で物事を知れることも複数人で情報交換をするメリットだと感じています。

確かに、自分では追えない情報をインプットできる点はすごく魅力的だと感じました。
例えば、お子様がいるメンバーの教育やレジャーに関する情報は、独身の私はまだ体験していないことなので、こんなものがあるんだ！と感じることが多い気がします。

図）実際に面白いサービスを共有している様子

Tips発表の時間とはまた雰囲気が変わり、ざっくばらんに最近面白かったことや見つけたサービスを共有しています。

◆内容の縛りや発表形式などはありますか？

沢山のアイディアを交換して発想を刺激することが目的なので、tipsのようなフォーマットは設けていません。
また、UI・UXに繋がる内容であればジャンルやサービスの形式はあまり気にしなくてよいと考えています。

ここで言うサービスの形式とは、どのようなものですか？

必ずしもオンラインのサービスだけを取り上げるのではなく、実際に触れることができる「商品」や、映画を見たなどの「体験」で話しても良いということです。

例えば、

・スマホゲームのチュートリアルの見せ方が上手
・旅行先で満足度の高い接客を体験した
・普段利用しているECサイトの仕組みに面白さを感じた

など、リアルでの体験や、サービス自体の面白さの共有でもOKということです

リアルの商品や体験からも沢山のUI・UXに関するヒントがありそうですね。
ありがとうございます。
定例の活動内容を通して、デジナーレが持つ考え方や価値観などを伺ってきましたが、ここからは採用にも絡むお話も伺っていきます。

◆Tipsや面白いサービスなどユニークな方法で情報交換をしていますが、デジナーレはどんな人たちの集まりですか？

デジナーレは新規事業に関わるため、情報収集に敏感なひとや、さらにその質（ものごとに対する感度）を高めていきたい人が集まっていると感じます。
また、案件や定例の活動を通して感度を高めていきたい・考えの幅を広げていきたいひとが楽しめる会社にしていきたいとも考えています。

私もデジナーレに入って感じたのはすごく近いところで、おおざっぱな表現になりますが、今携わっている案件や、これから提供していくサービスのレベルをもっと良くしたい！と考えているチームだと感じました。一つのチームとして、いろんな方向にメンバーのアンテナが向いている体制がその考えを後押ししているようにも感じます。

◆どんな人たちと働いていきたいですか？

「人と違う観点で物事を見れる人」と働いていきたいです。
というのも、デジナーレが所属しているプライマルグループの社是で「成長を楽しむ」というものがあります。
成長を楽しむことをベースに、人と違う価値観で物事を見れる人が加わったら、個人も会社もさらにパワーアップできると考えています。
「人と違う価値観で物事を見れる人」を求めたい理由としては、いろんな観点を持つ集団で面白いものを作っていきたいと考えているからです。違う考え方を持っているからこそ、ぶつかり合うこともあると思いますが、個人としても会社としても成長していくためにはそこが重要だと考えています。むしろぶつかり合える関係がいいなとも思っています。

ありがとうございます！
ぜひいろんな考え方を持つメンバーとディスカッションしていきたいです。

最後までご覧いただきありがとうございました。
デジナーレは、自分の強みを伸ばしたい！多様な価値観を持つチームでより良いUI・UXを作っていきたい！と考えているメンバーが多く在籍する会社です。

一部ではありますが、金曜の定例ではこのように時間を使って、日々提供できる価値の質を高めています。
デジナーレに興味を持っていただけましたら、こちらからお問合せください。
一緒にディスカッションできる日を楽しみに待っています！！

こんにちは！デジナーレで広報を担当している西田です。

今回は、エンジニアメンバーがサービスプロデューサー向けに勉強会を実施したので、その活動をご紹介します。
新しいメンバーの加入にあたりこうした企画が増えてきたため、就職活動中の方に向け、デジナーレのメンバー育成について、お伝えできればと思います。

◆勉強会を開催した目的

近年クラウドサービスでのシステムやサービスの構築がトレンドとなっています。それに伴い、直接クライアントとやり取りをするディレクターに向け、構成イメージや各サービスの概要理解を深めるため、企画しました。デジナーレではクラウドサービスの中でもAWSをメインに使用しているため、今回はAWSについての勉強会を開催しました。

企画時に周知いただいた概要は、AWSの構成イメージをサービスプロデューサーが分かるレベルで説明します！というものだったのですが、サービスプロデューサーをはじめ、デザイナーや同じ職種のエンジニアからも沢山の参加希望があり、全社規模での開催となりました。

◆アジェンダと勉強会の様子

●サーバーレスについて
●フロント・サーバー分離型について
●構成図
・WordPress （フロント・サーバー一体型＆非サーバーレス）
・Webシステム（フロント・サーバー分離型＆サーバーレス）
●各サービス
・WAF
・ALB
・EC2
・Aurora
・CloudFront
・S3
・API Gateway
・Lambda
・RDS Proxy
・Route53・ACM

参加者からの質問はもちろん、エンジニアメンバーからの補足説明などもあり、ざっくばらんな雰囲気での勉強会となりました。

◆私が学んだこと

今回は、AWSでインフラ構築する際の標準的な構成と各サービスの概要レベルの説明をWebシステム構築・WordPress構築などのケース別で紹介いただきました。

＜AWSの構成を理解するための前提知識＞
・「サーバーレス」とは、サーバーを意識せずにシステムを構築運用する考え方で、これによりサーバーを管理する必要がなくなる。
・サーバーとフロントを分離させることにより、通信量の削減やフロントとサーバーで開発体制を分けられる、再利用できるなどのメリットがある。

＜構成の特徴＞
フロント・サーバー分離型の構成では以下のような特徴がある。
【フロント部分】
Cloud Front（キャッシュサーバー）を置くことにより、レスポンスの速度をあげる
【サーバー部分】
Auroraに到達する前に、RDSプロキシをはさむことでコネクション数をコントロールする

◆参加者の感想

＜サービスプロデューサー＞

・SEがいないクライアントに説明する際のイメージができた。
・現場でAWSを使用しているメンバーからの質問にも学びがあり、良い勉強会だと感じた。

＜Webディレクター＞

・一体型・分離型それぞれの構成を図解で見れたことで、イメージしてたものがより繊細になった。

＜デザイナー＞

・サーバーレスかつフロント・サーバー分離型は設計・構築時だけでなく、運用時にも大きなメリットがあることがより深く理解できた。
・システム面の問題を把握しながら、デザインを考えていきたいと感じた。

＜システムエンジニア＞

・顧客に説明する際、本勉強会のように前提知識の共有があると理解しやすいと感じたので活かしたい。
・システムの全体図を見ることで構造をより深く理解することができた。

◆おわりに

最後までお読みいただきありがとうございました。
今回お伝えした勉強会のように、デジナーレにはメンバーの知識やノウハウを共有する場があります。今後も、既存メンバーに加え新しいメンバーの価値観も交えて、共有の幅を広げていきたいと考えています。

ノウハウの共有（Tips共有）については、こちらからお読みいただけます。

投稿が見つかりません。

採用ページだけでは、会社の教育体制などをイメージしにくいかと思いますが、この記事で少しでも雰囲気が伝われば幸いです。
入社後もこういった勉強会や動画学習などのコンテンツを活用しスキルアップに励んでいます。デジナーレに興味を持っていただけたら、ぜひ採用にご応募ください！お待ちしております。

デジナーレでは、一緒に働く仲間を募集しています！
採用情報はこちら

平素は格別のお引き立てを賜り、厚くお礼申し上げます。

２０２３年１０月、株式会社デジナーレは、企業ロゴをリニューアルしたことをお知らせいたします。

−コンセプト−

新しいロゴマークのコンセプトは、事業・サービスにおけるプロジェクトの始まり（開発）から運用（CS）まで、デジナーレがリードし、支え、次のステップへ導く。プロジェクトの進行やその際に使用するガントチャートの帯とデジナーレの「D」をモチーフに表現しています。

■ シンボルマークで表現しているデジナーレの姿

事業 / サービスの成長と進化
顧客と併走し支える姿
計画から実行までのプロセスを回す様

■ ブランドカラー

黒:デジナーレの計画 ( 設計 )/ 軸 ( 芯 )、双方の声を汲み取り支える
青:デジナーレが持つバトン、現在のアクション ( 遂行する )
グレー:クライアントが持つバトン、不確定要素や潜在的要望

今後とも皆様より変わらぬご支援ご指導を賜りますよう宜しくお願い申し上げます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、【React】Propsについて説明します。

propsとは
propsの渡し方

propsとは

props（“properties” の略）とは

コンポーネントに受け渡す引数のようなもので、

コンポーネントは、受け取ったpropsに応じて

表示するスタイルや内容を変化させることが可能。

Propsの渡し方

<App.jsx>

const App　= () => {
  const red = {
    color: 'red',
  };
  const pink = {
    color: 'pink',
  };
  const blue = {
    color: 'blue',
  };

  return (
    <>
      <p style={red}>Hello!!</p>
      <p style={pink}>こんにちは!!</p>
      <p style={blue}>你好!!</p>
    </>
  );
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

const App　= () => {

const red = {

color: 'red',

};

const pink = {

color: 'pink',

};

const blue = {

color: 'blue',

};

return (

<>

<p style={red}>Hello!!</p>

<p style={pink}>こんにちは!!</p>

</>

);

};

上記コードをcomponentを分割して、

propsの受け渡しによって

変化することができるように作成する。

childen

タグで囲んだ要素は

childrenとして受け渡すことが可能。

<Sample color="red">Hello!! ←この部分がchildrenとして受け渡される</Sample>

1	<Sample color="red">Hello!! ←この部分がchildrenとして受け渡される</Sample>

1.　「props.XX」と書く渡し方

各propsに対してprops.XXと記述する必要があり、

数が多いと煩雑になる。

<App.jsx>

const App = () => {
  return (
    <>
      <Component color="red">Hello!!</Sample>
      <Component color="pink">こんにちは!!</Sample>
      <Component color="blue">你好!!</Sample>
    </>
  );
};

1

2

3

4

5

6

7

8

9

const App = () => {

return (

<>

<Component color="red">Hello!!</Sample>

<Component color="pink">こんにちは!!</Sample>

</>

);

};

<Component.jsx>

const Component = (props) => {
  const style ={
    color: props.color,
  }
  return (
    <>
      <p style={style}>{props.children}</p>
    </>
  )
}
export default Component;

1

2

3

4

5

6

7

8

9

10

11

const Component = (props) => {

const style ={

color: props.color,

}

return (

<>

<p style={style}>{props.children}</p>

</>

)

}

export default Component;

2. propsを分割代入する渡し方

propsはオブジェクトなので分割代入ができる。

<Component.jsx>

const Component = (props) => {
const { color, children } = props
   const style ={
    color: color,
  }
  return (
    <>
      <p style={style}>{children}</p>
    </>
  )
}
export default Component;

1

2

3

4

5

6

7

8

9

10

11

12

const Component = (props) => {

const { color, children } = props

const style ={

color: color,

}

return (

<>

<p style={style}>{children}</p>

</>

)

}

export default Component;

3. 引数の段階で分割代入

上記例ではpropsを引数の段階で、

分割代入することも可能。

（引数の段階で、分割代入する方法が

シンプルで一番スッキリする）

<Component.jsx>

const Sample = ({color, children}) => {

  const style ={
    color: color,
  }
  return (
    <>
      <p style={style}>{children}</p>
    </>
  )
}
export default Sample;

1

2

3

4

5

6

7

8

9

10

11

12

const Sample = ({color, children}) => {

const style ={

color: color,

}

return (

<>

<p style={style}>{children}</p>

</>

)

}

export default Sample;

下記部分はオブジェクトの省略記法が使用できる。

  const style ={
    // color: color,
    // key とvalueが同じなので、省略記法が使える。
    color,
  }

1

2

3

4

5

const style ={

// color: color,

// key とvalueが同じなので、省略記法が使える。

color,

}

このように、propsの受け渡し方や省略記法にも

様々な書き方があるため、頭に入れておくことが必要。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、非同期処理について説明します。

スレッド
同期処理と非同期処理
イベントループについて

スレッド

スレッドとは、プログラムの開始から

処理までの一連の処理の流れのこと。

JavaScriptはコードが1行ずつ実行されて行く。

処理の開始から終了までを、

１つの糸のようにあらわすことができることを

「１つのスレッドでコードが実行されている」と表現される。

前の処理が完了してから次の処理が実行されること

シングルスレッドと呼ぶ。

複数の処理を別々のスレッドに分けて

同時に実行することを

マルチスレッドと呼ぶ。

（並列処理と呼ばれる）

同期処理と非同期処理

同期処理とは、ひとつのスレッドで、

前の処理の完了を待ってから次の処理を実行すること。

非同期処理とは、スレッドから一時的に切り離された処理のこと。

（setTimeoutに渡すコールバック関数、promiseなど）

イベントループについて

実行コンテキスト

JavaScriptエンジンによって準備されるコードの実行環境のこと。

コードが実行される際に必ず実行コンテキストが生成される。

コールスタック（実行コンテキストスタック）

実行コンテキストが積み重なってできたものを

「コールスタック」と呼ぶ。

このような処理の仕組みをLIFOと呼ぶ。

（ラストインファーストアウト、最後に入れたものを最初に取り出す。）

イベントループ

コールスタックにコンテキストが積まれているのか定期的に監視し、

コンテキストが積まれていない場合、キューに通知する。

タスクキュー

実行待ちのタスクが格納されるキューのこと

（キューとはデータの出し入れをリスト形式で管理するデータ構造のことを指す）

非同期処理の実行順を管理し、

キューに入った順番で処理を行う。

このような処理の仕組みをFIFOと呼ぶ。

（ファーストインファーストアウト、最初に入れたものを最初に取り出す。）

イベントループから通知を受けると、

コールスタックにタスクを渡す。

const btn = document.querySelector("button");
btn.addEventListener("click", function task2() {
  console.log("task2 done");
});

function fn() {
  setTimeout(function task1() {
    console.log("task1 done");
  }, 4000);

  const startTime = new Date();
  while (new Date() - startTime < 5000);
  console.log("fn a done");
}

fn();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const btn = document.querySelector("button");

btn.addEventListener("click", function task2() {

console.log("task2 done");

});

function fn() {

setTimeout(function task1() {

console.log("task1 done");

}, 4000);

const startTime = new Date();

while (new Date() - startTime < 5000);

console.log("fn a done");

}

fn();

上記の動画の状態を図にして説明↓

・ボタンクリックイベントA

（UIイベントスクリプトが実行された際に、連打した状態を想定）

・関数B　

（関数内にsetTimeout()C　と

5秒間メインスレッドを占領する処理D が存在する）

・setTimeout()C

（4秒間待機する処理を持つ）

・5秒間メインスレッドを占領する処理D　

（1秒間に1回ループする処理を5回繰り返す、while文を記述）

スクリプトが実行された際に、

グローバルコンテキストが生成され、

コールスタックに処理が詰まれる。

コールスタック内に積まれた処理が順番に実行される。

関数Bが実行され、メインスレッドを5秒間占領する処理が

実行された後に、コールスタックから削除される。

ボタンクリックイベントAと　setTimeout() cは非同期処理のため、

メインスレッドから処理が切り離される。

タスクキューに非同期処理が積まれ、

実行待ちの状態で待機

(ボタンクリックイベントが、

setTimeout()が実行される前に、積まれた場合を想定)

イベントループは、コールスタックに

コンテキストが積まれているのか定期的に監視し、

コールスタックが空になった際にタスクキューに通知する。

タスクキューはイベントループから通知を受けると、

コールスタックにキューに入った順番でタスクを渡す。

コールスタックで処理が実行される。

このような流れで処理が行われる。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレの水野暁乃です。

2023年9月26日～28日にLas Vegasで開催された、MWC(Mobile World Congress)という世界最大級のモバイル業界見本市に行ってきました。

今回、弊社のお客さまのプロモーション施策の一つとして、
注目度の高い展示会で講演を行い、メディアや来場者に認知してもらおうという取り組みの一環で、
企画・ディレクションを担当し、現地同行しました。

その様子を少し、お伝えします。

開催初日、ラスベガスでは晴天がひろがり、白くて大きなコンベディションセンターはとても映えていて、期待感がふくらみます！

MWCは、年に数回開催されていて、メインはMWCバルセロナとなります。
ラスベガスはバルセロナよりも規模は小さくなるのですが、それでも注目度の高いイベントとなります。

会場に入って一番目立ったのはドイツに本社を置くTモバイル。ピンクとブラックのカラーのブースが目を引きます。バーカウンターがあったりするのも海外の展示会ならではですね。

ブース内の対談ステージ。日本でもこのようなブースはありますが、海外だと大きな企業は必ずこのようなブースステージが設けられている傾向があります。

わたしは行くまで、最新のスマートフォン端末などがメイン展示なのかと想像していましたが実際は、”基地局”や”ケーブル”などのBtoB向け

の商材の方が多く並んでいましたまた、商材の展示ではなく、ミーティングルームをメインにしたブースも。これは、MWCLas Vegasの特徴かもしれませんが、会場の後方はレンタル会議室が並んでいました。海外では見本市を本格的な商談の場としても活用するようです。

いよいよ講演が始まり、司会者の方が上がってきました。

講演のスライドは出せないのですが…
講演では、これまで伝えきれていなった、サービスの提供価値を明確に伝えることができました。
工夫したポイントとして、メディアに使用されることを想定し、数字をメインに、シンプルな絵のプレゼンテーションにすることでした。

4月から始まった、提供価値の訴求が必要だという、クライアント社内への呼びかけから始まり、
メッセージラインの設定など、クライアントと一緒になって進めることができた本企画は貴重な経験でした。

提供価値を数字で表現できたのは、クライアント社内の専門部署に多大な稼働をかけて導き出していただいた数字でした。
これらを世界に効果的に発信するという重大なミッションに携われたことに大変感謝しています。

たとえば、ブースを出すだけではこの提供価値は来場者にしか伝わりません。
取材をうけること、講演をすることのほうが、はるかに効率的に多くの人に伝わると考えました。

このように、”どの手法を使うのが真の目的にあっていて、費用対効果がよいか”ということを常に考えながら、
サービスをプロモーションしていくことを心掛けていきたいと、改めて感じました。

▼MWCLas Vegasハイライト　(GSMA作成動画)

おまけ
日中は会場にこもりきりで観光などはできないのですが、、
Las Vegasは夜の街！
ディナーに出かけるときに感じた、Las Vegasの街並みはとても素敵でした

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、viteプロジェクトをPWA化する方法について説明します。

PWAとは
viteプロジェクトを作成
PWA化の手順

PWAとは

PWAとは、「Progressive Web Apps」の略称で、

webサイトをネイティブアプリのように扱える技術。

アプリストアを経由せずに作成できる。

そして、ダウンロードの必要性がなくオフラインでも使用できる。

ネイティブアプリとは違い、OSによる制限を受けないことも利点。

ネイティブアプリ同様、
アイコンをホーム画面に追加することや、
ユーザーにプッシュ通知を送ることも可能な技術。

viteプロジェクトを作成

アプリを作成する。

//npmの場合

$ npm create vite@latest

//yarnの場合

$ yarn create  vite

1

2

3

4

5

6

7

//npmの場合

$ npm create vite@latest

//yarnの場合

$ yarn create vite

その後、project name:「作成するアプリの名前」

select a framework : 「Reactを選択」

Select a variant: 「JavaScript」で作成した。

作成後に、下記コマンド実行。

cd my-app

//npmの場合　yarnの場合
npm install　　yarn install

//npmの場合   yarnの場合
npm run dev　　yarn dev

1

2

3

4

5

6

7

cd my-app

//npmの場合　yarnの場合

npm install　　yarn install

//npmの場合 yarnの場合

npm run dev　　yarn dev

PWA化の手順

１．プラグインをインストール

//npmの場合
npm install -D vite-plugin-pwa

//yarnの場合
yarn add -D vite-plugin-pwa

1

2

3

4

5

//npmの場合

npm install -D vite-plugin-pwa

//yarnの場合

yarn add -D vite-plugin-pwa

２．vita.config.js

下記記述はPWA化する際に最低限必要なものなので記述。

マニュフェスト部分の内容についての詳細は下記に記述。

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true
      }
      manifest: {
        name: "My App",
        short_name: "My App",
        description: "My App",

        icons: [
          {
            src: "app_icon/icon-192.png",
            type: "image/png",
            sizes: "192x192"
          },
          {
            src: "app_icon/icon-512.png",
            sizes: "512x512",
            type: "image/png"
          },
          {
            src: "app_icon/icon-512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any maskable"
          }
        ],
        start_url: "index.html",
        display: "standalone",
        background_color: "#ffffff",
        theme_color: "#000000",
        lang: "ja"
      }
    })
  ],
})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

import { defineConfig } from 'vite'

import { VitePWA } from 'vite-plugin-pwa'

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [react(),

VitePWA({

registerType: 'autoUpdate',

devOptions: {

enabled: true

}

manifest: {

name: "My App",

short_name: "My App",

description: "My App",

icons: [

{

src: "app_icon/icon-192.png",

type: "image/png",

sizes: "192x192"

},

{

src: "app_icon/icon-512.png",

sizes: "512x512",

type: "image/png"

},

{

src: "app_icon/icon-512.png",

sizes: "512x512",

type: "image/png",

purpose: "any maskable"

}

],

start_url: "index.html",

display: "standalone",

background_color: "#ffffff",

theme_color: "#000000",

lang: "ja"

}

})

],

})

-- devOptions --

devOptions の enabled を true にすると、

開発環境で Service Worker の動きを確認できるようになる。

アイコンを正しく設定して一度ビルドしてから

preview コマンドを実行 (yarn preview など) すると、

開発サーバが起動してブラウザが PWA と認識する。

-- manifest --

＊short_name / name

アプリケーションの名前を設定する。

short_nameはホーム画面、ランチャー等

アプリ名が表示されるスペースが狭い場合に

表示される。

ランチャーとは、インストールされている

アプリケーションの一覧を表示している部分にあたる。

＊shart_url

ホーム画面に追加したアイコンを、

タップしてアプリケーションを起動した際に、

最初に表示する画面を指定。

何も設定していない場合には、

ユーザーが「ホーム画面に追加」した際に

表示していた画面が表示される。

＊background_color

スプラッシュ画面の背景色を指定

ソフトウェアを起動した際に表示されること

のある画面（画像）のこと。

＊スプラッシュ画面とは？

プログラムの立ち上げが実行中である

（完了していない）段階で表示されるもの。

基本的には立ち上げが完了した時点で

メイン画面に切り替わる。

＊theme_color

ツールバーとタスクスイッチャーの色を設定。

＊display

ホーム画面から起動した際のUIを指定。
fullscreen, standalone, minimal-ui, browserの

いずれかを設定する。

・fullscreen : 利用可能な画面の領域をすべて使用。

クロームは表示されなくなる。

※クローム (chrome) はブラウザーの中で、

ウェブページ自体を除いた見える部分すべて

(ツールバー、メニューバー、タブなど)

・minimal-ui : アプリケーションの外見は、

単独のアプリケーションのようになるが、

ナビゲーションを制御するため最小限の UI 要素が表示される。

要素はブラウザーによって異なる。

・standalone：ネイティブアプリケーションのような表示

・browser：ブラウザで表示した際と同じUI

＊orientation

表示する画面を指定し、固定することができる。

landscape（横向き）かportrait（縦向き）を指定。

＊icons

アイコンを設定する。

src type sizesを設定する必要がある。

アイコンはホーム画面、アプリランチャー、

タスクスイッチャー、スプラッシュ画面などで使用される。

マスカブルアイコン : 詳細な制御を可能にし、

アイコンが図形全体を埋めて、すべてのデバイスで見栄えが良くなる。

これがきちんと設定されていないと、

「マスク可能なアイコン」でないことの警告がでる。

※マスク可能なアイコン：PWAアイコンがすべての端末で

見栄えがすることを保証するもの

（このため、デバイスによってはPWAアイコンの背景が白くなってしまう）

３．robots.txt

robots.txtの作成も必須なので、

public配下に設置する。

User-agent: *
Allow: /

1 2	User-agent: * Allow: /

４．index.html

ファビコン、アイコン画像、ディスクリプション、アプリ名など記述する。

マスクブルアイコン用の画像も記述する。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>


  <!-- 下記追加部分 -->
      <title>Test App</title>
      <meta name="description" content="JSONを読むためのビュアーです" />
      <link rel="icon" href="public/app_icon/favicon.ico" />
      <link
        rel="apple-touch-icon"
        href="public/app_icon/apple-touch-icon.png"
        sizes="180x180"
      />
      <link
        rel="mask-icon"
        href="public/app_icon/mask-icon.svg"
        color="#FFFFFF"
      />
      <meta name="theme-color" content="#916028" />

  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!doctype html>

<head>

<title>Vite + React</title>

<link

rel="apple-touch-icon"

href="public/app_icon/apple-touch-icon.png"

sizes="180x180"

/>

<link

rel="mask-icon"

href="public/app_icon/mask-icon.svg"

color="#FFFFFF"

/>

</head>

<body>

</body>

</html>

作成が終わったら、

一度ビルドして、previewコマンドを実行する。

npm run build

npm  preview

1

2

3

npm run build

npm preview

開発環境では、インストール可能で

previewコマンドでのインストールができない場合があるが、

その場合、コンソールを開くとエラーが発生している。

マニュフェスト部分がきちんと記述できていないと、

インストールができないようなので、

previewコマンドでインストールできない際は、

マニュフェスト部分の修正を試みる。

インストールすることで、使用可能となる。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、ReactのuseStateについて説明します。

React Hooksとは
propsとは
useStateとは

React Hooksとは

React Hooksが登場するまでは、

クラスコンポーネントで状態管理をする必要があった。

React Hooksは、React16.8で追加された新機能で、
クラスを使うことなくReactのstateを管理できたり、
ライフサイクルに応じた処理を実装したりできる機能。

React Hooksを活用すると、簡潔で読みやすいコードを記述できる。

propsとは

propsとは、関数コンポーネントに渡す引数のようなもの。

コンポーネントは受け取ったpropsに応じて、

表示するスタイルや内容を変化させることが可能。

上記例では、受け取ったpropsによって

表示する色を変化させている。

propsの受け渡しがない場合は、

初期値のblackとなっている。

useStateとは

useStateは、関数コンポーネントでStateを管理するためのHooksで、

最も利用される基本のHooks。

stateとはコンポーネントの「状態」を表す値で、

propsと異なり、後から変更することができる。

関数コンポーネントで、useStateを利用するためには、

importする必要がある。

useState関数の返却値は、配列の形となっている。

配列の1つ目がstate変数で、

配列の2つ目がset関数

(stateを更新するための関数)

となっており、任意の名前を付けることができる。

useStateは関数なので使用する際は

()をつけて関数を実行する。

名称は自由につけることができるが、

下記例のように、countであればわかりやすいように、

設定したstate変数の前にsetをつけて、setCountとする。

＊「set + state変数」とし、単語の区切りは大文字にする。

（ローワーキャメルケース記法）

stateの値を変更させるときは、set関数を使用して状態を更新する。

上記例は、ボタン押下時に、set関数でstateの値を＋１している。

このように記述してもカウントアップするが、

この処理を応用し、＋２をしようとするが、

思った挙動にならない。

＋２にならない理由は、

set関数で更新した値は即時に実行されるのではなく、

再レンダリングされる際に

変更差分をまとめて更新するため、

実際にはこのような状態となっている。

そのためset関数内で関数を使い

更新するようにする。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、Reactを使うにあたって

知っておきたい基礎知識について説明します。

Reactとは
仮想DOM
パッケージマネージャ
モジュールバンドラー
トランスパイラ
SPA

Reactとは

Reactとは、UI（ユーザーインターフェース）を構築するための

Facebook社が開発したJavaScriptライブラリーの一つ。

従来のJavaScripでは手続き的でわかりやすい反面

レンダリングコストに問題が生じやすかった。

また記述量が多いため、コードが肥大化してくると、

どの部分に記述したのか、どこを修正すれば良いのか

すぐにはわかりずらくなってしまうという問題があった。

こういった問題を解決する為に作られたのが仮想DOM。

仮想DOM

仮想DOMとはJavaScriptの

オブジェクトで作られた仮想的なDOM。

JavaScrip内部に仮想的なDOMを作成し、

変更箇所のみ実際のDOMに反映することで

DOMへの操作を最小限に抑えることが可能になった。

※変更差分のみ実際のDOMに反映

パッケージマネージャ

これまでのJavaScripでは

1つのJsファイルにすべての処理を記述していた。

そのため、コードが複雑になるにつれて、

コードの再利用化が難しく、肥大化してしまい、

エラーや修正が発生した場合に、

該当箇所を見つけ出すのが難しい、といった難点があった。

それを解決するために、JavaScripファイルを

大きな処理（コンポーネント）ごとに分割して管理し、

その分割したファイルを読みこんで使用するように改善された。

これによって、コードの再利用性、共通化ができるようになったが、

ファイルの読み込み順をきちんと意識していないと、

・エラーが発生してしまうといった問題や、

・使用している関数や変数が、どのファイルから読み込まれているのかわかりにくい、

といった問題があった。

こういった問題を解決するために作られたのが、

npm や yarn といったパッケージマネージャ－。

npm や yarnの内部ではnode.js

（サーバーサイドで実行されるJavaScrip）が動いている。

パッケージマネージャを利用することによって、

・依存関係を意識しなくても自動で解決してくれる

・import先が明示的にわかる

・チーム内でのパッケージの共有やバージョン統一が容易

・Webで公開されているパッケージをコマンド1つで利用可能

といったメリットがある。

モジュールバンドラー

モジュールバンドラーとは、

複数のJavaScriptファイル、CSS、画像

（モジュール）を1つにまとめてくれるツール。

開発の段階ではファイルを分けて行い、

本番用にビルドするときに、１つのファイルにまとめてくれるものを

モジュールバンドラーと呼ぶ。

JavaScripには、読み込み順による依存関係の問題がある。

開発者自身がファイルをまとめるのは、とても手がかかる作業であるが、

モジュールバンドラーを使用することで、

ビルドを実行する際に、

ファイルをまとめて、バンドル後のファイルを生成してくれる。

そのファイルを本番環境に反映することで、

プログラムを実行できる。

2023年現在の主流のモジュールバンドラーはwebpack。

vue.jsの開発者が2020年にリリースした、

viteも近年人気が上昇している。

viteは、高速ビルドで、HMR（Hot Module Replacement）

が標準搭載されているため。

※HMRとは

ページ全体を更新しなくても、実行時にブラウザ内のモジュールを

自動的に更新することで、開発者体験を向上させる仕組みのこと

トランスパイラ

トランスパイラとは、新しいJavaScripの記法では、

動作しないブラウザでも実行できるように、

変換してくれるもの。（2023年主流のトランスパイラはBabel）

SPA

SPA（Single Page Application）は、

基本的にHTMLファイルは1つのみで、

JavaScripで画面を書き換えることで

画面遷移等の動きを表現すること。

SPAで開発することで、

ページ遷移時の画面のちらつきがなくなり、

表示速度もあがることでユーザー体験（UX）も向上する。

またコンポーネントの分割が容易になることで

開発効率もアップするというメリットがある。

ここまで読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

Reactにsassをインストールしようとした際に、

エラーが発生してしまいました。

同様のエラーについてのブログが見当たらなかったため、

今回解消した方法を備忘録として記述します。

環境
Sass
今回発生したエラー
Node-sass
Dart-sass
インストール

環境

Reactのバージョン確認方法

// コマンド
npm list --depth=0

1 2	// コマンド npm list --depth=0

結果↓
my-app C:\Users\my-app
├── react-dom@18.2.0
├── react-scripts@5.0.1
└── react@18.2.0

1

2

3

4

5

結果↓

my-app C:\Users\my-app

├── react-dom@18.2.0

├── react-scripts@5.0.1

└── react@18.2.0

Sass

SassはCSSの拡張言語で、

効率的で簡単なスタイルシートの記述が可能。

変数や条件分岐も使用でき、

ネストして記述することもできる為、

少ないコードで記述が可能。

SCSS構文(SCSS)と

インデント構文(SASS)の

2つが存在するが

基本的にSCSS構文(SCSS)で記述する

記述方法が使われることが多い。

今回発生したエラー内容

Reactでsassを使用するため、

<!-- npmの場合 -->
$ npm install node-sass

1 2	<!-- npmの場合 --> $ npm install node-sass

<!-- yarnの場合 -->
$ yarn add node-sass

1 2	<!-- yarnの場合 --> $ yarn add node-sass

上記コマンドを使用したところ、

エラーが発生。

～省略～

npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
npm ERR! gyp ERR! find Python   npm config set python "C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! cwd C:\Users\my-app\node_modules\node-sass 　　←『作成したアプリ名』
npm ERR! gyp ERR! node -v v18.17.0
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

～省略～

npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! find Python You need to install the latest version of Python.

npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,

npm ERR! gyp ERR! find Python you can try one of the following options:

npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"

npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm)

npm ERR! gyp ERR! find Python - Set the environment variable PYTHON

npm ERR! gyp ERR! find Python - Set the npm configuration variable python:

npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe"

npm ERR! gyp ERR! find Python For more information consult the documentation at:

npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation

npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! cwd C:\Users\my-app\node_modules\node-sass 　　←『作成したアプリ名』

npm ERR! gyp ERR! node -v v18.17.0

npm ERR! gyp ERR! node-gyp -v v8.4.1

npm ERR! gyp ERR! not ok

npm ERR! Build failed with error code: 1

調べてみたところ、

node-sassをサポートしている

node.jsのバージョンが異なること

によるエラーということが判明。

今回のエラーに関する検索結果が少なく、

参考にしたサイト通りに環境を整えようとするが、

意図せずnodeをダウングレードしそうになり、

node-sassについて改めて調べ直してみる。

Node-sass

Node-sassは、

Node.jsを使ってSassをコンパイル

するためのツール。

Node-sassは、

C/C++で書かれたLibSassを使用している。

しかし2020年10月～非推奨となっているため、

これからはDart-sassを使用する方が良い。

Dart-sass

Dart-sassはDart言語で実装されている。

Node-sassは開発が停止しているため、

新規プロジェクトでは

Dart-sassを使用することが推奨

されている。

参考サイト　https://www.npmjs.com/package/node-sass

このように記載されていたため、

Node-sassでなくDart-sassをインストールする。

インストール

<!-- npmの場合 -->
$ npm install sass

1 2	<!-- npmの場合 --> $ npm install sass

<!-- yarnの場合 -->
$ yarn add sass

1 2	<!-- yarnの場合 --> $ yarn add sass

上記コマンドで、インストール完了。

検索した際に、

node-sassを使用を推奨していたり、

nodeのバージョンを変更するものなどあった為、

備忘録として記述しました。

ここまで読み進めていただきありがとうございます。

【React】useEffect()について

useEffect()

クリーンアップ関数

ライフサイクル

fetchとは

JSONPlaceholderを使用してAPIを叩く

thenで結果が返却された場合

catchで結果が返却された場合

axiosとの違い

axiosの場合

fetchの場合

エラーハンドリング

ブラウザ互換性

◆面白いサービスを共有するようになったきっかけを教えてください！

◆アイディアの交換にはどんなメリットがあると感じていますか？

◆内容の縛りや発表形式などはありますか？

◆Tipsや面白いサービスなどユニークな方法で情報交換をしていますが、デジナーレはどんな人たちの集まりですか？

◆どんな人たちと働いていきたいですか？

◆勉強会を開催した目的

◆アジェンダと勉強会の様子

◆私が学んだこと

◆参加者の感想

◆おわりに

投稿が見つかりません。

−コンセプト−

propsとは

Propsの渡し方

childen

1. 「props.XX」と書く渡し方

2. propsを分割代入する渡し方

3. 引数の段階で分割代入

スレッド

同期処理と非同期処理

イベントループについて

実行コンテキスト

コールスタック（実行コンテキストスタック）

イベントループ

タスクキュー

PWAとは

viteプロジェクトを作成

PWA化の手順

１．プラグインをインストール

２．vita.config.js

-- devOptions --

-- manifest --

＊short_name / name

＊shart_url

＊background_color

＊theme_color

＊display

＊orientation

＊icons

３．robots.txt

４．index.html

React Hooksとは

propsとは

useStateとは

Reactとは

仮想DOM

パッケージマネージャ

モジュールバンドラー

トランスパイラ

SPA

環境

Sass

今回発生したエラー内容

Node-sass

Dart-sass

参考サイト https://www.npmjs.com/package/node-sass

インストール

お問い合わせCONTACT

Contact

Recruit

1.　「props.XX」と書く渡し方

参考サイト　https://www.npmjs.com/package/node-sass