桐生あんずです

新卒エンジニア1年目のブログです。日常やプログラミングについて書いてます。

意図に沿ったHTML要素でマークアップすることの重要性(アクセシビリティ)を考える

桐生あんずです。 ここ最近は新卒研修のカリキュラムとしてオリジナルのWebサービスRailsとAngularを使って開発していて、社内の人たちから毎日コードレビューを受けています。その中で、以下のようなやりとりがあって興味深かったので学んだことを書き残しておきます。

経緯(書いたコードと指摘の内容)

最初、以下のように<a>タグでAngularのRouterModuleで用意されているrouterLink属性を利用して画面遷移のリンクを用意するコードを書いたのだけれど、

<a routerLink="/rules/{{ rule.id }}">詳細を見る</a>

<button>タグのブラウザのCSSを使い回したくなったのと、この後の記述に<button>タグで用意した削除の処理のボタンをマークアップしていたのでどちらも<button>タグで書いた方がすっきりするのでは?と思いつき、以下のように書き換えたのだった。

<button class="a-rule-show__button" routerLink="/rules/{{ rule.id }}">詳細を見る</buttton>

このコードをプルリクで出したところ、以下のようなレビューコメントをいただき「なぜそうしてはいけないのか」について考えてみることになった。

「いきなり結論から書きますが、特別な理由がない限り、リンクナビゲーションを <a>タグ以外で実装することは避けるべきです。 なぜなのかは、いったん自分で調べて考えてみてください。ちょっと難しいので考えても浮かびそうになければslackで聞いてください!」

そして色々調べて考えてみたところ、以下のような理由でこの記述はアンチパターンに当たることが改めて理解できたので紹介します。

セマンティクスに沿ったマークアップ設計はアクセシビリティを向上させる

HTMLで用意されている標準のタグ(<h1>, <nav>, <li>など)はそれぞれ意味が定義付けられており、今回使用した<button>タグならば「クリック操作を受け付ける」という意味を持っている。そして、<a>タグはナビゲーション、つまりリンクの行き先を示す時に使われる。

developer.mozilla.org

このように「○○は〜を表すものである」という考え方は セマンティクス(意味論) と呼ばれており、コードの断片に対して役割・意味を位置付けをするものである。

developer.mozilla.org

その考え方にしたがってブラウザの中で標準用意されたCSSはHTMLタグに対してそれぞれ文字のサイズや幅などのプロパティをセットしており、HTMLタグをマークアップするだけでユーザーがある程度想定している画面を用意してくれる。

ただ、標準のCSSをリセットしたり上書きをしてしまえばその見た目を打ち消すことは容易である。

(当たり前だけれど、多くのサービスのUI/UXは標準のCSSを打ち消してクラスを追加して綺麗なUI/UXを用意している)

そのようにCSSを打ち消した上でもHTMLタグを意味通りに使うことを正しく求められるのは、アクセシビリティに優れたページを作り上げる必要があることが一つの理由であると言える。 アクセシビリティについてはMDNの「アクセシビリティとは?」の記事の中で以下のように定義されている。

アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。

ここで自分のコードに立ち戻る。

<button>タグを使ってナビゲーションを用意しているが、もし読み上げ機能でHTMLのサイトを巡回している視覚障害者の方がいたと仮定する。

その場合、<button>タグを読み上げられても「クリック操作を受け付ける」ということしかわからず、「ナビゲーションリンクがある」という発想にたどり着くことまでに時間がかかってしまうことが予期される。

このシチュエーションはアクセシビリティが悪いという状態に陥っていると形容できる。この状況を改善するためには、本来「ナビゲーションリンクがある」という意味を持った<a>タグに置き換えることが求められるのである。

この具体例は断片に過ぎないので詳しくはMDNのアクセシビリティ関連の記事を読むのがお勧めです。

developer.mozilla.org

developer.mozilla.org

まとめ

一言で説明すると「使い方が定義付けられているHTMLタグをその意図に沿わずにマークアップを行うとアクセシビリティが低いサイトが出来てしまうのでやめましょう」ということなんだけれど、この結論に至るまでにはアクセシビリティとは何かについてまず考える必要がある。

その理解を深める中で、MDNの記事内で事細かになぜアクセシビリティを重視すべきかということが解説されていてWeb開発をやる上で一読しておくとすごく為になると思った。

そして、「正しいマークアップを行うだけでハンデを抱えた人が情報をインプットできる」という世界観があるのは結構すごい話だなと思っていて、これもWebの力だなあとエモい気持ちを感じた始めたところでそろそろ締めます。

補足

正しいマークアップを意識することはアクセシビリティを考える以外でも必要な理由があるので、補足説明としてそれらについても羅列しておきます。

MDNの「HTML: アクセシビリティの基礎」から引用

  • より開発しやすい——上述のとおり、ある種の機能がただで手に入りますし、それに、より理解しやすいという点はまず間違いないところです。
  • モバイル機器に関して、より優れている——意味的な HTML は非意味的なスパゲッティ・コードよりも、ファイルサイズの点でほぼ間違いなく軽量ですし、レスポンシブにするのも簡単です。
  • SEO に関しても良好である——検索エンジンは、非意味的な
    などに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせているので、ドキュメントが顧客に見つけてもらいやすくなるでしょう。

人とたまに会話できるたまごっち

月1くらいでラグナロクマスターズ(ROのスマホ版のゲーム)を復帰したり休止したりする動きをここ半年くらい続けている。

昨今の状況により、人とリアルに関わることが殆どなくなってしまったせいでコミュニケーション不足を感じるようになってしまい、TwitterやSlackでは補え切れない寂しさを補充したくなって数日前から再開してしまった。

 

ラグマスの仕様を事細かに説明しても無駄に長くなりそうなので省くのだけれど、やっていることは主にひたすら放置狩りやクエストをこなしてレベル上げをしながらアイテム集めと装備強化を頑張るくらいなので盆栽を育てているのとそんなに変わらないような気がする。

また、ネットゲームということでギルドという概念があり、ギルドの中でチャットしたりたまにPT狩りに混ざるなどして軽いコミュニーケションができる要素もある。そんなことをやっていると、簡単に所属の欲求が満たせるような感覚がある。

ギルドの中にはレベルがカンストしているのは当たり前で、課金をしまくって装備や資金がとにかく充実していたり、毎日時間に合わせてボス狩りに張付いているような人もいる。

ここまでハマれると楽しそうだなと思ったりもするけれど、ソシャゲにそこまでの時間と情熱をかけるのは何かを代償にしてしまいそうな予感があり、「まあ今の所はいいかな……」と思いながらゆるく遊んでいる。

 

……という心境をつづってみると、これってネトゲというより「人とたまに会話できるたまごっち」のつもりで私はこのゲームをやりにきているんじゃないかとふと思った。

といった特にオチもない話なんだけれど、ソシャゲに対してあまり強いモチベーションを持つことができずやめることを繰り返している人間なので、珍しくだらだらとだけれど続けられているゲームに対してどのような気持ちで続けられているのか言語化したくなったのでふと書いてみました。

 

蛇足

たまに人と話せることをモチベーションにやっている割にはネトゲの馴れ合い文化に違和感を覚えることがちょくちょくあって、その度に「なんか違うな……」と思いフェードアウトしてしまうことがよくある。

ただ、ギルドにいる昔からの知人たちと深夜にだらだらとチャットをする機会が発生してお勧めの本やとりとめもない近況の話を投げ合っていると、中高生の時にROをしながら別窓でMSNメッセンジャーで今と同じような話をしていたことを思い出してしまい、この時間を2020年になっても続けられていることに関しては悪くないなと思ってしまうのだった。

GWやっていたこと雑記

社会人になってから初めての連休でした。

やったことをただ羅列してもごちゃっとしそうなので、時系列形式で書き残しておきます。

 

5/2(土)

7時40分ぐらいに目が覚めたのでそのまま朝ごはんを食べていつも通りどうぶつの森とfit boxingを交互に遊んでいた。

動物のお医者さんが無料公開されていたので読み始めたらあまりにも面白くて1日かけて読んでしまった。

kiryuanzu.hatenablog.com

 

5/3(日)

この日も7時40分台に目が覚めたので朝ごはんを食べてそのまま二度寝してからどうぶつの森とfit boxingをして再度お昼寝してしまった。

夕方辺りからそろそろ勉強っぽいこともしないとダメそうな気がしてきたのでAWSの紫本を読んでいた。1~2章のVPCの作成の解説の中でどのようにネットワークを構築していくかの流れが丁寧に書かれていて勉強になった。

この日は結構夜更かししてしまい深夜3時ぐらいに就寝した。

 

5/4(月)

寝る時間はかなり遅かったはずなのに。なぜか7時40分台にちゃんと目が覚めてしまい朝ごはんを食べてどうぶつの森とfit boxingをやっていた。ただ、睡眠不足だったせいか身体があまり動かず夕方まで生産的なことをできていた記憶がない。母親と近所の公園を散歩していたぐらいだと思う。

なんとかして動こうと思った矢先、両親の部屋に置いてあったサピエンス全史を開いてみたらあまりにも壮大な人類の歴史の情報が飛び込んできて衝撃を受けてしまい、一気に頭が回り始めたのでその流れで紫本を読み終わらせた。

原始の人類の活動についての話を読んでから最新のコンピュータ関連の情報をインプットするとギャップが発生して脳が変な感じになるのであまりお勧めはできない。

 

紫本を読んでいた結果、今後も継続的にAWS関連の情報はインプットしたいな〜という思いが芽生えつつあったので、Udemyで出されているAWSソリューションアーキテクトアソシエイトの試験講座コースをやることにした。ちょうどセールがやっていて1200円で買えたので嬉しい。

 
5/5(火)

この日は珍しく8時台に目が覚めた。この日もどうぶつの森とfit boxingは欠かさずやっていた。

島に流星群が降ってくる日だったので、フレンド限定開放してみたらTwitterのフォロワーがやってきて黄金のトイレと金のバラと青いバラとその他の珍しい花を置いていってくれた。かなりやり込まれている模様で、8往復(ちゃんと数えていないので確実な数字ではない)ぐらいして帰っていった。

 AWS周りのインプットを進めることができたので残り2日はAngularを頑張って進めようと決意しAngularチュートリアルの2週目に取り組むことにした。

 チュートリアルを写経しながらScrapboxで学習ログを書き残して進めていた。

gyazo.com

 

このチュートリアルと並行しつつ以下の「Angular After Tutorial」というサイトの文献を読んでみたところ、Angularにおける設計原則やRxJSとObservableの概念について復習することができて勉強になった。どちらのサイトも今後更に読み込んでいくことになりそう。

gitbook.lacolaco.net

 

5/6(水)

この日はついに9時台に起きてしまった。普段より遅めの朝食を摂ってからどうぶつの森とfit boxingのノルマを終わらせた。

このGWの期間、生産的な活動がどうしても夕方からスタートすることばかりだったので、今日だけは11時からPC机のある椅子に座ることにした。

 なんとかその目標は達成することはできて、Youtubeで動画を流しながらAngularチュートリアルの続きに着手して最後まで終わらせることができた。

明日からも会社の研修でAngularとどんどん触れ合っていくことになるので、最低限の復習ができたのは良かった。(最終日前と最終日の丸二日かけてやったぐらいなので付け焼き刃かもしれないが……)

この復習で得た知識を元に過去にjQueryで作った性格診断ゲームをAngularでリメイクしてfirebaseにデプロイする所までやれるのが一番良い気がするので、明日の退勤後に元気が残っていたら着手していきたい。

 

そんな感じでした。

また、自分が所属していた大学は祝日も授業日になることがほとんどだったのでちゃんとした連休を過ごすのは6年ぶりなので少しだけ感動してしまった。

こんなご時世なのでほぼ家で過ごしていたけれど、もし何もなかったら先週の木金か今週の木金で有給を取って京都に出向いていたかもしれない。

次の連休の時までには京都に行けるくらいには情勢が落ち着いていて欲しいと切に願っている。

 

動物のお医者さんを読んだ

マンガparkで動物のお医者さんが期間限定で全話無料になっていたので読んだ。

manga-park.com

全119話でそこそこ話数があるのだけれど、最初から最後まで安定感のある面白さで手が止められず1日で読み終わってしまった。

かなり昔から知られている作品のようで、TLでも作品名を何度か目にすることはあったのだけれど今日読むまでほとんど詳細は知らないままだった。(どこかの作品で「シベリアンハスキーが出てきて可愛い」と言及されているのは見たことがあるのだけれど何の作品でその情報を見たのはか思い出せない)

小学生の頃、異様に猫マンガが流行っていてその流れで動物エッセイ漫画を読み漁っていたのだけれどその時期に当作品を知っていたらあまりの面白さに衝撃を受けて数日に1回は読み返すぐらいにはのめり込んでいたと思う。*1

 

一番印象に残っている回は登場人物の親戚で飼われているヨークシャーテリアが皮膚病にかかっていたことが判明し丸刈りにされてチワワみたいな見た目になってしまった話。絵柄が強烈で普通にリビングで声を出して笑いそうになってしまった。

昔の漫画ゆえなのか動物への扱いがそこそこ雑で喧嘩沙汰になって血まみれになっている話が割とあったのも印象的だった。

基本的には平和な動物マンガではあるのだけれど、時代柄なのか進んで喧嘩させたり人間の企みによって軽くひどい目に遭わされたり(人間側もよく動物からひどい目に遭わされる)、それでも共存関係を築いて楽しくやっている世界観のようだった。

作品内で登場する動物は死ぬことはないのでそれで大丈夫なのだと思う。死なないと分かっているので読者側も安心して見てられるので良い。

 

人間側も魅力的な登場キャラクターが多く、特に菱沼さんと漆原教授はずっとブレないめんどくさい人間を貫いていてかなり好感を持ってしまった。実際にモデルがいるっぽいのもすごい。

菱沼さんの就活事情やお見合いや恋愛に対して色々言われる話は、そういう時代だったんだなという感じで見ているとかなり大変そうな状況なのだけれど、菱沼さん自身は最後までマイペースに過ごしながら研究を続けているので悲壮感をあまり感じさせなったのは少し良かった。

 

このようにどんどんと感想が溢れ出てくるぐらいには面白いと思えた作品なので、1日で読み切ってしまったのがなんだか勿体無かったような気がしている。

もし数週間経っても読み返したくなったら書籍版の単行本を購入しても良いかもしれないと考えているけれど、ひとまずはアマゾンプライムで配信されている実写ドラマ版の方を見て心を落ち着かせている。

 

*1:正確にはエッセイ漫画ではないけれど

社会人になってから1ヶ月が経った

桐生あんずです。

社会人になって一つの区切りということで、これからはできるだけ雑な記事でも書いていこうと意気込んでいたのだが、前回書いた記事がそこそこPV数があり満たされてしまい、気付いたら一週間経っていた。

そして社会人になってからの1ヶ月を無事過ごせたことに気付いたので、せっかくだし軽く振り返っておこうと思う。

 

生活の状況

入社式を実家の自部屋で迎えるという異様なスタートダッシュだったのだけれど、PCと学習机とサブモニタとニトリのオフィスチェアとPCスタンドとAirPodsさえあればリモートで研修を受ける行為は可能であったことに次第に気付くようになった。

親からは「中学の頃みたいに四六時中ネトゲをしているように見える」と怪しまれて多少面倒臭かったのだけれど、それも時間が解決して私が自部屋で朝から夕方までPCを触って時折ボイスチャットで会話を垂れ流している状況は親にとっても既に日常の一部となっている。

kiryuanzu.hatenablog.com

退勤してからは母親が用意してくれた食事をすぐに食べて21時までSwitchでどうぶつの森とfit boxingで遊んでお風呂に入るようにしている。

22時からはまたゲームをすることあれば本を読んだりコードを書いたりインターネットをだらだらするなどしていて、24時辺りに就寝準備に入る。

最初は「完全に実家に寄生している引きこもりプログラマー見習いじゃん……」と自分の状況に辛さを覚えていたのだけれど、普通に過ごしやすくてその感覚も麻痺しつつある。あと貯金もかなりしやすくて年間目標貯金額がすぐに達成しそう。

東京に住んでいても人に会えない世界になってしまった今、むしろ今の生活のやり方は良いことの方が多いことに気付いてしまった。

 

人に会えないこと自体に寂しさはあるけれど、通話環境が整った今ではオンライン飲み会に軽い気持ちで参加してみると、気付いたら3時間ぐらい過ぎていて満足していることがよくある。こんな状況になっていても、インターネットさえあれば人と話したいと思った時に話すことができてしまうのだ。

こんな生活がずっと続いて欲しいとまではさすがに思えないけれど、もし日常が戻った際には「意外と楽しいことも多かったな」とほんの少しだけ、恋しくなる事もあるかもしれない。

JavaScript研修を受けて身に付いたこと

入社してから2週間ほどJavaScriptメインで研修を受けさせていただいて大変勉強になったので、印象に残った出来事や参考になった文献を書き残しておきます。

ESLintの使い方を覚えた

簡単に説明すると規約に沿っていないJavaScriptのコードの記述に対して指摘してくれたり--fixオプションを叩くだけで自動整形してくれる超絶便利なツール。

qiita.com

今まではあまり使う機会がなかったのだけれど、今回の研修のカリキュラムでESLintの導入を丁寧に解説していただいて使い方を覚えることができた。ちなみに今の所はJavaScript Standard Styleのルールを適用して使っています。

Node.jsでCLIツールを作れるようになった

研修の課題では、CLI上でカレンダーを表示できるアプリケーション(要はcalコマンドみたいなやつ)や、CLI上でecho '"hoge" | node memo.jsと打つとsqlite3のDBに保存されて、node memo.js -r といったようなコマンドライン引数の内容によってメモの一覧・詳細・削除が実行できるアプリケーションを作った。

CLI上で標準入力を読み込んだりコマンドライン引数の中身をチェックする処理はJavaScriptではあまり書いた事がなくて調べながらやっていたのだけれど、処理を用意する上で便利なライブラリがそこそこ用意されていて面白かった。

例えば、コマンドライン引数のオプション処理の中身を簡単にチェックしたい時はminimistというモジュールを使うなどしていた。

github.com

対話形式のインターフェースを用意したくなった場合も、inquierやcacjsなどといったライブラリを使うことで簡単に実装できる。

www.npmjs.com

qiita.com

最初は分からないことも多かったけれど、便利なライブラリを使いつつCLIでのアプリケーション作成ならではの利点として比較的短めのコードですぐ動かす事もできるのでJavaScriptを改めて学ぶのに良い学習方法だったと思う。

Promise/Async Functionの概念をじっくり学ぶ事ができた

また、CLI上のメモアプリを作る上で使用したNode.jsのsqlite3モジュールのDB処理は非同期処理で用意されているので、処理を指定した通りの順番で動かすようにする必要があり、その際にPromiseとasync/awaitの概念について格闘しながら勉強して実装することができた。

苦しい闘いだったけれど確実に身になる経験だったと思う……。 学ぶ上ではJavaScript PrimerとPromise本が非常に役立った。

jsprimer.net

azu.github.io

JavaScript Primerは書籍版がもうすぐ発売なので気になる人はぜひ買いましょう。

JavaScript Primer 迷わないための入門書

JavaScript Primer 迷わないための入門書

自作npmをpublishした

個人的にはこれが一番楽しかった課題で、「自作npmをアイデアを用意して作ってみよう」というお題を最後の課題として出していただき、CLI上で動くスロットゲームを作ってnpmライブラリとして出してみた。

kiryuanzu.hatenablog.com

数日経ってチェックしてみたら全世界から204回ほどDLしてびっくりした。先ほど見たら合計DL回数が300回以上になっていてどの界隈の人々が触ってくれているのかめちゃくちゃ気になっている。

また、研修中にかなり丁寧にレビューしていただきどんどんとコードがブラッシュアップされていって本当にありがたかった。

例えば、今まで文字列の結合を行う際に頑張って+を使って連結させていたのだけれど、テンプレート文字列という便利構文があることを教えていただいたのでこれからはこっちを使おうと思った。

テンプレート文字列 - JavaScript | MDN

まとめ

今までJavaScriptというと個人開発やバイト先で感覚で頑張って書く事が多かったのだけれど、研修を受けたことでかなり理解度が上がって本当に良い体験だった。

上記の話以外でも、追加課題としてVue.jsの基本的な書き方や設計などにも改めて触れることができたりと、一気にインプットが進んだと思う。

ただ、業務に関わっていくにはまだまだ基本の分野ではあると思うので、今回研修で受けた事を思い出しつつ今後も学習を続けていきたいです。

先週作って公開したnpmのライブラリがなぜか全世界から200以上DLされていた

桐生あんずです。

会社のフロントエンドエンジニアの方々とオンラインランチをしている際に自分が先週作ったライブラリ(https://www.npmjs.com/package/cli-slot)について言及していただくことがあり、画面共有しながらnpmのサイトを眺めていたら全世界から204回ほどDLされていることに気付いた。

www.npmjs.com

どこから引っかかったのか謎ではあるのだけれど、Twitterやブログから辿ってくれたり、完全な想像の話だけどnpmのサイトで新しいパッケージをウォッチし続けている界隈がもしかしたら存在していてそこの人々がDLして遊んでくれたのかもしれない。

 

数日前に最初のバージョンで起きていた不具合をいくつか修正して少しだけ遊びやすくなってるので、簡単なゲームではありますがもし興味ある人は遊んでみてください。