質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

698閲覧

ブログにタグ一覧を作りたいがUndefinedになる

_magurochan

総合スコア13

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/12/02 16:58

目的

Next.jsでSSGなブログ制作

困っていること

タグ一覧を作りたいが、関数が__undefined__を出す。スコープの問題?
現状からどうすればいいですか?

ソースコード

ディレクトリ

  • /data/slug
  • /pages/components
  • /styles
  • /pages/works
  • /pages/works/tags

記事のファイル

ファイル : /data/slug/index.md
公開時のURL : https://example.com/works/**slug**

md

1title: "hoge title" 2date: "2021-12-01" 3tag : ["UK","USA","JP"] 4published: true 5--- 6hoge foga ... 7

JSX

ファイル : /pages/works/tags/index.jsx
公開時のURL : https://example.com/works/tags

js

1import Link from "next/link"; 2import { NextSeo } from 'next-seo' 3import matter from 'gray-matter'; 4import styles from '../../../styles/Article.module.css' 5import { listenerCount } from "process"; 6 7const tagList =(props)=> { 8 console.log('top=>'+props.allTag) //undefined 9 return ( 10 <> 11 <NextSeo 12 title="works" 13 /> 14 <div> 15 <h1>tag</h1> 16 <ul> 17 /* {props.posts.allTag} */ 18 </ul> 19 </div> 20 </> 21 ); 22} 23 24 25export default tagList 26 27 28 29export async function getStaticProps() { 30 31 const posts = ((context) => { 32 const keys = context.keys() 33 const values = keys.map(context) 34 35 const data = keys.map((key, index) => { 36 let slug = key.replace(//index.md/, '').slice(2,) //"/slug/index.md"の形からslugを取り出す 37 const value = values[index] 38 const document = matter(value.default) 39 40 41 return { 42 slug, 43 frontmatter: document.data, 44 } 45 46 } 47 ) 48 //// 49 var allTag=(()=>{ 50 console.log('---new---'); 51 52 let resTag = []; 53 for (let i in data) { 54 55 let slug = data[i].slug; 56 let frontmatterItem = data[i].frontmatter.tag; 57 58 resTag = resTag.concat(frontmatterItem); 59 console.log('a ' + slug + ` + ` + frontmatterItem); 60 console.log('b ' + JSON.stringify(frontmatterItem)); 61 /* console.log('c '+JSON.stringify(frontmatterItem)) */ 62 } 63 64 console.log(' data : ' + resTag); 65 66 ////remove 67 var removeDuplicates = function (object) { 68 var result = [], comparisons = [], key, comparison; 69 for (key in object) { 70 comparison = JSON.stringify(object[key]); 71 if (comparisons.indexOf(comparison) === -1) { 72 result.push(object[key]); 73 } 74 comparisons.push(comparison); 75 } 76 return result; 77 }; 78 79 const result = removeDuplicates(resTag); 80 console.log('remove : ' + result); 81 return result; 82 }) 83 /// 84 allTag() 85 console.log(allTag()) // 出力される 86 return data 87 88 } 89 )(require.context('../../../data', true, /.md$/)) 90 91 /* console.log(allTag()) */ // allTag is not defined 92 93 return { 94 props: { 95 posts: JSON.parse(JSON.stringify(posts)), 96 /* allTag:allTag */ 97 98 } 99} 100}

console.logの一例

---new--- a hoge-title-01 + UK b ["UK"] a 202008-drum-rec + USA,JPN b ["USA","JPN"] a adeyaka_demo + USA b ["USA"] a tomitananami_1515 + USA,JPN b ["USA","JPN"] data : UK,USA,JPN,USA,USA,JPN remove : UK,USA,JPN [ 'UK', 'USA', 'JPN' ] top=>undefined

補足情報

  • OS: Windows10 Home
  • WSL2 Debianから、__npm run dev__しています。
  • エディター : VSCode
├── eslint-config-next@12.0.4 ├── eslint@7.32.0 ├── glob@7.2.0 ├── gray-matter@4.0.3 ├── next-seo@4.28.1 ├── next@12.0.4 ├── raw-loader@4.0.2 ├── react-dom@17.0.2 ├── react-markdown@7.1.1 ├── react@17.0.2 ├── remark-html@15.0.1 └── remark@14.0.2

参考ページ 配列やハッシュ(連想配列)から重複する値を削除

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問