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

Angularを採用したプロダクトで表記ゆれを撲滅したはなし

Shogo Ichinose
August 27, 2021
2.1k

 Angularを採用したプロダクトで表記ゆれを撲滅したはなし

Startup Angular #1
Angularを採用しているスタートアップの裏側を徹底公開
LTタイム 3人目
https://voicy.connpass.com/event/220158/

Shogo Ichinose

August 27, 2021
Tweet

Transcript

  1. 表 記 ゆ れ を
    撲 滅 し た は な し
    ⼀ ノ 瀬 翔 吾 ( 友 利 奈 緒 )
    2021.08.27

    View full-size slide

  2. ⾃⼰紹介
    atama plus株式会社
    Product Engineer
    ⾃称 CDO (Chief Design System Development Officer)
    Angular歴 4-5年ぐらい
    友利奈緒@rettar5
    2
    ⼀ ノ 瀬 翔 吾

    View full-size slide

  3. 教育に、⼈に、社会に、
    次の可能性を。
    教育を新しくすること。それは、社会のまんなかを新しくする
    こと。私たちは学びのあり⽅を進化させます。
    学習を⼀⼈ひとり最適化し、「基礎学⼒」を最短で⾝につける。
    そのぶん増える時間で、「社会でいきる⼒」を伸ばす。
    それが私たちの⽬指すもの。⾃分の⼈⽣を⽣きる⼈を増やし、
    これからの社会をつくっていきます。
    M i s s i o n
    atama plus

    View full-size slide

  4. ⓒ 2021 atama plus Inc. 5
    従来の勉強だけではない学びを提供する
    基礎学⼒ いきる⼒

    View full-size slide

  5. ⓒ 2021 atama plus Inc.
    atama plusのミッション
    6
    atama plus
    「基礎学⼒」の習得
    「基礎学⼒」の習得 「社会でいきる⼒」の習得

    View full-size slide

  6. AI先⽣「atama+」を
    全国の塾・予備校にSaaSモデルで提供しています。
    atama+は、⼀⼈ひとりの得意、苦⼿、伸び、
    つまずき、忘却度などの情報を収集・分析して、
    ⼀⼈ひとりに合った「⾃分専⽤カリキュラム」を提供します。
    学習をPersonalize「atama+」

    View full-size slide

  7. ⓒ 2021 atama plus Inc.
    atama plusのプロダクト
    8
    表記ゆれを撲滅したはなし
    Aurora/S3/CloudFront etc
    Hug+Zappa
    AWS Lambda
    Cloud Functions
    オンライン模試 / API server
    contents editor micro service dev tool

    View full-size slide

  8. ⓒ 2021 atama plus Inc.
    atama plusのプロダクト
    9
    表記ゆれを撲滅したはなし
    atama plusでは創業(2017年)から
    Angularを採⽤

    View full-size slide

  9. 表記ゆれの撲滅

    View full-size slide

  10. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    11
    表記ゆれを撲滅したはなし
    表記ゆれの修正を
    コミットしたことありますよね?

    View full-size slide

  11. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    12
    表記ゆれを撲滅したはなし
    atama plusにも
    いくつか表記のルールがあります

    View full-size slide

  12. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    13
    表記ゆれを撲滅したはなし
    atama+
    ↑プラスは全⾓

    View full-size slide

  13. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    14
    表記ゆれを撲滅したはなし
    atama+ ID
    ↑プラスは全⾓
    ↑プラスとIDの間は半⾓スペース

    View full-size slide

  14. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    15
    表記ゆれを撲滅したはなし
    atama+ Web版
    ↑プラスは全⾓
    ↑プラスとIDの間は半⾓スペース
    ↑WebはWのみ⼤⽂字

    View full-size slide

  15. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    16
    表記ゆれを撲滅したはなし
    既修
    ↑既習ではなく既修

    View full-size slide

  16. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    17
    表記ゆれを撲滅したはなし
    つまずき
    ↑「づ」ではなく「ず」

    View full-size slide

  17. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    18
    表記ゆれを撲滅したはなし
    社会でいきる⼒
    ↑いきるはひらがな

    View full-size slide

  18. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    19
    表記ゆれを撲滅したはなし
    ください
    ↑漢字ではなくひらがな

    View full-size slide

  19. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    20
    表記ゆれを撲滅したはなし
    めざす
    ↑漢字ではなくひらがな

    View full-size slide

  20. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅
    21
    表記ゆれを撲滅したはなし
    表記ゆれが残ったまま
    プロダクトがリリースされてしまう…!

    View full-size slide

  21. 表記ゆれの撲滅の仕組み化

    View full-size slide

  22. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    23
    表記ゆれを撲滅したはなし
    huskyとlint-stagedとtextlintを
    組み合わせて
    コミット時に表記ゆれを検知する

    View full-size slide

  23. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    24
    表記ゆれを撲滅したはなし
    husky
    gitコマンド実⾏時に
    任意の処理を実⾏できるツール

    View full-size slide

  24. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    25
    表記ゆれを撲滅したはなし
    lint-staged
    コミットしようとしているファイルに
    任意の処理を実⾏できるツール

    View full-size slide

  25. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    26
    表記ゆれを撲滅したはなし
    textlint
    Markdownやテキストファイルを
    Lintするツール

    View full-size slide

  26. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    27
    表記ゆれを撲滅したはなし
    textlintはruleやpluginなど
    組み合わせて⽂章の校正ができる

    View full-size slide

  27. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    28
    表記ゆれを撲滅したはなし
    atama+向けの辞書を作り
    誤った表記を含んでいたら
    正しい表記を教えるルールを実装

    View full-size slide

  28. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    29
    表記ゆれを撲滅したはなし

    View full-size slide

  29. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    30
    表記ゆれを撲滅したはなし

    View full-size slide

  30. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    31
    表記ゆれを撲滅したはなし

    View full-size slide

  31. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    32
    表記ゆれを撲滅したはなし
    これで.mdファイルの
    表記ゆれは撲滅完了!

    View full-size slide

  32. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    33
    表記ゆれを撲滅したはなし
    表記ゆれを撲滅したいのは
    ⽣徒や先⽣が使うプロダクト

    View full-size slide

  33. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    34
    表記ゆれを撲滅したはなし
    textlint単体では.htmlファイルが
    チェックできないので
    textlint-plugin-html
    を追加する

    View full-size slide

  34. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    35
    表記ゆれを撲滅したはなし

    View full-size slide

  35. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    36
    表記ゆれを撲滅したはなし

    View full-size slide

  36. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    37
    表記ゆれを撲滅したはなし
    これで.htmlファイルの
    表記ゆれは撲滅完了!

    View full-size slide

  37. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    38
    表記ゆれを撲滅したはなし
    .tsファイルでも
    表記ゆれ発⽣しますよね…?

    View full-size slide

  38. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    39
    表記ゆれを撲滅したはなし
    プラグインが存在しないので
    .js / .tsファイルのプラグイン
    textlint-plugin-babel-parser
    を実装しました

    View full-size slide

  39. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    40
    表記ゆれを撲滅したはなし

    View full-size slide

  40. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    41
    表記ゆれを撲滅したはなし

    View full-size slide

  41. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    42
    表記ゆれを撲滅したはなし
    これで.tsファイルの
    表記ゆれも撲滅完了!

    View full-size slide

  42. ⓒ 2021 atama plus Inc.
    表記ゆれの撲滅の仕組み化
    43
    表記ゆれを撲滅したはなし
    表記ゆれが残ったまま
    プロダクトがリリースされなくなった!

    View full-size slide

  43. ⓒ 2021 atama plus Inc.
    告知
    45
    表記ゆれを撲滅したはなし
    https://atama-plus.connpass.com/event/219479/

    View full-size slide

  44. © atama plus Inc.
    atama plusは、Mission driven company.
    ミッションの実現に向けて、常識にとらわれずに考え、議論し、
    互いを尊重しながら楽しむ集団です。
    ⼈が全てなので、採⽤にはとてもとてもこだわってきました。
    開発チームはもとより、ビジネスチームもコーポレートチームも、
    全員で良いプロダクトを創る。
    ⼀つの⼤きなチームとして意⾒をぶつけあいながら
    ⽣徒が熱狂する学びを創っていく。
    そんな想いの船に⼀緒に乗って、
    新しい教育を創り、社会を変えていく仲間を募集しています。
    We are hiring !
    参考リンク
    3 分 で わ か る
    a t a m a
    p l u s
    求 ⼈ ⼀ 覧

    View full-size slide