はじめてのIT勉強会.pdf

Transcript

1. リーダブルコード part3.美しさ
2. 自己紹介 名前：うにすけ 出身：埼玉県 年齢：21才 所属：東北大学工学部電気情報物理工学科3年 @uniuni_8282 https://www.facebook.com/mayu.uenishi.1 @uni_82
3. Readable code….直訳すると”読めるコード” ..では読めるコードって? リーダブルコードとは？ ?
4. 他の人が最短時間で 理解できるコード A
5. 「他の人が理解できるって、誰が得するんだよ？こ のコードを使ってるのは俺だけなんだぞ！」
6. 「でもね、たとえ君ひとりのプロジェクトだったとしても、こ の目標には取り組むだけの価値があるんだ。「他の人」と いうのは、自分のコードに見覚えのない6ヶ月後の自分か もしれない」 「他の人が理解できるって、誰が得するんだよ？こ のコードを使ってるのは俺だけなんだぞ！」
7. 参考書籍 題 「リーダブルコード」 著 Dustin Boswell 発行 オイラリージャパン いろんな状況に「読みやすさ」を 当てはめる方法が紹介されている ４章”美しさ”を深掘り
8. 美しさとは？ ?
9. 美しさ すぐれた雑誌のように読 み飛ばしても理解がで き、類似や相違をパッと 見て解るような快適で読 みやすいものであること
10. なぜ美しさが大切なのか？ ?
11. 美しいコードの方が使いやすい A
12. class : class StatsKeeper { public: //doubleを記録するクラス void Add(double d); //とすばやくとうけいを出すメ ソッド private int count; /*それまでの 個数*/ public: double Average(); private: double minimum; list<double> part_items ; double maximam; }; //doubleを記録するクラス //とすばやく統計を出すメソッド class StatsKeeper { public: void Add(double d); double Average(); private: list<double> part_items; int count; //それまでの個数 double minimum; double maximam; };
13. 美しいコードは どうやって書くの？ ?
14. “美しさ”のための基本原則 ❖ 読み手が慣れているパターンと一貫性のある レイアウトを使う ❖ 似ているコードは似ているように見せる ❖ 関連するコードをまとめてブロックにする
15. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
16. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
17. public class PerformanceTester{ publicstaticfinalTcpConnectionSimulatorwifi= newTcpConnectionSimulator( 500, /* Kbps*/ 80,/* millisecslatency */ 200,/* jitter*/ 1/* packet loss %*/); public static final TcpConnectionSimulatort3_fiber = newTcpConnectionSimulator( 45000, /* Kbps*/ 10, /* millisecslatency */ 0,/* jitter*/ 0/* packet loss %*/); public static final TcpConnectionSimulatorcell= newTcpConnectionSimulator( 100,/* Kbps*/ 400,/* millisecslatency */ 250,/* jitter*/ 5/* packet loss %*/); }
18. “美しさ”のための基本原則 ❖ 読み手が慣れているパターンと一貫性のある レイアウトを使う ❖ 似ているコードは似ているように見せる ❖ 関連するコードをまとめてブロックにする
19. “美しさ”のための基本原則 ❖ 読み手が慣れているパターンと一貫性のある レイアウトを使う ❖ 似ているコードは似ているように見せる ❖ 関連するコードをまとめてブロックにする
20. public class PerformanceTester{ publicstaticfinalTcpConnectionSimulatorwifi= newTcpConnectionSimulator( 500, /* Kbps*/ 80,/* millisecslatency */ 200,/* jitter*/ 1/* packet loss %*/); public static final TcpConnectionSimulatort3_fiber = newTcpConnectionSimulator( 45000, /* Kbps*/ 10, /* millisecslatency */ 0,/* jitter*/ 0/* packet loss %*/); public static final TcpConnectionSimulatorcell= newTcpConnectionSimulator( 100,/* Kbps*/ 400,/* millisecslatency */ 250,/* jitter*/ 5/* packet loss %*/); } シルエットが変なので自然と 目が行ってしまう ３つのインスタンス、で似て いるものなのに似ているよう に見えない
21. public class PerformanceTester{ public static final TcpConnectionSimulatorwifi= newTcpConnectionSimulator( 500, /* Kbps*/ 80, /* millisecslatency*/ 200, /* jitter */ 1 /* packet loss % */); publi static final TcpConnectionSimulatort3_fiber= newTcpConnectionSimulator( 45000, /* Kbps*/ 10, /* millisecslatency*/ 0, /* jitter */ 0 /* packet loss % */); publistaticfinalTcpConnectionSimulatorcell= newTcpConnectionSimulator( 100, /* Kbps */ 400, /* millisecs latency */ 250, /* jitter */ 5 /* packet loss % */); } 他のインスタンスに合わせ る,改行をいれることで一貫 性を実現 コメントの整列
22. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
23. “Doug Adams“のようなpartical_nameを”Mr.Douglas Adams”に変換する(出来なかったらエ ラー文を返す)関数のテスト assert(expandFullName($databaseConnection, "Doug Adams", $error) =="Mr. Douglas Adams"); assert($error ==""); assert(expandFullName($databaseConnection, " Jake Brown ", $error) =="Mr. Jacob Brown III"); assert($error ==""); assert(expandFullName($databaseConnection, "No Such Guy", $error) ==""); assert($error =="No match found."); assert(expandFullName($databaseConnection, "John", $error) ==""); assert($error =="More than one result.");
24. “Doug Adams“のようなpartical_nameを”Mr.Douglas Adams”に変換する(出来なかったらエ ラー文を返す)関数のテスト assert(expandFullName(&databaseConnection, "Doug Adams", &error) =="Mr. Douglas Adams"); assert($error ==""); assert(expandFullName(&databaseConnection, " Jake Brown ", &error) =="Mr. Jacob Brown III"); assert($error ==""); assert(expandFullName(&databaseConnection, "No Such Guy",&$error) ==""); assert($error =="No match found."); assert(expandFullName(&databaseConnection, "John", &error) ==""); assert($error =="More than one result."); シルエットが不格好 一貫性のあるパターンがな い
25. “Doug Adams“のようなpartical_nameを”Mr.Douglas Adams”に変換する(出来なかったらエ ラー文を返す)関数のテスト assert(expandFullName(databaseConnection, "Doug Adams", $error) =="Mr. Douglas Adams"); assert($error ==""); assert(expandFullName(databaseConnection, " Jake Brown ", $error) =="Mr. Jacob Brown III"); assert($error ==""); assert(expandFullName(databaseConnection, "No Such Guy", $error) ==""); assert($error =="No match found."); assert(expandFullName(databaseConnection, "John", $error) ==""); assert($error =="More than one result."); シルエットが不格好 一貫性のあるパターンがな い
26. “Doug Adams“のようなpartical_nameを”Mr.Douglas Adams”に変換する(出来なかったらエ ラー文を返す)関数のテスト assert(expandFullName(databaseConnection, "Doug Adams", &error) =="Mr. Douglas Adams"); assert($error ==""); assert(expandFullName(databaseConnection, " Jake Brown ", &error) =="Mr. Jacob Brown III"); assert($error ==""); assert(expandFullName(databaseConnection, "No Such Guy", &error) ==""); assert($error =="No match found."); assert(expandFullName(databaseConnection, "John", &error) ==""); assert($error =="More than one result."); 重複している文字列が邪魔なのでヘルパーメソッドを使う必要がある シルエットが不格好 一貫性のあるパターンがな い
27. checkFullName("DougAdams", "Mr. Douglas Adams", ""); checkFullName(" JakeBrown ", "Mr.JacobBrownIII", ""); checkFullName("NoSuchGuy", "", "Nomatchfound."); checkFullName("John", "", "More than oneresult."); void checkFullName(string partialName, string expectedFullName, string expectedError) { string error = ''; string fullName=expandFullName(database_connection,partialName,&error); assert(fullName == expectedFullName); assert(error == expectedError)); } 4つのテストがあることがわ かりやすい 重複を排除したことでコード が簡潔に テストの追加が簡単
28. checkFullName("DougAdams", "Mr. Douglas Adams", ""); checkFullName(" JakeBrown ", "Mr.JacobBrownIII", ""); checkFullName("NoSuchGuy", "", "Nomatchfound."); checkFullName("John", "", "More than oneresult."); void checkFullName(string partialName, string expectedFullName, string expectedError) { string error = ''; string fullName=expandFullName(database_connection,partialName,&error); assert(fullName == expectedFullName); assert(error == expectedError)); } コードの見た目を美しくしたことによって表面上の解決だけでなく コードの構造も改善できる 4つのテストがあることがわ かりやすい 重複を排除したことでコード が簡潔に テストの追加が簡単
29. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
30. checkFullName("DougAdams", "Mr. Douglas Adams", ""); checkFullName(" JakeBrown ", "Mr.JacobBrownIII", ""); checkFullName("NoSuchGuy", "", "Nomatchfound."); checkFullName("John", "", "More than one result.");
31. checkFullName("DougAdams", "Mr. Douglas Adams", ""); checkFullName(" JakeBrown ", "Mr.JacobBrownIII", ""); checkFullName("NoSuchGuy", "", "Nomatchfound."); checkFullName("John", "", "More than one result."); 　　　　　　　　　　　　列を整列させる　　　　　　　　　 //particalName ,expectedFullName , expected error checkFullName(“Doug Adams” , "Mr. Douglas Adams", “”); checkFullName(“Jake Brown” , "Mr.JacobBrownIII" , “”); checkFullName(“No Such Guy” , “” , “Nomatchfound.”); checkFullName(“John” , “” , “More than one result.”); 引数がわかりやすい
32. //POSTのパラメータをローカル変数に割り当てる details = request.POST.get("details"); location = request.POST.get("location"); phone = equest.POST.get("phone"); email = requesPOST.get("email"); url= request.POST.get("url");
33. //POSTのパラメータをローカル変数に割り当てる details = request.POST.get("details"); location = request.POST.get("location"); phone = equest.POST.get("phone"); email = requesPOST.get("email"); url= request.POST.get("url"); details = request.POST.get("details"); location = request.POST.get("location"); phone = equest.POST.get("phone"); email = requesPOST.get("email"); url = request.POST.get("url"); タイプミスに気付きやすい
34. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
35. details = request.POST.get("details"); location = request.POST.get("location"); phone = request.POST.get("phone"); email = request.POST.get("email"); url = request.POST.get("url"); ”意味のある順番”に並べるとgood 入力フォームと同じ並び順にする 「最重要」なものから重要度順に並べる アルファベット順に並べる... and 順番は一連のコードの中で共通させるべき
36. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する
37. class FrontendServer { public : FrontendServer(); void ViewProfile(HttpRequest* request); void OpenDatabase(string location, string user); void SaveProfile(HttpRequest* request); string ExtractQueryParam(HttpRequest* request, string param); void ReplyOK(HttpRequest* request, string html); void FindFriends(HttpRequest* request); void ReplyNotFound(HttpRequest* request, string error); void CloseDatabase(string location); ~FrontendServer(); }; フロントサーバ用のクラス メソッドの概要が把握しにく い
38. class FrontendServer { public : FrontendServer(); ~FrontendServer(); //ハンドラ void ViewProfile(HttpRequest* request); void SaveProfile(HttpRequest* request); void FindFriends(HttpRequest* request); //リクエストとリプライのユーティリティ string ExtractQueryParam(HttpRequest* request, string param); void ReplyOK(HttpRequest* request, string html); void ReplyNotFound(HttpRequest* request, string error); //データベースのヘルパー void OpenDatabase(string location, string user); void CloseDatabase(string location); }; グループに分けたことで概要 把握が簡単に
39. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
40. 段落の意義 • 似ている考えをまとめて他のか んがえと分ける • 視覚的な踏み石を提供できる • 段落単位で移動できる
41. //ユーザのメール帳をインポートして、システムのユーザと照合する。 //そして、まだ友達になっていないユーザのメールアドレスを取得する。 def suggest_new_friends(user,email_password){ friends = user.friends(); friends_emails= set(f.email for f in friends) contacts = import_contacts(user.email, email_password) contacts_emails = set(c.emails for c in contacts) non_friend_emails = contact_emails - friends_emails suggested_friends = User.objects.select(email_in=non_friend_emails) display[‘user’] = user display[‘friends’] = friends display[‘suggested_friends’] = suggested_friends return render(“suggested_friends.html”,display) } 一塊になっていて読みにくい
42. //ユーザのメール帳をインポートして、システムのユーザと照合する。 //そして、まだ友達になっていないユーザのメールアドレスを取得する。 def suggest_new_friends(user,email_password) { //ユーザの友達のメールアドレスを取得する friends = user.friends(); friends_emails= set(f.email for f in friends) //ユーザのメールアカウントから全てのメールアドレスをインポートする contacts = import_contacts(user.email, email_password) contacts_emails = set(c.emails for c in contacts) //まだ友達になっていないユーザを探す non_friend_emails = contact_emails - friends_emails suggested_friends = User.objects.select(email_in=non_friend_emails) //ページに表示する display[‘user’] = user display[‘friends’] = friends display[‘suggested_friends’] = suggested_friends return render(“suggested_friends.html”,display) } 手順ごとに段落に分割する ことで概要がつかめるように
43. “美しさ”実現のためのtips ❖ 一貫性のある簡潔な改行位置 ❖ メソッドを使った整列 ❖ 縦の線をまっすぐにする ❖ 一貫性と意味のある並び ❖ 宣言をブロックごとにまとめる ❖ コードを「段落」に分解する ❖ 個人的な好みと一貫性
44. class Logger { … }; class = Logger { … }; どちらの表記も間違いはない ＆　読みやすさには影響しない but... スタイルを混ぜることは推奨されない “一貫性”が最重要
45. まとめ　- 美しいコード実現のために - ❖ 複数のコードブロックで同じようなことをしている場合 シルエットも揃える ❖ コードの列を整理することが概要把握に繋がる ❖ 意味ある順番を守って常にその順番を守る ❖ 空行で大きなブロックを論理的なブロックに分ける
47. This is the space to describe the slide theme. 1. Headline here
48. Slide title Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. ✅ Here are the bullet. ✅ List items here. ✅ Write a concept such as the slide.
49. This section includes the impact content. Impact Concept
50. Slide title Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
51. Slide title Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. *Memo : - Dummy text, I enjoy with my whole heart.I am alone, and feel the charm of existence in this spot, - which was created for the bliss of souls like mine.
52. Slide title Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
53. Big Image You can chage image.
54. Content A Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Content B Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
55. Content A Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Content B Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Content C Your text here. Dummy text： A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
56. This section includes the impact number. “ 72,894,053 ”
57. Big sales!! ￥72,894,053 A lot of users!! 2,843,991users Level of satisfaction 89.9%
58. Please customize the map that was in your purpose. Main office
59. Slide title A B C Apple 35 12 73 Strawberry 81 20 92 Grape 67 49 107
60. Explain your ideas!! Blue Green Orange
61. Slide title You can copy & paste graphs from Google Spreadsheet of Excel. グラフは Google スプレッドシートやExcel からコピーして貼り付けることができます。
62. Slide title Step 1. Write the first step here. Step 2. Write the second step here. Step 3. Write the third step here.
63. Thanks!! @youraccount yourname@mail.com http://www.example.com/
64. Readme ✅ Theme by Template Park. ＞https://template-parks.com/ ✅ 商用利用が可能です。 ✅ ダウンロードした本人の使用のみ可能です。 ✅ 再配布・転売等は禁止しております。 ✅ その他、ご利用規約とプライバシポリシーもご確認ください。 ✅ テンプレートを気に入って頂きましたら、ぜひシェアして頂けると嬉しいです。新し いテンプレート作成の励みになります。 ★ 画像の変更（差し替え）方法は“こちらの解説ページ”をご覧ください。