Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
翻訳した英単語をそのまま 使うのは今日で終わりにしよう!
Search
ミカイ
January 22, 2021
Programming
0
2.5k
翻訳した英単語をそのまま 使うのは今日で終わりにしよう!
・開催日
2021/1/27
・イベント名
リーダブルコード LT会
https://rakus.connpass.com/event/199845/
ミカイ
January 22, 2021
Tweet
Share
More Decks by ミカイ
See All by ミカイ
SQLを克服する1冊
junmikai
0
3
美と機能のバランス ~フロントエンジニアに必要なUI・UXセンス~
junmikai
0
3
React.jsの キャッチアップは 「取捨選択」が9割
junmikai
0
2
スルメとガムで考えるキャリア論.pdf
junmikai
0
3
夏のチャレンジ ~挑戦はレベル1から始めよう~
junmikai
0
3
ダーツの旅で_説明するポインタ.pdf
junmikai
0
4
本当にあった怖い体験談 本番環境で画面が真っ白になりました
junmikai
0
2
UI仕様が決まってないと、エンジニアが迷子するぞ!
junmikai
0
3
フロントエンドテスト導入は 「ストーリー」 を意識しよう
junmikai
0
2
Other Decks in Programming
See All in Programming
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
310
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
カスタムしながら理解するGraphQL Connection
yanagii
1
1.4k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.3k
現場で役立つモデリング 超入門
masuda220
PRO
14
3.1k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
33k
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
1.9k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.7k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
520
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
Six Lessons from altMBA
skipperchong
26
3.5k
Bash Introduction
62gerente
608
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
690
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Become a Pro
speakerdeck
PRO
24
5k
Facilitating Awesome Meetings
lara
49
6.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
350
Transcript
翻訳した英単語をそのまま 使うのは今日で終わりにしよう! 実際に使用した関数を見直そう!
▪ 自己紹介 ▶ 現職 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から連絡してください!