image (6)

image (10)

home

sddefault

hitomi

chill-2022-07-part1

ライブ

音楽

日記

First Love is Never Returnedを目当てにCounterblow vol.2 in TOKYOに行きました。
場所は下北沢にあるライブハウス、LIVE HOUSE(リブハウス)。

この日は下記のバンドが演奏しました。

・ DOUBLIVING
・ goethe
・ First Love is Never Returned
・ No.18

正直、このライブに行くまではFirst Love is Never Returned以外は知りませんでした。

札幌のバンド、あまりにも魅力がたっぷりすぎて書くつもりの無かったライブレポを書き残したいと思います。
この記事を通して札幌のバンドの魅力を少しでも伝えることができたなら、とても嬉しいです。

少し長くなるかもしれません。
出演順に感想を綴ります。

--

## DOUBLIVING

ドラムとベースは東京にいる友人？に出てもらっていたらしい。

下記は引用です。
  DOUBLIVING (読み : ダブリビング)とは、
多重録音を意味する<オーバーダビング> / ヨシダが好きな録音の手法くダブリング> / 音楽が生まれる場所<リビング>
を掛け組み合わせた造語。
図らずとも、 <二重生活> という意味も含んでいる。
音楽のジャンル/アレンジ/活動形態の垣根を越えて、
シンプルに 『音』 と 『言葉』 に向き合い、懐かしくも新しい音楽を届ける。
ヨシダが影響を受けた音楽ルーツを元に宅録を中心に作詞曲から演奏、 録音までひとりで音源制作を行う。

少なくとも、このライブ時点ではヨシダさんのソロプロジェクトのようですね。
作詞作曲全部担当しているなんてすごい。。

曲を聴いた感想なんですけど、熱量を感じるスリーピースバンドという印象でした。
本当にサポートメンバーで構成されたバンドか！？ってくらいに演奏のクオリティが高くて、初っ端から圧倒されてしまいました。
まだサブスクでは2曲しか公開していないらしく、ライブで演奏した楽曲のリリースがとても楽しみです。

そんなDOUBLIVINGの曲は下記リンクから聴けます
[https://www.tunecore.co.jp/artists/DOUBLIVING](https://www.tunecore.co.jp/artists/DOUBLIVING)

## goethe

今回のライブに参加して、goetheと出会えたことが一番の収穫だったと言っても過言では無いです。
R&Bやジャズ系のサウンドで、めちゃくちゃ私好みでした。

ライブなので当たり前ですが、大音量のはずなのにどこか心地よく、空間に馴染むようなサウンドでまるでオシャレなジャズバーにいるような気持ちになりました(オシャレなジャズバーなんて行ったことがない)

この時、氷が溶け切った薄くなったハイボールを飲んでいたのですが、恐ろしく上質なウィスキーになったのかと錯覚するくらいです。

それくらいお酒に合う曲だなと、これはほろ酔いのCMに抜擢されること間違い無しな雰囲気。

百聞は一見にしかず、とりあえずまず曲を聴いてみてください。
@[youtube](https://www.youtube.com/watch?v=S2D9fEaldbw)

@[youtube](https://www.youtube.com/watch?v=a1dI3beiCrg)

とても良いと思いませんか？

もう１つ推せるポイント、シャイなメンバーが多いのかMCで無言になる時間がありました。

渋谷のワンマンに行こうか悩み中・・・

## First Love is Never Returned

大本命です。
First Love is Never Returnedは今まで振り返り記事のプレイリストに入れてたり、何度か話題に上げていますが、再始動前から割と長い間ファンでした。

そしてこの度、ようやくライブに行く機会を得ることができました。

特徴としてはボーカルの声でしょうか、公式サイトには『他の追随を許さぬ「恋する歌声」を武器に、全方位型ポップミュージックを届ける。』と記載のある通り、その声は透明感に溢れ、耳をくすぐるような美しさがあります。

ライブで彼らの生演奏を目の当たりにし、率直に思ったことが一つ。それは、「なぜこのバンドはまだメジャーデビューしていないのか？」という疑問です。

彼らの1stミニアルバム『POP OUT!』を聴いた方ならきっと共感してくれるでしょう。その音楽はメジャーレベルにも劣ることなく、洗練された楽曲が収録されています。そして、ライブパフォーマンスの質がこれほど高いのであれば、彼らがなぜメジャーデビューを果たしていないのか、理解に苦しみます。。。
ただその日は近いでしょうね。今回のライブを通して、より大きな舞台で輝いている姿が想像できました。

また、彼らは"Twenty-Twenty"という曲を通して、コロナ禍が収束しライブが再び可能となった喜びを歌い上げています。
その歌声は、新しい時代の訪れと共に、再び音楽と共に生きる喜びを祝福するかのようです。

@[youtube](https://www.youtube.com/watch?v=yfQWVtwdtk4)

また東京でライブがあれば絶対に参加したいと感じる素晴らしいパフォーマンスでした！

## No.18

率直な感想、ビジュアルがめちゃくちゃに良いなと思いました。
こんなにも個性がバラバラなバンドはKing Gnuしか知らないです。

さて、私の趣味としてはラップ調の曲はゲスの極み乙女しか聴かないのですが、このライブを通してNo.18のファンになってしまいました。Twitterのアカウントをフォローしてしまうくらいに

初見の私が感じた彼らの魅力としては、メンバー個々人のパフォーマンスがカッコいいと感じたところですかね。
キーボードとギターも歌うし、しかも3人の声質が全く異なるので、ボーカルの切り替わりのタイミングで違うバンドに変わったのかと思うくらいのギャップを感じました。

私はギターの声が一番好きです。声もそうですけど、アンコールの時も疲れているお客さんを心配していちばん最初に出てきた人の良さにも惚れました。

@[youtube](https://www.youtube.com/watch?v=Ujne7g-tfPY&t=2s)

### 感想

ライブハウスでライブに参加したのはいつぶりだろうか・・・
最近はホールのライブばっかりで、ライブハウスのライブは本当に久しぶりでした。
それこそ最後に行ったのはコロナ以前だったかな？

それもあって、４バンド終わった時は脚がヤバいくらいに痛かったんですけど、それ以上にライブが楽しかったです。
上述している通り、First Love is Never Returnedのライブだけを目当てで参加した訳ですが、全てのバンドが素晴らしく輝いていて、札幌のバンドの可能性を感じました。
札幌の音楽シーンはこれからもっと盛り上がっていくんだろうなと思ってしまうほどの素晴らしいライブでした。

今回参加しているそれぞれのバンドは今後もライブの予定がたくさんあると思うので、気になっている人はぜひ行ってみてください、絶対に後悔することはないと断言できます。

東京で行われるgoetheのワンマンライブ行きたいな・・・


魅力たっぷり、札幌のバンドたち。

Counterblow vol.2 in TOKYOライブレポ

先週、瞳のアドリブがリリースされましたね。

@[youtube](https://www.youtube.com/watch?v=IlkbI3RXkNI)

聴いた感想としては、ライブで聴いたときと雰囲気が全く違っていたことです。

ライブレポートでも書きましたが、古き良きindigo la Endらしい疾走感のあるキャッチーな曲、という印象でしたが、音源で聴いてみると、その印象は覆りました。

むしろ、今風のindigo la End特有の哀愁が随所に散りばめられている、そんな曲でした。

非常にキャッチーでタイアップ曲のような印象ではなく、どちらかと言うともう少し奥深い印象を受けました。

それにしても、サビから始まる曲はかなり久しぶりな気がします。
そして疾走感あるギターフレーズは、新生活が始まる春にぴったりだなぁ、と思いますね。
イントロのギターは、少し『夜明けの街でサヨナラを』思い出します。

とは言え、夜行秘密までのindigo la Endとは曲調が明るくなったと言えます。

特に、名前は片想いと瞳のアドリブは、第一印象では明るいポップ寄りの楽曲です。

この2曲が収録される哀愁演劇は、どのようなアルバムになってしまうのだろうか、と感じざるを得ません。

哀愁演劇がリリースされるまでは頑張って生きようと思います。

瞳のアドリブを聴いて、哀愁演劇がとてつもなく楽しみになった件

川谷絵音が新たなバンド『PUNK3』を発表しましたね。

そのメンバーにシナリオアートのドラムボーカルのハットリクミコさんがドラムを担当されると聞き、久しぶりにシナリオアートの楽曲を聴いたらとても良かったので、記事にまとめたくなったのでまとめます。

この記事で書いている感想は私の独断と偏見です。

## 概要

シナリオアートとは、 ハヤシコウスケ（ギター・ボーカル）,ハットリクミコ（ドラムス・ボーカル）,ヤマシタタカヒサ（ベース・コーラス）で構成される3ピースバンドです。

来歴等は[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA%E3%82%A2%E3%83%BC%E3%83%88)を参照してください

私の印象は、声が綺麗な女性ボーカルと少し甘めの男性ボーカルな唯一無二なバンドというイメージです
スリーピースでドラムボーカルって結構珍しく無いですか？

で、曲もかなり聴きやすいんですよ。
最近のアルバムは全然追えてなかったんですけ、久しぶりに聞いても相変わらず良かったです

 ---

 ### アオイコドク

@[youtube](https://www.youtube.com/watch?v=hBBmwyUl25Y)

私が人にシナリオアートを勧めるなら絶対この曲から聴いてもらいます。
何を隠そう、私はこの曲でシナリオアートを知ったのです。

疾走感に満ちたフレーズと、ツインボーカルが織りなす魅惑的な掛け合いによって、初めて聞いた瞬間から心を奪われる魅力を感じました。

とりあえずこの曲はキャッチーで、今でも定期的に聴いている大好きな曲です。

---

### スペイシー

@[youtube](https://www.youtube.com/watch?v=k3_d3xPdhQ0)

世界観の表現がすごいなと感じた曲です。
物語を彷彿とさせる詩的な歌詞と、ドラマチックな曲構成が見事に調和し、ぜひ多くの人に聴いてほしい魅力溢れる一曲です。

---

### ホワイトレインコートマン 

@[youtube](https://www.youtube.com/watch?v=4YmvSDqIBUQ)

スペイシーと同じく、ストーリーテイストな楽曲ではありますが、ハヤシコウスケがメインボーカルとなっているため、雰囲気がガラッと変わります。

ホワイトレインコートマンは少し哀愁溢れるバッドエンドな歌詞なので好きです。
歌詞も含めて楽しめ曲なのでおすすめです。

---

### ナナヒツジ

@[youtube](https://www.youtube.com/watch?v=WBMR5UsFhHc)

かつて放送されていたアニメのタイアップ曲であり、シナリオアートが徐々に人気を集める中で、彼らの成長の寂しさを感じさせる楽曲です。

---

### ハローグッバイ

@[youtube](https://www.youtube.com/watch?v=sGPHbgqv7TM)

ハヤシコウスケが初の監督に挑戦したMV。

---

### アオノリビドー

@[youtube](https://www.youtube.com/watch?v=PTkPKTrYTvw)

惹きつけられるギターイントロです。
この記事を書いている段階では最新のアルバム『Blue Smell』では曲全体の完成度が上がっていて驚きました。

---

## Blue Smell

アオノリビドー以外は割と古めな曲が多かったです。
もし上記の曲を聴いてみて、シナリオアートが好きになった方は最新のアルバムを通して聴いてみてください。

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/78g76Sk7DVhByaj4kpJOw4?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

 ---

PUNK3がとても楽しみですが、シナリオアート単体でもっと売れて欲しい気持ちがありますね。
まだライブに行けてないので行きます。


はじめての シナリオアート

なんでだか分からないけど、スリーピースバンドがとても魅力に感じるんだよな〜

学生の時、凛として時雨を聴いた時に3人なのにこんなに厚みのある音楽が作れるんだ。。。っていう衝撃以来、意識して聴くようになった気がする。

個人的に思う素晴らしいスリーピースバンドをまとめる。

順番はてきとうです。

---

## 凛として時雨

最初に聴いて衝撃だった曲はこれ

@[youtube](https://www.youtube.com/watch?v=RSLvVK3Q3mo)

イントロの激しさと、疾走感がすごい

もちろん重ね録りはしているにしても、ギターの音圧が凄すぎる。。

---

@[youtube](https://www.youtube.com/watch?v=n-4SVb8ZoIU)

こっちの曲はかなり有名かもしれない。
初手のアルペジオでしっとりめの曲かと思いきや、激しめギターイントロ。

朝から聴くと頭がおかしくなってしまいそうなくらい激しい(褒め言葉)

---

## チャットモンチー

有名バンドが連続してしまった。

@[youtube](https://www.youtube.com/watch?v=t998uzTZYnQ)

サビのリズムが気持ち良い。

そしてこれ、高校生の時に通学で必ず聴いていた曲↓

@[youtube](https://www.youtube.com/watch?v=C17BZnrOzww)

懐かしい。

---

## おいしくるメロンパン

このバンドは人に勧める時に絶対鼻で笑われる。
バンド名でめちゃくちゃ損していると思われるバンド第1位

@[youtube](https://www.youtube.com/watch?v=VtqnjYMdCAQ)

春夏秋冬どの季節でもいけてしまうバンド

凛として時雨と対極の存在に感じる、優しが溢れる楽曲が多い。

この曲も疾走感があっておすすめ
@[youtube](https://www.youtube.com/watch?v=oGtAegraJvY&t=54s)

おいしくるメロンパンは大好きでライブにも何度か行っている
演奏力も高く、実力はなバンドだと思う。

バンド名がな。。。可愛くて良いけど人に勧める時にネタバンドだと思われてしまうのが残念

↓は肌寒い秋にぴったりな曲
@[youtube](https://www.youtube.com/watch?v=71narokpy1I)

---

## PELICAN FANCLUB

元々は4人構成だったが、ギターが抜けてスリーピースになったバンド。

@[youtube](https://www.youtube.com/watch?v=qvGSba0K_Y4)

独特な世界観があり、唯一無二な雰囲気を纏っている

@[youtube](https://www.youtube.com/watch?v=86idQWINUZA)

PELICAN FANCLUBの曲を聴くと何故か風邪をひいている時思い出す。
何故かはわからない。

曲の浮遊感？

ただ残念なのは、ベースとドラムが脱退してしまい、今はボーカルのソロになっている事(間違っていたらすみません。)

---

## Base Ball Bear

途中でギターが脱退してスリーピースになったバンドと言えば、ベボベも有名かな

@[youtube](https://www.youtube.com/watch?v=YtQEeSW72Nw)

何故かベボベの曲は青春を感じるものが多い気がする。

この曲も好き、特にMVが好き。
どんな場所で演奏してんねんという気持ち
@[youtube](https://www.youtube.com/watch?v=eDdFPRwzwPE)

---

## リュックと添い寝ごはん

元々スリーピースで最近ギターが1人加入したバンド
なのでスリーピースではないけど好きなので載せちゃう。

なんだろう、このバンドの全てが可愛い。

曲もメンバーのビジュアルもなんか良い。

ボーカルがすっごい中性的

@[youtube](https://www.youtube.com/watch?v=In5s-Xuqm18)

この曲本当に好き、とても平和で
@[youtube](https://www.youtube.com/watch?v=pcghuCRe9wg)

リュックと添い寝ごはんが大流行する平和な世界が訪れますように。


個人的に思う素晴らしいスリーピースバンド。
凛として時雨、チャットモンチー、おいしくるメロンパン、PELICAN FANCLUB、Base Ball Bear、リュックと添い寝ごはん

素晴らしいスリーピースバンド

なんかオシャレな大人が聴いてそうなバンドをまとめ

完全に偏見

## Kroi

### 熱海

@[youtube](https://www.youtube.com/watch?v=ZBTgZ2lwRD8)

MVも音楽もとてもハッピー

熱海行きたい

---

### risk

@[youtube](https://www.youtube.com/watch?v=h0C-uU6jfT0)

おしゃ

曲調に対してメンバーの髪色が明るすぎる

---

## Emerald

@[youtube](https://www.youtube.com/watch?v=WmpvDuerj_4)

Emeraldで一番好きな曲。

曲がいいだけではなく、MVに出てくる女性が綺麗すぎ

---

## グソクムズ

### すべからく通り雨

@[youtube](https://www.youtube.com/watch?v=TE-rqPUvyuM)

音楽好きの間で話題のバンド

めちゃくちゃかっこいい、個人的にはちょっとレトロさを感じる楽曲
2000年代感？

---

## LUCKY TAPES

### MOOD

@[youtube](https://www.youtube.com/watch?v=0cn1YTpDIUg)

どちらかというとオシャレな学生が聴いてそう

声が若いのオシャレでとても好き

---

## TENDRE

個人的に今一番オシャレだと思うバンド

[wiki](https://ja.wikipedia.org/wiki/TENDRE)いわく、ソロプロジェクトらしい

ライブに行きたい。

### DRAMA

@[youtube](https://www.youtube.com/watch?v=YUaZ1WMCt6U)

### HOPE

@[youtube](https://www.youtube.com/watch?v=Ul9EL6odqaI)

### LIFE

@[youtube](https://www.youtube.com/watch?v=bLihpQrIqDw)

イントロのワクワク感好き。

### AIM

@[youtube](https://www.youtube.com/watch?v=-LUyLy5cQl8)

車のCMに抜擢！！！！

---

## the band apart

渋い

悪い意味ではなく、メンバーの枯れ具合が良い、良く言えば熟成されている。最高

### DEKU NO BOY

@[youtube](https://www.youtube.com/watch?v=YLcxUapbgLk)

バンアパの曲で一番好き。

タイトルがイカしすぎている

### AVECOBE

@[youtube](https://www.youtube.com/watch?v=ZWRE2PpCy-w)

これも曲名がイカしすぎてる

イントロから気持ちが良くなる曲

### ピルグリム

@[youtube](https://www.youtube.com/watch?v=nba_DfNBQI0)

ノリノリになれる曲

### Eric.W

@[youtube](https://www.youtube.com/watch?v=zOjntswREw8)

生演奏のレベルの高さ。

サムネにデカイおっさん(原さん)が写っていて、バンアパを知らない人はクリックを躊躇してしまうかもしれない。

---

聴いてるだけでオシャレになった気分。

他にもオシャレなバンドを知っている方は、[DMで教えてください](https://twitter.com/s_k_1_9)。

Kroi、Emerald、グソクムズ、TENDRE、the band apart

オシャレな大人が聴いてそうなバンド

巷で話題のチルい系(死語？)音楽、僕が思うチルをまとめてみた。

自分の中でのチル系楽曲の定義は、夜中の11時くらいにお酒を飲みながら聴くと、しっとりしてしまう感じの曲です。

---

## Lucky Kilimanjaro

### 雨が降るなら踊ればいいじゃない

@[youtube](https://www.youtube.com/watch?v=Ubi_9fhKMys)

チルというか、おしゃれです。

梅雨明けしちゃってるけど、また雨の日が続いている今、ぴったりかも。

---

### 踊りの合図

@[youtube](https://www.youtube.com/watch?v=495p6AKZiAw)

チルどころか躍りたくなってしまう曲だった。

---

## Tensions

### それから

@[youtube](https://www.youtube.com/watch?v=58u2f0bsioQ)

高校生が作ったらしい。
信じられない

それくらい良い曲。TikTokで使われてそうな感じがする

---

### チョコレーション

@[youtube](https://www.youtube.com/watch?v=fpj4SROUBtQ)

チルとはちょっと違うかも？
でも良い曲

---

## クボタカイ

### 春に微熱

@[youtube](https://www.youtube.com/watch?v=yiWPfBYh9uI)

衝撃的なサムネイル。

この曲は定番かもしれない

お酒が入った状態でこの曲を聴くと、自然と横揺れしてしまう。

---

## 藤井 風

### 旅路

@[youtube](https://www.youtube.com/watch?v=29p8FvT_puU)

チルというか、エモというか、この記事内で紹介している楽曲とはちょっと毛色が違うかもしれない。
ピュアな曲である。

---

## キリンジ

### エイリアンズ

@[youtube](https://www.youtube.com/watch?v=w05Q_aZKkFw)

定番すぎた。
むしろ聴かなくていいくらい定番

チルい曲と言ったらファンに怒られてしまいそう

---

## 春野

僕の中でトップオブチルアーティストだと思っている。

全部の楽曲が良い、恐らくチル系に分類されると思われる。

本当は上がっているMV全て貼りたいが、とりあえず数曲をピックアップ

### Love Affair

@[youtube](https://www.youtube.com/watch?v=A6YGvdSr06k)

---

### Angels

@[youtube](https://www.youtube.com/watch?v=qF-KAGk6F2g)

イントロで違うなと感じた方、とりあえず聴いてみてほしい。
Bメロからサビまで聴いたら絶対にハマる。保証します。

---

### Drawl

@[youtube](https://www.youtube.com/watch?v=7Nl43_etElI)

歌い出しから1秒で好きになる曲。
恐ろしい曲です。

---

### MIST

@[youtube](https://www.youtube.com/watch?v=WnwjW8OLsOg)

ちょっと薄暗い部屋で、お酒を片手にこの曲をヘッドホンで聴いたら、そこは完全に自分だけの世界になります。
心が躍りすぎて、チルとかじゃないです。もはや

リズム、ギター、全部が好きすぎる。

---

## まとめ

書いてたら止まらなくなってきたのでここでやめます。

パート2も書きます。
まだまだまとめたい。

てか、チル系って[なんなんw](https://www.youtube.com/watch?v=Nt6ZwuVzOS4)。ほんとに

個人的チルい楽曲まとめ

IMG 1942

maxresdefault (1)

IMG 1802

IMG 2546

IMG 2096

IMG 2451

IMG 2503

IMG 1835

IMG 2308

映画

2024年10月振り返り

2024年9月振り返り

2024年8月振り返り

2024年7月振り返り

2024年6月振り返り

2024年5月振り返り

ZOZOでカートに入れていたパンツのセールが終わってた・・・

2024年4月振り返り

indigo la End 初の横浜アリーナライブ開催決定おめでとうございます。

@[youtube](https://www.youtube.com/watch?v=Uoctuzt2IfU)

公開日の次の日に観てきました。

正直なところ、残念ながら内容のほとんどが理解できませんでした。
ですので、この記事では浅い意見とか感想しか書いていないです。

自分の学のなさが恥ずかしくなってきますね...

観る前の印象では、原爆を開発する過程の話をメインに描かれる映画かと思っていましたが、オッペンハイマーという一人の人間にフォーカスした内容になっていました。

ですので、日本に関する話は出るものの、実際に原爆を落とした時の描写はありません。

同じく日本での原爆開発をテーマにした映画 太陽の子と比べると、オッペンハイマーは政治的な話が中心になっている印象でした。

その分、太陽の子は分かりやすく、前知識なしでも楽しめる映画ですね。

太陽の子でしか日本の原爆開発に関する情報は知らないのですが(そもそも史実ではない？)、マンハッタン計画の規模感はすごいですね。

開発のために町をつくっちゃうのは驚きです。

もしこれから観る方は、事前に登場人物と簡単なあらすじや話の流れを把握しておくと、より楽しめる映画になっていると思います。

個人的に印象に残っているシーンをいくつか挙げると、標的の選定会議です。

ちょっとニュアンスが違うかもしれませんが、「京都は新婚旅行で行った時に良い町だったから標的からは外す」みたいな会話をしているシーンは、日本人として胸にくるものがありました。

そして、東京大空襲で大勢の市民が亡くなったことに言及しているシーンがあり、大勢の市民が亡くなったことに何も感じない麻痺した国民という、客観的に狂っている感覚という描かれ方をしていて、それをアメリカが作った映画で描かれることにとても意味を感じました。

原爆投下後、オッペンハイマーが原爆を作ってしまったことによる葛藤するシーンは、太陽の子でも原爆を落とされた現場を見た研究者が、自分たちはこんなものを作ろうとしていたのかと後悔する描写があります。どちらの作品も信念を持って原爆を作った、作ろうとしていたが、実際に出来上がって使われた現場を見て作るべきではなかったとなるのは、敵味方関係なく原爆が人類にとって脅威となるという共通の認識だったのかなと感じます。

聴聞会あたりの内容はほとんど理解できなかったため、解説記事や動画を見て勉強したいと思います。

ふと、太平洋戦争の時、当時アメリカ在住の日本人はどんな扱いを受けていたんだろうと気になり検索したところ、当時の内容をまとめているWebサイトがあったので共有します。

[DENSHO](https://densho.org/)

下記のページでは、第二次世界大戦時の日系アメリカ人がどんな扱いをされたかまとめられています。

[Introduction to WWII Incarceration - Densho: Japanese American Incarceration and Japanese Internment](https://densho.org/learn/introduction/)

教養として、この辺りをもっとちゃんと勉強した後にもう一回映画を観たいです。

あんまり関係ないんですけど、俳優の衣装がとてもオシャレだなと思いました。
スーツが欲しくなる映画

---

Wikipediaやセリフ解説の記事等を読むと、作品の理解が深まりますので、映画鑑賞後に読むことをお勧めします。
[映画『オッペンハイマー』セリフ解説！＜前編：トリニティ実験まで＞](https://note.com/uchan_ssr/n/n7248ab62d06f)
[wikipedia マンハッタン計画](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%B3%E3%83%8F%E3%83%83%E3%82%BF%E3%83%B3%E8%A8%88%E7%94%BB)
[wikipedia ロバート・オッペンハイマー](https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%90%E3%83%BC%E3%83%88%E3%83%BB%E3%82%AA%E3%83%83%E3%83%9A%E3%83%B3%E3%83%8F%E3%82%A4%E3%83%9E%E3%83%BC)


映画「オッペンハイマー」感想

coding

nuxt to next

Nuxt

laravel icon

技術

2019年に、Nuxt.jsで構築したこのブログをNext.js + TypeScriptに一新しました。

変更理由としては、Nuxt.jsのバージョンが古く、新規機能を追加するのが少し大変になっていました。

また、Vueに関する情報のアップデートが出来てないくて、Vue3に関するキャッチアップが必要でした。

現職で、フロントエンドの開発はReac.jsがメインになっているので、学習も兼ねてNext.jsで作り直すことにしました。

開発環境のbefore

|      | Version     |
| ---------- | ---------- |
| node       | v14       |
| nuxt       | 2.0.0       |

after

|      | Version     |
| ---------- | ---------- |
| node       | v16       |
| react       | 18.1.0       |
| next       | 12.1.6 |

## 移行作業で大変だった事

Vue.js特有の書き方をしている部分は大変でした。

特に、Template内のv-ifや、@clickなどのディレクティブは置き換えが大変でした。

Template内をコピペで貼り付けたときに大量にエラーが出た時はちょっと萎えました。

## Next.jsに置き換えて良かった点

今まで、sitemap.xmlの生成をnuxt.config.jsで行なっていましたが、Next.jsでは各ページコンポーネントのgetStaticPaths関数を見て自動的に生成してくれるのがとても良かったです。

TSによる型の補完で、開発体験がとても良かったです。

HeadlessCMSにcontentfulを使用していますが、自動的に型定義ファイルを作成するスクリプトが公開されていて神かと思いました。

[Contentful のレスポンスを TypeScript で取得する方法](https://gizanbeak.com/post/contentful-types "Contentful のレスポンスを TypeScript で取得する方法")

これにより、contentfulで取得したレスポンスの値にも補完が効くようになりました。

## ディレクトリ構成

ついでにディレクトリ構成もAtomic Design風に変更してみました。

現状は以下のようになっています。
```
├── MyHead.tsx
├── atoms
├── Layout.tsx
├── molecules
│   ├── BlogCard.tsx
│   ├── FavoriteCard.tsx
│   ├── Favorites.tsx
│   ├── Pagination.tsx
│   ├── Profile.tsx
│   ├── RelatedArticle.tsx
│   └── Tags.tsx
├── organisms
│   └── SideBar.tsx
└── template
```

ここに関しては全然進んでないです。
元のコンポーネントをそのまま移動させたらこうなるかなという感じでした。。

Atomsまで細かく分解できていないので、今後ちゃんとしたAtomic Design構成になるようにしていきたいです。

## ページ構成変更

今まではトップページが記事一覧になっていたのですが、/posts/{pageNumber}を記事一覧ページとなるように変更しました。

## GA4導入

ユニバーサル アナリティクスが来年にサポートが終了してしまうため、GA4に移行しました。

## 積み残しタスク

1. テスト実装
2. プロフィールページの実装
3. VLOGページ作成

テストに関してはマストで行いたい項目です。

Youtubeで流行りのVlogを投稿するページを作りたいです。
Vと言っても、VideoのVではなく、VoiceのVですが。

## まとめ

保守が楽になりそうです。

やはりReact + TSの開発体験がとても良いです。

久しぶりにぶっ続けで12時間コーディングしました。
意識が朦朧としているので、後日記事の内容を修正しますw

3年ほど前に構築したブログをNext.js + TypeScriptに一新しました。

Nuxt.jsで構築したブログをNext.js + TypeScriptで作り直した。

Next.jsで、Layout用のコンポーネントを作成中、以下のエラーが発生しました。

```
  x Expected '>', got 'class'
    ,----
 11 | <div class="mainvisual">
    :      ^^^^^
    `----
```

該当コードは以下です。

/components/layout.ts

```
import { ReactElement } from "react";

type LayoutProps = Required<{
  readonly children: ReactElement;
}>;

const Layout = ({ children }: LayoutProps) => {
  return (
    <div>
      <div>
        <div className="mainvisual">

  ... 省略

        </div>
      </div>
    </div>
  );
};

export default Layout;
```

VSCodeで開発を行なっていて、lintのエラー等も表示されていなかったのですが、`npm run dev`でエラーが表示されました。

## 原因

ファイル名が.tsだったのが原因でした。

layout.tsxに変更したところ、エラーがは消えました。

jsxが含まれる場合は.tsじゃダメだったんですね。。

あまり意識してなかったので、ちょっと詰まってました。

参考記事
https://qiita.com/y-hira18/items/f67cfc45a70c7c25708a

Next.js+TSで、エラー: nextjs Expected '>', got 'className'

## 原因と解決方法

開発環境で、Opensearchにデータをインサートしていたのですが、途中で失敗し、
TOO_MANY_REQUESTS/12/disk usage exceeded flood-stage watermark, index has read-only-allow-delete block
というエラーが発生しました。

そのままの通り、ディスク容量が足りずに失敗したのですが、dfコマンドで容量を確認し、80％ほどでデータを入れる余裕はありそうでした。

調べてみると、Elasticsearchではデフォルトで90％がディスクの最大値と設定されているようでした。

[disk-based-shard-allocation](https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-cluster.html#disk-based-shard-allocation)

設定で、watermark.highをいじる方法もありますが、今回はサーバーの容量を空けることで問題を回避しました。

## 解決までのメモ

ここからは自分の環境で行ったことをメモとして残します。

開発はUbuntuで、Dokcerを使用して環境を構築していたため、Volumeやimageの削除を行いました。

`docker image prune`や
`docker container prune`では問題が解決できず、
`docker system df`コマンドで、Local Volumesが肥大化していることが原因だとわかりました。

なので、docker-compose down でコンテナを落としてから`docker volume prune`コマンドを実行で容量に空きができ、解決しました。

OpenSearchにデータを入れるときにエラーが発生し、解決までのメモ

OpenSearchにデータをインサート時、TOO_MANY_REQUESTS/12/disk usage exceeded flood-stage watermark, index has read-only-allow-delete blockが発生する。

現在参画している案件のバックエンド開発でテストを導入する必要がありましたが、テストに関する知見を持つ人が自分を含めいなかった事と、テストを導入する熱意が一番あるのが自分だった為、先行して学習を進めました。

その際使用した書籍が[テスト駆動開発(Amazonリンク)](https://www.amazon.co.jp/dp/B077D2L69C/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)です。

この本で学べることが多かった為、メモを残すべくこの記事を残します。

__また、この記事はTDDの解説をするものでは無く、どちらかというと自分が実践してみてどうだったか、という点をまとめています。__

## なぜテストを導入する熱量が高かったのか

そもそもなぜ自分のテストに対する熱量が高かったのか、それは以下が理由です。

1. 参画前に携わっていたプロジェクトで、テストを導入したいと思う場面が結構あった
2. エンジニアとして、テストを書く技術はスタンダードであること
3. 転職活動をしている時、テストを書いた経験についてよく聞かれた為、次のステップアップ時にはテストを当たり前に書けている状態にしたかった

つまるところ、2年ほど前からテストを書きたい、書けるようにならなくてはいけないという気持ちが強くなっていました。

その中で、今年の2月まで担当していたプロジェクトでテストを書いているとデバッグが楽になっただろうなと感じることがありました。

そのプロジェクトが始まった当初は、テストの学習コストに見合った恩恵があるか分からなかった為、導入しませんでした。

ただ、プロジェクトが進み、開発中のアプリケーションが複雑になればなるほど、新規機能の実装による他機能の影響が大きくなり、手作業での確認に限界がありました。

とはいえ、リリースが差し迫った状況で、その段階でテストを導入することが難しく、次のプロジェクトでは絶対に導入するぞという気持ちになりました。

テストに関する書籍を探しているところ、ネット上での評価が良かった「テスト駆動開発」と出会いました。

## テスト駆動開発とは？

この書籍を読む前は、先にテストをたくさん書いてから実装するイメージでした。
そうでは無く、TDDは以下のサイクルで実装を進めていきます。

1. 小さいテストを追加する
2. 全てのテストを動かし、失敗があることを確認する
3. 変更を行う
4. 再び全てのテストを動かし、全て成功することを確認する
5. リファクタリングを行い、重複を除去する

テスト駆動開発から実際に引用して解説します。

本書では債券ポートフォリオ管理システムの実装をハンズオンで進めている為、それを一部紹介します。

金額（通貨単位あたりの額）に数値（通貨単位数）を掛け、金額を得る機能を実装したい時、まずは以下のテストを書いてみる。

```
※パッケージ名、import文省略

public class MoneyTest {
    @test
    public void testMultiplication() {
        Dollar five = new Dollar(5);
        five.times(2);
        assertEquals(10, five.amount);
    }
}
```

上記のテストはコンパイルすらできません。
今、４つのエラーがあります。

1. Dollarクラスが無い
2. コンストラクタが無い
3. timesメソッドが無い
4. amountフィールドが無い

上記のコンパイルエラーを解決するべく、Dollarクラスを実装します。

```
※パッケージ名、import文省略
class Dollar {
    int amount;
    Dollar(int amount) {
    }
    void times(int multiplier) {
    }
}
```

これでテストを走らせすることができるようになったので実行すると...

レッドバーが現れ、結果が１０となることを期待しているところに0が返ってきていることでテストが失敗しています。

テストを通すための最小限の変更は以下のようになる。

```
※パッケージ名、import文省略
class Dollar {
    int amount = 10; // 直接10で初期化してしまう。
    Dollar(int amount) {
    }
    void times(int multiplier) {
    }
}
```

この状態でテストを実行すると、今度はグリーンバーが出た。
これでサイクルの1から4まで実行したところですね。

ですが、これで実際の用件を満たせている実装では無いため、リファクタリングをします。

以下、最終的なソースです。

```
class Dollar {
    int amount;
    Dollar(int amount) {
        this.amount = amount;
    }
    void times(int multiplier) {
        amount *= multiplier;
    }
}
```

書籍では、もっと小さいステップで最終的なソースまで実装しています。

途中、数値をベタ書きで書いてテストを通す場面がありましたが、ベテランであればあるほど許し難い行動かもしれません。
ですが、本書では以下のように述べています。

> なんでもいいからとにかく動かすという考え方は、優れたエンジニアリングのルールに反するように感じるし、特にベテランの開発者にとっては、審美的にも価値観的にも受け入れ難いかもしれない。それでも、素早いグリーンはすべての罪を赦す。ただし、赦されるのはほんの短い時間だけだ。

ここら辺は、書籍の第28章グリーンバーのパターンを参照してみてください。

ということで、上記のサイクルを回しながら実装していくのがTDDだと認識しています。

## 実践してみて

書籍を読みつつ、APIの実装を進めてみました。

APIの内容として、Opensearchから取得した値を加工し、JSON形式で返すものです。

以下、必要条件
1. Opensearchからデータを取得し、加工した値を返す関数
2. 上記関数から取得した値を包括し、ステータスなどの情報を追加して返すAPIの実装

TDDで実装するにあたり、以下の手順で進めてみました。

1. Opensearchに接続する関数、返り値をモック化
2. Opensearchからの返り値が正しいか確認するテストを追加
3. テストを実行し、失敗を確認
4. ファイルを作成し、Opensearchに接続部分の関数を追加
5. テストを実行し、グリーンバーを確認
6. Opensearchから取得した値を加工する関数のテストを追加
7. 失敗、レッドバー確認
8. 作成したファイルに加工する関数を追加
9. グリーバーを確認
...省略

上記の手順で、３歩進んで２歩下がるような感じで進めました。

テスト駆動で開発していくことで、自然と結合度が低いコードになりました。

また、テストを書くことで開発中の不安が少なくなり、精神衛生上とてもよかったです。

## 「テスト駆動開発」を読むべき理由

上記で紹介したテスト駆動開発は、書籍の情報のほんの一部にすぎません。

この本を通してテスト駆動とはなんなのか、著者であるKent Beckとハンズオン形式で学ぶことができます。

そして今はテストを書くことが当たり前になっているので、リーダブルコードに並ぶ必読書と言っても過言では無いように感じます。

もちろん今後全てのコーディングをテスト駆動で書くのは難しいかもしれません、ですが、一度TDDで書いた経験があれば、テストしやすいコード、しにくいコードがわかるのでTDDでの実装するしないに関わらず学べることは多いと思います。

また、デザインパターンの紹介があるため、プログラミングのスキルを上げる知識を得ることができます。

## 今の自分に足りない情報

実際にTDDを実践し、いくつか悩むポイントがありました。

1. どこまでモック化する必要があるか
2. 必要なテストを網羅できているか

特に、書いたコードに対するテストが足りていない気がしています。
この辺は他のテストに関する書籍で勉強したいです。

## 統括

まだ一周しかできてないのでもう一周したいです。

テストを書くのが楽しいので、ひとまずはTDDでコーディングしていきたいです。

Kent Beck著の「テスト駆動開発」を読んだのでメモ。
自分についてのコメントが多めです。

テスト駆動開発を読んだ感想、メモ

自分のメモ用として。
環境
PC imac
vagrant version 2.2.7


--- 

すでにHoemsteadでLaravelのプロジェクトを動かしている時、新たにLaravelプロジェクトを追加する手順

1. Homestead.yamlファイルのfoldersのmapに指定しているディレクトリを確認する

2. mapで指定しているディレクトリにLaravelのプロジェクトを作成、クローンする

3. Homestead.yamlのsitesに作成したプロジェクトを追加する

4. hostsにsitesのmapに追加したurlを追加する

５. vagrant reload --provisionを実行

ブラウザでちゃんと動作している確認する
この方法で複数のプロジェクトを同時に動かせる。Homestead神か・・・・



以下、自分の試しで作った環境のHomestead.yamlの例になります。

![homestead sample](//images.ctfassets.net/90go8ut2dk8n/1BZcWPFNZ0u3A2xwgKefEZ/6bcb1e44d3073b60e8d0e753fb6d8ad3/____________________________2020-04-24_1.10.30.png)

自分のメモ用として。
環境
PC imac
vagrant version 2.2.7

Homesteadで複数のLaravelプロジェクトを動かす

sekiです。

Nuxt.js + Contentful + Netlifyを使用してブログを開設しました。

参考文献：
[【まえがき編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する](https://qiita.com/hitsuji-haneta/items/9fb971855026386fa5c5 "【まえがき編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する")

New Post

2024年10月振り返り

2024年9月振り返り

2024年8月振り返り

2024年7月振り返り

2024年6月振り返り

2024年5月振り返り

2024年4月振り返り

indigo la End 初の横浜アリーナライブ開催決定おめでとうございます。

映画「オッペンハイマー」感想

Music

Counterblow vol.2 in TOKYOライブレポ

瞳のアドリブを聴いて、哀愁演劇がとてつもなく楽しみになった件

はじめてのシナリオアート

素晴らしいスリーピースバンド

オシャレな大人が聴いてそうなバンド

個人的チルい楽曲まとめ

Teck

Nuxt.jsで構築したブログをNext.js + TypeScriptで作り直した。

Next.js+TSで、エラー: nextjs Expected '>', got 'className'

OpenSearchにデータをインサート時、TOO_MANY_REQUESTS/12/disk usage exceeded flood-stage watermark, index has read-only-allow-delete blockが発生する。

テスト駆動開発を読んだ感想、メモ

Homesteadで複数のLaravelプロジェクトを動かす

Nuxt.js + Contentful + Netlifyでブログを開設

Profile

Tags

Favorites✨

New Post

2024年10月振り返り

2024年9月振り返り

2024年8月振り返り

2024年7月振り返り

2024年6月振り返り

2024年5月振り返り

2024年4月振り返り

indigo la End 初の横浜アリーナライブ開催決定おめでとうございます。

映画「オッペンハイマー」感想

Music

Counterblow vol.2 in TOKYOライブレポ

瞳のアドリブを聴いて、哀愁演劇がとてつもなく楽しみになった件

はじめての シナリオアート

素晴らしいスリーピースバンド

オシャレな大人が聴いてそうなバンド

個人的チルい楽曲まとめ

Teck

Nuxt.jsで構築したブログをNext.js + TypeScriptで作り直した。

Next.js+TSで、エラー: nextjs Expected '>', got 'className'

OpenSearchにデータをインサート時、TOO_MANY_REQUESTS/12/disk usage exceeded flood-stage watermark, index has read-only-allow-delete blockが発生する。

テスト駆動開発を読んだ感想、メモ

Homesteadで複数のLaravelプロジェクトを動かす

Nuxt.js + Contentful + Netlifyでブログを開設

Profile

Tags

Favorites✨

はじめてのシナリオアート