Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
vue.jsで漢字のふりがな自動変換を実装した話
Takayuki
September 17, 2021
Programming
1
720
vue.jsで漢字のふりがな自動変換を実装した話
vue.jsで漢字のふりがな自動変換を実装した話
Takayuki
September 17, 2021
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Notionで簡易サイトを作成して、ニーズ調査を行った話
bumptakayuki
2
870
Re:Buildでのローコード開発の取り組み
bumptakayuki
0
300
誰でも簡単に始められるBDD(ビーチ駆動開発)のススメ
bumptakayuki
0
790
本当にあった怖いPHPコード7選
bumptakayuki
1
2.4k
Laravel Activity Logを使って簡単に変更履歴機能を実装しよう
bumptakayuki
0
330
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
bumptakayuki
1
300
LaravelのFat Controllerをどうリファクタしていくか
bumptakayuki
0
520
LaravelとNuxt.jsで保守性を高める構成を考えてみた
bumptakayuki
1
940
沖縄のスタートアップ企業が痛みを伴いながら、2つ目の自社プロダクト開発への挑戦
bumptakayuki
0
440
Other Decks in Programming
See All in Programming
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
300
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
240
Enumを自動で網羅的にテストしてみた
estie
0
1.3k
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
210
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
ECテックカンファレンス2023
kspace
1
340
T3 Stack and TypeScript ecosystem
quramy
3
760
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
1.1k
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
200
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
7
1.4k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Making Projects Easy
brettharned
102
4.8k
Happy Clients
brianwarren
90
5.8k
Design by the Numbers
sachag
271
18k
Designing with Data
zakiwarfel
91
4.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Infographics Made Easy
chrislema
235
17k
Transcript
vue.jsで漢字のふりがな自動ม換を ࣮した話 鈴木孝之
"HFOEB ࣗݾհ ࣮ݱ͔༷ͨͬͨ͠ ࣮ࡍʹ࣮ͨ͠ߏ
ࣗݾհɾձࣾհ
Copyright Re:Build.inc All Rights Reserved. ࣗݾհ 1 ◆໊લ ླ ೭(Suzuki
Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ੜ·Εɻ ɾԭೄͰىۀͯ͠3ɻ ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһɺ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
Copyright Re:Build.inc All Rights Reserved. ࣗݾհ 1
Copyright Re:Build.inc All Rights Reserved. ձࣾհ 1 ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ
ԭೄݝಹࢢٱໜ2-2-2 λΠϜεϏϧ ◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 10໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
Copyright Re:Build.inc All Rights Reserved. 7 ɾαʔϏε໊ Tadoru https://tadoru.work/
ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥυιʔγϯά 1 ձࣾհ
Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
https://rebuild-bootcamp.jp/ ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮ϨϕϧʯΛ ࢦ͢ํ͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾհ
࣮ݱ͔༷ͨͬͨ͠
࣮ݱ͔༷ͨͬͨ͠ ྫ
࣮ݱ͔༷ͨͬͨ͠ ྫ ɾࣈͰೖྗͨ͠ࡍʹࣗಈͰ;Γ͕ͳ ม͢Δ ɾม͢Δࡍͷਫ਼ߴ͍ͷ͕ٻΊΒΕ͍ͯͨ ɾมεϐʔυ0.5ඵҎ্ΛٻΊΒΕ͍ͯͨ
࣮ݱ͔༷ͨͬͨ͠ ྫ ཁ͕ࡉ͔ͯ͘ɺͳ͔ͳ͔ ࣮͕͍͠…
࣮ࡍʹ࣮ͨ͠ߏ
࠷ॳʹͬͨϥΠϒϥϦ vue-autokana-sample vue.jsͰࣗಈͰ;Γ͕ͳΛೖྗ͢Δ ͨΊͷαϯϓϧʹͳΓ·͢ɻ ར༻ϥΠϒϥϦɺʮterrierscript/ historykanaʯʹͳΓ·͢ɻ https://github.com/idani/vue-autokana-sample
ɾม͍ ɾ͚ΕͲɺมͷਫ਼͋·Γߴ͘ͳ͍ɻ ɾ͜ΕͰɺਫ਼͍ͱ͓٬͞Μʹ٫Լ͞Εͨɻ
࣍ʹ࣮ͨ͠ํ๏ɹkuromoji.jsͰܗଶૉղੳ https://github.com/takuyaa/kuromoji.js/
kuromori.js ࣙॻݕࡧ ࣈΛܗଶૉղੳ ͻΒ͕ͳม ϩδοΫ ΧλΧφΛͻΒ͕ͳʹ มͯ͠දࣔ͢Δ גࣜձࣾϦϏϧυ ࣍ʹ࣮ͨ͠ํ๏ɹkuromoji.jsͰܗଶૉղੳ
ɾม͍ɻมʹ1.5ඵ΄Ͳ͔͔Δɻ ɾมͷਫ਼͔ͳΓߴ͍ɻ ɾ͜ΕͰɺ͕͍ͱ͓٬͞Μʹ٫Լ͞Εͨɻ
Yahoo ϧϏৼΓ API גࣜձࣾϦϏϧυ ࣈΛ͔ͳม https://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html ࣍ʹ࣮ͨ͠ํ๏ɹYahoo API
ɾม͍ɻ ɾมͷਫ਼ߴ͍ɻ ɾ༻ར༻ͩͱYahooଆʹ՝ۚͷਃ͕ඞཁɻ ɾ͜ΕͰɺ͓͕͔͔ۚΔͱɺ͓٬͞Μʹ٫Լ͞Εͨɻ
ɾແྉͰࣈͷมͷਫ਼Λߴ͘͢Δͷ ͔ͬͨ͠…ʂ ୭͔ྑ͍Γํ͋ͬͨΒɺڭ͍͑ͯͩ͘͞ʂʂʂ ·ͱΊ