ぱすたけ日記

日記っぽいのを書きます。

2019年の良かったマンガを紹介します

はじめに

2019年に読んだマンガ単行本約500冊から良かった作品のご紹介です。例年通りなんですが、1巻成分が多めで続きものは過去に紹介しているのもあるので省いています。

あと、こういうのも作ったのでご利用ください。

2018年のまとめはこちら。去年のベストに選んだアクタージュ、まだ読んでない人はこっちも読んでください。2019年もうなぎのぼりに面白かったです。

2017年のまとめはこちら。

2016年のまとめはこちら。

目次

とにかくこれを読んでくれ

忙しい人向けにとにかく読んで欲しい作品5作7作*1です。

SPY×FAMILY

もう各賞総嘗めしているので、言わずもがなだと思います。万が一読んでない人は読んでください。キャラクターもストーリーも設定で展開も構成も全部が最高です。

春とみどり

春とみどり(1) (メテオCOMICS)

春とみどり(1) (メテオCOMICS)

死んでしまった親友とそっくりの娘と同居する百合マンガ、2人の距離感、エピソードどれもエモくて良い。2019年最高の百合マンガの1つだと思っています。

よふかしのうた

『だがしかし』のコトヤマ先生の新作。前回は駄菓子テーマがどうしてもあった*2けど、今回は夜ふかしとその夜の街での遊びというか冒険から来る自由さやワクワク感とかが伝わってきてめっちゃ良い。

ひとりぼっちで恋をしてみた

1巻の冒頭のめっちゃ良い見開きからの家出、心理描写も丁寧で、2巻は良すぎてラスト泣けた。

スキップとローファー

田舎からやってきた若干空気の読めない主人公に周囲の人物がドンドン引き込まれて良い感じに仲良くなっていく話でとにかくハッピーで良い。若干不協和音感のある人同士もなんだかんだ些細なきっかけでLINEのID交換したりして、こういうのあるよねって思ったし、とにかくいい気持ちになれる。最高。

水は海に向かって流れる

田島列島先生はズルい。こんなにも全てのキャラクターの仕草や振る舞いが人間臭くて、セリフがどれもビシッと決まってて1つ1つが作品の流れや空気を作っていて本当にズルい。もう田島列島先生は反則にして欲しい。

短編集も最高なので読みましょう。

田島列島短編集 ごあいさつ (モーニング KC)

田島列島短編集 ごあいさつ (モーニング KC)

  • 作者:田島 列島
  • 発売日: 2019/12/09
  • メディア: コミック

まくむすび

『マヤさんの夜ふかし』の保谷伸先生新作!高校演劇部を舞台にした作品で、とにかく読んでいてワクワクが伝わってくる。演劇を通じて表現することを突き詰めていく姿勢に熱くなる。3巻は本当に圧巻で、冒頭の講評から顧問獲得からの特訓の様子が本当に良かった。

以下ご紹介です

乙女怪獣キャラメリゼ

少女漫画っぽさのある展開や絵にも関わらず、主人公はときめくと怪獣になってしまうというギャップが良い。

オンラインの羊たち

[asin:B07KYMCMY8:detail]

1999年のインターネット黎明期を題材にした作品で、イラストチャットやBBS、オフ会での揉め事、テレホタイムなど懐かしい小ネタがドンドン出てくるので、そういうノスタルジーに浸りたい人にオススメです。

もういっぽん!

柔道少女 園田未知が主人公の柔道部の話。少しずつ部の仲間が集まり、みんなでチームを作っていくビルディングの様子や、未知が前向きな感じが元気になる。

疑似ハーレム

ゲッサンらしいなぁ〜〜って思ったラブコメ。演劇部の後輩女子が先輩にあらゆる女の子を演じて疑似ハーレムごっこをする合間に見せる素の表情がズル。

https://sgk.comicdrive.jp/?p=27a83d

ふたりソロキャンプ

今年、めっちゃ久しぶりにキャンプしたんですが、周囲の人たちがギアを買い集めている様子を見ると、ゲンのことをふと思い出しました。

見上げると君は

はぁ〜先ほど4巻を読んだんですが、めっちゃ良かった。2人が付き合うのがゴールかと思っていたけど、付き合ってからが最高にエモい。周りの人たちも巻き込んでハッピーな感じがやってくる作品は読んでいて楽しいし嬉しい。

青の島とねこ一匹

こういう逃避行して田舎や離島やで暮らすマンガを今年はよく読んだ気がする。ご飯のシーンも美味しそうで、1巻ラストで明かされた草太への青の想い出。2巻も良かったです。

妻、小学生になる。

読む前はもっとラブコメ感のある作品かと思っていたけど、読んでみたらしっかりした家族ものでビックリした。

彼女と彼氏の明るい未来

『彼女は宇宙一』の谷口菜津子先生の連載作。可愛い彼女がヤリマンだったと聞いて、過去を疑似体験できるVRで彼女のハジメテになろうとする話。気持ち悪さとか生々しさが良くて続きが気になる。

将来的に死んでくれ(6)

いや〜〜〜完結しましたね。正直もっともっと無限に読んでいたかった〜。

すべての人類を破壊する。それらは再生できない。

マジック・ザ・ギャザリングを題材にしたマンガだけど、知らなくても面白い、ただ小ネタとかカードバトルのシーンも多いので少し分からないこともある。90年代後半のノストラダムス的な世界観の回顧的な要素もあったり、ラブコメ感もあったりしてテンポよく読めて最高。

剥かせて!竜ケ崎さん

爬虫類の特性を持つリザードマンな亜人のヒロインと脱皮フェチの主人公とのラブコメ。主人公が高度な変態でヒロイン竜ケ崎さんの気持ちが伝わりきることの無いもどかしさが良い。ここから2人の距離がどうなっていくか楽しみな感じ。

ダブル

『潜熱』の野田彩子先生の新作! 別名義でBL作品を描かれてたのも活かされて、友仁と多家良の関係性の描き方が絶妙。とにかく7話くらいまで読んでください!

可愛いだけじゃない式守さん

式守さん尊い

踊るリスポーン

死んでも最後に寝てた場所に生き返る壇ノ浦調子と死因にすら嫉妬するほどのヤンデレっ娘の山崎声を筆頭に尖った個性の登場人物たちがドンドン出てくるドタバタ感とその人物の個性たちに負けないセリフの言葉選び、その言葉の量、それを読むのを辛く感じさせないテンポ、全部が最高にまとまってて最高だった。キャラの絵も特徴があって可愛いし、本当に文句の付けどころがなかった。今すぐ全員読みましょう。調子が声にデレていくのも良い。

私以外人類全員百合

主人公が百合というか女性しか居ない世界に紛れ込んでしまう話。「ふつう」を愛する潤野茉莉花が女性しか存在しない世界に迷い込んでいたという設定で弟が妹になっていたり、女友達同士がキスをしていたり等々の出来事を上手く活かしてSFっぽい要素を織り交ぜていて、SFからくるシリアスな感じと百合漫画らしさのバランスが良い。

オレが私になるまで

オレが私になるまで 1 (MFC)

オレが私になるまで 1 (MFC)

主人公のちょっと悪ガキなアキラがある日女の子になってしまう話。女性になった後には自分が過去に同級生の女子にしたことを悔やむシーンや、女子として振る舞うことの苦悩、それを受け入れていることを家族に伝える苦悩、色んなことに1つずつ主人公のアキラがしっかり向き合い悩みながらも前向きに成長していく姿が力強く、心理描写も丁寧で上手でスゴく惹き込まれて一気に読めた。

夜と海 2巻

夜と海 2巻 (ラバココミックス)

夜と海 2巻 (ラバココミックス)

1巻に引き続き2巻も良かったですね。ここに選ぶくらいには最高でした。それで伝わってくれ!

ゆりでなる♥えすぽわーる

良い意味でリュウっぽいなぁって思った。高校卒業と共に政略結婚が決まっている心が街中で見かけた女子2人組からあらゆる百合を妄想してスケッチブックに描いていく。その百合妄想の後に現実の2人について描かれて読者だけは事実を知るという構成になってる。この構成が面白いし、妄想にふける心とそれを見守る雨海もまた百合で尊い。最高です。

初春が咲く

きららのコミックスって萌え4コマのイメージなので、普段は滅多に読まないんですが、こういう良いラブコメがあるならもう少し2020年はウォッチしようかと思いました。

夢中さ、きみに。

どの話も丁寧に作ってあるなぁと感じる短編集だった。キャラも独特だけど現実離れしてなくて良かった。このマンガがすごいオンナ編2位おめでとうございます。

うちの師匠はしっぽがない

落語もの最近は色々出ている中でも、落語描写も丁寧な一方で、キャラクターの設定は少女に化ける豆狸の女の子だったりしてそれがまた良い。ストーリーテリングも良くて感動したので読んでください。

ゆこさえ戦えば

すうの空気攻略』の福井セイ先生の新作で、前作同様にいい感じに気が抜けてる主人公を眺める感じでゆる〜く読めて便利。周りがドンドン巻き込まれて緩んでいくのも良いですね。

https://sunday.tameshiyo.me/YUKOSAE00

あの鐘を鳴らすのは少なくともおまえじゃない

アサダニッキ先生のマンガってこれまでなんだかんだで読んだことなかったんだけど、掛け合いがテンポよくサクサク進んで良いですね。百合かどうかは怪しいと思う。

私がモテないのはどう考えてもお前らが悪い! 16巻

最近のわたモテ、めっちゃ百合というか気付いたら智子に友だちがめっちゃ出来ててスゴい。1巻からは想像がつかない登場人物と相関図の複雑さ。絵文字頑張れ。

その他の2019年の良かったマンガたち

買った単行本の一覧から選んでいる結果、ウェブだけで読んでいるのが抜けがちなので、貼っておきます。

サマータイムレンダ

[asin:B07YQW31ZK:detail]

最近謎が解けてきて1から読み直したい気がしてきているけど少し我慢している。

純情戦隊ヴァージニアス

ヒーローでもなんでもないやんって感じだけど、登場キャラが全員チョロくて週2更新ありがたいってなってる。読んでください。

パルノグラフィティ

これをやるのがズルい。

蒼のアインツ

今年のサッカー漫画です。よろしくおねがいします。

あと、この記事には載せなかったけど、良かった作品たち紹介しているので、余力があったら読んでください。

*1:書いてるうちに増えました

*2:最近気付いたけど、テーマがあってフォーマットも大体同じやつ途中で飽きてしまう

僕が2019年に読んだマンガから今年1巻が出たものまたは短編集だけを抽出しておみくじ出来るやつ作った

今年読んだマンガは全部Spreadsheetになっているので、そこから1巻っぽいのを抽出しておみくじにしました。

昨日寝る前に思い立って、朝起きて昼前くらいに書き始めたら高速に出来た。便利。

作品を読んだ感想を聞きたい場合は結果を僕にmentionしてくれたら答えます。よろしくおねがいします。

今年のマンガの感想まとめる活動は今から開始します。

良いお年を〜〜〜

2019年の記録① 映画館で観た映画

それぞれの映画館の会員情報ページとかをパースして調べた。個々の作品の感想は個別に聞いてください。

映画を映画館で観た回数は全部で51回、ちなみに松竹系列が23回、TOHOシネマズが13回、『劇場版 響け!ユーフォニアム~誓いのフィナーレ~』が9回でした。

均すと週に1回という感じだけど、MOVIX京都の爆音映画祭のときは1日に4本観たりとかしてたし、基本的に1回で2本とか観ていてそういうペースだった。

松竹系列

TOHOシネマズ

  • PSYCHO-PASS Case.1
    • 鑑賞日: 2019/02/03
  • プロメア
    • 鑑賞日: 2019/05/26
  • コンフィデンスマンJP
    • 鑑賞日: 2019/05/26
  • プロメア
    • 鑑賞日: 2019/06/10
  • 海獣の子供
    • 鑑賞日: 2019/06/10
  • ウィーアーリトルゾンビーズ
    • 鑑賞日: 2019/06/15
  • きみと、波にのれたら
    • 鑑賞日: 2019/06/24
  • ザ・ファブル
    • 鑑賞日: 2019/06/24
  • (IMAX)天気の子
    • 鑑賞日: 2019/07/19
  • ヴァイオレット・エヴァーガーデン 外伝 
    • 鑑賞日: 2019/09/14
  • 惡の華
    • 鑑賞日: 2019/10/06
  • (IMAX・字)ジョーカー
    • 鑑賞日: 2019/10/14
  • 記憶にございません!
    • 鑑賞日: 2019/10/14

T-JOY

イオンシネマ

京都みなみ会館

京都シネマ

  • イメージの本
    • 鑑賞日: 2019年05月04日(土)

出町座

  • 21世紀の女の子
    • 鑑賞日: 2019年03月11日(月)
  • 満月の夜には思い出して
    • 鑑賞日: 2019年07月05日(金)
  • 愛がなんだ
    • 鑑賞日: 2019年07月05日(金)
  • 羅小黒戦記 The Legend of Hei
    • 鑑賞日: 2019年12月04日(水)

塚口サンサン劇場

その他

おまけ

計測用のコードスニペットです

ウェブページの表示を遅くなくしたい時の道標

このエントリは以下のアドベントカレンダーの19日目の記事です。

突然ですが、先日行きつけのビアバーの店主が使っているPCが遅いという話があり、様子を聞くとどうやらHDDで且つメモリも4GBという雰囲気で、触ってみると、たしかにWindowsのホームメニューを出すのに数十秒とかかかっていて、これで暮らしているのは大変だろうと思い、HDDをSSDに、メモリは16GBに増強するということをしました。その結果見事に体験は改善されました。

一方、このときにふと思ったのは、速くなったねとは思うものの、遅かったものが普通くらいのパフォーマンスになっただけで、じゃあ他と比べて速いかというとそうではないよねということです。ウェブアプリケーションでもこういう話はあるなと思っていて、パフォーマンスチューニングと言っても、遅い状態から普通くらいにまず一旦持っていきたいよねと思うことがあります。

何の話かというとウェブアプリケーションを開発していると初期は素朴なので、HTMLもシンプルでJSも少なく、また画像なども必要最低限だけだったりして、阿部寛のウェブサイトのようにシュッとロードしてレンダリングが完了するのですが、ウェブアプリケーションの開発も進んでいくと、徐々にあれもこれもと徐々にHTMLも肥大化し、JSも大きくなり様々なモジュールがくっつき、場合によってはルーター的なのを内包し、ウェブページの中にも画像がドンドン登場したりして、いつの間にか雪だるま式にロード時間やレンダリングまでの時間が延びることになります。

今日は、この雪だるま式に膨らんでしまったロード時間やレンダリングまでの時間を短くしていくまでのことを紹介したいと思います。

つまるところ、First Contentful PaintやFirst Meaningful Paintまでを短くしようという話です。First Contentful PaintはいくつかあるPaint Timingの1つで、ユーザーがウェブページに遷移してきてからブラウザが DOM から受け取ったコンテンツの最初の部分をレンダリングするタイミングのことです。

初歩的なものを中心に紹介しますが、ウェブアプリケーションが大きくなっていく過程でこういったものは見落としがちで意外とシュッと出来る上に効果を感じられたりすると思うので、今一度皆さんのお手元のウェブアプリケーションにそういった箇所がないかチェックする際の指標になればと思っています。

スローガンのご紹介

この活動をやっていくときのスローガンを紹介します。復唱をお願いします。

  • 読み込まない
  • 実行しない

それぞれもう少し具体的なテクニックも踏まえて見ていきましょう。

読み込まない、そして実行しない

「読み込まない」は(そのときの表示に)必要なもの以外は読み込まないということです。例えば、ウェブページの上部を表示している時にウェブページ最下部に埋め込まれているYouTubeや、列んでいる画像を読み込まないということです。

Chromeのみですが、img要素に loading という属性があり、loading=lazy を指定することで遅延ロードをさせることが出来ます。非対応ブラウザでも IntersectionObserver などを使ってpolyfillできるので、こういったことをすることで簡単に画像の読み込みを抑制することが出来ます。

意外とページ内を見渡してみると表示範囲外に要素が沢山あるもので、それらの読み込みを削ることで本当に表示に必要なものにネットワークリソースやレンダリングコストを集中させることが出来ます。PageSpeed InsightやLighthouseなどで簡単にチェックできるので一度やってみてください。画像やJSやCSSなど削減できるものが見つかると思います。

画像の遅延ロードを設定してまわることをもう少し大枠で捉えるとそもそもHTML自体も最初は削ってしまって、必要なタイミングで組み立てたり、fetchしてきて挿入するということも考えることが出来るかもしれません。

一方で、不要なものは読み込まない一方で必要なものは少しでも高速に読み込みたいものです。例えば必要な画像が決まっていたり、レンダリングに必要な情報をJSON APIで取得することが分かっている場合はpreloadやprefetchを使用することでリソースの先読みをすることが出来ます。

また、ここで読み込まない対象として一番しっかり考えたいものとしてJavaScriptのファイルがあります。とは言っても現代的なウェブアプリケーションJavaScriptは切っても切れない関係ではあり、Reactなどを使ってSPAにしている場合にはいつの間にか巨大な1つのbundle済みファイルになっていることも少なくないと思います。読み込まないというわけにはいかないという前提で、どう削っていくかということを考える必要があります。

やはりここでもまずは最初のレンダリングに必要なJavaScript以外を読み込まないというのが鉄則になってきます。実行しなければ読み込むのは良いのでは?という方に向けて、ここでJavaScriptのファイルサイズに関する1つのグラフを紹介したいと思います。

(画像は JavaScript Start-up Optimization  |  Web Fundamentals より)

これによって分かるようにJavaScriptのファイルサイズを削減することは画像のサイズを削減すること以上の意味を持っています。JavaScriptは読み込まれるとそれがパースされ、コンパイルされ、実行されます。この間にかかる時間は画像のデコードよりも遥かに大きくウェブページの表示までのパフォーマンスに大きな影響を与えます。もちろんReactなどを使っていればJavaScriptを実行するまでが短くなればなるほどレンダリングが早くなるのは当然という感じでもあります。

このときWebpackのCode Splittingは1つの強力な選択肢になります。dynamic importを利用することで、JavaScriptを複数のChunkに分割してくれます。このことによりエントリポイントになるJavaScriptファイルは小さくなり、パースや実行の時間を短く出来ます。一方で、Chunkの分割を上手く戦略的にやったり、こちらもpreloadを設定しないと、メインの実行パス内でdynamic importをすることになってしまい結果的にJSの実行中にファイルの取得とパース等が起きてしまい終端のJavaScriptを実行するまでの時間が結果的に長くなり、レンダリングまでの時間が延びるということもあるので気をつけたいですね(この辺の上手いやり方があんまり掴めてないのでオススメ情報あったら教えて下さい)。

また現代的なウェブページの場合、ウェブページ内にSNSのシェアボタンや埋め込みのためのJavaScriptや場合によってはアナリティクスや広告のためのJavaScriptなど数多くのJavaScriptが読み込まれていると思いますが、これらも例えば必要な位置にユーザーがスクロールするまでJavaScript自体を挿入しないということも考えることが出来ると思います。

JavaScriptの実行は1つのフレームに対して1つのスレッドしかないので、これらの読み込みからの実行を抑制することでメインで提供・実行したいJavaScriptの実行時間をセーブすることにも繋がります。

また、読み込んだ際も、JavaScriptのそれぞれの関数などの実行を極力しないということも重要です。JavaScriptを書いているとメインのことをやりつつ、イベントをリッスンする形にしたり、Promiseなどの形にして、並列に複数のタスクをこなそうという風に記述したくなることがあると思いますが、こういったものを我慢して実行を遅らせるということもメインのレンダリングに必要なJavaScriptの実行時間を守るという観点で考えてみても良いかもしれません。色々なハンドラを初期化時に設定していることでいつの間にかメインの表示に必要なJavaScriptの実行を阻害している可能性があります。また、あるJavaScriptの(関数の)実行が長いことがPerformance計測などにより分かっている場合はrequestIdleCallbackのようなものの利用を検討してもいいでしょう。

JavaScriptの実行に関してはこれまた素朴にやっていると、ひとまずエントリポイントをdocument.addEventListener('DOMContentLoaded')に引っ掛けていたりするかもしれませんが、script要素のasyncと組み合わせて読み込み完了後即実行させていてもこれだと効果薄になってしまうので、DOMがなくても準備できるもの、例えばglobalに何かをexportするとか、Sentryの初期化をするとかはそれまでにさっさと終わらせておくみたいなのも地味に効いたりするので見直してみてください。

また、JavaScriptの実行がウェブページのレンダリングに与える影響に関しては過去にまとめたりしているので、そちらも手前味噌ですが参考になるかと思います。

まとめ

ウェブページの表示の高速化の遅くなくすための道標として、考え方のヒントになればと思って書いてみましたが、いかがでしたか?若干本文中は具体例に欠けるような感じにはなってしまいましたが、こういったテクニックや考え方を持って今年一年ははてなで提供しているGigaViewer(はてなで提供しているマンガビューワです)でのマンガ表示部分が表示されるまでの高速化などに取り組んでいたので、ブログ記事の形でざっと考えていたことを書いてみました。

株式会社はてなでは一緒にウェブページ表示の高速化をやっていく人を募集しています。

また、京大マイコンクラブではこういったトークを僕が極稀に合宿などで行ったりしているので、興味がある人は入部してみてください

身近な人はお声掛けいただいたら一緒にPerformance計測などをしながらこの辺の話を伝授するみたいなことも多分出来ると思うのでお声掛けください。

アドベントカレンダーの明日の担当は id:dekokun さんと:tofu_on_fire:さんです。楽しみですね。

好きなウェブサイトにmasawadaを表示できる<masawada-3d>を作りました

こんにちは!!!



みなさんmasawadaさんをブログに埋め込みたいですよね



そういう皆さんのために<masawada-3d>をCustomElementで作成しました


わいわい!!!!!

詳しくはGithubリポジトリを見てください!!!!!!!!!!!!!
詳細は省きますが、Three.jsで描かれていて、カメラとmasawadaの向きを与えることで任意の角度のmasawadaさんをウェブサイト上に描くことが出来ます。custom elementなのでCSSを当てたりも出来ますし、実態はcanvasなので、document.querySelector('masawada-3d canvas').toDataURL()とかでも出来ます!!!!属性をrequestAnimationFrameで書き換えるとかも良いですね。欲しい機能や属性があったらissueやPRで教えて下さい。

github.com


この記事はmasawada Advent Calendar 2019 - Adventarの2日目の記事でした。昨日の記事はmasawada Advent Calendar 2019 1日目: どこでもmasawada - The Third Lawでした。この記事はネタが被ったのでJSConfJP中に発想から実装を行いました。間に合って良かったですね。皆さんも自身のブログやウェブサイトなどでご利用ください。良い作例あったら紹介したいと思います。

(この記事はHTMLモードで書かれました)