(dev)juginon-blog

勉強したこと、趣味のこと。

【React Native】asyncとawaitってなに?

現在作成中のアプリの方で、ローカルストレージに値を入れてその値を取り出して使う機能を搭載しなければならなくなり、AsyncStorageを使用することになりました。

facebook.github.io

公式ドキュメントを見ればわかる通り、AsyncStorageはキーと値を簡単に保存・取得できる初心者でも扱いやすいストレージです。

ところが、僕はAsyncStorageを使っているうちにある疑問にぶつかりました。

asyncとawaitってなに…?

そう、値を保存するときも取得するときも「async」とか「await」とかいう謎の単語が出てくるのです。

最初、これ別に必要ないんじゃね…?と思って消してコードを書いてたりしたんですがうまくいかず、機能実装にかなり悩んでいたところ先輩が超絶優しくわかりやすく教えてくれました。ここでは僕の拙い文章ですが自分の備忘録として、またReact Native始めたばかりの人にあてて同期・非同期処理の概要について記そうと思います。

正直、ここで話すことは本当にさらっと表面を撫でるだけのなんの生産性もない記事だと思うので、もっと詳しくためになる記事を以下に貼らせていただきます。

qiita.com

ここからかなり勉強させていただいたこともあるので、それも踏まえながら自分的にまとめていこうと思います。

また、自分の経験上AsyncStorageを使っている時に当たった問題だったので、関数もAsyncStorage内にあるものを例にあげて使用します。

async/awaitとは?

async/awaitは、JavaScriptで非同期処理を扱う新しい方法です。

ここで同期処理と非同期処理の違いを確認しましょう。

同期処理とは…プログラムの上から順に実行していく方式のこと。もし時間のかかるプログラムがあったとしても、そのプログラムが終了するまでは次のプログラムは実行されない。

非同期処理とは…もし実行中のプログラムがあったとしても、他のタスクが別のプログラムを動かせる方式。

だから、AsyncStorageにおけるasync/awaitは、ストレージから値を取り出している最中でも他のプログラムが動かせるようになっているということ。

今回、僕が作っているアプリはネットに繋がなくても使用できるように作られているアプリだったのであまりasync/awaitの恩恵は受けられませんでしたが、これらはネットに繋げた時に効果を発揮します。

ネット上にストレージがあってその値を取り出す場合、回線の速度によっては時間のかかる場合があります。そこで毎回終了するまで待つということは、他の操作ができなくなるということです。それはアプリとしてよろしくない。そんな解釈です。

どういう動きをしてるのか

f:id:ogijunchang:20190221234419p:plain

上の図はプログラムの流れを描いています。1=>2=>3=>4=>とプログラムが処理されていって、5番でgetItem()という関数が呼ばれます。この関数はAsyncStorageでは引数に入っているキーと合致する値を持ってくるものなのですが、ここで同期処理の場合一旦本筋の処理はストップして(点線部分にはいかない)分岐して6=>7=>...とgetItem()内の処理が実行されることになります。

なので、同期処理で書いていった場合はまたgetItem()の中で時間のかかる関数が呼び出された場合はまた右に分岐して、またさらに分岐して、…と複雑になってしまいます。

そこで登場するのがasync/awaitの非同期処理です。async/awaitは動きは同期処理っぽいのに非同期処理をやってくれるというもので、

やっていることは実質的に同じなのですが、見かけ上プログラムの流れを一本の道にしてくれます(図でいう5=>6の段差がないように「見せかけてくれる」ということ)

async/awaitが登場する前、コールバック関数という.then().then()...とバカみたいに関数を繋げていたころからはるかに見やすく書きやすくなりました。

asyncの役割

async/awaitと合わせて呼んでいましたが、それぞれ別のものです。

asyncはfunctionの前に書くキーワードで、AsyncFunctionを作成することができます。

AsyncFunctionでは、awaitを使うことができます。awaitはAsyncFunctionの外では使うとエラーになります(経験済み)。

awaitの役割

awaitはAsyncFunctionの中で動作し、その後に書かれた処理が終了するまでAsyncFunction内の処理をそこで一時停止します。

処理が終了すると次のプログラムが実行されます。

なので、asyncとawaitはセットとして考えればわかりやすいと思います。

AsyncStorageを使うときの注意

僕的にAsyncStorageを使う時にハァ?となった部分をおさらいします。

Promiseオブジェクト

Promiseオブジェクトってなに…?async/awaitでもう頭の中いっぱいいっぱいなのになんでこんなん出てくるねん…って思っていたのですが、これも結構重要です。

Promiseオブジェクトは非同期処理の最終的な完了処理(もしくは失敗)およびその結果の値を表現します。 

developer.mozilla.org

非同期処理では、処理をしている途中でも次のプログラムが実行でき、その中に処理中のプログラムの値が必要な場合があります。そんなときにPromiseオブジェクトが見せかけの値としてふるまうということです。

僕はここから単純に値を取り出したかったので、

const temp = await AsyncStorage.getItem(~~~);

ってするわけですよ。

そのあとよし、取り出せたな〜と思って return tempとかで返して、その値をアプリ内で表示させようとするんですけどエラーが出るんです。

それはPromiseオブジェクトをtempの中に入れているから起きるエラーで、ここは setState をしなければなりません。

forums.expo.io

この記事が僕のぶつかっていた問題そのものの質問でした。

非同期処理って難しい?

最初は非同期処理って聞いては?ってなってたんですが、先輩から説明してもらって、今この記事を書いてなんとなくつかむことができました。この記事を見てくれた人の少しでも助けになれれば嬉しいです。

やっぱりプログラミングをやっている途中でぶつかる問題は割と英語のページでヒットすることが多いですね。英語をもっと勉強したいと思いました。

いろいろ難しいですが、調べていてとても楽しかったです。やっぱりプログラミングはおもしれぇなぁ。

プリティーシリーズを全制覇した

お久しぶりです、新年が明けてからいろいろと忙しい日々を送ってきましたじゅぎのんです。 インターンの方もアプリ開発が始まり、順調に進捗を生み出している最中なんですが、そのまえに

プリティーシリーズを全作品完走しました。

プリティーシリーズを見始めたのは8/29のことだったんですが(Twitterで遡った)、そこから1/22まで5ヶ月弱で

プリパラ1st→2nd→3rd→アイドルタイムプリパラ→虚無→オーロラドリーム→ディアマイフューチャー→レインボーライブ→キンプリ

計344話+5話(キンプリ)を制覇しました。そして現在放送中のキラッとプリ☆チャンが今日放送分で43話なので、計390話あまり見ていることになります。

一言で言いますが 一瞬でした。 今回はテスト前日なのですがなぜ僕がプリティーシリーズにハマったのかを考察していこうと思います。

プリティーシリーズの魅力

ストーリーの面白さ

大学に入ってから比較的時間に余裕ができたので高校の時よりもアニメを見る時間は大幅に増えたので、過去の有名な作品から最新のアニメまで結構見ていたのですが、今までに見た朝の女児向けアニメは結構昔に見たスマイルプリキュアのみでした。

割と女児向けアニメは抵抗があるというかどうせストーリーも子供っぽい感じなんでしょと思いがちなんですが、プリティーシリーズはその考えが全く通用しません。

僕はプリパラからシリーズに入っていったので本当の時系列順ではないのですが、一番最初はプリティーリズム オーロラドリーム(以下OD)です。

プリリズは本当に朝アニメなのかと疑うほどストーリーが重厚というか人間関係のお話が基本的に重いです。

憧れの「プリズムクイーン」を目指し、ダンスと歌とおしゃれ、それにちょっとのラブをミックスしたハッピーでラッキーなガールズストーリー。スタートだよ。

これはODの1クールくらいまでのオープニングナレーションなのですが、まさにこのまま、プリズムショーというのは歌とダンスとプリズムジャンプを同時にする総合芸術なのですが、ただプリズムショーをするだけでなく、ちょっとのラブ(意味深)がミックスされたガールズストーリーです。

f:id:ogijunchang:20190203200449j:plain
ちょっとのラブ(意味深)

まず女児向けアニメで割とガチ目の恋愛要素が必要なのかといわれるとちょっとそれは対象年齢層高くない?って感じなんですが、そこがやはり大人達の心を掴む要因なのかと思います。

それに加えて、プリリズは人間関係のお話で朝にやるとは思えないほどの重いストーリーが進みます。

ODではお母さんに見捨てられたヒロインが闇堕ちしてしまったり、ディアマイフューチャー(以下DMF)ではOD時代の主人公の彼氏的存在が急に余裕なくなって新しい男キャラにつっかかったり、レインボーライブ(以下RL)では初期にヒロイン同士で蹴落とし合うようなストーリーだったりと、割と踏んだり蹴ったりな展開が多いです。

f:id:ogijunchang:20190203200551j:plain

人間関係のドロドロさでランキングをつけると RL > OD > DMF なのですが、ストーリーの面白さで言ってもこの順番になります。

このアニメのストーリーはやっぱり女児向けではないんだと思います。大学生以上くらいの、大体なんとなく人生ってこんな感じに進んでいくんだ…ってちょっと悲観的になり始めるあたりの層にドンピシャと言いますか、共感できる部分がとても多いから面白いんだと思います。

大体人生ってそんなにうまくいくことないんですが、プリティーシリーズは少女達の煌めきでそれらの問題が大方いい感じに解決します。そこがいいんです。

毎日勉強とか仕事とか疲れたなぁ、明日も大変だなぁ…と思う時こそ、プリティーリズムを見ることをおすすめします。

こんなにこの子たちは頑張ってるんだから僕も頑張りたい!そう思うようになれる作品って今まではありませんでした。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

おそらく女児にはそれが不評だったのでしょう、プリパラでは主人公が小学生になり絵柄もだいぶ子供っぽくなりました。

しかしそんなプリパラ、この作品はある狂気を持っているのです。

プリパラの監督は森脇真琴さんという方なのですが、この人はマイメロディとかジュエルペットとか比較的有名な作品の監督もされています。

この人がヤバイ。プリパラは明らかに世界観がプリリズとは違うのですが、まず 掃除機が喋る。語尾が意味不明なキャラクターばかりいる。なんか同一人物が大量に存在する。マスコットのノリが明らかに子供向けじゃない。

f:id:ogijunchang:20190203200653j:plain
狂気はキャプ画でわかります

プリパラは完全にアイドルをするアニメなので毎回ライブをするのは当たり前なのですが、その流れも割と意味不明だったりします。

最初はそんな感じでドタバタにスタートするのですが、プリパラはどのシーズンも決まって3クール目あたりから感動の波が静かにやってきます。

大体最後のグランプリに向けて各アイドルが奮闘するストーリーになっているのですが、そのストーリーがとにかくアツい

昔の記事でプリパラを見始めたら86話まで見て欲しいと言いましたが、ちょうどそこは2ndシーズンの後半にあたります。

プリパラに関しては前の記事で語ったのでそちらの方が記憶も鮮明なのでいい感じにかけたと思いますが、とにかく最後に涙が止まらなくなるアニメです。

f:id:ogijunchang:20190203201044j:plain
こういうところ。

キラッとプリ☆チャンはさらに対象年齢層が低くなってしまい、かなり子供っぽい絵ではあるんですがそれでもプリリズプリパラ時代の片鱗を感じるストーリーになっています。二年目も決定したので、これからに期待したいと思います。

コンテンツの息の長さ

僕がプリパラを見終わって、一旦虚無になっていた頃、プリティーシリーズ全部のライブがあることを聞き、行ってしまいました。おそらくライブにいったのも僕がどハマりした原因だと思っています。

普通5年以上前に終了したアニメ作品のライブってやるんでしょうか??プリティーシリーズのよいところは、コンテンツの息の長さもあります。

現在2020年に向けてプリティーオールフレンズというプリティーシリーズの主人公・ヒロインたちが新たな描き下ろしでプロジェクトが始動しているのですが、ここまで本気な作品を今まで見たことがありません。グッズも絶えず更新されていて、ライブもツアーが決定していて、過去作のアニメを見ながら声優さんのトークショーまで最近やっています。

www.takaratomy-arts.co.jp

やばい。みんなかわいい。

ライブではプリパラのメンバーがもうアニメもおわったのに新曲を披露したり、今でも新しいコーデを投票で決めるキャンペーン的なのが開かれています。

朝アニメは途中で打ち切りとかがないぶんだいぶ安心してコンテンツを応援できるのも大きいかなと思います。長く楽しめるのはやっぱりいいですね。この熱が冷めないことを祈っています。

声優さんにハマってしまう

僕はプリパラからシリーズに入ったのでどうしてもプリパラの思い出が強く残ってしまうんですが、プリパラの主要キャストは全員i☆Risというアイドルユニットです。彼女らは声優もアイドルも同時にやるハイブリッドな方達なのですが、要するにプリパラのキャラ達と同じ頑張りをしているわけですよ。

そんな頑張っている人たちを応援したい。。とおもうようになり、ライブに行き、もっと好き…になり、ツイッターをフォローし、インスタをフォローし、

結局声優が個人的に好きになっています。

i☆Risさんだけではありません。プリティーシリーズの曲はどれも最高にエモい曲なのでよく聞いてしまうんですが、この歌いいなぁ〜からどんな人が声を当ててるんだろう??からこの声優さんのツイッターは?インスタは??となります。王道ルートです。

そんなこんなでみんな大好きになってしまい、シリーズがさらに好きになってしまうという好循環が生まれてしまうのです!!

部活の部報のコラムに書いてもよかったんですが、かなりドン引きされそうな内容だったのでここにひっそりと書きました。この記事を見て興味を持った人はぜひどの作品からでもいいので見てみてください。

プリティーシリーズを手っ取り早く知りたい!という人は、プリティーリズム レインボーライブを視聴することをおすすめします。

RLは歌・ダンス・連続プリズムジャンプ・プリズムライブ・最高にドロドロの人間関係など、プリティーシリーズの面白いところを全て凝縮した作品になっています。プリティーリズムの中でも世界が違うので、最初から見ても見やすいと思います。

ここまで語りましたが、来週もプリパラのライブが控えています。エモいです。3700字も書いてしまったのでそろそろ勉強しようと思います。

最後はみんなで!!

f:id:ogijunchang:20190203200207p:plain
はぴな〜る!

2019年の抱負

あけましておめでとうございます!

今年もよろしくお願いします、じゅぎのんです。2019年になってしまったので、今年の抱負を忘れないようにここに記したいと思います。

今年頑張る三本柱

2018年も自分なりに精一杯頑張ってきましたが、2019年は主に3つのことを頑張ろうと思います。

一つ目は陸上競技です。

陸上競技

皆さんご存知の通り僕は大学の陸上競技部に所属しているわけですが、2018年末に納会が行われ、そこで正式に僕が主将になりました。

納会の時は特に話すことを考えていなかったのでテキトーなことを話してしまったのですが、ここで真面目な目標とかを書きます(納会で言え)

楽しい部活を目指す

とりあえず第一目標はこれに尽きます。2018年は個人的に言えばすべての対校戦で入賞でき、マイルの関カレ標準切りに貢献し、十種で初の関カレに出場し、電通大のホームページにまで載せていただくことができ、今までで最高の年だったと感じています。しかし、チームとして考えるとどうなんだろう、ってことが多発しました。

まず第一に部員の減少です。新入生が入学して数ヶ月で出たり入ったりするのは仕方ないことですが、これから対校戦でチームがまとまらないといけないときに部をやめようとする人がでたり、実際に残念ながら退部する人もいました。辞めた理由は本人にしかわからないのでなんとも言えませんが、やっぱり部活の雰囲気がなんとなく暗いことが部員の減少を誘発し、それがまた雰囲気を暗くするという悪循環が発生していたように思います。

次にミーティングが暗い。毎週一度は部員全員が集まってミーティングをしていますが、そこの雰囲気がありえん暗い。結局これも上の理由になり得るんじゃないかと思います。

2018年は確かに部活が楽しかった。でもそれが自分の中で完結してしまってはとてももったいないことだと思います。せっかく主将になったので、僕が部活で得た幸せは積極的に部員におすそわけしていきたいです。

競技にも手を抜かない

2019年は学部最後の年です。ここでいうことではないかもしれませんが、もし学部のうちに十種競技で6300点を超えられず、2020年の関東インカレに出場できなくなった場合は、十種競技は学部で引退しようと思っています。いや、引退しないかもしれないです。

それくらいの緊張感を持って今年は挑むつもりです。十種競技でしっかりと記録を残せる大会は5月の関東インカレと9月の27大対校戦のみなので、そこできちんと結果を残します。去年の関カレは5824点だったんですが、6000点を超えた今賞状をもらうに値しない点数だと思ってるので早く飾ってる賞状を替えたいです。

以上、三本柱一本目の陸上でした。

プログラミング

三本柱の二本目はプログラミングです。

去年の12月に正式にインターンに採用されたことは前の記事で書きましたが、そのインターン先で使える人材に少しでもなることが二つ目の目標です。

インターンに入ってわかったことは、勤めてる社員全員積極的に知識を蓄えようとしているということです。おもしろい記事とか技術があったら速攻Slackに投稿して周知させて、今の技術にどう使えるかとかをよく話し合ってるのをみます。自分ももっと積極的に勉強していきたいです。このMacを親友だと思って(キリッ

とりあえずインターン始めてからは明らかに意識が変わりました。大学生のうちに仕事ができてよかったです。卒業するまでにみんなに差をつけたいです。

プログラミングにつよい人はなんかみんな自分のやりたいこととか興味があることを自分でやって自分で作ったりしてるので、先日僕も真似してSlack上でbotが僕の発言に対してレスポンスをくれるという簡単なものを作ってみました。

f:id:ogijunchang:20190102213945p:plain

自分で作って自分で反応する言葉とか設定してると虚しくなりますね。ちょっと悲しくなりましたが時間があったら改良してみたいと思います。

趣味

三本目の最後の柱は趣味です。

皆さんよくご存知だと思いますが最近はとあるアニメシリーズにハマっています。それも含め、自分の趣味(陸上も含める)にはたくさんお金と時間をかけて全力で楽しみたいです。最近思い知ったのですが、やっぱり自分の好きなものやことにお金をかけると幸せになれます。

これは今年の目標ではないかもしれませんが、他人から見て「なんかあの人毎日楽しそうだね」って言われるようになりたいです。インスタでまやかしの幸せを発信するのもいいと思います。でもやっぱりそれは違うかなって。(オタクガタリ

陸上では大会の主幹、インターンでは本格的にアプリの開発の開始など、今年も結構大変なことが多そうです。でも始まっちゃえば意外とどうにかなるので、恐れずにチャレンジしていく一年にしたいです!

やってみなくちゃわからない!わからないならやってみよう!!

f:id:ogijunchang:20190102215033j:plain
こら!二度寝しない!

プリティーライブ2018に行ってきた話(夜)。

み〜んなでキラッとプリティーライブ2018に参加してきました。

昼公演の記事はこちら。

ogijunchang.hatenablog.com

前回の記事でエモさのあまり想像以上に分量が多くなってしまったので今回は夜公演の感想を書きます。

第二セット、夜公演

昼公演は2時間半くらいあったような気がする(覚えてない)。終わったあと一息ついて(ワイン)割とすぐ会場に再度向かいました。

正直昼公演はやっぱり始まった瞬間は周りの様子を見て控えめな出だしだったので、夜公演は最初からぶっ飛ぼうと思い参戦しました。

席は昼公演の時のC列からD列に後退しましたが、D列最前ということでワンチャントロッコに乗った誰かが来るかもしれないという期待に胸を踊らせます。

実はこのライブの4日前くらいに風邪を引いてて、ポピパさんとこのプリティーライブのために全力で治していたのですが本調子ではなく、結構な疲労がありました。しかしそんなことでやる気元気を失っていては声優さんたちに顔向けできないのです。陸上で培った体力をフルに発揮して全力で声を振り絞りました。

ライブ本番

昼と同じくランガさんとわーすたさんから

やっぱり現在放送中のプリ☆チャンのOP曲なだけあり、ライブのOPとしてもぴったりです。夜公演での記憶は、わーすたさんの最上級ぱらどっくすのときに隣のオタクがクッソ騒いでいた、というのだけです。

相変わらず林鼓子さんは16歳でした。

Memorialからまさかの!?!?

わーすたさんたちのオープニングが終わると、再び号泣の前奏。もうすでにこの時点で夜公演のために残していた体力の4割くらいは消えていたのですが、思わず叫んでしまいます(というかどの曲がきても叫んでた)。

Memorialはマジで前奏でうるっとしちゃう。走馬灯のようにプリパラのエピソードが浮かんできちゃいます。

いつもの"おはよう"でさえあたりまえじゃなくてステキな奇跡なんです。初めてのドキドキ思い出して無敵になれちゃうんです。

昼公演ではこのあと僕の大好きなぷりっとぱ〜ふぇくとだったのでここで全力を出すつもりだったのですが、まさかのTRIal HEART 〜恋の違反チケット〜がきました。

まさかまさかのみれぃソロ曲2曲もやるなんて。ここで一回昇天しました。南みれぃさんのアイドル検事姿、大好きです。全然関係ないですがプリパラのOPでみれぃがプリパラチェンジするときの変身シーンが大好き。髪の色変わるところ。

f:id:ogijunchang:20181221215201j:plain

ソロラッシュも変更点多数

普通ライブって昼夜別であったとしてもそこまでセトリは変わらないじゃないですか。すごいのはTRIal HEARTだけじゃなかったんです。

なんとなんと、ソロラッシュの中で昼→夜で変更された曲は8曲中なんと5曲

夜公演は ふわり、シオン、りんか、みらい、えも、しゅうか、ひびきの順。

昼公演はプリパララッシュ、夜公演はプリ☆チャンラッシュと言えるのではないでしょうか。

ここで一番盛り上がったのはやっぱりえもちゃんのスキスキセンサーですね。

f:id:ogijunchang:20181221214740j:plain
やばいcaution!!

えもちゃんはなんとそふぃでもあるのです。久保田未夢さんすごい。自分的にはそふぃよりえもの方が声が好きです。やっぱりクールよりもポップの方が好きだなぁ

この曲はすでにコールが曲の中に入っているため、盛り上がり度が段違いです。E!M!O!T!I!O!N!!感情!!

そしてなんといっても、期待していた通りしゅうか役の朝日奈丸佳さんが目の前にきてくれました。しかも目の前で停止してくれて手振ってくれました。いやマジでしゅうか。しゅうかあああああああああああああ”あ”あ”あ”あ”あ”あ”あ”あ”あ”あ”あ”あ”(声昇天)

f:id:ogijunchang:20181221220115j:plain
努力型アイドルがやっぱり好き

ペアライブも安定の盛り上がり

ライブの構成はほとんど同じで、曲目が全然違うというのが今回の公演。ペアライブも4曲中3曲が変更。曲始めの高なりが止まりません。

最初のらぁら&みれぃの「ま〜ぶるMake up a-ha-ha!」も盛り上がる曲です。あ!は!あ!は!あははは!!!って言ってるのはたから見たらやばいですよね。でも止められなかった。

にの&シオンの「快打洗心♡カッキンBUDDY」も好きです。シオンの無駄にかっこいい声病みつきになります。カラオケで思わず真似しちゃいます。

ふたたびWITHタイム

WITH登場です。ここではGiraギャラティックタイトロープはそのままに最初の一曲を別の新曲に変えてきました。

ライブの前日にYoutubeでWITH新曲のサンプル動画を見ていて、そのときにこの曲はタオルを回して欲しいです!振り付けもあります!!って言っていた「always WITH you」だと思い出しました。とっさに振り付けを思い出せなかったのが悔しいです。相変わらず盛り上がり度は異常でした。いいぜ!いいぜ!いいぜ!いいぜ!

www.youtube.com

合いの手でいいぜ!って入れるのずるいですよね。

プリ☆チャン曲は変更なし

変更なし、っていうかプリ☆チャンは曲がこれしかない、って感じですね。でも楽しいです。今回は落ち着いて赤城あんなちゃんもとい芹澤優さんを見ることができました。後光がすごいですが。もうここまでくるとランナーズハイではなくライブハイになってきて疲れを感じなくなってきます。最後まで駆け抜けられる自信が出てきました。

チームライブ、大号泣

まあここはなにがきても泣かざるを得ないんですが、夜のセトリは本気でした。

アメイジング・キャッスル、Get Over Dress-code、Believe My Dream、そしてトライアングルスター。

やっぱり何と言ってもアイドルタイムプリパラ終盤でまさかの新曲ですべてをかっさらっていったDressing PafeのGet Over Dress-codeです。

アニメを視聴してた時、本気でDressing Pafeのことは途中から忘れ去っていました。GODアイドルにならなきゃいけないとなったときに、このままの流れだとマイドリがGODアイドルなんかな、と思っていたところにDressing Pafeの登場。プリパラ初期からのライバルがついに神アイドル級になるというその瞬間は涙なしには見られませんでした。GODのメイキングドラマはマジでいつ見ても泣けます。(今も涙目)

合いの手で今までの曲の合いの手が入ってるのも最高にエモいですよね。プリパラの曲を考えた人はほんとうにすごいです。

f:id:ogijunchang:20181221222158j:plain
一生ついていきます

クリスマスソングとドロマゲドン・ひ

ここは変更なしですね。昼公演のときはドロマゲドン・ひの新曲はかなり聞き辛いというかなにをいってるのかよくわかってなかったんですが、夜公演は心なしかお互いのやりとりの声が聴きやすくなってたような気がします。2回目だったからかな?

そしてエンディングへ

プリリズ曲やエンディングもここは安定な感じで変更はさすがにありませんでした。昼公演の感想のときはいっていなかったのですが、ここの間でプリパラのライブツアーの決定とキラッとプリ☆チャンのシーズン2の発表、今回のライブのグッズ紹介など小休憩(盛り上がりすぎて休憩できない)がありました。

プリパラシリーズが完全に終了してから追いついた自分としては、もうプリパラはこのライブで終わっていってしまうコンテンツなんだろうかと思っていたところのライブツアー12公演決定だったので、本当に本当に嬉しかったです。しかも新曲は出続けるし、運営側の本気度が伺えます。

夜公演も無事に終わり、喉が完全に潰れていることに気がつきます。もうここまできたらやるとこまでやっちゃえということでエンドロールのちゃんちゃんぷーもバカみたいに叫びました。

全体の総括

今回初めてプリティーシリーズのイベントに参加してみて、さらにプリティーシリーズのことが好きになりました。

1月から劇場にて再放映されるアイドルタイムプリパラの映画や2月のプリパラライブ(日曜昼・夜両公演参加決定しました)、そして4月にやるプリパラライブと、これからもずっとプリティーシリーズを応援し続けます。

夢に向かって頑張る子はみんなかっこいい。僕の人生のオールタイムベストの一つになりました。

最後はみんなで!!ゆめかわ!!!! f:id:ogijunchang:20181221223716j:plain

プリティーライブ2018に行ってきた話(昼)。

み〜んなでキラッとプリティーライブ2018に参加した

avex.jp

プリパラ season.1 ~ 3までを完走したと報告したのは11月初旬だったわけですが、

ogijunchang.hatenablog.com

アイドルタイムプリパラ (51話)、キラッとプリ☆チャン最新話 (37話)を完走、そして現在プリティーリズム オーロラドリームを視聴中 (32話)です。

2ヶ月未満で100話以上見てるのは思い返せば狂気なのですが、それ以上に12/9開催のみ〜んなでキラッとプリティーライブ2018(以下プリティーライブ)への情熱が勝ちました。

ライブ当日までになんとかキラッとプリ☆チャンを最新話まで完走し、事前知識は万端、かつ一気見の異常なハマり度のおかげでライブに対する熱はテンションMAXでありました。

僕はアニメとかゲームとか声優さんとかのライブは参加したことがなく、正直周りと同じように楽しめるか不安でした。プリティーライブの前日にBangDream!!のバンドであるPoppin' Partyさんのライブに参加したのですが、本当に申し訳ないのですが ライブ中もプリパラのことを考えてました。

ポピパさんのライブを見てなんとなく声優さんのライブの雰囲気を掴み、あくる日のライブがどんな感じになるか予想はしていたのですが、プリティーライブはその予想をいい意味で裏切ってきました。

圧倒的曲数

これに尽きます。今まで僕が参加してきたライブは大半がバンドだったため、やってもせいぜい15曲前後でした。(ユニゾンは21曲もやってた、強い) プリティーライブは全員が歌のみ(それでもダンスはする)であり、かつ声優さんの数も膨大だったためある程度は曲数も多めだろうと予想はしていたのですが、まさか34曲もやるとは。正直今でもセトリを見ると涙が出ます。

各曲に対する感想は僕よりも詳細に伝えているブログがあるので書きませんが、とにかくエモさの境地に達しました。

第一セット、昼公演

先に物販列に並ぶために11時ごろに幕張に到着したのですが、最初に驚いたのは 客数の多さ でした。

こんなにプリティーシリーズのことを応援している人がいるんだと知ったときは嬉しかったし、今までこの作品を「女児向けアニメだから」といって嫌厭していた自分に深く後悔の念が刻まれました。

そして次に驚いたのは女性ファンがかなり多いことです。

King of PrismやWITHがいるためある程度は女性ファンもいるかなと思っていたんですが、想像以上に女性が多い。今回参加した昼夜の公演でどちらも隣は女性でした。

WITHが出てきたときは僕以上に騒いでました。いいぜ!いいぜ!WITH!WITH!

物販コーナーはプリ☆チャンの筐体があったり、謎に米が売ってたり、タピオカミルクティーが飲めたり、普通に楽しい感じでした。

全然買うつもりなかったのに、流れに身を任せた結果Tシャツとタオルとパンフとラババンと缶バッジを買ってました。おそるべしプリティーライブ。

ライブ本番

Run Girls, Run!とわーすたでスタート

最初はRun Girls, Run!さんのプリ☆チャン曲、そしてわーすたさんのちゃんちゃんぷーとプリ☆チャンED曲でスタート。

正直ランガさんもわーすたさんも中の人は誰一人よく知らなかったんですが、林 鼓子さんが16歳というのにガチでびっくりしました。

周りの人も驚いた反応をしていましたが、おそらくみんな知っているんでしょう。僕はガチトーンで「え"ッッッッ!?!?」と言ってしまいましたが??

すごいですね、ランガさん。あとの二人も僕と同い年みたいです。これからもプリ☆チャンのキャラ含め応援しようと思います。

そしていきなりクライマックス

SoLaMi DressingのMemorialでいきなり涙腺が崩壊寸前になります。この曲は振り付けがプリパラのことを本当に考えて作ってあるので、ぜひ見て欲しいです。

youtu.be

Memorialからの、ソロ曲ノンストップが始まります。一曲目はなんとぷりっとぱ〜ふぇくと

僕がプリパラを見てよかったと本気で思った理由になる一曲です。みれぃの可愛さがつまったこの曲を芹澤さんが目の前で歌っているというこの事実だけでエモエモのエモでした(語彙力消失)。

そこからは そふぃ、シオン、みちる、にの、ゆい、しゅうか、ひびきと連続でプリパラシリーズが続きます。にの役の大地さんもしゅうか役の朝日奈さんも可愛すぎだし、ひびき様役の斎賀さんもかっこよすぎだしヤバイ。ここで一旦声が枯れる。

ソロ曲からチーム曲へ

ソロ曲ラッシュが一息つき、暗転の中チームライブスタートの号令。みらい&えものレディー・アクションから始まり、アロマゲドン、らぁら&ゆい、あんな&さらと続く。

ここで隣のオタクが泣いていることに気づく。まぁ泣くわな

このチーム曲の中では一番あんな&さらのPlay Sound☆が好き。ていうかセリコが好き。衣装も凝りまくっててマジであんなだった。かわいい

f:id:ogijunchang:20181219232718j:plain
はいかわいい

WITHタイムスタート

チームライブでボルテージが上がっているところにイケボが聞こえてくる。WITHの登場に会場は多分一番の盛り上がりを見せた。

WITHはこの前単独ライブで5曲くらい新曲を披露したとのことで、新曲の好きにしてI-I-Z-Eと安定のGiraギャラティックタイトロープ。新曲は合いの手がずるい。こんなん盛り上がらないわけないんだよなぁ

「Prism Galaxy...」の一言で会場が爆発しているのは見てて本当に面白かった。これからもWITHの3人には活動し続けて欲しいです。

f:id:ogijunchang:20181219232839j:plain
いいぜ!いいぜ!

プリ☆チャンタイムスタート

ここからプリ☆チャンのチーム曲が連続します。なんといってもメルティックスターの新曲。ライブが開催した日に放映されたアニメでの初披露曲ということで、僕は時間的に見れなかったので残念だったけどとてもいい曲だった。Aメロで体横に揺らしてるやつが好き。

f:id:ogijunchang:20181219233026j:plain

プリ☆チャンはまだ曲数もあまり多くはないけど、どの曲も名曲ばっかりで好き。さすがテーマが自分発信なだけあって盛り上がれる曲ばかりです。やっぱり合いの手をみんなで入れられるのがライブのいいところですね。

プリパラ涙腺崩壊集

もう一度会場が暗転し、プリパラのダイジェスト映像が流れます。ここはさすがに僕も泣きました。だってDressing Pafeはずるいもん。GODアイドルだもん。

f:id:ogijunchang:20181219233139p:plain
みんなここで泣くよね?

あとやっぱりMY☆DREAMのハートフル♡ドリームがいい。声がなくなるまでパンゴハンメンルイを叫び続けた。

新曲、プリリズ曲、そしてクライマックス

12月ということもあってプリパラ劇中歌のバースデイソングをクリスマスソングに歌詞を変えて。前日にはポピパさんにクリスマスを祝われて、そしてプリパラの人たちにクリスマスを祝われて、もう僕は最高のプレゼントをもらいました。ありがとうございます(土下座)

そしてキャラ投票の上位三人による新曲。ドロマゲドン・ひというなんともプリパラらしいチーム名ですが、曲もぶっ飛んでて面白かったです。

デビデビデビ!!デビデビデビ!!ドロシー!!ドロシー!!

あろまとドロシーどっちも大好き。あ、1位と2位なんだった。

ここからプリリズの曲が入ります。このときはプリリズ未視聴だったので、ちょっと外野感がありましたが面白かったです(主になるのところ)。あと声優さん3人のトークが面白い。さすが経験豊富なだけあるって感じです。

f:id:ogijunchang:20181219233325j:plain
あいらちゃん可愛いです

最後は安定のMake it!、そしてオールアイドル組曲 プリシャス♪です。プリシャスは知らない曲でしたが、全員が歌っているというだけでエモエモです。みんな大好き。

総括

昼公演は夜公演よりかは控えめにやってくるのかな、と勝手に思っていましたが全然そんなことなく、むしろ最初のぷりっとぱ〜ふぇくとのせいで昼の方がよかったまであります。昼が終わって物販コーナーに戻るとき、「まだこれがもう一回見れるの…?」と鳥肌がたちました。

昼夜一緒に書こうと思っていたのですが、想像以上にエモくなってしまいここまで書いてしまいました。夜はまた改めて感想を書こうと思います。

【JavaScript】入門編 継承について

インターン始まってjsPrimer.netというネットで見れるJavaScriptの入門書を読んでいる次第であります。わかったつもりになってたけどイマイチよくわかってなかった継承についてまとめたいと思います。

jsPrimerは誰でも閲覧可能です。

jsPrimer.net

継承とは

クラスの機能や構造を引き継いだ新しいクラスを定義すること。

使い方

新しいクラスを宣言するときに extends 親クラス を書くだけ。

  • extends を使って定義した子クラスから親クラスを参照するには super を使う。
  • classは必ず constructor メソッドを持つが、これは継承した子クラスでも同じ。

例:

class Parent {
    constructor(...args) {
        console.log("Parentコンストラクタの処理", ...args);
    }
}
// Parentを継承したChildクラスの定義
class Child extends Parent {
    constructor(...args) {
        // Parentのコンストラクタ処理を呼びだす
        super(...args);
        console.log("Childコンストラクタの処理", ...args);
    }
}
const child = new Child("引数1", "引数2");
// "Parentコンストラクタの処理", "引数1", "引数2"
// "Childコンストラクタの処理", "引数1", "引数2"
  • constructor メソッドで何も処理を行わない場合は constructor は省略可能。 => extends をした時点で、
class Parent {}
class Child extends Parent{
}

と例えば書いたとしたとき、

class Parent {}
class Child extends Parent {
    constructor(...args) {
        super(...args); // 親クラスに引数をそのまま渡す
    }
}

これと同じことを書いていることになる。( ここ自分的に重要 ) もしコンストラクタで何か処理をする場合で、かつ親クラスに引数を渡したい場合は super(...args) と書くということ。

  • class構文では、必ず親クラスのコンストラクタ処理( super() )を先に行い、その次に子クラスのコンストラクタ処理を行う。

理由: super() で親クラスのコンストラクタ処理を呼び出さないと this に触れたとき SyntaxError になるから。

  • そのほかにも super() は子クラスから親クラスのコンストラクタ処理を呼び出すときに使える。
  • super.プロパティ名 で親クラスのプロトタイプメソッドを参照できる。

例:

class Parent {
    method() {
        console.log("Parent#method");
    }
}
class Child extends Parent {
    method() {
        console.log("Child#method");
        // `this.method()`だと自分(`this`)のmethodを呼び出して無限ループする
        // そのため明示的に`super.method()`とParent#methodを呼びだす
        super.method();
    }
}
const child = new Child();
child.method(); 
// コンソールには次のように出力される
// "Child#method"
// "Parent#method"

自分的に覚えておきたい挙動はこんな感じ。最近わかったけど、マジで自分のコードをリーダブルにするのって大変。読みやすいコードを書く練習をしなければいかん、と改めて思いました。

【JavaScript】冗長なタグ記述を綺麗に書く

完全に自分用の備忘録。

 

インターンが始まって最初は軽い課題をこなしている最中なんだけど、JavaScript力なさすぎて萎えてる。しかもSlack見る限り自分が一番進み遅くて萎える。

 

やりたいこと

ボタンを押されたとき、JavaScript内でHTMLのコードを書きたい。

改善前のやりかた


    function buttonPressed(){
      target = document.getElementById("embedded");
      target.innerHTML ='~position="0 1 -8" radius="2" color="#EF2D5E" shadow="">~ rotation="0 45 0" position="-1 -0.5 -4.5" color="#4CC3D9" shadow="">~ color="#FFC65D" radius=".5" height="3" position="1.25 0.5 -4.5" shadow="">~ color="#099" width="5" height="5" rotation="-90 0 0" position="0 -1 -6" shadow="">';
	  }
	

バカ長い。(これはタグのとこ消してるからもっと長い)

開発するとき、基本的にコードは「いつでも簡単に変えられること」が求められる。「どこどこのpositionを直したい!」と思ったときに、innerHTMLにしていると代入しているところ全部をみなきゃいけない。これは可読性を落としバグを生む原因になる。悔い改めて。

 

改善後のやり方

 


    function buttonPressed(){
  //info = a-sceneの要素ノードオブジェクト
  const info = document.getElementById('embedded');
  //新しくa-sphereタグの要素ノードを作成
  const sphere = document.createElement('a-sphere');
  //新しくa-boxタグの要素ノードを作成
  const box = document.createElement('a-box');
  //setAttributeでsphereに新しい属性を追加する
  //positionは座標,radiusは径,colorは色
  sphere.setAttribute("position","0 0 -8");
  sphere.setAttribute("radius","2");
  sphere.setAttribute("color","#2da7df");
  //最後に完成したa-sphereタグをa-sceneのなかに入れる
   box.setAttribute("position","-2 -1 -5");
  box.setAttribute("color","coral");
  info.appendChild(sphere);
  info.appendChild(box);
}

だいぶ見やすくなった。

  • document.createElementとは

砕いて言うとHTMLのタグの部分の代わり。上記のコードではまずa-sphereタグを作って、setAttributeでタグの属性を追加する(position,radius,color)そんで最後にidから呼び出してきてたオブジェクトにappendChildしてやればさっきのクソ汚いコードと同じ動作が実現可能となる。

これなら「sphereのpositionを変えたい!」となったときにぱっと見で座標の部分がわかるし、新しいオブジェクトの追加や削除も簡単にできるんじゃないだろうか。これでプルリクや。