はじめてのIT勉強会.pdf

Transcript

1. リーダブルコード
   part3.美しさ
   

   View Slide

2. 自己紹介
   名前：うにすけ
   出身：埼玉県
   年齢：21才
   所属：東北大学工学部電気情報物理工学科3年
   @uniuni_8282
   https://www.facebook.com/mayu.uenishi.1
   @uni_82
   

   View Slide

3. Readable code….直訳すると”読めるコード”
   ..では読めるコードって?
   リーダブルコードとは？
   ?
   

   View Slide

4. 他の人が最短時間で
   理解できるコード
   A
   

   View Slide

5. 「他の人が理解できるって、誰が得するんだよ？こ
   のコードを使ってるのは俺だけなんだぞ！」
   

   View Slide

6. 「でもね、たとえ君ひとりのプロジェクトだったとしても、こ
   の目標には取り組むだけの価値があるんだ。「他の人」と
   いうのは、自分のコードに見覚えのない6ヶ月後の自分か
   もしれない」
   「他の人が理解できるって、誰が得するんだよ？こ
   のコードを使ってるのは俺だけなんだぞ！」
   

   View Slide

7. 参考書籍
   題 「リーダブルコード」
   著 Dustin Boswell
   発行 オイラリージャパン
   いろんな状況に「読みやすさ」を
   当てはめる方法が紹介されている
   ４章”美しさ”を深掘り
   

   View Slide

8. 美しさとは？
   ?
   

   View Slide

9. 美しさ
   すぐれた雑誌のように読
   み飛ばしても理解がで
   き、類似や相違をパッと
   見て解るような快適で読
   みやすいものであること
   

   View Slide

10. なぜ美しさが大切なのか？
    ?
    

    View Slide

11. 美しいコードの方が使いやすい
    A
    

    View Slide

12. class : class StatsKeeper {
    public:
    //doubleを記録するクラス
    void Add(double d); //とすばやくとうけいを出すメ
    ソッド
    private int count; /*それまでの
    個数*/
    public:
    double Average();
    private: double minimum;
    list part_items
    ; double maximam;
    };
    //doubleを記録するクラス
    //とすばやく統計を出すメソッド
    class StatsKeeper {
    public:
    void Add(double d);
    double Average();
    private:
    list part_items;
    int count; //それまでの個数
    double minimum;
    double maximam;
    };
    

    View Slide

13. 美しいコードは
    どうやって書くの？
    ?
    

    View Slide

14. “美しさ”のための基本原則
    ❖ 読み手が慣れているパターンと一貫性のある
    レイアウトを使う
    ❖ 似ているコードは似ているように見せる
    ❖ 関連するコードをまとめてブロックにする
    

    View Slide

15. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

16. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

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 %*/);
    }
    

    View Slide

18. “美しさ”のための基本原則
    ❖ 読み手が慣れているパターンと一貫性のある
    レイアウトを使う
    ❖ 似ているコードは似ているように見せる
    ❖ 関連するコードをまとめてブロックにする
    

    View Slide

19. “美しさ”のための基本原則
    ❖ 読み手が慣れているパターンと一貫性のある
    レイアウトを使う
    ❖ 似ているコードは似ているように見せる
    ❖ 関連するコードをまとめてブロックにする
    

    View Slide

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 %*/);
    }
    シルエットが変なので自然と
    目が行ってしまう
    ３つのインスタンス、で似て
    いるものなのに似ているよう
    に見えない
    

    View Slide

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 % */);
    }
    他のインスタンスに合わせ
    る,改行をいれることで一貫
    性を実現
    コメントの整列
    

    View Slide

22. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

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.");
    

    View Slide

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.");
    シルエットが不格好
    一貫性のあるパターンがな
    い
    

    View Slide

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.");
    シルエットが不格好
    一貫性のあるパターンがな
    い
    

    View Slide

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.");
    重複している文字列が邪魔なのでヘルパーメソッドを使う必要がある
    シルエットが不格好
    一貫性のあるパターンがな
    い
    

    View Slide

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つのテストがあることがわ
    かりやすい
    重複を排除したことでコード
    が簡潔に
    テストの追加が簡単
    

    View Slide

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つのテストがあることがわ
    かりやすい
    重複を排除したことでコード
    が簡潔に
    テストの追加が簡単
    

    View Slide

29. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

30. checkFullName("DougAdams", "Mr. Douglas Adams", "");
    checkFullName(" JakeBrown ", "Mr.JacobBrownIII", "");
    checkFullName("NoSuchGuy", "", "Nomatchfound.");
    checkFullName("John", "", "More than one result.");
    

    View Slide

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.”);
    引数がわかりやすい
    

    View Slide

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");
    

    View Slide

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");
    タイプミスに気付きやすい
    

    View Slide

34. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

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
    順番は一連のコードの中で共通させるべき
    

    View Slide

36. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    

    View Slide

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();
    };
    フロントサーバ用のクラス
    メソッドの概要が把握しにく
    い
    

    View Slide

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);
    };
    グループに分けたことで概要
    把握が簡単に
    

    View Slide

39. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

40. 段落の意義
    ● 似ている考えをまとめて他のか
    んがえと分ける
    ● 視覚的な踏み石を提供できる
    ● 段落単位で移動できる
    

    View Slide

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)
    }
    一塊になっていて読みにくい
    

    View Slide

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)
    }
    手順ごとに段落に分割する
    ことで概要がつかめるように
    

    View Slide

43. “美しさ”実現のためのtips
    ❖ 一貫性のある簡潔な改行位置
    ❖ メソッドを使った整列
    ❖ 縦の線をまっすぐにする
    ❖ 一貫性と意味のある並び
    ❖ 宣言をブロックごとにまとめる
    ❖ コードを「段落」に分解する
    ❖ 個人的な好みと一貫性
    

    View Slide

44. class Logger {
    …
    };
    class = Logger
    {
    …
    };
    どちらの表記も間違いはない ＆　読みやすさには影響しない
    but... スタイルを混ぜることは推奨されない
    “一貫性”が最重要
    

    View Slide

45. まとめ　- 美しいコード実現のために -
    ❖ 複数のコードブロックで同じようなことをしている場合
    シルエットも揃える
    ❖ コードの列を整理することが概要把握に繋がる
    ❖ 意味ある順番を守って常にその順番を守る
    ❖ 空行で大きなブロックを論理的なブロックに分ける
    

    View Slide

46. View Slide

47. This is the space to describe the slide theme.
    1. Headline here
    

    View Slide

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.
    

    View Slide

49. This section includes the impact content.
    Impact Concept
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

53. Big Image
    You can chage image.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

56. This section includes the impact number.
    “ 72,894,053 ”
    

    View Slide

57. Big sales!!
    ￥72,894,053
    A lot of users!!
    2,843,991users
    Level of satisfaction
    89.9%
    

    View Slide

58. Please customize the map that was in your purpose.
    Main
    office
    

    View Slide

59. Slide title
    A B C
    Apple 35 12 73
    Strawberry 81 20 92
    Grape 67 49 107
    

    View Slide

60. Explain your ideas!!
    Blue
    Green Orange
    

    View Slide

61. Slide title
    You can copy & paste graphs
    from Google Spreadsheet of
    Excel.
    グラフは Google スプレッドシートやExcel
    からコピーして貼り付けることができます。
    

    View Slide

62. Slide title
    Step 1. Write the first step here.
    Step 2. Write the second step here.
    Step 3. Write the third step here.
    

    View Slide

63. Thanks!!
    @youraccount
    yourname@mail.com
    http://www.example.com/
    

    View Slide

64. Readme
    ✅ Theme by Template Park.
    ＞https://template-parks.com/
    ✅ 商用利用が可能です。
    ✅ ダウンロードした本人の使用のみ可能です。
    ✅ 再配布・転売等は禁止しております。
    ✅ その他、ご利用規約とプライバシポリシーもご確認ください。
    ✅ テンプレートを気に入って頂きましたら、ぜひシェアして頂けると嬉しいです。新し
    いテンプレート作成の励みになります。
    ★ 画像の変更（差し替え）方法は“こちらの解説ページ”をご覧ください。
    

    View Slide