翻訳した英単語をそのまま 使うのは今日で終わりにしよう！ 実際に使用した関数を見直そう！

■ 自己紹介 ▶ 現職 　2020年6月、渋谷のベンチャー企業にフロントエンドエンジニアとして 　未経験で入社。 　エンジニア歴は半年！ ▶ 主な使用言語・フレームワーク 　Vue.js / Nuxt.jsを中心に Typescript も導入中。 写真

① 関数の中身を隠しても何の処理をしているか 理解できる名前をつけよう！ ② 関数名の上に処理のコメントを少しでも減らそう！ (コメントのコメントをしない from:リーダブルコード) 今回の目標

■ 今回使用するリーダブルコードのテクニック ▶ 明確な単語を選ぶ 　ex.) size()は大きさ？長さ？個数？と色々想像できてしまう。この場合 height()の方がいい ▶ 汎用的な名前は避ける 　ex.)change()だと変わったという情報しか伝わってこない。 ▶ 誤解されやすい名前は避ける 　ex.) 値の有無確認にvalueRead()はややこしい。readはこれから読むのか既に読み取ったのかわからない　　　か ら。isValue()などの方がわかりやすい。

例① : 外部ページにアクセスする 機能 ボタンをクリックすると外部ページにアクセスする デザインサンプル 外部サイトへ 実務で命名した関数名 externalLink() 問題点 external(外部)のlinkという意味はわかったが ボタンをクリックしたら何のアクションが発生す るのかわからない。

改善案：jumpToExternalLink() 移動するを飛ぶに変換。 jumpToという単語は~に飛び跳ねるという意味。 飛ぶ(jumpTo)+外部リンク(ExternalLink)で関数名を見ただけで意味がわ かるようになる。 goToExternalLink()でもいいかも・・・

②宿泊フォームを追加する 機能 ボタンをクリックすると宿泊入力フォームが1つ増える ここでいう宿泊は予約を指す デザインサンプル 実務で命名した関数名 lodgmentDateAdd 問題点 lodgmentという単語が難しいため誰もが読めるわ けではない(TOEIC600点以上) 追加する 宿泊日

改善案：addReserveDate() reserveはホテルの部屋などを予約すること。 予約＝ホテルに泊まるという行為なので宿泊と同じ意味になる。 後はDateを追加する事で宿泊の日程だと意味がわかる。 ちなみに泊まった日を報告する場合の入力フォームの場合は予約が使えな いのでaddStayData()がいいだろう

③資格取得年月日の日付を入力した時 機能 公的資格取得年月日の入力フォームに値を入力し た時、その値をセットする(changeイベント) デザインサンプル 実務で命名した関数名 changeAcquisitionQualificationDate() 問題点 Acquisition(習得)やQualificationが難しい (それぞれ英検準1級、2級以上) 資格習得日が変わった時発火する事はわかったが文 字数が長すぎる。その上、変わったら何が起こるかが わからない。cssが変わるの？他のフォームが変わる の？など色々イメージできてしまう。 追加する 1995/12/12 公的資格取得年月日

改善案：updateLicenseDate() 資格を免許に変換して馴染みやすい licenseを使用。免許と資格が厳密に意 味は違うが資格関係の入力フォームはここしかないため問題ない。 changeはイベントが発火する部分を見れば理解できるため関数名は発火した 後の処理を書いた方がわかりやすい。 値を更新するという意味でupdateを使用。recordでもいいかなーと考えました が入力フォームの値が変わる事を考慮すると updateの方がいいでしょう。

④機関を選択した時、別ボタンを押せるようにする 機能 機関を選択すると隣にある決定ボタンを押せるようにす る。選択されていない初期状態は決定ボタンはグレーで 押せないようになっている デザインサンプル 実務で命名した関数名 organizationSelected() 問題点 上記関数名だと機関選択フォームだけで完結する処 理だと思われる。右下のボタンを処理は関係ないん だなーと勘違いさせないように、値が存在するかどう か？という関数名にして「他のどこかが変わるんだ」と イメージしてもらうようにしよう リダブル機関 専門機関 戻る 決定 グレーから青に変更 (押せるようになる) ˅

改善案：isOrganization() リーダブルコード34pのブール値の命名にis,can,has等を使うといいとの事な のでisOrganizationSelectedになる。 しかし、これでは長すぎるのでisOrganizationにした。 同一ページでisOrganization(機関が存在するか？)を使用していなければ ここの関数はselectタブの事だな〜 と自然にわかるのでselectedは不要だと思います。

× 翻訳した英単語をそのまま突っ込む ○ 誰もが知っている単語を組み合わせる ▼ わかりやすい関数名を作る事ができる！

自分が働いているアルサーガパートナーズ(株) では一緒に働く人を募集してます！ QRコード(採用ページ) リンクはこちら 興味のある人は自分にTwitterDM(@miumitempe)か会社HPから連絡してください！