慢性疲労を治すために耳鼻科で鼻から棒を入れてツンツンした話 - 慢性疲労と上咽頭炎、EAT治療について
前回は慢性疲労を治療するためにどのような検査をしたのかを書きました。
分子栄養学の先生との初回の診断の時に、慢性上咽頭炎の疑いがあると言われて、「紹介状を書くので耳鼻科で診察してみてください」と言われました。
慢性上咽頭炎とEAT治療(Bスポット治療)
EAT治療は喉の奥の上の方が慢性的に炎症していると慢性疲労や自律神経失調の原因になりえるので、鼻の奥をゴシゴシ擦って治療するというものです。 何おかしなことを言ってるんだ。と思うかもしれません。（僕も最初そう思いました。)
鼻の奥をゴシゴシ擦ると慢性疲労や自律神経失調の治療になると聞いて、「やばい民間療法なのかな」と思ったのですが、なんとEAT治療は保険が効きます。IgA腎症という腎臓の病気の治療にも保険適用で用いられています。
上咽頭が炎症しているとその裏を通る、迷走神経？自律神経？も影響を受けて自律神経失調や慢性疲労につながるらしいです。 このリンクが詳しいです。
耳鼻科の先生には凄く痛いことと、必ずしも慢性疲労が改善するわけではないことは念を押されました。
実際に治療してみた
鼻からカメラを通して上咽頭を見てみると腫れが確認されました。
そのままもう片方の鼻から棒を入れてツンツンが開始。
痛いとは聞いてましたが、想像以上に超痛い(泣)。炎症があったのですごい血がでました。カメラの映像で喉の奥からドバドバ血が出てるのを傍目で見ながら、先生は「えい！えい！」と、陽気に攻めてきます。
地獄のような治療なのですが、家に帰るとすごい調子が良いことに気がつきました。表現が難しいのですが、頭がクリアになって、頭と胴体がちゃんとつながっているような感覚です。ブレインフォグに良いのかもしれません。
ただ、数回通っても出血が止まらず、先生に「終わりが見えない。。。」と言われたときは絶望しました。。
結局7回目くらいから突いても出血しなくなり、痛みもかなり少なくなっていき、10回くらいで治療が完了しました。
慢性上咽頭炎の原因と対策
なぜ慢性上咽頭炎になるのかと先生に聞いたところ、大きな原因の1つは口呼吸だと教えてくれました。
今、僕は上咽頭炎を繰り返さないために、
- 寝る時に口テープを貼る
- 寝る前に鼻うがいをする をやっています。
病院の先生には”あによべ体操”をおすすめされました。
鼻うがいはハナノアを使っていますが、自己流でGSE(グレープフルーツ種子エキス)を2滴入れて抗菌力を高めています。
![[ 小林製薬 ] 鼻うがい ハナノア 【 花粉 や 鼻炎 などの 鼻詰まり に! 】 はなうがい 鼻洗浄 はなうがい洗浄液 鼻 うがい 詰め替え はなのあ (鼻洗浄器 + 洗浄液 /500ｍl)](https://m.media-amazon.com/images/I/41WObyDVUEL._SL500_.jpg "[ 小林製薬 ] 鼻うがい ハナノア 【 花粉 や 鼻炎 などの 鼻詰まり に! 】 はなうがい 鼻洗浄 はなうがい洗浄液 鼻 うがい 詰め替え はなのあ (鼻洗浄器 + 洗浄液 /500ｍl)")
GSEはiHerbの方がお得です。 NutriBiotic, ビーガンGSEグレープフルーツ種子エキス、濃縮液、118ml（4液量オンス）
一説によると、新型コロナの後遺症の倦怠感などは、上咽頭炎が残ってしまうのが原因ではないかとも言われていますね。 コロナウイルスが上咽頭で異常繁殖した結果、慢性的な上咽頭炎となり自律神経失調や倦怠感につながるという説です。
- 喉のイガイガ感や喉が痛くなりやすい
- 後鼻漏(鼻水が喉に降りてくる)がある
- 慢性疲労がある
- 自律神経失調
にの多くに該当する人は、近くでEAT治療ができる耳鼻科を探して治療してみるといいかもしれません。
保険適用で低コストなのですごいおすすめです！
ただ地獄の痛みですがw
次は炎症の抑え方について説明しようと思いますー
分子栄養学の病院に行って慢性疲労を治した話
慢性疲労で7年前くらいからずっと悩んでいて、色々試行錯誤していました。 年々健康にはなっているものの、ほんの少しずつしか良くならなかったので、2年くらい前に思い切って有名な分子栄養学(オーソモレキュラー)の病院で色々検査して、治療・生活改善をしたところ、半年程度でかなり体調が良くなりました！
- 検査内容・結果
- 治療や指導の内容
などを実際のデータを見ながら紹介しようと思います。
慢性疲労(副腎疲労)とは？
副腎疲労は主にストレスと食事バランスの不良、体内の炎症がきっかけで疲労をもたらす病態です。他に疲れやすい、立ちくらみ、何をしても楽しくないなどの症状が出ます。腹部膨満感、睡眠障害、筋肉痛、うつなどもよく見られる症状です。
副腎は両側の腎臓の上に位置する直径３cmほどのピラミッド型の臓器で、脳からの指令に応じて様々なホルモンを分泌し、生体を維持しています。長年のストレスで脳の反応が弱ってくると副腎を働かせるホルモンが出せなくなってくるために発症します。
副腎疲労対策「自分でやれること」と「病院でしてもらうこと」｜宮澤病院
このように疲労感がずっと続き、やる気が出なく疲れやすい状態が続くことです。 副腎の機能が低下してしまい、アドレナリンやドーパミンなどのホルモンが減少してしまい、疲労感が抜けない状態です。
いざ病院へ
病院では先生ごとに値段が違っていたのですが、せっかくなので一番有名な先生にお願いしました。
こういうのは値段以上にレベルが変化すると思ってるのでケチらない方が良いと思ってます。
先生によると、副腎疲労の主な原因は
- ストレス
- 低血糖(血糖値スパイク)
- 炎症
だそうです。 まずは検査をして今の体の状態を把握して、結果に応じて対策をするという流れでした。
今までは自分の症状から腸内環境が悪いのではないかとか、あのビタミンが足りてないのか？など仮説をたててトライ＆エラーを繰り返していたのですが、正直効率はかなり悪いものでした。 サプリや体質改善は効果を感じるまで時間がかかるし、何かを試している時に他の要因で体調が変化したら誤った判断を下してしまうためです。
今回の通院してみて、ちゃんと検査で体の状態を把握する大切さを痛感しました。
検査内容
という検査を行いました。
便中カルプロテクチン検査は炎症度合いを調べる検査で、コルチゾール検査は副腎がどの程度働いているのかを検査です。 あとは血液検査や有機酸検査で体内の状態を調べました。
検査結果
コルチゾール検査
コルチゾールは本当は朝に一番分泌されるのですが、僕は基準値の半分程度しかでていませんでした。
僕が朝起きられない原因は、朝にコルチゾールが分泌されないので、ドーパミンなどの体を覚醒させるホルモンが分泌されず、なかなか朝に起きられないという事でした。
朝から4時間くらいまで全然副腎が働いていません。
これで副腎疲労が確定しました。
有機酸検査
有機酸検査というのが、なかなか面白くて体内で様々な代謝がされる時に尿にでる物質を検査することで、体の状態をかなり詳しく知る事ができます。
僕の場合、カンジダ菌の異常繁殖が見つかりました。あんなに頑張ったのに(泣)
こんな感じでカンジダ菌のマーカーが振り切れてます。
細かいところだと、クレブス回路がうまく動いていなくて、ミトコンドリアがちゃんと働いていないとか、重金属や農薬などの化学物質汚染の可能性を示唆するものもありました。 あと、ビタミンCとB6が足りないみたいでした。 これは普段サプリでとってましたが、検査の3日前からサプリを使わないようにしていたためです。
便中カルプロテクチン検査
これは問題なし！ 腸に炎症は見られませんでした。
普段から乳酸菌や青汁を飲んでいたのが良かったのかも。 今は青汁の値段が倍くらいになっちゃって飲めてないけど。。。って今見たら7千円超えてるじゃん！4千円くらいだったのに。。。
California Gold Nutrition, LactoBif プロバイオティクス、300億CFU、ベジカプセル60粒
Paradise Herbs, ORAC-Energy（ORAC-エナジー）グリーンズ、364g（12.8オンス）
まとめ
というわけで、検査で体の状態がだいぶわかりました。
- 副腎の機能が低下している
- 低血糖(血糖値スパイク)がある
- これは自分でフリースタイルリブレ使って把握してた
- カンジダ菌が繁殖している
- カンジダ菌は常在菌なのでいるのは問題ないが、全体の1パーセント程度に抑えるのが良いらしい。僕は数字てきに5パーセントくらいいそうとのこと。
- 重金属か化学物質の暴露の可能性
あたりが見えてきました。
次回から治療内容を見ていこうと思います。
ブログを再開しようかなと思います
3,4年ほど放置したこのブログですが、ここ数年の私生活のバタバタが少し解消されて余裕が出てきたので、また再開しようかなと思います。
みなさんの役に立てそうな知見や経験もだいぶ溜まったし、仕事や子育てでだいぶ翻弄されてるのでアドバイスも欲しいこの頃。
ここ最近のトピック
↑の経験を通して伝えたい事が結構あるので、ちょこちょこ書いていければなと思っています。
子供が不登校になって妻がノイローゼで鬱気味になったりと家庭の危機だったのですが、現在は引越しなども含めて好転して、週に3,4日程度は登校できてるし、妻と娘の鬱っぽさもだいぶ良くなり一安心。
不登校や発達障害については母側のブログはだいぶあるが、父側のブログは全然ないので、別視点でのナレッジのシェアができるかもしれません。
技術的なことはgithubやqiitaなど、どこに書いた方がよいのかちょっと迷ってます。 会社員とフリーランスの比較や感想みたいな、細かい技術の話じゃないやつはここに書こうと思ってます。
ブログの全盛期が過ぎ、youtubeが大ブームな今。どのメディアで発信するべきか悩ましかったです。 僕も流行りのyoutuberになって「ドウモ、ユックリ魔理沙ダゼ」と言うべきか迷ったのですが、結局何かを"本気で"調べる場合テキストで調べるので、今までより濃度を少し上げて、本当に困っている人や、生活をより良くしたいと思っている人向けに微力ながら経験をシェアできればなと意気込んております。
ぼくのかんがえたさいきょうのリモートワーク環境
肩こり、腰痛、腱鞘炎、ひざ痛。
普段PCで作業する人は悩んでいる人が多いと思います。
僕は上記の全てをコンプリートしています。
以前から負担の少ない作業の姿勢を日夜研究し、最近ヤケクソ気味にグッズを買いまくって、納得の環境になってきたので公開したいと思います。
こんな感じです。 (ちょっと散らかってる。。。)
職場のデスクでゴリゴリのフル装備にすると人目が気になる人も、家なら安心。気軽にお試しください。
セパレートキーボード
おすすめ度: ★★★★★
左右に分離してるセパレートキーボードはマストアイテムです。肩こりと腱鞘炎の症状を激減します。
分離してないキーボードは肩を丸めて打たないといけないので常に肩と首に負担がかかります。
- 左右に分割できること
- チルト(傾け)できること
が必須項目です。
僕はこれを使ってます。
結構良いです。
FK403Q Matias Ergo Pro for Mac 有線キ-ボ-ド 英語配列
- メディア: Personal Computers
ただ、すぐにチャタリングするので接点復活剤が必要です。
- メディア: Tools & Hardware
少ーし傾けたいので、目薬とかペンを挟んでチルトさせてます。
"小さく前にならえ"をして、小指が左右の各キーボードの中央にくる位置が良いと思います。
完全分離は敷居が高いという人はこれで慣らすと良いと思います。
マイクロソフト キーボード ワイヤレス/人間工学デザイン Sculpt Ergonomic Keyboard for Business USB Port 5KV-00006
- 発売日: 2013/09/27
- メディア: Personal Computers
僕も使ってましたが、そのうち物足りなくなると思います。
完全分離と違って、手首の負担が減って腱鞘炎にはよいですが、肩こりへの効果は少ないです。
アームレスト
おすすめ度: ★★★★★
アームレストも結構重要です。
アームレストを使うと首の負担が大きく減ります。
首のストレスが減ると眼精疲労も軽くなるし疲労感が凄い減るので重要です。
アームレストには椅子についているような固定式タイプを思い浮かべると思いますが、おすすめは可動式です。
僕はエルゴレストというものを買いました。
軽くて腕の動きに合わせてウネウネ動くので、良い感じにサポートしてくれます。
仕事後の首コリが激減しました。職場に持っていきやすいのが良いです。
日本の代理店はクレカが使えなくて銀行振込で不安でしたが、すぐ発送されました。
PC用メガネ
おすすめ度: ★★★★★
眼精疲労に悩んでいるなら、まずPC用のメガネを買うべきです。
おすすめはドイツ式検眼ができるところで、近くを見るのに特化した調整をしてもらうことです。
もちろんブルーライトカットで。
人間は近くを見るときに目の筋肉を使うように出来てるので近くのものを見続けることは苦手です。
それをメガネで遠くを見る目の使い方で近くが見れるようにすると眼精疲労が激減します。
詳しくは、
watanabi.hatenablog.com
the TOMBO
おすすめ度 : ★★★★★
完全にキワモノだと思ってノリで買ったら思いの外良くて関心しました。と、いうかメチャクチャ良いです。
足をブランコみたいなのに乗せると、デスクに座りながら無意識に足を動かしてしまう商品です。
一日使うとウォーキング30分の運動量になり、足をゆさゆさしてると冷え性予防や姿勢を正す効果もあるようです。
椅子の高さは机の高さに合わせるので、正しい椅子の高さにすると多くの人はフットレストが必要になります。
僕はフットレストの代わりにthe TOMBOを使ってます。
これが思いの他、無意識で動きます。動きの何パターンかを体が覚えると、そのうち無意識でローテーションしだします。
リモートワークと相性が良くて、ビデオ会議連発で辟易してるときに、足もとでTOMBOをぶん回すとストレス解消になります。
- メディア: その他
座りすぎによるひざ痛予防に良さそうです。
マウス
おすすめ度: ★★★
僕はこれを使ってます。
かなり良いです。
- 発売日: 2017/09/22
- メディア: Personal Computers
ただ、セパレートキーボードだとベストポジションにキーボードがいて、マウスを使うと腕に負担がかかって少し嫌です。
解決すべく指輪型のマウスを買ったりしましたが、正直金をドブに捨てたようなものでして、今はマウスの高さをマンガで調整して落ち着いています。
Paperlike Pro（E-inkディスプレイ）
おすすめ度：★★
Paperlike Pro touchを清水から飛び降りる覚悟で買いましたが、正直微妙です。
ただ、眼精疲労対策に発光するLEDディスプレイから反射型の電子ペーパーのディスプレイにすることは確実にかなりの効果があります。
まず、セッティングがシビア過ぎます。
満足のいくコントラストと書き換え速度の組み合わせを見つけないといけないし、PCの画面を暖色系にしている(常にナイトシフトを有効にしてる)と白が白でなくなるので、Paperlike側の表示が見にくくなります。
応答性などはシビアに追い込んだ設定なら満足できます。(これは凄い)
フロントライトなしバージョンを買いましたが、今はフロントライトありがあるので、そっちが絶対によいです。ライトもコントラストに凄い影響してセッティングが大変です。
ただ、E-inkの技術動向を追ってるのですが、今年にカラーの電子ペーパーが実用化されるので絶対にカラーのを待ったほうが良いです。
来年頃には出てるかもしれません。
もしくは有機ELのディスプレイにするべきです。
有機ELはLEDと違ってブルーライトも少なく、ギラツキも少なくて黒を背景にしたときに発光しないなどLEDよりかなり目に優しいです。
ただ、今は高いのしかないんですよね。。。
目への負担は
電子ペーパー >>有機EL(黒背景) >>>>LED(黒背景)
と、いった感想。
眼精疲労が酷すぎてあと1,2年待てない人は買いだと思います。
ちなみにディスプレイの高さは、ディスプレイの上側が目線と同じくらいが理想です。
同じ体勢を続けない(立って仕事する)
おすすめ度: ★★★★★
いくら負担が少ないからと言って、同じ姿勢を続けるのは体に良くないです。
負荷分散の意味でも、いくつかの姿勢のパターンを用意したほうが良いです。
体を"固定"をすると体が固くなっていきます。
座りすぎは寿命を縮める研究結果も出てるので注意です。
今は立ちと座りを半々くらいにしています。
立つときは適当にテーブルにダンボールとか載せたり、棚の上にPCをおいて作業すれば良いと思います。
今のリモート環境は気兼ねなくスタンディングデスクにチャレンジできる良い機会だと思います！
ノートPCのキーボードは手首が辛いのでこれを使ってます。
オウルテック Bluetooth 折りたたみ式エルゴノミクスキーボード 英語配列64キー 専用ケース兼スタンド付属 ブラック 1年保証 OWL-BTKB6402-BKAMZ
- 発売日: 2017/01/29
- メディア: エレクトロニクス
立ちと座りの2パターンに加えてバランスボールにも挑戦しようと考えてます。
ベランダで仕事する
おすすめ度: ★★★★
ベランダからの景色が良い場合はベランダで仕事をしましょう。
現代人は日光に当たらなさすぎです。
日光にあたると免疫力に関係するビタミンDが作られるので、肌が赤くならない程度の時間ベランダで作業してます。
外から見えないなら半袖や上半身裸でやれば効率良いです。
日光にあたると結構な量のビタミンDが作られるので積極的に。
ちなみにガラス越しに日光を浴びてもビタミンDは作られません。日焼けはするけど。
今の状況は免疫力高めたほうが良いので、沢山日光を浴びましょう。
ベランダで仕事できるのはリモートワークの醍醐味でしょう。
お昼を有効活用する
おすすめ度: ★★★★★
お昼の時間にランニングをしたり有効に活用しましょう。
週に2回お昼に30分走るだけでも、かなり健康になります。
リモートワークなら走ったあとシャワーを浴びたりできるので、お昼の時間は積極的に運動したいですね。
あとは、お昼は家族とご飯を食べたりできるのもいいですね。
近くに良い公園があるなら、家族でシートを敷いて弁当を食べに行くのも良い気分転換になります。
場所次第では1時間で食べて帰れます。
もちろん、同居人以外との接触は気をつけてください。
リモートワーク環境を充実させて、リア充ならぬ"リモ充"を目指しましょう！
血糖値スパイク、ダメ絶対！
血糖値の乱高下は体に負担がかかるし副腎疲労原因になるので避けなくてはいけません。
最近は糖質を少なくしているのですが、減らしすぎると健康に悪いし、取りすぎるのも良くない。
いったいどのくらいに制限するべきなのか良く分からないので測定してみることにしました。
計測機器は大きく2つあって、
針で血を出して計測型
針で指に刺して、出た血を使って計測する
4千円くらい常時モニタリング型 常時血糖値を計測出来る機械を腕などにつけて、計測する。
→2週間くらい計測可能。
センサー7000円、モニター7000円くらい
フリースタイルリブレリーダー（読取装置）FreeStyleLibre
- 出版社/メーカー: Abbott
- メディア: ヘルスケア&ケア用品
- この商品を含むブログ (1件) を見る
- 出版社/メーカー: Abbott
- メディア: ヘルスケア&ケア用品
- この商品を含むブログ (1件) を見る
今回はケチって針で血を出して計測するやつを買いました。
空腹時血糖と食後30,60,90,...180分後の血糖値を測定しました。 副腎疲労で病院に行くと75g経口ブドウ糖負荷試験をして血糖値が乱高下してないか確認したりするようです。
診断のための検査-検査値 ｜ 糖尿病がよくわかるDM TOWN
計測してみる
色々計測してみたら、どうやら僕の場合は30分後と120分後に測っとけば良さそうでした。
糖質を控えめにしていた時は何を食べたら血糖値スパイクするんだ状態だったのですが、旅行でビュッフェ三昧をして帰ってきてから測ったら、ご飯を半膳とおっとっとを食べただけで175まであがって2時間立っても下がらなかったので流石に焦りました。
すぐさま30分ウォーキングしたら110くらいまで下がったので一安心でしたが、糖尿病予備群の数字ですね。。。
調子が良いときはわざとラーメンとアイスを食べても120くらいで済んでたのですが、その日に沢山食べた時とかは血糖値が150超えたりしますね。
次の日にジョギングをしたら、ご飯を食べてもスパイクしなくなったので、定期的に運動をして、体内のグリコーゲンを消費しておかないとだめですね。。 5月くらいに体調を崩してから運動ができてなかったので、それが影響してるかもしれません。
僕の場合小麦より米の方が血糖値が上がりやすかったのですが、小麦は控えてるので悩ましいところ。
これで安易に「糖質は悪なので徹底的に制限だ！」とはしたくなくて、一般的に適切な糖質量はカロリーの30-50%なのでそれを守りつつ、運動をして血糖値スパイクを防ぎたい。
血糖値と慢性疲労についてもっと知りたい場合は、この本が詳しかったです。
疲労も肥満も「隠れ低血糖」が原因だった! (「肉から食べる」と超健康になる)
- 作者: 溝口徹
- 出版社/メーカー: マキノ出版
- 発売日: 2017/03/15
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
最近の副腎疲労対策
以前、副腎疲労対策をして効果があったので内容をまとめました。
完全に直ったと思ってサプリもやめて調子に乗っていてら、2ヶ月前くらいに偏頭痛とともに重い疲労感が再発したので、色々なサプリを試して効果を再度検証しました。 マグネシウムや亜鉛、ビタミンDなどは毎日ずっと飲んでいたのですが、それだけでは駄目だったようです。
副腎疲労に効果があったサプリ
副腎皮質
ダイレクトに副腎皮質の物質を摂取することで、コルチゾールなどの分泌を助けることができます。 副腎疲労っぽい疲労感がある時や、偏頭痛の前兆がある時に飲むと明らかに効果があります。
以前は調子が良いので運動などを張り切りすぎると、そのうち回復してきた副腎がまたパンクして体調を崩すというサイクルを繰り返していたのですが、 これを飲むと結構無理が効くようになってます。
Thorne Research, アドレナル コーテックス, 60 ベジキャップス - iHerb.com
ビタミンB
これも結構効果を感じます。 ビタミンBはストレスで消費されますし、副腎疲労対策では鉄板のアイテム。 最近はマルチビタミンを飲んでいるので、疲労感がある時だけ飲みます。
ただ、副腎皮質と違って効果がないときもある。
Thorne Research, ストレス B-複合体, 60 ベジカプセル - iHerb.com
コエンザイムQ10
副腎疲労に効果があると言われています。
疲労感がある時に飲むと効く時があります。 その時はコエンザイムQ10が枯渇したんだと思います。
California Gold Nutrition, コエンザイムQ10、100mg、植物性ソフトジェル30粒 - iHerb.com
タウリン
なぜか僕には偏頭痛に効果があります。 偏頭痛の前兆がある時や疲労感がある時に飲むと良くなります。
California Gold Nutrition, L-タウリン、1000 mg、60ベジカプセル - iHerb.com
最近の過ごし方
僕の場合、副腎皮質はよく効くので毎朝飲んでいます。 他のビタミンB、コエンザイムQ10、タウリンは激しい運動をした日と、疲労感が強い時に飲んでいます。
疲労感があるときは、日によって何かしらの栄養が枯渇している可能性があるんだと思いますが、今のところビタミンB、コエンザイムQ10、タウリンの3つを飲めば大抵の疲労感は抜けています。 あとは偏頭痛の予兆もセットだと、喉が異様に乾くのでOS1やポカリなどを沢山飲むと早く良くなります。
あと、最近は週3-4回の運動を心がけていて、一月くらい続いてますが体調も崩れずに良い感じです。 スーパー銭湯まで帰宅ランするのがマイブーム。
食事はボーンブロスと干し芋にハマってます。
毎年花粉症とともに体調を崩すので、7-8月まで好調をキープできればだいたい克服な気がします。 調子に乗ってるとすぐに体調を崩すので気をつけないと。
ちなみに、花粉症には抗ヒスタミン作用があるケセルチン(玉ねぎの皮の成分)が良い感じ。
Now Foods, ブロメライン入りケルセチン、120野菜カプセル - iHerb.com
干しいも美味しい。 色々試した結果、これが一番好き。
- 出版社/メーカー: 丸成商事株式会社
- メディア: その他
- この商品を含むブログを見る
そこそこ大きいNext.jsのプロジェクトにTyepeScriptを導入した話
最近、そこそこ大きいNext.jsのプロジェクトをJavascriptからTypeScriptに変更する対応をしました。 最近は健康系のエントリーばかり書いてましたが、自分がエンジニアだったことをふと思い出したのと、あまりwebにTypescript系の情報がなかったので、やったことをまとめておきます。
罠とか後悔ポイントもあったので、JSからTSに移行したいと思ってる人には参考になる点があると思います。
基本情報・構成
かなりメジャーなECサイトで、フロントエンドは10数人います。
主な構成
- React.js
- Mobx
- Next.js
- Jest(罠多め)
- Storybook
対応内容
やることは大きく4つ
GitHub - deptno/next.js-typescript-starter-kit: Next@7, Styled-jsx, TypeScript, Jest, SEO
これが今回やった設定とかなり似ています。
Next.js
公式の通りに@zeit/next-typescriptを使って対応しました。
next-plugins/packages/next-typescript at master · zeit/next-plugins · GitHub
設定ファイルは基本的に公式の通り追加しました。
@zeit/next-typescriptはbabelを使ってトランスパイルしている模様。
つまり、ビルド時には型チェックが走りません。
＃型情報を落としているだけ
また、tscと比べていくつか使えない機能もあります。
Babel7 or TypeScript | ts-jest
ForkTsCheckerWebpackPluginを使えばトランスパイル時に型チェックできますが、使うかはパフォーマンスも面との兼ね合いだと思います。
現状、エディタの"PROBLEMS"のタブにエラーの箇所が出るので、コンパイル時にチャックしないでエディタに任せても良いとは思います。
VS Codeだとtsconfig.jsonの設定通りに"PROBLEMS"が表示されます。
＃ただ、どこかのタイミングでコンパイル時の型チェックを入れたい
ハマりポイント
謎の不親切なエラーメッセージがでました。
Module build failed (from ../node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
Error: .presets[0][1] must be an object, false, or undefined
nextでビルドしたら上記のエラーが出ていて、何が理由なのか分からず.babelrcを少しずつ削っていったら、
{
"preset-env": {
"modules": "commonjs"
}
}
の記載がアウトだった模様。
moduleシステムは基本的にES Modulesに統一しました。 しかしgulpとNext側からも呼ばれるJSファイルもあり(env系とか)、なかなかカオスに。
環境設定は以下のようなpluginで入れて、gulpのビルドスクリプトとnext.js上で動くアプリのコードを厳密に分割したほうが良かったかもしれません。
＃力尽きたのでそこまではやってません。
ソースコード修正
全てのjs(jsx)をtsとtsxにリネームしました。 git mvを使ってリネーム。 IDEとかでrenameすると、jsファイルを削除してからtsファイルを追加した扱いになるので、 他のブランチで並行して実装してるJSの内容がマージできなくなります。
再帰的にやるにはこんな感じ。
git - gitで複数のファイルを一括で移動またはリネームする方法を教えてください - スタック・オーバーフロー
型チェック
基本コンパイル時には走らずに、エディタにチェックを任せています。
＃違反したproblemの欄に警告が出る。
ライブラリの型情報は以下のようにnpmで取得します。
npm install --save @types/react
@typesで取得できない場合は、自前で.d.tsファイルを作るしかないです。
型チェックをすると6000くらいエラーが出るので、どのみちコンパイル時にチェックはできません。。。
これからみんなでコツコツとエラーを減らしていくしかないです。。。
コンパイルエラーの修正
基本的にはTSはJSの文法と互換性があるのですが、いくつかエラーになる箇所がありました。
import hoge from 'hoge.js';
みたいに.jsの拡張子をつけちゃってる部分。
あとは、require()を使っている部分をimportに変更。
思ったより普通に動きました。(next/dynamicとかも)
Jest
基本的にはJestの公式の通り進めて、問題があったら都度対処しました。
ここにきて、Next.jsはbabelでトランスパイルしてるのに、Jestのts-jestはtscでトランスパイルしている微妙な状態に気がつく。 ＃後戻りできないのでそのまま進めました。
tsの設定は、tsconfig.jest.jsonみたいにして、jest用のものを作りました。
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"jsx": "react",
"esModuleInterop": true,
}
}
ハマりポイント
Jestは結構エラーや使えなくなった機能がでました。
TSになって、モジュールロードの仕組み変わったため、いくつか影響が出ました。 jest.mock('moduleName')でモジュールの関数をすべてmockにするやり方が使えなくなったり、rewireなどモジュールシステムに依存している機能は使えなくなっています。
あと、gulpでも呼ばれるenv系のjsを呼ぶためにtsconfig.jsonの設定が少し大変でした。
＃やっぱり時間をかけてでも統一したほうが良かったかもなー
テストコードってリフレクション的なのを使ったり力技になりがちですが、力技系は結構Typescript対応で駄目になってました。
jest.mock
jest.mock('moduleName')は
jest.mock('moduleName',()=>{
return {
hogeFunc:jest.fn()
}
});
のように明示的にモック化する関数などを指定する必要があります。 ＃公式のFAQでesModuleInteropの設定とかでjest.mock('moduleName')が使えると書いてあった気がしますが、僕の環境はいくら設定を見直しても駄目でした。
rewire
privateな変数にアクセスできるようにするrewireはTypescript対応によって、使用できなくなりました。
GitHub - jhnns/rewire: Easy monkey-patching for node.js unit tests
これはJavaでいうリフレクションでUTをやってるようなものなので、基本的にはテスト対象のコードの実装が良くないのが原因ですし、 あまり使用箇所も無かったのでrewire無しでテストできるようにコード書き直すようにしました。
他に起きたエラー
ReferenceError: React is not defined
import React from 'react';
せずに、jsx構文を使うと起きる
もしかしたらnextでは起きないで、jestだけで起きるかもしれません。 tsconfig.jsonの"jsx"オプションの違いかもしれない
storybook
https://storybook.js.org/configurations/typescript-config/
基本は公式通り設定
制限事項
propTypesの定義が見れなくなった。
TSでproptypes(interface)をstorybookで表示するためのライブラリがあるのですが、コンポーネントによって、表示されたりされなかったりで少し微妙だったので、外しました。
◯ extends React.component
X extends component(表示されない)
みたいに書き方を固定しないと駄目っぽかったり、Functional componentだと表示できないとか色々問題がありました。
設定ファイル
Storybook用の設定ファイルを作りました。
.babelrc(Storybook用)
webpack.config.js(Storybook用)
tsconfig.storybok.json
基本jestと同様tscのコンパイル(型チェックなしにしました)
今回の対応で残念だった点
トランスパイル方法がツールによって違う
公式の通り進めたら、Next.js(babel),Jest(tsc),Storybook(tsc)となった。。。
しかも、モジュールロードの設定も異なる
tsconfig.jsonの"module","jsx","esModuleInterop"が違います。
＃これは、JSのモジュールシステムがそもそもカオスなのでしょうがない
エラーの量が多すぎてコンパイル時に型チェックできない。
型チェックをすると6000くらいエラーになるので、コンパイル時のチェックを外すしかない状態に。
これではリファクタリングした時に、参照先の他のファイルでデグレってもエラーに埋もれます。
みんなでコツコツ型をつけていくしか無い。。。
もちろん、strictはfalseだし、設定は一番甘くしてます。
ただ、strictNullChecksだけは後から変えにくそうなので、trueにしておきました。
＃後からnullチェックを有効にしたら、型定義をもう一度書く羽目になるので
良かった点
コード補完が賢くなった！！！
変数のtypoとかが直ぐに分かる！！！
コードジャンプがちゃんと効くようになった。
＃前までうまく効いてなかった
moduleをES modulesに統一したのでtree shakingが効いてビルド後の容量が3割くらい減った。
静的型付き言語をやってきた人には当然の環境がやっと手に入りました。
これから、型情報やinterfaceを書いていけばもっと便利になりそう！
まとめ
動いているJSのコードをTSに変えるのはかなりの労力がいる作業でした。
2,3週間くらいかかりました。
1週目でconf周りが終わって、残りはJestのエラーの箇所をコツコツ修正する感じでした。
環境起因の深めのエラーが多いので原因の調査に凄い時間がかかりました。。。
- 公式通りにそれぞれTSを入れると、babelとtscが混在しちゃう罠がある
- module周りの挙動が変わるのが大変
commonJSとES modulesが混在してたら少し大変
Jestの対応はかなり大変 - 型定義が無いのでエラーであふれる →コツコツ型定義を入れるしか無い
ただ、TSを入れる価値はあると思います。
VSCodeが凄い賢くなりました。(ニッコリ)
