常連

###追記
クリップありがとうございます。
この質問がオープンな間は私はまだこの問題を解決していないので、お気軽に回答していただければ嬉しいです。
よろしくお願いいたします。

---


#やりたいこと
[Airbnbのサイト](https://www.airbnb.jp)のように、縦方向、横方向に無限スクロールさせたいです。

#発生した問題
**親コンポーネント**(縦方向)と**子コンポーネント**(横方向)の両方に無限スクロールを適用させたところ、**子コンポーネント**をスクロールしても読み込みが発生せず、**親コンポーネント**でスクロールして読み込んだ分、**子コンポーネント**でもスクロールができる状態になってしまいました。

なお、親コンポーネントを無限スクロールさせない場合は、子コンポーネント(横方向)が無限スクロールできることは確認できました。

![無限スクロール](a1346c85adb234b7b294507ab5eae88e.gif)

#やってみたこと
無限スクロールを実現するために、[react-infinite-scroll-component](https://www.npmjs.com/package/react-infinite-scroll-component)というコンポーネントを使用しました。

書いてみたコードは以下の通りです。

```html


<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <style>
      body {
        font-family: Circular, "Helvetica Neue", Helvetica, Arial, sans-serif !important
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.min.js"></script>
  </body>
</html>
```

```javascript
// index.js

import React from "react"
import ReactDOM from "react-dom"
import Home from './components/Home'

const app = document.getElementById('app')
ReactDOM.render(<Home/>, app) 
```

```javascript 
// home.js

import React from 'react'
import styled from 'styled-components'
import InfiniteScroll from 'react-infinite-scroll-component'
import HorizontalScroll from './Home/HorizontalScroll'

export default class Home extends React.Component {
  constructor () {
    super()
    this.state = {
      items: Array.from({ length: 1 })
    }
  }

  componentDidUpdate () {
    console.log(`Home state: ${this.state.items.length}`)
  }

  fetchMoreData = () => {
    this.setState({
      items: this.state.items.concat(Array.from({ length: 1 }))
    })
  }

  render = () => (
    <div>
      <Title>Infinity Test</Title>
      <hr/>
      <HorizontalScroll />
      <InfiniteScroll
        dataLength={this.state.items.length}
        next={this.fetchMoreData}
        hasMore={true}
      >
        {this.state.items.map((i, index) =>
          <Tile key={index}>
            #{index}
          </Tile>
        )}
      </InfiniteScroll>
    </div>
  )
}

const Title = styled.h1`
  text-align: center;
  color: dimgray;
`
const Tile = styled.div`
  width: 90%;
  height: 80px;
  margin: 10px auto;
  background-color: pink;
`
```

```javascript
// HorizontalScroll.js

import React from 'react'
import styled from 'styled-components'
import HorizontalInfiniteScroll from 'react-infinite-scroll-component'

export default class HorisontalScroll extends React.Component {
  constructor () {
    super()
    this.state = {
      horizontalItems: Array.from({ length: 1 })
    }
  }

  componentDidUpdate () {
    console.log(`HorizontalScroll state: ${this.state.horizontalItems.length}`)
  }

  fetchMoreDataHorizontal = () => {
    this.setState({
      horizontalItems: this.state.horizontalItems.concat(Array.from({ length: 1 }))
    })
  }

  render () {
    return (
      <div>
        <HorizontalInfiniteScroll
          dataLength={this.state.horizontalItems.length}
          next={this.fetchMoreDataHorizontal}
          hasMore={true}
        >
          <HorisontalScrollBox>
            {this.state.horizontalItems.map((i, index) =>
              <Tile key={index}>
                #{index}
              </Tile>
            )}
          </HorisontalScrollBox>
        </HorizontalInfiniteScroll>
      </div>
    )
  }
}

const HorisontalScrollBox = styled.ul`
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
`
const Tile = styled.li`
  display: inline-block;
  width: 180px;
  height: 300px;
  margin: 30px;
  background-color: dodgerblue;
`
```

`state`やプロパティの名前が同じだといけないのかと思い、変数名を違うものにしてみましたが、変化はありませんでした。

また、`componentDidUpdate()`で各コンポーネントの状態を確認したところ、以下のように親コンポーネントで読み込みが発生したときのみ、**子コンポーネントで2回読み込みが発生している**ことは確認できましたが、理由が全くわかりません。

```console
[Log] HorizontalScroll state: 2
[Log] HorizontalScroll state: 2
[Log] Home state: 2
[Log] HorizontalScroll state: 3
[Log] HorizontalScroll state: 3
[Log] Home state: 3
[Log] HorizontalScroll state: 4
[Log] HorizontalScroll state: 4
[Log] Home state: 4
         :
         :
```

公式のレファレンスも読んでみましたが、縦スクロールのサンプルしかなく自分の力では解決できない状態です。どうかよろしくお願いします。

Reactのコンポーネントが干渉する

###前提・実現したいこと
ExcelVBAで、PowerPointスライド上のタイトルを編集しています。

###発生している問題・エラーメッセージ
「x文字目以降のフォントサイズをyポイントにする」
という作業のやり方がどうしてもわかりません。
（xとyは決め打ちです。
例えば、20文字目以降を18ポイントにする、などです。）

###試したこと
Web検索して、途中の文字から太字にする方法は見つけました。
https://msdn.microsoft.com/ja-jp/library/office/ff744064.aspx

フォントは、全体を変える方法しかわかりませんでした。
https://msdn.microsoft.com/ja-jp/library/office/ff744240.aspx

どうぞよろしくお願いいたします。

VBAでPowerPointスライドタイトルのフォントサイズを、途中の文字から変える方法を教えてください

WebStormでExpressプロジェクトを作成しました。

index.jsを下記のように
titleを Express
yourNameを 太郎
としてindex.jadeに送ります。

> ======== routes/index.js =========
> var express = require('express');
> var router = express.Router();
> 
> /* GET home page. */
> router.get('/', function(req, res, next) {
>   res.render('index', { title: 'Express', yourName: '太郎'});
> });
> 
> module.exports = router;

> ======== views/index.jade =========
> extends layout
> 
> block content
>  h1= title
>  p hello, #{yourName}

index.jadeで受け取ろとすると、yourNameのところで
> unresolved variable or type yourName

という警告が出ます。

yourNameの入力補完は効いています。
yourNamまで入力すると、
> yourName (index.js routes ) String

が表示されます。
ちなみに、titleは警告は出ていませんが、commandキーを押すと

> value "title" [jade.js]

となってroutes/index.jsを参照していません。


不要な警告文を消してスッキリさせるにはどう設定すればいいでしょうか？