常連

注目の的

質問力

回答者

拍手喝采

自己紹介

### 前提・実現したいこと

React + D3 + Material-UI構成でダッシュボード的なものを作ろうとしています。
Gridで画面を細分化してサブ画面を作り、その中の１つにd3でグラフを描きたいです。
この際、グラフ用のサブ画面のサイズを取得して、それに合わせてグラフのサイズを決めたいのですが、Gridで細分化したのwidth, heighを取得する方法ありますでしょうか？

あるいは、「〜を使えば自動でちょうど良いサイズに勝手に調整してくれる」などの情報ありましたら、頂けますと幸いです。


### 該当のソースコード
親コンポーネント
```ここに言語名を入力
import React from 'react';$
import Grid from '@material-ui/core/Grid';$

class Hogehoge extends React.Component {
  constructor(props) {                                                                                                                                                                                                                                                          
    super(props);                                                                                                                                                                                                                                                               
    this.chartRef = React.createRef(); 
  }

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Paper_
          className={classes.paper}
          elevation={20}
        >
          <Grid container spacing={24} alignItems='center'>$
            <Grid item xs={6} ref={this.chartRef} >
              <MyChart/>
            </Grid>
            <Grid item xs={6}>
              <MyTable/>
            </Grid>
          </Grid>
        </Paper>
      </div>
    );
  }
}
```

子コンポーネント（width, heightを取得したい対象）
```
import React from 'react';                                                                                                                                                                                                                                                      
import * as d3 from 'd3';                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                
class MyChart extends React.Component {    
  constructor(props) {                                                                                                                                                                                                                                                          
    super(props);                                                                                                                                                                                                                                                               
    this.svgRef = React.createRef(); 
  }

  render() {
    return (
      <svg ref={this.svgRef} />
    );
  }
}
```

### 試したこと
createRefで試してみたのですが、
- 親コンポーネント（chartRef): clientWidthが取得できない（仮装Domだから？）
- 子コンポーネント（svgRef): width 300, Height 150が帰る、ブラウザ窓のサイズを
　変えても変化なし（Grid xs={6}なので、Widthには窓サイズの1/2相当の値が帰って欲しいのだけれど、、）


以上、お知恵を拝借できれば幸いです。

React + d3 + Material-UI構成で、Gridで画面を細分化している場合のwidth, height取得

React.jsのレンダリングを効率化する方法として`PureComponent`がありますが、`PureComponent`へ`render`の際に使うコールバック関数を渡すとしたら、正常に動かすのが難しいのではないかと考えています。

例えば「あるエレメント群の`className`を生成する関数」を`PureComponent`が受け取れるようになっていた場合、関数が純粋ならそれで問題ないのですが、関数があるオブジェクトに`bind`されたメソッドで、そのオブジェクトの状態に応じて返り値が変化するようになっていると、関数自身は変化しないので`PureComponent`の再`render`は不要と判断されるものの、実際には状態変化しているので再描画しないと整合しない、ということが考えられます。

ひとまず正常動作させるために「`PureComponent`化を諦める」や「オブジェクトの状態変化に合わせて関数自体を`.bind`するなどで強制的に状態変化させる」というような方法を思いつきましたが、もっとエレガントな対応法はないでしょうか。

（`ParentComponent`内で生成された複数の値を`map`して`ChildComponent`を生成していて、「`ChildComponent`で使う、それぞれの値に応じた`className`を生成する関数」を`ParentComponent`の外側から渡して`ChildComponent`まで引き回している、という状況です。汎用性を高めるためにこのような構造をとっています）

## 環境

* React 16.6
* 対象ブラウザ: IE11、各種モダンブラウザ
* Redux、SSRなどは未使用

PureComponentのpropとしてコールバック関数を渡したい

DjangoとNginxを用いてWEBを作成しています。
起動コマンドは下記で起動していますが、一連の処理を流すと、当然メモリは減るのですが、処理が終わった後もメモリの使用料に変化がありません。
**予想：**画像をサーバ内部で開く処理を動かしているのですが、その画像がうまく閉じれていないのではないかと思っていますが、あくまで予想なので。。。

```Bash
uwsgi --socket :8001 --module config.wsgi --processes 4 --threads 100
```

```bash
>>> ps aux

root      4398  1.9 10.0 2109904 362724 pts/1  Sl+  21:12   0:13 uwsgi --socket :8001 --module config.wsgi --processes 4 --threads 100
root      4402  4.8 13.5 2186204 489080 pts/1  Sl+  21:12   0:34 uwsgi --socket :8001 --module config.wsgi --processes 4 --threads 100
root      4403  1.8  9.9 2113216 361564 pts/1  Sl+  21:12   0:13 uwsgi --socket :8001 --module config.wsgi --processes 4 --threads 100
root      4404  1.8  9.8 2109904 356832 pts/1  Sl+  21:12   0:13 uwsgi --socket :8001 --module config.wsgi --processes 4 --threads 100
```
```Bash
>>> slabtop
 Active / Total Objects (% used)    : 621115 / 622743 (99.7%)
 Active / Total Slabs (% used)      : 10662 / 10662 (100.0%)
 Active / Total Caches (% used)     : 67 / 93 (72.0%)
 Active / Total Size (% used)       : 55440.97K / 55995.11K (99.0%)
 Minimum / Average / Maximum Object : 0.01K / 0.09K / 8.00K

  OBJS ACTIVE  USE OBJ SIZE  SLABS OBJ/SLAB CACHE SIZE NAME
135490 135490 100%    0.02K    797      170      3188K fsnotify_mark_connector
127872 126927  99%    0.03K    999      128      3996K kmalloc-32
 82944  82944 100%    0.01K    162      512       648K kmalloc-8
 60416  60416 100%    0.02K    236      256       944K kmalloc-16
 52864  52864 100%    0.06K    826       64      3304K kmalloc-64
 49728  49728 100%    0.19K   2368       21      9472K dentry
 22440  22440 100%    0.04K    220      102       880K selinux_inode_security
 12844  12627  98%    0.58K    988       13      7904K inode_cache
 12274  12274 100%    0.12K    361       34      1444K kernfs_node_cache
 12012  12012 100%    0.10K    308       39      1232K buffer_head
  9486   9486 100%    0.21K    527       18      2108K vm_area_struct
  6920   6920 100%    0.94K    865        8      6920K xfs_inode
  4088   4088 100%    0.57K    292       14      2336K radix_tree_node
  3774   3774 100%    0.08K     74       51       296K anon_vma
  3570   3570 100%    0.09K     85       42       340K kmalloc-96
  3568   3480  97%    0.25K    223       16       892K kmalloc-256
  3312   3312 100%    0.16K    138       24       552K xfs_ili
  2550   2550 100%    0.05K     30       85       120K shared_policy_node
  2296   2296 100%    0.07K     41       56       164K avc_node
  2121   2121 100%    0.19K    101       21       404K kmalloc-192
  1792   1792 100%    0.12K     56       32       224K kmalloc-128
  1632   1606  98%    0.64K    136       12      1088K proc_inode_cache
```

uwsgiのメモリ解放ができません(Nginx Django)

現在ジモティーのような求人・不動産・売買等が個人間でできるサイトをDjangoを用いて開発しています。現段階では完成は程遠いものの全体でみると５０％程度はできあがってきたというところです。

しかし最近になってReactによるフロントエンド開発について知る機会があり非常に興味をもちました。というのもフロントエンドに関してjQueryで直接DOMをいじるという状況が生じてしまい、できればこれを避けたいと思っていた矢先、Reactを使えばjQueryを用いずにDOMをいじることなく、かつリッチな表現が可能になるということを知ったためです。

そこでいろいろと検索をかけて、今まで触れることのなかったDjango REST Frameworkも使ったAPIの作り方や、JWT、またReact+Reduxも用いた簡単な掲示板の作り方をYoutubeで見たりしていました。

しかしここでSSRについて知ってしまいました。サーバーサイドレンダリングをしない限りSEOや初期表示速度に大きな影響が出るということについてです。

Googleに関しては今はインデックスしてくれることや、そもそもSSRはしなくていい等、これについても様々な情報をチェックしました。（したつもりです。。。）

そこでみなさまに質問があります。以下の選択肢の中でどれを選択するのがベターでしょうか？

①Reactを用いずにそのまま開発して、そのまま本番で運用しながら必要があればReactに移行する。
②フロントエンドは全てReact+Reduxで開発して、SSRは必要ならばあとから対応させる。

現状で私に与えられた選択肢は上記の２つだと思います。

本音を言うと、Reactを用いて開発したいです。jQueryでゴニョゴニョするのが今まで違和感でしかなかったので。でもその場合、②のSSRについての課題が生じるわけですが、そもそもSSRをあとから導入することなんて可能ですか？Reactについてまだあまり詳しくないので詳細まではわからないのですが、SSR導入は初期段階から念頭にいれて設計するものですか？それともあとからでも導入しようと思えばできるものですか？

あともしReactを用いた開発を行うのであればバックエンドとフロントエンドは完全に分離したいので、Djangoのテンプレートやルーターを用いたハイブリッドな仕様は避けたいと思っています。

長々とすみません。言いたいことがうまくまとまっていませんがどうかご教授お願いします。

Reactを用いるべきかどうか教えてください

自宅のubuntuで立ち上げたjupyterに別のPCで外部ネットワークからアクセスできるようにしたいのですが、
いまいちやり方がわかりません。


状況としては以下の通りです。
```
・自宅のubuntuでjupyterを立ち上げてある
・外部ネットワークからubuntuへssh接続はできる
・ローカルネットワークからubuntuのjupyterにアクセスできる
・外部ネッネットワークからはubuntuのjupyterにアクセスできない
```

また、行った設定は３つです。
```

・ファイアーウォールの設定
https://qiita.com/kotarella1110/items/f638822d64a43824dfa4#ufw-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

・jupyterの設定
https://qiita.com/ciela/items/0e0392f600c92b93d7c6

・ルーターのポート設定(sshの番号およびjupyterの8888番を設定)
https://www.akakagemaru.info/port/pr-400mi.html

```

よろしくお願いします。

自宅のubuntuで立ち上げたjupyterに外部からアクセスする方法がわからない

CentOS7 Nginxの環境でLet’s EncryptでSSL設定が失敗します。。

プログラミングの知識がほとんど無く、ネットで記述を参照しながら
原因を探っています。


### 前提・実現したいこと

詳細環境
さくらインターネットのクラウド　SSD20GB　3core　3GBメモリ
CentOS7 Nginx
KUSANAGI導入
wordpress4.42
PHP5.6.13



CentOS7 Nginxの環境でLet’s EncryptでSSL設定を完了したいです。

### 発生している問題・エラーメッセージ

```
コピーできず、画像で貼ります
```
![イメージ説明](8988b629f3c2582e4a8d5e359ce6dbed.jpeg)

pyhon2.7が関係しているみたいです。

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

上記のエラーが出る前は、
host名がどうとかのエラーになっていましたので
CENTOSのホスト名記述するファイルにホスト名「nagoyamag.com」を記載しました。
それと、KUSANAGIというプログラムで、アップデートを行いました。
それがかえって良くなかったかもしれません。

### 補足情報（FW/ツールのバージョンなど）

PHPのバージョンが古いので両方とも、アップデートしたほうが良いかとも考えていましが
wordpressのコアやプラグイン自体が対応してないとまずいので
まだ更新しないままにしています。

どうしたら、何から、手を付ければよいでしょうか。
ご教授を宜しくお願いします！

CentOS7 Nginxの環境でLet’s EncryptでSSL設定が失敗します。。

初歩的な質問かもしれませんが、個人で調べきれなかったので質問させてください。
**thenに対象のコールバックが指定されていないときどのような挙動になるのでしょうか。**

例えば次のようなコードがあるとします。
```javascript
const promiseFunc = num => {
  return new Promise((resolve, reject) => {
    if (typeof num === 'number')
      resolve(num * 2)
    else
      reject(`${num} is not numbers.`)
  })
}

/* L1 */  promiseFunc("a")
/* L2 */   .then(res => promiseFunc(5))
/* L3 */   .then(res => console.log(res))
/* L4 */   .catch(e => console.log(e))
```
結果としては、L4まで実行され、`"a" is not numbers.`とエラーが出ます。

L1で、このPromiseインスタンスのステータスはrejectedとなります。
しかしL2では`.then()`のrejected用のコールバックは指定していません。
このときどのような挙動になるのでしょうか。

メソッドチェーンを中断せず最後の`.catch()`までエラーが到達する仕組みがわかりません。
デフォルトで err => throw(err) となるとどこかで目にしたのですが本当でしょうか。なかなかエヴィデンスを見つけられず。。

何か質問に不足があればコメントいただけると幸いです。
よろしくお願いします。

【JS】Promiseチェーンのエラーハンドリングについて

初心者なので少し質問の仕方、書き方が変かもしれませんがよろしくお願いします。

eclipseでwebアプリを開発をしています。
環境？は以下の通りです。
・java+spring boot(Thymeleaf)
・Tomcatサーバー
・eclipse

入力フォームに入力。
登録ボタン押下時にバリデーションに引っかかればエラーメッセージ表示の項目そのまま、なければshell実行。
戻り値によってshell実行中のエラーメッセージを表示させたい。

htmlのボタン押下のタイミングでshellを実行したい場合はどこでどうやって扱えばいいのでしょうか？
jsを作る？もしくはjavaで？

html、サーバー周り、springとうあわからないことだらけでへこんでいます。よろしくお願いします

htmlのボタン押下でシェル実行、戻り値を受け取るまで

### 前提・実現したいこと

Dockerの勉強を行っており、MySQLとPHP+Apacheの各コンテナを作成しました。
PHP+ApacheコンテナからMySQLコンテナへの接続は問題なく行えたのですが、
ホスト側からコマンドプロンプト、A5M2などを使用してMySQLコンテナへ接続しようとしてもエラーが出て接続することができません。

ホスト側にもMySQL最新版を入れております。

ホスト側からMySQLコンテナへ接続できる方法をご教示ください。
よろしくお願いいたします。

＜追記＞
t_obaraさんよりいただいたURLの結果を追加しました。

### 発生している問題・エラーメッセージ

下記、コマンドプロンプトから接続を試したときのコマンドとエラーメッセージです。
```
>mysql -h 127.0.0.1 --port 3309 -u root -p
Enter password: ********
ERROR 2003 (HY000): Can't connect to MySQL server on '127.0.0.1' (10061)
```

### 該当のソースコード

docker-compose.yml
```ここに言語名を入力
version: '3'
services:
  db:
    container_name: bbs_mysql
    build: ./db
    ports:
      - "3309:3306"
    environment:
      MYSQL_DATABASE: db_bbs
      MYSQL_ROOT_PASSWORD: rootpass
    command: "--innodb_use_native_aio=0"
    volumes:
    - ./db/db_data:/var/lib/mysql
    - ./db/sqls:/docker-entrypoint-initdb.d

  web:
    container_name: bbs_php_apache
    build: ./web
    ports:
    - "8099:80"
    volumes:
    - ./app:/var/www/appBbs
    - ./web/000-default.conf:/etc/apache2/sites-available/000-default.conf
    - ./logs:/var/log/apache2
    depends_on:
    - db
```
Dockerfile
```
FROM mysql:8.0
COPY ./my.cnf /etc/mysql/conf.d/
```
my.cnf
```
[mysqld]
character-set-server=utf8mb4
default_authentication_plugin = mysql_native_password

[client]
default-character-set=utf8mb4
```
作成したコンテナ
```
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
cae0960fceba        bbs_web             "docker-php-entrypoi…"   7 seconds ago       Up 3 seconds        0.0.0.0:8099->80/tcp                bbs_php_apache
f2e1877a8d62        bbs_db              "docker-entrypoint.s…"   11 seconds ago      Up 8 seconds        33060/tcp, 0.0.0.0:3309->3306/tcp   bbs_mysql
```

＜追記＞
**1. 外部サーバーへpingコマンドを叩く**
```
>ping 127.0.0.1

127.0.0.1 に ping を送信しています 32 バイトのデータ:
127.0.0.1 からの応答: バイト数 =32 時間 <1ms TTL=128
127.0.0.1 からの応答: バイト数 =32 時間 <1ms TTL=128
127.0.0.1 からの応答: バイト数 =32 時間 <1ms TTL=128
127.0.0.1 からの応答: バイト数 =32 時間 <1ms TTL=128

127.0.0.1 の ping 統計:
    パケット数: 送信 = 4、受信 = 4、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
    最小 = 0ms、最大 = 0ms、平均 = 0ms
```
⇒返答あり

**2. 外部サーバーに直接ログインし、サーバー上でMySQLにアクセス**
```
mysql> show variables like 'port';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| port          | 3306  |
+---------------+-------+
1 row in set (0.01 sec)
mysql> select host, user from mysql.user;
+-----------+------------------+
| host      | user             |
+-----------+------------------+
| %         | root             |
| %         | user             |
| localhost | mysql.infoschema |
| localhost | mysql.session    |
| localhost | mysql.sys        |
| localhost | root             |
+-----------+------------------+
6 rows in set (0.00 sec)
```
⇒portが3306なのは、コンテナ内なので問題なしのはず。。
　ユーザーも、root@%がいるためアクセス可能のはず。。

**3. /etc/mysql/my.cnfの確認**
```
root@f2e1877a8d62:/etc/mysql# cat my.cnf
# Copyright (c) 2017, Oracle and/or its affiliates. All rights reserved.
#
# This program is free software; you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation; version 2 of the License.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA

#
# The MySQL  Server configuration file.
#
# For explanations see
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html

[mysqld]
pid-file        = /var/run/mysqld/mysqld.pid
socket          = /var/run/mysqld/mysqld.sock
datadir         = /var/lib/mysql
secure-file-priv= NULL
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0

# Custom config should go here
!includedir /etc/mysql/conf.d/
```
⇒bind-addressの記載なし。自分で作成したmy.cnfにも記載していない状態。

Dockerに作成したMySQLコンテナへホストから接続する方法

ディープラーニングの自然言語処理について勉強しています。
http://deeplearning.hatenablog.com/entry/neural_machine_translation_theory
のサイトや、
https://qiita.com/KojiOhki/items/89cd7b69a8a6239d67ca　のサイトを見ています。
覗き穴結合・忘却ゲート・更新ゲートがどういうものなのか理解できません・・・。
まず覗き穴結合に関してですが、
> 覗き穴結合 (peephole connections) は，メモリセルの内部状態を3つのゲートの制御に直接利用する仕組みである
とありますが、これはどういう仕組みでどういう機能を持つのでしょうか？

忘却ゲート・更新ゲートはまずそれぞれが互いにどのように違うのかが理解できません。
忘却ゲートでは受け取ったデータを単に使わないということでしょうか？でもそれだとドロップアウトになりますよね？
更新ゲートはどういう機能なのかさっぱり・・・。単に値を活性化関数に通すだけなら、わざわざ更新ゲートと名付けないだろうし・・。

教えて下さい、よろしくお願いいたします！

覗き穴結合・忘却ゲート・更新ゲートについて

JavaScriptでアプリを作っていて、例えばサーバー側からデータを取得するときに、
要素にアクセスしやすいように、以下のような感じで格納してしまいます。
```
{
  1: {key: 1, value: 'foo'},
  2: {key: 2, value: 'bar'},
  ......
}
```

これは使いやすいんですけど、keyの名前が定まらないので罪悪感があります。
これってアンチパターンでしょうか。もしその場合、複数のJSONをアクセスしやすくローカルに持つにはどうしたらいいでしょうか。
ご助言願います。

要素にアクセスしやすいjsonのリストが欲しくて、keyをindexがわりに使ってしまいます。これってアンチパターンですか？

### 前提・実現したいこと

Let's Encryptを利用してSSLを実現しております。
Let's Encryptからexpirationのメールが届いたのですが

※全然見に覚えの無いドメインでした。

この場合、考えられるのが以下かと思いますが
ご経験がある方のご意見を伺いたく。

①誰かがEncrypt登録時に間違ったメアドを登録した
②Let's Encrypt側で間違って私に送った
③サーバがハックされ、誰かがWebサーバとして利用している
 故に、何かしらの理由で私に届いた

よろしくお願い致します。

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Let's Encryptから見に覚えの無いドメインのexpiration

### 前提・実現したいこと

react、react-router-domを使用して指定したページへリロードさせて画面遷移を実施したいです。
※遷移元のページにてデータ登録し、遷移先のページへ移動時に登録した内容を確認出来るようにしたい

### 発生している問題・エラーメッセージ
this.props.history.push(’ページ名’);
を使っており、指定したページへ遷移するのですが、リロードされた状態にて遷移されていないようです。
※遷移元のページにて登録したデータが存在しないため

Header.jsの「this.props.location('/DiaryFeed');」にて画面遷移を実施している。
DairyFeed.jsは、呼び出された時点で「const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);」が実行される認識ですが、実行されていないため、遷移元のページにて登録したデータが存在しないのかと思います。

リロード(DairyFeed.jsのみ)して画面遷移させる方法を教えていただけないでしょうか？
もしくは、別の方法があれば教えてください。

### 該当のソースコード

```JavaScript
// Header.js
import React, { Component } from 'react';
import {
    AppBar, 
    Drawer,
    MenuItem,
    Divider,
    FlatButton,
    Avatar,
    Chip
    } from 'material-ui';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';

import * as appConst from '../constans/appConst';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            drawerOpenFlg: false,
        };
    }
    // ハンバーガーアイコンボタン押下イベントハンドラー
    onBtnLeftIconClick = () => {
        this.setState({ drawerOpenFlg: !this.state.drawerOpenFlg });
    };
    // メニューボタン押下イベントハンドラー
    onBtnMenuItem = (componentName) => {
        this.setState({ drawerOpenFlg: false });

        // 画面遷移　★★ここの部分です★★
        switch (componentName) {
            // 日報フィード画面へ遷移
            case appConst.COMPONENT_NAME.DIARYFEED:
                this.props.history.push(appConst.PAGES.DIARYFEED);
                break;
            // マイページ画面へ遷移
            case appConst.COMPONENT_NAME.MYPAGE:
                this.props.history.push(appConst.PAGES.MYPAGE);
                break;
            default:
                break;
        }
    };
    // ログアウトボタン押下イベントハンドラー
    onBtnRightIconClick = () => {
        const userInfo = {
            id: '',
            email: ''
        };
        return this.props.fncSaveUserData(userInfo);
    };
    componentDidMount() {
    }
    render() {
        const emailAddress = this.props.emailAddress;
        let avatarChar = '';
        if (emailAddress) {
            avatarChar = emailAddress.slice(0,1).toUpperCase();
        }
        return (
            <div>
                {this.props.userId ? (
                    <AppBar
                        title="No DiaryReport No Life"
                        titleStyle={{ textAlign: "left", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }}
                        onLeftIconButtonClick={this.onBtnLeftIconClick}
                        iconElementRight={
                            <div style={{ display: 'inline-block', verticalAlign: "top", whiteSpace: "nowrap" }}>
                                <Link to="/Login" style={{ textDecoration: "none" }}>
                                    <FlatButton label="ログアウト" labelStyle={{ fontWeight: "bold", color: "#fff", verticalAlign: "text-top" }} />
                                </Link>
                                <Chip
                                    style={{ margin: "4px", display: "inline-block", verticalAlign: "-webkit-baseline-middle" }}
                                >
                                    <Avatar
                                        size={32}
                                    >
                                        {avatarChar}
                                    </Avatar>
                                    {emailAddress}
                                </Chip>
                            </div>
                        }
                        onRightIconButtonClick={this.onBtnRightIconClick}
                        style={{position: "fixed"}}
                    />
                ) : (
                    <AppBar
                        title="No DiaryReport No Life"
                        titleStyle={{ textAlign: "center", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }}
                        showMenuIconButton={false}
                        style={{position: "fixed"}}
                    />
                )}

                <Drawer
                    docked={false}
                    width={180}
                    open={this.state.drawerOpenFlg}
                    onRequestChange={(drawerOpenFlg) => this.setState({drawerOpenFlg})}
                    containerStyle={{ backgroundColor: "#212121" }}
                    zDepth={5}
                >
                    <p style={{ width: "180px", textAlign: "center", color: "#fff" }}>Menu</p>
                    <Divider style={{ backgroundColor: "#C8C8C8", marginTop: "5px", marginBottom: "5px", height: "1px" }} />
                    {/* <Link to="/DiaryFeed" style={{ textDecoration: "none" }}> */}
                        <MenuItem
                            style={{ color: "#fff", fontSize: "14px", textAlign: "center" }}
                            onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.DIARYFEED) }
                        >
                        日報フィード
                        </MenuItem>
                    {/* </Link>
                    <Link to="/MyPage" style={{ textDecoration: "none" }}> */}
                        <MenuItem
                            style={{ color: "#fff", fontSize: "14px", textAlign: "center" }}
                            onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.MYPAGE) }
                        >
                        マイページ
                        </MenuItem>
                    {/* </Link> */}
                </Drawer>
            </div>
        );
    }
}

export default withRouter(Header);
```

```JavaScript
// appConst.js
// ページ定義
export const PAGES = {
    LOGIN: "/Login",
    MYPAGE: "/MyPage",
    DIARYFEED: "/DiaryFeed",
    ERROR: "/Error",
};

// コンポーネント名
export const COMPONENT_NAME = {
    MYPAGE: "MyPage",
    DIARYFEED: "DiaryFeed",
};
```

```JavaScript
// DairyFeed.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import PropTypes from 'prop-types';
import { VelocityTransitionGroup } from 'velocity-react';

import * as appConst from '../constans/appConst';
import DiaryFeedItem from './DiaryFeedItem';
import Loading from './Loading';
import DiaryFeedItemNone from './DiaryFeedItemNone';

class DiaryFeed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loadingFlg: true,
            displayContentFlg: false,
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ 
                loadingFlg: false,
                displayContentFlg: true
            })
        }, 1500);
    }
    render() {
        let gqlRet = '';
        // Graphcool接続エラー処理
        if (this.props.data.error) {
            console.log(this.props.data.error.message);
        }
        console.log(this.props);
        return (
            <div style={{ paddingTop: "50px", paddingLeft: "20px", paddingRight: "20px" }}>
                {this.state.displayContentFlg ?
                    <div>
                        {gqlRet}
                        <div style={{ paddingBottom: "50px" }}>
                            {this.props.data.allDiaryReports.length > 0 ?
                                this.props.data.allDiaryReports.map(diaryFeed => (
                                    <DiaryFeedItem key={diaryFeed.id} item={diaryFeed} userId={this.props.userId} />)) :
                                        <DiaryFeedItemNone /> 
                            }
                        </div>
                    </div>
                :
                undefined
                }
            </div>
        );
    }
}

// 全ユーザ日報一覧取得クエリ生成
export const ALL_DIARY_REPORTS = gql`
    query GetAllDiaryReports {
        allDiaryReports(orderBy: createdAt_DESC) {
            id
            title
            description
            likecount
            author {
                email
            }
            createdAt
            comments(orderBy: createdAt_ASC) {
                id
                createdAt
                commentdesc
                author {
                    email
                }
            }
        }
    }
`;

// プロパティ宣言
DiaryFeed.propTypes = {
    data: PropTypes.shape({
        loading: PropTypes.bool,
        error: PropTypes.object,
        allDiaryReports: PropTypes.array
    }).isRequired
};

const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);

export default DiaryReportFeedData;
```