Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのIT勉強会.pdf

unisuke
September 23, 2020
79

 はじめてのIT勉強会.pdf

unisuke

September 23, 2020
Tweet

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
    発行 オイラリージャパン
    いろんな状況に「読みやすさ」を
    当てはめる方法が紹介されている
    4章”美しさ”を深掘り

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

    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
    [email protected]
    http://www.example.com/

    View Slide

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

    View Slide