常連

### 実現したいこと
掲題の通り、JQueryのappendで書き加えたHTMLが選択されたらClassを書き加えたいです。
下記の該当ソースコードようにしてHTMLタグを追加しましたが、   
> $('select[name="number2"]').on('change',function(){});
のような書き方では動作しないところまでは分かりました。

### 該当のソースコード
```Javascript(JQuery)
$('#div_number2').append('建物名<div class=""><select name="number2" class="v_required"><option value="">選択してください</option><option value="マンション1">マンション1</option><option value="マンション2">マンション2</option><option value="マンション3">マンション3</option></select></div>');
```

### 試したこと
第2引数を指定すればできるような記事を見て下記のようにしてみましたが、よく理解しないまま書いているせいか動作しません。
ヒントを頂ければ幸いです。
> $('select[name="number2"]').on('change','select[name="number2"]',function(){


JQueryのappendで書き加えたHTMLが選択されたらClassを書き加えたい

現在Jamstackでサイト構築をしてるものです。その際にTypeScriptを使用しているのですが、
そこで記事データのようなコンテンツの型付をする場合、下記のように配列のなかにオブジェクトがある形になっています。
```ここに言語を入力
const postsData = [
 {id: "1", title: "タイトル", thumbnail: ”http//....”},
 {id: "2", title: "タイトル", thumbnail: ”http//....”},
 {id: "3", title: "タイトル", thumbnail: ”http//....”},
...
]
```

このような場合どのように型付けするのでしょうか？
単なるオブジェクトなら下記のような感じで型付しますが、配列を挟んでいますので、どうしたものかと思いまして。。
```ここに言語を入力
type postsType = {
  id: number,
  title: string,
  thumbnail: string,
};
export const Posts: React.FC<postsType> = ({ postsData }) => {
  return (
　　　　　　　　...etc
  );
};
```

TypeScriptで配列の中のオブジェクトに型つけしたい

### 実現したいこと
Next.jsとmicroCMSを使ったjamstackブログを構築中。
ブログの記事詳細を表示するためのページとしてNEXTJS/pages/blog/配下に[slug].jsを作成。

microCMSで、記事にTwitterの埋め込みがあるときとないときで挙動が不安定になるため、改善したい。

### 発生している問題・分からないこと
npx netx devでローカルサーバーでの検証時、以下のような挙動が発生しており、不安定である

**前提**
1. microCMSでTwitterの埋め込みのある記事（A・B）と埋め込みのない記事（C）を作成

**ローカルサーバー上で見られた挙動**
1. Cに、記事一覧ページ（blog/page/1）などから直接アクセスすると問題なく表示される
2. Cから、ページネーションを使ってAもしくはBにアクセスすると、記事ページ自体は表示されるがTwitterの埋め込みが表示されない（そのうえで一回ページをリロードすると表示される）
3. 同様に、AもしくはBに記事一覧ページなどから直接アクセスすると、記事ページ自体は表示されるがTwitterの埋め込みが表示されない（そのうえで一回ページをリロードすると表示される）
4. AもしくはBで、Twitterの埋め込みが表示されている状態でページネーションを使って前後の記事へ遷移するとエラー発生
5. AもしくはBのURLをアドレスバーに入れて遷移すると埋め込みが表示される

など、とにかく埋め込みの表示が不安定

### エラーメッセージ
```error
【DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.】

【The above error occurred in the <blockquote> component.
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.】
```

### 該当のソースコード

```javascript
【pages/_document.js】
import { Html, Head, Main, NextScript } from 'next/document'

import { siteMeta } from 'lib/constants'
const { siteLang } = siteMeta

export default function Document() {
  return (
    <Html lang={siteLang}>
      <Head>
        <script async src="https://platform.twitter.com/widgets.js"></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

```

```javascript
【pages/blog/[slug].js】
import { useEffect, useRef } from 'react'
import { getPostBySlug, getAllSlugs } from 'lib/api'
import { extractText } from 'lib/extract-text'
import { prevNextPost } from 'lib/prev-next-post'
import Meta from 'components/meta'
import Container from 'components/container'
import PostHeader from 'components/post-header'
import PostBody from 'components/post-body'
import {
  TwoColumn,
  TwoColumnMain,
  TwoColumnSidebar,
} from 'components/two-column'
import ConvertBody from 'components/convert-body'
import PostCategories from 'components/post-categories'
import PostTags from 'components/post-tags'
import Share from 'components/sns-sharebtn'
import Pagination from 'components/pagination'
import Image from 'next/image'
import { getPlaiceholder } from 'plaiceholder'

// ローカルの代替アイキャッチ画像
import { eyecatchLocal } from 'lib/constants'

export default function Post({
  title,
  publish,
  content,
  eyecatch,
  categories,
  tags,
  description,
  prevPost,
  nextPost,
}) {
  useEffect(() => {
    // scriptを読み込み
    const script = document.createElement('script')
    script.src = '//cdn.iframe.ly/embed.js'
    document.body.appendChild(script)
    // アンマウント時に一応scriptタグを消しておく
    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return (
    <Container>
      <Meta
        pageTitle={title}
        pageDesc={description}
        pageImg={eyecatch.url}
        pageImgW={eyecatch.width}
        pageImgH={eyecatch.height}
      />

      <article>
        <PostHeader title={title} subtitle="Blog Article" publish={publish} />

        <figure>
          <Image
            key={eyecatch.url}
            src={eyecatch.url}
            alt=""
            layout="responsive"
            width={eyecatch.width}
            height={eyecatch.height}
            sizes="(min-width: 1152px) 1152px, 100vw"
            priority
            placeholder="blur"
            blurDataURL={eyecatch.blurDataURL}
          />
        </figure>

        <TwoColumn>
          <TwoColumnMain>
            <PostBody>
              <ConvertBody contentHTML={content} />
            </PostBody>
            <div className="sptbOnly share">
              <Share />
            </div>
          </TwoColumnMain>
          <TwoColumnSidebar>
            <div className="sptbOnly pagerWrap">
              <Pagination
                prevText={prevPost.title}
                prevUrl={`/blog/${prevPost.slug}`}
                nextText={nextPost.title}
                nextUrl={`/blog/${nextPost.slug}`}
              />
            </div>
            <PostCategories categories={categories} />
            <PostTags tags={tags} />
            <div className="pcOnly sharebtnWrap">
              <Share />
            </div>
          </TwoColumnSidebar>
        </TwoColumn>

        <div className="pcOnly pagerWrap">
          <Pagination
            prevText={prevPost.title}
            prevUrl={`/blog/${prevPost.slug}`}
            nextText={nextPost.title}
            nextUrl={`/blog/${nextPost.slug}`}
          />
        </div>
      </article>
    </Container>
  )
}

export async function getStaticPaths() {
  const allSlugs = await getAllSlugs()

  return {
    paths: allSlugs.map(({ slug }) => `/blog/${slug}`),
    fallback: false,
  }
}

export async function getStaticProps(context) {
  const slug = context.params.slug

  const post = await getPostBySlug(slug)

  const description = extractText(post.content)

  const eyecatch = post.eyecatch ?? eyecatchLocal

  const { base64 } = await getPlaiceholder(eyecatch.url)
  eyecatch.blurDataURL = base64

  const allSlugs = await getAllSlugs()
  const [prevPost, nextPost] = prevNextPost(allSlugs, slug)

  return {
    props: {
      title: post.title,
      publish: post.publishDate,
      content: post.content,
      eyecatch: eyecatch,
      categories: post.categories,
      tags: post.tags,
      description: description,
      prevPost: prevPost,
      nextPost: nextPost,
    },
  }
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
Twitter widgetの読み込みのタイミングが悪いのかと考え、もともとcompenets/meta.js内に記述していた<script async src="https://platform.twitter.com/widgets.js"></script>をdocument.js内の<Head> ~ </Head>内に記述を移動した
→検証環境での不安定さに変化なし

---

### 補足
特になし

Next.js×microCMSで構築中のブログに、Twitterの埋め込みが正常に表示されない

Nuxt × microCMSでポートフォリオサイトを構築しているんですが、Indexページで複数のAPIからコンテンツを取得する方法が分からず困っています。(NewsやProductといった複数のAPIからそれぞれコンテンツをIndexページに表示したいです)

APIが1つの場合(Productだけ or Newsだけ)は問題なく表示されるのですが、Product・News両方からコンテンツ取得しようとするとエラーで出来なくなってしまいます。async asyncData()を2回そのまま書いているのが問題なのかなと思っています。初歩的な質問かもしれませんが、お知恵を貸して頂けると助かります！よろしくお願いします。 

```vue
<template>
　<div>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="item in items" :key="item.id">
       <a :href="`${item.link}`" target="_blank">
         <img :src="item.thumbnail.url">
         <h3>{{ item.creator }}</h3>
         <h4>{{ item.category }}</h4>
      　</a>
     </swiper-slide>
　　</swiper>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="blog in blogs" :key="blog.id">
       <a :href="`${blog.link}`" target="_blank">
         <img :src="blog.thumbnail.url">
         <h1>{{ blog.title }}</h1>
       </a>
     </swiper-slide>
　　</swiper>

　</div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/item',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { items: data.contents }
  },
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/blog',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { blogs: data.contents }
  }
}
</script>
        
```

【Nuxt.js】microCMSで複数のAPIからコンテンツを取得する方法

WordPressとNext.js を使用して、ブログサイトを作成しているものです。
そこでご質問したいのが、RESTAPIを使用してデータの受け渡しをしたいと思っているのですが、
一覧は取得できたのですが、詳細ページの取得ができないので、どなたかご教授お願いできますでしょうか？


一応下記記事を参考に自分で独自エンドポイントを作成してみました。
https://notes.sharesl.net/articles/751/

一覧ページは問題なく取得できています。問題は詳細ページの取得です。
こちらは取得できた↓
https://{ドメイン}/wp-json/custom/v0/works
こちらは取得できてない↓
https://{ドメイン}/wp-json/custom/v0/works/id

```functionphp

function add_custom_endpoint()
{
	//
	register_rest_route(
	//ネームスペース
	'custom/v0',
	//ベースURL
	'/skills',
	//オプション
		array(
			'methods'  =>  WP_REST_Server::READABLE,
			'callback' => 'skills_data'
		)
  );
  register_rest_route(
	//ネームスペース
	'custom/v0',
	//ベースURL
	'/works',
	//オプション
		array(
			'methods'  =>  WP_REST_Server::READABLE,
			'permission_callback' => '__return_true',
			'callback' => 'works_data'
		)
	);
}
add_action('rest_api_init', 'add_custom_endpoint');

//APIの権限をチェックする関数
function rest_permission(){
  return current_user_can('publish_posts');
}

function rest_response($file_name, $param = null) {
	$api_file = locate_template("api/${file_name}.php");
	$res      = !empty($api_file) ? include_once $api_file : [1];
	$response = new WP_REST_Response($res);
	$response->set_status(200);
	return $response;
}

function skills_data($param)
{
  return rest_response('skills-data', $param);
}

function works_data($param)
{
  return rest_response('works-data', $param);
}

```

```ここに言語を入力

<?php
    $post_data = [];

    $post_args = [
        'post_type'      => 'works',
        'posts_per_page' => -1,
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC'
    ];

    $post_query = new WP_Query( $post_args );
    if ( $post_query->have_posts() ) :
    while ( $post_query->have_posts() ) :
    $post_query->the_post();
    global $post;

    $post_data[] = [
        //記事ID
        'id' => $post->ID,
        //公開日
        'time'  => get_the_time('Y.m.d'),
        'title' => get_the_title(),
        'thumbnail' => get_the_post_thumbnail_url( get_the_ID(),"large"),
        'startData' => post_custom('startData'),
        'endData' => post_custom('endData'),
        'language' => post_custom('language'),
        'FlameWork' => post_custom('FlameWork'),
        'Use' => post_custom('Use'),
        'link' => post_custom('link'),
        'Github' => post_custom('Github'),
        'category' => get_the_term_list($post->ID,'works_cat'),
        'category_slug' => $cat_slug,
        //タグ
        'tags' =>  get_the_terms($post->ID, 'works_tag'),
    ];

    endwhile;
    wp_reset_postdata();
    endif;

    return $post_data;
?>

```

WordPressでREST APIを使用して、独自エンドポイントを作成したい

### 前提・実現したいこと

下記の構成でJAMstackなサイトを作ろうと思っています。

データベース: Firebase Firestore
ホスティング: Firebase Hosting
ビルド・デプロイ: Github Actions

firestoreの特定のドキュメントを編集すると、firebase functions からgithub actionsにビルドフックを飛ばし、自動でビルドとデプロイを行うようにしようと思っています。

### 発生している問題

nuxt.js内で

```
`${process.env.API_KEY}`
```

などのように環境変数を呼び出しているのですが、github上にenvファイルをコミットするわけにもいかず、本番環境でどのように環境変数を呼び出せばいいか悩んでいます。

### お聞きしたいこと

- 例えば netlify や heroku であれば、本番用の環境変数を設定することが出来ますが、github にも同様の機能はありますか？
- ない場合は、どのようにして実装するのが好ましいでしょうか？(リポジトリは非公開になっているので、いっそのことAPI_KEYなどを変数に格納せず直書きする、というのも一つの手でしょうか？)

ご回答の程、よろしくお願いいたします。

Github Actions でビルドを行う時に、本番用の環境変数を使用したい

WordPressを使用してJamstackでサイトを制作しているものです。
その際に独自エンドポイントを設定してるのですが、クエリパラメータでの操作ができなくて困っています。
ちなみにデフォルトのRESTAPIだとクエリーパラメータでちゃんと操作できます。
独自エンドポイントの場合はクエリーパラメータでの操作は難しいのでしょうか？
ちなみにデータ自体はちゃんと取れています。

↓下記のような感じでパラメータを使用して、記事の取得数などをいじりたいです
https://exapmle.com/wp-json/wp/v2/posts?page=[NUMBER]

クエリーパラメター参考記事
https://designsupply-web.com/media/knowledgeside/6307/

独自エンドポイントの設定↓
```php
<?php
function get_work_fields($work) {
  $work_custom = get_post_custom($work->ID);
  // var_dump($work);
  $work_fields = [
    'id' => $work->ID,
    //公開日
    'time'  => date('Y.m.d', strtotime($works->post_date)),
    'title' => $work->post_title,
  ];

  return $work_fields;
}

function get_works( $data ) {
  if( $data['id']) return get_work_by_id($data);

  $default_args = [
    'post_type'      => 'works',
    'posts_per_page' => -1,
    'post_status'    => 'publish',
    'orderby'        => 'date',
    'order'          => 'DESC'
  ];
  // $works = new WP_Query( $default_args );
  $works = get_posts($default_args);
  // var_dump($works);
  if ( empty( $works ) ) {
    return null;
  }

  $return_posts = array_map('get_work_fields', $works);

  return $return_posts;
}

function get_work_by_id( $data ) {
  global $default_args;
  $post = get_post( $data['id'], OBJECT, $default_args);
  if ( empty( $post ) ) {
    return null;
  }
  $return_posts = get_work_fields($post);
  return $return_posts;
}

add_action( 'rest_api_init', function () {
  register_rest_route( 'custom/v1', '/works', array(
    'methods' => 'GET',
    'callback' => 'get_works',
  ) );
});
```

WordPressで独自エンドポイントを作成したが、クエリーパラメータでの操作ができない

## テーマ、知りたいこと

nuxt.jsで作るWEBアプリで、5000枚ほどの画像を扱いたい場合、staticフォルダにそれらを格納するのが良いのか、それともGoogle Cloud Storageなどの外部サービスを介して読み込むのが良いのか、メリット、デメリットなどの意見を聞きたいです。
ユーザー側が画像をアップロードすることはなく、また画像は定期的に追加するような形です（何かのタイミングで急いで追加などはありません）

## 背景、状況

画像を5000個ほど使用したWEBアプリを作りたいと考えています。
同じnuxt.jsのアプリを見ていると、多くは、画像はGoogle Cloud Storageに配置して読み込む方式を取っていました。
ただ、その場合裁量課金制となりコストがかかること、画像自体の入れ替え機会は少ないこと、ユーザー側の画像のアップロードは想定していないことなどから、staticやassetsフォルダに画像を入れてデプロイで済むなら、それで済ませてしまいたいです。
ただ、あまりに画像は外部に置いているサービスが多いことから、今回質問を投稿した次第です。