manabuyasuda / coding-guidelines Goto Github PK

コードの最低限の品質を保つためのガイドラインです。

License: MIT License

coding-guidelines's Introduction

30歳のときに「CSS設計が世界中で議論されていること」に興味を持ち、「自分もこのような仕事をしたい」とウェブ業界に転職。上場企業を含む36社（2023年時点）のお客さま（ANAさま、京セラさま、Panasonicさまなど）とお仕事をさせていただいています。案件実績はForkwellに記載しています。

CSS設計、スタイルガイド制作、アクセシブルなコーディングが得意です。多言語サイトやJamstackサイト、React（TypeScript）を使用したウェブアプリも担当してきました。 TAMのグループ会社であるTAMSANのエンジニアチーム（本人を含めて5人）のリーダーを担当しており、メンバーとの1on1やキャリアMTG、採用活動、会社全体のマネジメントにも参画しています。

モノゴトを深く知り、整理していくプロセスが好きです。最新技術を追うというよりも、「問う技術」「プロセス設計」「ナレッジマネジメント」「ファシリテーション」「コーチング」のようなソフトスキルを意識しているタイプでもあります。エンジニアの3分類だと、技術：プロダクト：組織＝2：3：5のイメージです。エンジニアを分類する、3つのタイプ｜山本正喜 / Chatwork CEO

iPhoneやMacを中心にしたブログを過去に書いていて、月間10万PVを達成したこともあります。テキストベースのアウトプットは日常的にしているので、書くことは苦にならないタイプです。

SNSやブログなどはbento.meにまとめています。ぜひクリックしてください！

Reactなどを使ったウェブアプリケーションの経験値を増やしたいです。コードを書く仕事は大変なこともありますが、カタチのあるものに収束させていくプロセスに面白みを感じるからです。メンタルヘルステックにも興味があり、バックエンドやインフラを含めた包括的な知識や技術を身につけることで、サービス開発をチームでするための役割を果たせるようになることが中期的な目標と考えています（現在はフロントエンド領域のみ）。

本当の意味で相手の役に立てる人でありたいです。コーチング的な支援は得意なほうだと思っていますが、背中を押したり、手を引っ張れるような積極的な支援で、その人の強みや良さを引き出せる仕事をしたいです。

Find out more!

coding-guidelines's People

Contributors

Stargazers

Watchers

coding-guidelines's Issues

altの設定の修正

読み上げ時に自然になるように大文字は小文字に変更する（「SEO」はエスイーオーなのでそのまま、「GOOGLE」はグーグルなので「Google」とする）。

以下の理由で、文字は画像の表記をそのまま指定する。

スクリーンリーダーによって読み上げは変わる
（画像読み込みができない状況で）alt属性値が表示されたときに画像と情報が若干変わってしまう
スクリーンリーダーの利用者は慣れているので、読み上げがおかしくても頭の中で変換できるひとが多い（特別にせず普通に書く）

Update: CLI使用時の具体的なコマンド・状況を追加する

との間は空行を1つ挟んでください。空行がないと、CLIではとがつながって表示されてしまいます。

git log --onelineもしくは--pretty=oneline --abbrev-commit使用時に<Body>も表示されてしまう。
https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E5%B1%A5%E6%AD%B4%E3%81%AE%E9%96%B2%E8%A6%A7

aria-*属性を使用するの修正

aria-currentについて。
locationの用途について、解釈の仕方によっては微妙？なこともあるため、汎用的なtrueを使用する。

Update: Gitガイドラインの前提を提示する

WIPを使ったフローの場合にコミットメッセージが使えない・足りなくなる
- 1コミット1対応を前提としたフローに限定する
Gitといっても、様々な環境で使われるので、網羅することが難しい
- GitHubとBacklogを前提として、CLIはオプションにする

Update: ルールの優先度を追加する

必須：使用しなければエラーに繋がるようなもの、ほとんどの場合でベストプラクティスとなるもの。
強く推奨：ほとんどの場合でベストプラクティスとなり得るもの。遵守しない場合はその理由を協議、明記する必要がある。
推奨：いくつかのルールの中で特に推奨しているもの。

Gitのコミットメッセージのガイドラインを追加する

Update: Gitのリンクを追加

README.mdにGitのドキュメントへのリンクがない。

Add: JSのガイドラインを追加する

Airbnb JavaScript Style Guide（日本語訳）をベースとする。

ES5のガイドライン（日本語訳）

クラス名リストに追加するUI

popup-window - dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。
lightbox - carouselの類語で、モーダルのjQueryプラグインのこと。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること。
global-navigation - ほとんどの画面で表示されている、主要なナビゲーション。
local-navigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある。
mega-menu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン（クリックやマウスオーバー）で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い。
linear-navigation - その画面の前後に移動するためのナビゲーション。ページネーションとの違いはページ指定ができないこと。
input - フォームの入力画面。
confirm- フォームの確認画面。
finish - フォームの完了画面。
text-field - input[type="text"]のような利用者が編集する改行なしのテキストフィールド。
textarea - textareaのような利用者が編集する複数行のテキストフィールド。
checkbox - input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス。
radio - input[type="radio"]のような1つの項目を選択するインターフェイス。
select - selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴。
submit - 送信ボタン。
reset - リセット（取り消し）ボタン。
modify - 修正ボタン。

Update: SVGの必須属性を見直す

https://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4e#comment-45be7f082d411d5b8cff

SVG に詳しくなく、また、仕様書を読んでいないので不確かなコメントで恐縮なのですが、次の箇所が気になりました。

必須の属性を確認する
タグで必須の属性です。表示崩れの原因にもなるので、必ず指定してください。

xmlns="http://www.w3.org/2000/svg"（SVG名前空間宣言）
xmlns:xlink="http://www.w3.org/1999/xlink"（XLink名前空間宣言）
version属性
width属性とheight属性（pxは省略可）
viewBox属性

単に「必須」の定義が異なるだけかもしれませんが、これらには仕様上の必須（required, must）ではなく、実装を考慮した推奨（recommended, should）も含まれているのではないかなと思いました。

xmlns 属性は HTML に SVG をインラインで記述する場合は省略可能
xmlns:xlink 属性は svg 要素の子孫要素で xlink:href 属性などを使用する場合は必須
version 属性はたしかに指定したほうが良さそうですが、必須なのでしょうか？
width 属性と height 属性は省略可能（省略した場合は不定扱い？）
viewBox 属性は省略可能（省略した場合は svg 要素の表示領域になる？）

thを連結している場合はscope="rowgroup"かscope="colgroup"も指定する
colgroupの使い方

https://www.w3.org/WAI/tutorials/tables/irregular/

SVGをwidth: 100%;にするバグフィックスを削除する

このバグに当てはまることがなかったため。

navタグを効果的に使うにaria-labeledbyなどの項目を追加

aria-labelとaria-labeledbyを使う場合の例
navタグを使うシチュエーション

manabuyasuda / coding-guidelines Goto Github PK

coding-guidelines's Introduction

Find out more!

coding-guidelines's People

Contributors

Stargazers

Watchers

Forkers

coding-guidelines's Issues

Recommend Projects

Recommend Topics

Recommend Org