旧gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

Html.mapでモジュール間のMsgの受け渡しをする

Elm 開発記録

趣味でElm製Markdownエディタを開発しているのですが、ようやくふつうにファイルを開いてふつうに保存することができる感じになってきました。楽しいです。今日はmacOSのナビゲーションを真似して、画面上部にナビゲーションを実装してみました。

今回はこの実装のときに出てきた悩みと解決法について書きます。

モジュールに切り出すときに出てきた悩み

Main.elmはだいぶ大きくなってしまっていたので、モジュールを分けて、こんな感じにしようと思って実装をはじめました。

-- Main.elm
view =
    -- いろいろ省略
    nav [] [
      -- プルダウンのデータを配列で渡したらいい感じに表示されてほしい
      PullDown.view [ filePullDown, viewPullDown ]
    ]

で、なんやかんやしてとりあえず表示するだけのところまではできたのですが、ある悩みが出てきました。

「あれ、Msgってどうやってやり取りすればいいんだろう」

やりたいのは、PullDownモジュールのなかで起きたことを、Mainモジュールのほうでさばくことです。さっきのGIFを見るとわかりやすいのですが、

ナビゲーション内の要素をクリックすると、画面の見た目が変わっています。つまり、「PullDownのView/Theme/Whiteをクリックした」というMsgをどうにかしてMainモジュールに伝えて、アプリケーションの状態を更新する必要があります。

Elm in Actionという本を以前買ってほとんど読まずに放置していたなと思い出し、中身を見たところ、答えが書いてありました。

Html.mapの型はこうなっています。

map : (a -> msg) -> Html a -> Html msg

Html.mapを使うと、Html a を Html bに変換することができます。今回、PullDown.viewの型はHtml PullDown.Msgですから、それをHtml Main.Msgに変換するということです。上記の関数の型にあてはめるとこういうことです。

map : (PullDow.Msg -> Main.Msg) -> Html PullDown.Msg -> Html Main.Msg

なので、このように利用します。

-- Main.elm
type Msg
--  = ... 省略
    -- Main.Msgに、PullDow.Msg -> Main.Msg となるバリアントを用意
    | GotPullDownMsg PullDown.Msg

Html.map GotPullDownMsg (PullDonw.view ...)

これでできました。なるほど1。

雑感

ReactとReduxを使った場合はコールバックを渡してこのようになるかと思います。

const Main = (props) => {
  const handleClickPullDown = () => {
    props.dispatchPullDownClickAction();
  }

  return (
    <PullDown
      pullDowns={[ filePullDown, viewPullDown ]}
      onClick={handleClickPullDown}
    >
  )
}

connect(mapStateToProps, mapDispatchToProps)(Main)

Elmの場合はonClickにMsgを指定するのでupdate関数でそのMsgの処理を行うことになりますが、Reactの場合はコールバックを指定するため、そこでいろいろな処理を挟むことも可能です。どこで何をするという処理の流れがElmのほうが厳密で、React/Reduxのほうが自由な印象を受けました。

また、いま自分がつくってるものが小さいアプリケーションなので考える必要がないだけで、もっと大きめのものをつくるとなったら、Modelやupdateの分割方針も考えないといけないのかなという感じがあります。Elm in Actionにはそのようなことが書いてあるのでありがたいです。今後も参考にしていきたいと思います。

  1. だいぶ端折ってしまったので、気になる方はNekobitoの実装を覗いてみてください。↩

第1回きまべんオンラインもくもく会に参加した

勉強会

楽しかったです。

scrapbox.io

そもそも「きまべん」ってなに？

id:tkykhk さんが書いてくれている記事がわかりやすいです。

https://blog.okweird.net/entry/2018/02/25/000000blog.okweird.net

今回はなにをやったの？

1つのページに、決まった時間に、別々のことを勉強している人たちが集まってひたすら勉強メモを更新するということをやりました。

感想

自分が書き込んでいるとき、他の人のカーソルが見えると、一人じゃない感がありました。1ページ内にいろんな人のアイコンとテキストがあるのは楽しい。

また、同じ教材で勉強していた人がいると、ハマりどころで助けてもらえるというのもいいな〜と思いました。自分も最近Rustの勉強を始めたところなので、Rust勉強している人たちがいるのがとても心強いです。

f:id:shgam:20200322195659p:plain
hem6さんの勉強メモにtanabeさんがコメントする様子。

今回は特に、1ページにみんなで書き込むという形にしたのが、コミュニケーションが生まれやすくて良かったと思っています。企画してくれた id:tkykhk さんに感謝です。面白かったので、今後はイベントという形以外でもこういうのができるように、今回のフォーマットでいつでも勉強メモを書けるようにしておこうと思いました。

ひとりで作るネットサービスとポツンと一軒家

考えごと

大学時代、ITmediaの「ひとりで作るネットサービス探訪」という連載記事が好きで、よく読んでいた。既存サービスのマッシュアップだったりCGMだったり、おもしろいウェブサービスを一人で立ち上げて、運営している人がたくさん出ていた。当時自分はまともな社会人として働ける気がしなかったので、こういうのを自分もやってみて、少しばかりでもお金が稼げるんだったらそれで生活したいな〜みたいな妄想をしたりしていた。

大学時代にがんばって3つくらい作ってみたけど、やっぱスキル不足で思ったより陳腐なものしかできず、はじめてユーザーが何十人かついたサイトも、すぐに人がいなくなって、閉じてしまった。

就職して、1社目は合わなかったけど2社目で思いのほか仕事が楽しくなり、気づけばそこで3年半も働き続けている。個人でなにかやらなくてはというのも薄れてきた。

そんなときに、ふとテレビでポツンと1軒家という番組を目にした。自分で山を買って切り開いて家建てて庭きれいにしてってやってる人たちが映されていた。かっこいい。こういう感じいいなと思った。

ウェブエンジニアも、自分でCMSつくってサーバー建ててそこに置いてブログ記事書いて公開みたいなことはできる。お金をつくることを目指さないのであれば、広げる必要なんてなくて、自分で気持ちよく使えるものをつくればいい。ネットサービスを個人で作るとき、人様のデータを預かるというのが一番こわいのだけど、それをしなくてよくなる。WordPressのように、使うには自分でサーバー建ててデータ管理してね、とか、データはローカルのファイルに保存して、オンラインストレージと同期して使ってね、とか、既存のサービスを使うためのクライアントみたいなものとかになる。

その前提で、直近つくりたいものは、以下のようなものだ。

こういうものを、趣味でほそぼそと作って、ものによってはちょっと友人を招くみたいな感じで利用権限を渡したり。そういう感じで、ポツンと一軒家モデルみたいな感じでインターネットとプログラミングを楽しんでいきたい。

モブプロ楽しい

開発手法

最近仕事でモブプロをやっている。楽しい。

何が楽しいか

  • 自分だけでは立ち止まるようなところでも誰かしらが解決してくれるので立ち止まらず進められる
  • typo指摘してもらえる。助かる。
  • typo指摘しただけで感謝される。嬉しい。
  • コードレビューで悩むことがない（モブプロの時点で解決している）
  • 全員が一発で仕様を理解できる（モブプロの時点で解決している）
  • テストなど、手を抜かずにしっかりやる傾向がある（例：ここのテストはこれで十分だろうか？いや、このcontextも書かないと。みたいな）
  • たくさんしゃべるので、のどの筋力低下防止になりそう（しらんけど）

気をつけないといけないこと

一方、気をつけないといけないこともある。

  • 急いで進めようとしてピリピリすると、質問がしづらい空気とか、作業を止めて話したりしづらい空気ができたりしてよくない
  • 個人のもくもく作業をみんなで眺める形になるともったいない（せっかく人が集まっているのだから、ただコードを書く以上に、一つでも多くの疑問が解消されるとよさそう）
  • 各々がそれぞれ別の作業をする以上の生産性を求めるのはさすがに無理がある気がしている（多少効率が落ちても、長い目で見て情報共有やら教育も兼ねられたから良いよね、くらいの温度感でやりたい）
  • 全員が悩まず実装できるようなお題でわざわざモブプロする必要はなさそう

今のところは、以上のような感想。あらゆる開発作業をモブプロにしたいとは思わないけど、要所要所でやっていけたらいいな

保険について

暮らし 考えごと

自分が死んだら遺族年金と貯金だけじゃ家族大変になりそうという間だけは死亡保険に入っておかんとなという気持ちはあるものの、医療保険とかはどう考えたらいいんだかわからない。高額療養費制度と傷病手当金で十分じゃないのかしら。

最近の情報収集のやりかた

考えごと

RSS

SlackでRSSフィードを登録して、Slackから見に行って読んでる。登録したいときは /feed subscribe [url] で随時足している。

今の所登録しているURL一覧は以下の通り。

Title: Release notes from compiler
URL: https://github.com/elm/compiler/releases.atom

Title: Microsoft Edge Blog
URL: https://blogs.windows.com/msedgedev/feed/

Title: webpack - Medium
URL: https://medium.com/feed/webpack

Title: Babel Blog
URL: https://babeljs.io/blog/feed.xml

Title: mizchi's blog
URL: https://mizchi.hatenablog.com/rss

title: blog.jxck.io
URL: https://blog.jxck.io/feeds/atom.xml

Title: Mozilla Hacks – the Web developer blog
URL: https://hacks.mozilla.org/feed/

Title: WebKit
URL: https://webkit.org/feed/

Title: Next.js Blog
URL: https://nextjs.org/feed.xml

Title: React
URL: https://reactjs.org/feed.xml

Title: Yarn
URL: https://yarnpkg.com/feed.xml

Title: The npm Blog
URL: https://blog.npmjs.org/rss

Title: Updates
URL: https://developers.google.com/web/updates/rss.xml

Title: TypeScript
URL: https://devblogs.microsoft.com/typescript/feed/

Title: JSer.info
URL: https://jser.info/rss/

記事が流れてきたらなるべく読んで、Slack上でコメントつけるようにしてる。

Twitter

情報流してくれそうなアカウントをフォローしたり、ツイート数多くてあんまり自分が見てもしょうがないなというアカウントは外したりミュートしたりして、リストとかできれいに整理しなくてもそこそこTLが役立つようには気をつけてる。とはいえTwitterなので技術と関係ないものも見ているし、そんな頑張って見てもいない。

理想

ちょうどいい量の情報が、ちょうどいいタイミングで入ってくるといいなと思っているので、今後もちょうどいい感じを目指して整えていきたい。

CSSで■、●、▲を描く

CSS CodePen

CSSでいろいろ描けるようになっておきたいなという気持ちだけは以前からあったものの、これまでちゃんとキャッチアップできていませんでした。まずは簡単なものからということで、●と▲と■をCSSで描いて、その実装方法について書いておきたいと思います1。

■

これは、widthとheightと背景色を指定するだけですね。

●

●も簡単で、直径の半分をborder-radiusに指定すると円になります。

.circle {
  --diameter: 200px;
  width: var(--diameter);
  height: var(--diameter);
  border-radius: calc(var(--diameter / 2));
}

▲

▲はちょっと難しかったです。CSS triangleで検索してみると、以下のジェネレータが出てきました。

生成されたCSSは以下のようになっています。

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

なるほど（わからん）。

よくわからないので、詳しく見ていきます。

border-width

まずは、MDNでborder-widthのページを見てみます。

border-widthに値を4つ指定すると、 border-width: 上 右 下 左の指定になるみたいです。しかしそれでもなぜ上の記述、border-width: 0 0 200px 200px で三角形になるのか理解できません。色の指定を border-color: #007bff;にすればただの正方形になるので、border-colorの指定が肝なのでしょう。

border-color

MDNには、border-colorに4つの値を指定したときの例が載っています。なるほど、色をつけてみるとわかりやすいです。borderは上下左右指定すると、それぞれが台形になるんですね。

それぞれ別の色を指定すれば、きれいに三角形ができるまでの過程がわかりやすいので、アニメーションさせてみました。

See the Pen Animation of making triangle by gaaamii (@gaaamii-the-sasster) on CodePen.

それぞれのborder-widthをboxの幅の半分に指定したところ、boxの中身が全部borderで埋め尽くされ、きれいに三角形で四等分されました。なお、border-box: 0にしておかないとbox内の領域をそのまま保とうとしてしまうので、boxに大きいborderが付くだけになってしまうので注意です。

表示したい三角形の部分以外をtransparentにしていた

こうやって見た上だと、先程のborder-colorの指定 transparent transparent #007bff transparent; が理解できます。下のborderだけ色を付けほかは透明にすることで、色をつけたところの三角形だけが表示される感じになっていたのです。

さらに、伸ばしたい辺のborder-widthをboxと同じ長さに、かつ向かい合う辺のborder-widthを0に、それ以外の辺はboxと半分の長さにすることで、いい感じにboxの幅と同じ長さの底辺の二等辺三角形が描けました。

まとめ

今回、CodePenで書きながら一通り確認しました。書いたものも一応公開してるので興味ある人は見てみてください。

See the Pen basic shapes (●▲■) drawn by css by gaaamii (@gaaamii-the-sasster) on CodePen.

三角形の描き方を理解するのに思ったより時間がかかりましたが、とりあえずは●▲■の描き方を覚えられたので、次はこれを組み合わせていろんな形の表現に挑戦していきたいと思います。調べたらElmのロゴをCSSで描いてる人がいた2ので、自分でもいずれチャレンジしてみたいです。

  1. この記事ではIE11などの古いブラウザについてはあまり考慮していないので、仕事の使ったりする場合は caniuse.com で確認するなどしてからにしてください 🙏↩

  2. https://www.youtube.com/watch?v=ZNBc1BsJZnQ↩

2020/01〜2020/03 やること

考えごと

次のクオーター（2020/01~03）の個人目標がざっくり決まったので、社外でやることだけ書いておく。

  • 会社のTechブログを2週に1記事（以上）更新する
  • 何かしらの勉強会で1回以上発表（LTも可）する
  • Elm Japan 2020 にcfpを出す

3ヶ月で1回の勉強会発表というのは慣れてる人からしたら大したことないのだろうけど、自分はまだ1度も社外で発表らしいことをしたことがないので、そこをクリアしておきたいというのがある。

逆にTechブログはハードルが低いしネタもありそうなので2週に1記事にした。とはいえ今クオーターの実績は2記事なので、その3倍と考えるとやっぱり大変そうでもある。

Elm Japan 2020はElm作者のEvanさんとかも来るガチイベントなのでcfp通すのは厳しそうだけど、cfpを出すというのも良い経験になりそうなので頑張りたい（締め切りまで時間あまりないので年末年始頑張ろう）。

「平成Ruby会議 01」を見に行った

Ruby 勉強会

同僚の id:atomiyama さんがRustでgemを書く話をするそうで面白そうだったので行ってきました。

heiseirb.github.io

各セッションの感想など

RubyでJVMを実装してみる

speakerdeck.com

Javaでコンパイルして出てくるバイトコード読んで云々という話だったけど、ぼけーっとバイトコード眺めてる間に話が進んですぐについていけなくなってしまった。あとスライドのコードとかあまり見れなくて視力の衰えを感じた...。

rustで拡張モジュールを作成してgemにする

speakerdeck.com

  • 順を追って説明してくれてありがたかった。
  • Rustで速くなるんだったら一部だけRustで書いてgemにするのはよさそう。どんなモジュールだとRustにするメリットが大きいんだろうと興味が湧いた。
  • 以前はffiを通じて他言語の実装を使うみたいなのはなんかすごい特殊なイメージがあったけど、最近（というか去年の今頃）ElmでPortを通じてJSのライブラリ呼び出すみたいなことをしてからは、必要があってインタフェースがちゃんとしてるんだったらやっていいんじゃないのという気持ちになっていたのでなおさら興味深かった。

やわらか増税 〜はじめての増税対応〜

真のREST

www.slideshare.net

自分は正直RESTといえば「URLでリソース表してHTTPのメソッドでCRUDするやつ、Railsがやってるやつ」みたいな雑認識があったので、その雑認識がとりあえずは潰されてよかった。特にREST APIはハイパーテキスト駆動ではないといけないというのが全然自分の頭の中になく、なんなら驚いてしまった。ちゃんと勉強しよう...。RESTful Web APIsという本が良いらしいので読んでおきたい。

全体の感想

どのセッションも自分が知らなかったことが多く、勉強になりました。どんなプラットフォーム向けに何を書こうにも、コンピュータそのものとか言語処理系のしくみとかWebの歴史とか、そういう基礎的なこと（だけど実務で学ぶ緊急性があまりないこと）をしっかり理解しておかないといけないな...と同世代のできる人たちを見ていて感じました。

高さいっぱいのアコーディオンメニュー

CodePen CSS

See the Pen Full height accordion by gaaamii (@gaaamii-the-sasster) on CodePen.

高さいっぱいのアコーディオンメニューを書いてみた。calc()は幸福度が高い。

こういうの必要なことはちょいちょいありそう。

「サバイバルファミリー」を観ました

映画

サバイバルファミリー

サバイバルファミリー

Amazon

突然電気もガスも水道も使えなくなって情報も全然入ってこないみたいな状況で家族みんなで東京脱出して云々というすごい大変そうな話だけど、暗い感じはなくてへらへら笑いながら観れて楽しかったです。

PWA Night vol.10 行ってきました

PWA 勉強会

pwanight.connpass.com

なんで参加したか

趣味でMarkdownエディタを書いていて、一応create-elm-appが吐き出すmanifest.jsonとregisterServiceWorker.jsをそのまま利用してPWA対応してあるのだけど、Service Workerとキャッシュ周りよくわかってないのでそこらへん知れたらいいな〜と思い参加しました。

メモ

  • SPAのSEOは相変わらずちょっと大変
  • プロダクションでがっつりPWAやっていってる人は、「アプリじゃストアの審査通らない！」「じゃあPWAだ！」というパターンが多いっぽい
  • Service Worker 周りは特殊なことしないのであれば自分でいちから書かずにworkbox使っておけばよさそう
  • https://oo.parts のデモ見せてもらったけどよく出来ていてネイティブアプリ感あった
  • WebAssemblyがどういうところに使えるのか実例見せてもらって雰囲気がわかった（雰囲気だけ）
  • JSとWebAssemblyが違うところとして、型情報があるから安定して動作するみたいな話が興味深かった（まだあんまりよくわかってないので学んでいきたい）

所感

個人的にPWAは、検索して、リンクをクリックして、使って、気に入ったらインストールして使うっていうプログレッシブな感じが気に入ってて、デスクトップアプリに関してはほとんどこれでいいのではという感じがしてます。普通のウェブアプリならそんなに難しい作業も必要ないので、いま使ってるウェブサービスの多くも、今後は当たり前にPWA対応されていくのだと思います。

雑にはてなブログテーマ用意して公開もせず使ってる

CSS 考えごと

ちょっと前に、はてなブログのテーマを作った。いや、作ったというか手元にテンプレートをおいていじくったやつを貼っ付けてるといったほうがいいかもしれない。

はてなブログは以下に素晴らしいテーマがたくさんある。

blog.hatena.ne.jp

あるんだけど、せっかくCSS読み書きできるのだから自分で書いてちまちま直すほうが、週末に庭の手入れしてるじいさんみたいな感じで楽しそうと思った。はてなブログの自作は以下のページを読むとわりと簡単にできる。

help.hatenablog.com

ありがたいことに、そのまま適用してもちゃんとした見た目になるボイラープレートがある。ありがたい。つまり、自作テーマを作るといっても自分でいちから書く必要はなく、ボイラープレートのリポジトリをcloneしてきて、npm i; npm start して、確認しながらCSSを書いて、ビルドされたCSSを貼るだけでいい。投稿したテーマは、良い具合の出来になるまではストアに公開せず、自分のブログにだけ適用しておけばいい。

f:id:shgam:20191112000312p:plain
自作テーマ管理画面