目的
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
参考ページ 配列やハッシュ(連想配列)から重複する値を削除
あなたの回答
tips
プレビュー