フロントエンド開発のためのブラウザ組み込みAI入門

ブラウザ組み込みAIを利用したフロントエンド開発について話しました。
クライアントサイドAIのメリットやGoogle Chrome 138でリリースされたブラウザ組み込みAI APIについて紹介しています。

フロントエンドカンファレンス関西 × TSKaigiコラボイベント
https://fec-kansai.connpass.com/event/368837/

Transcript

1. ϑϩϯτΤϯυ։ൃͷͨΊͷ ϒϥ΢β૊ΈࠐΈAIೖ໳ @shisama_ 2025-10-20 ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢ × TSKaigiίϥϘΠϕϯτ
2. AIͷྲྀΕ͕͔ͭͯͷ ϑϩϯτΤϯυΑΓ଎͍ ʢݸਓͷײ֮ʣ
3. ϑϩϯτΤϯυΤϯδχΞͷ ओઓ৔Ͱ͋Δϒϥ΢βʹ ૊Έࠐ·ΕͨAIʹ͍ͭͯ࿩͠·͢
4. Masashi Hirano (@shisama_) • αΠϘ΢ζ • ϓϩδΣΫτϚωʔδϟʔͱϑϩϯτΤϯυΤϯδχΞ • ΞϝϦΧͷΦϯϥΠϯେֶ5೥໨ʢ4೥ͰଔۀͰ͖ͣ… • ʰϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦςΟೖ໳ʱʢᠳӭ ࣾʣஶऀ
5. Agenda • ΫϥΠΞϯταΠυAI • ΫϥΠΞϯταΠυAI΁ͷWebͷऔΓ૊Έ • ϒϥ΢β૊ΈࠐΈAI
6. AIΛ࢖ͬͨػೳͷ։ൃ͍ͯ͠·͔͢ʁ
7. AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ • AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI
8. • AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI ←ݱࡏ͸͕ͬͪ͜ओྲྀ AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ
9. • AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI ←ࠓ೔ͷϝΠϯ AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ
10. αʔόʔαΠυAI ϢʔβʔೖྗσʔλΛૹ৴ LLMͷ݁Ռʹجͮ͘Ϩεϙϯε --.ΛαʔόʔͰಈ͔͢
11. αʔόʔαΠυAIͷ՝୊ • ϓϥΠόγʔͱηΩϡϦςΟ • ௨৴த΍֎෦αʔόʔ͔Βͷػີ৘ใͷ࿙ӮϦεΫ • ίετ • Ϋϥ΢υαʔϏε΍LLMͷAPI (OpenAI APIͳͲ)Λ࣮ߦ͢Δ͕͔͔ۚΔ • ύϑΥʔϚϯε • ௨৴ʹΑΔϨΠςϯγʔ͕ൃੜ͢Δ • Մ༻ੑ • ֎෦ͷAPIαʔόʔ͕ো֐Λى͜͢ͱಈ͔ͳ͍
12. ΫϥΠΞϯταΠυAI --.ΛϩʔΧϧͰಈ͔͢ ωοτϫʔΫΛհ͞ͳ͍
13. ΫϥΠΞϯταΠυͰಈ͔͢ϝϦοτ • ϓϥΠόγʔͱηΩϡϦςΟͷڧԽ • ίετ࡟ݮ • ύϑΥʔϚϯε޲্ • ΦϑϥΠϯར༻
14. ϓϥΠόγʔͱηΩϡϦςΟͷڧԽ • σʔλྲྀग़ϦεΫͷ๷ࢭ • σʔλΛ֎෦αʔόʔ΁ૹ৴͠ͳ͍ͨΊػີ৘ใͷอޢ͕Մೳ • ୈࡾऀ΁ͷσʔλެ։ͷݒ೦ܰݮ • αʔόʔ΁ૹ৴ͨ͠৘ใ͕ଞͷϢʔβʔ΁ެ։͞ΕΔݒ೦Λܰݮ • ΤϯυπʔΤϯυ҉߸ԽͰ΋LLMΛಈ͔͢͜ͱ͕Ͱ͖Δʢิ଍͋Γʣ
15. ิ଍: ΤϯυπʔΤϯυ҉߸Խͷར༻࣌ͷ ΫϥΠΞϯτAIͷ׆༻ ड৴ऀͷΈ͕෮߸Ͱ͖Δσʔλʹରͯ͠LLMͷ࣮ߦ͕Մೳ ௨৴ܦ࿏্ͷ౪ௌɾվ͟Μ Λ๷͙͜ͱ͕Ͱ͖Δ ड৴ऀ͚͕ͩ෮߸Ͱ͖ΔΑ͏ ʹ҉߸Խ ෮߸ͯ͠ϩʔΧϧͷ--.ʹ ಡΈࠐ·ͤΔ
16. ิ଍: ΤϯυπʔΤϯυ҉߸Խͷར༻࣌ͷ ΫϥΠΞϯτAIͷ׆༻ αʔόʔͰ෮߸͞Εͳ͍Α͏ͳ௨৴Λ࢖͏৔߹Ͱ΋AIػೳΛఏڙͰ͖Δ ड৴ऀ͚͕ͩ෮߸Ͱ͖ΔΑ͏ ʹ҉߸Խ தܧαʔόʔ͸҉߸Խ͞Εͨ
    σʔλΛ෮߸Ͱ͖ͳ͍ ෮߸ͯ͠ϩʔΧϧͷ--.ʹ ಡΈࠐ·ͤΔ
17. ίετ࡟ݮ • ϒϥ΢βʹ૊Έࠐ·ΕͨLLMͷར༻͸جຊແྉ • Ϋϥ΢υαʔϏε΍LLMͷAPIͷίετ࡟ݮ • LLMΛಈ͔͢αʔόʔΛ༻ҙ͠ͳͯ͘Α͍
18. ύϑΥʔϚϯε޲্ • αʔόʔͱͷ௨৴ʹΑΔϨΠςϯγʔΛճආ • ϦΞϧλΠϜॲཧ͕ॏཁͱͳΔέʔεʹڧ͍ • Google MeetͰ͸എܠ΅͔͠΍ϊΠζ཈੍Ͱ༻͍ΒΕ͍ͯΔ ʢGoogle I/O 2025ʹͯൃදʣ
19. ΦϑϥΠϯར༻ • ϩʔΧϧͰॲཧ͢ΔͨΊΦϑϥΠϯͷ৔߹Ͱ΋LLM͕ಈ࡞͢Δ • ωοτϫʔΫ੍ݶ͕͋ΔΑ͏ͳ৔߹Ͱ΋LLM͕ಈ࡞͢Δ • ࣾ಺͔Βࣾ֎΁ͷΞΫηε੍ݶͳͲ • LLMͷΫϥ΢υαʔϏεͷϑΥʔϧόοΫͱͯ͠ར༻Մೳ • OpenAI API͔ΒΤϥʔ͕ฦ͖ͬͯͨΒΫϥΠΞϯταΠυAIͰର Ԡ͢ΔͳͲ
20. ΫϥΠΞϯταΠυAIͷσϝϦοτ • ਫ਼౓͕௿͘Ϣʔεέʔε͕ݶΒΕΔ • αʔόʔͱൺ΂ͯεϖοΫ͕௿͍ϢʔβʔͷσόΠεͰ΋ಈ͘Α ͏ʹϞσϧ͕খ͍͞ • ར༻؀ڥ͕ݶΒΕ͍ͯΔ • ϋʔυ΢ΣΞεϖοΫ͕଍Γͳ͍୺຤΍αϙʔτ͍ͯ͠ͳ͍ϒϥ ΢βͰ͸ಈ͔ͳ͍
21. ΫϥΠΞϯταΠυAIͷσϝϦοτ΁ͷରࡦ • ਫ਼౓͕௿͘Ϣʔεέʔε͕ݶΒΕΔ → ਫ਼౓͕ٻΊΒΕΔέʔεͰ͸αʔόʔαΠυAIΛར༻͢Δ • ར༻؀ڥ͕ݶΒΕ͍ͯΔ → ରԠ͍ͯ͠ͳ͍৔߹΍ΫϥΠΞϯταΠυͷ࣮ߦʹ͕͔͔࣌ؒΔ ৔߹͸αʔόʔαΠυAIΛར༻͢Δ ΫϥΠΞϯταΠυAI + αʔόʔαΠυAI = ϋΠϒϦουAI
22. ΫϥΠΞϯταΠυAI΁ͷWebͷऔΓ૊Έ • Web Machine Learning Working Group • AIʹؔ͢ΔAPIͷWebඪ४ԽΛਐΊ͍ͯΔW3CͷWG • Web Neural Network (WebNN) Λఆٛ • GPUͳͲͷϋʔυ΢ΣΞΞΫηϥϨʔγϣϯΛ࢖༻ͨ͠௿ϨϕϧͷAPI • ϒϥ΢β૊ΈࠐΈAIΛར༻ͨ͠APIͷఆٛʢޙड़ʣ • Prompt APIɺTranslation APIɺSummarization APIͳͲ
23. https://github.com/webmachinelearning
24. ϒϥ΢β૊ΈࠐΈAI • Google Chromeʹ͸Gemini Nano͕૊Έࠐ·Ε͍ͯΔ • σεΫτοϓͰ΋ϋʔυ΢ΣΞཁ͕݅͋Δ • Windows 10 or 11ɺmacOS 13Ҏ্ɺLinuxɺ22GBҎ্ͷετϨʔ δɺ಺༰GPU·ͨ͸ϏσΦΧʔυ͕ඞཁɺVRAM͸4GBҎ্ • Gemini Nano͸ϞόΠϧσόΠεͰ΋ಈ࡞͢Δ͙Β͍ܰྔ
25. ϒϥ΢β૊ΈࠐΈAI API "1* ػೳ 8FCར༻Մ൱ ֦ுػೳར༻Մ൱ *OUFOU 5SBOTMBUPS
    "1* ຋༁ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ -BOHVBHF
    %FUFDUPS
    "1* ݴޠݕग़ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 4VNNBSJ[FS
    "1* ཁ໿ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 8SJUFS
    "1* จষ࡞੒ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 3FXSJUFS
    "1* จষमਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 1SPNQU
    "1* --.ʹࣗવݴޠϦ ΫΤετ 0SJHJO
    5SJBM $ISPNF
     *OUFOU
    UP
    &YQFSJNFOU 1SPPGSFBEFS
    "1* จষߍਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    1SPUPUZQF
26. Translator API ݁Ռ͸TUSFBNͷͨΊ͢΂ͯͷ຋༁Λ ଴ͨͣʹ్தΛදࣔ͢Δ͜ͱ΋Մೳ
27. Language Detector API --.ʹΑΔݴޠݕग़ͷ݁Ռ
    ϑϥϯεޠΒ͍͠
28. Language Detector API + Translator API ݴޠݕग़ͷ֬཰͕࠷΋ߴ͍݁ ՌΛऔΓग़͍ͯ͠Δ
29. Prompt API
30. Summarizer API
31. ϒϥ΢β૊ΈࠐΈAI API "1* ػೳ 8FCར༻Մ൱ ֦ுػೳར༻Մ൱ *OUFOU 5SBOTMBUPS
    "1* ຋༁ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ -BOHVBHF
    %FUFDUPS
    "1* ݴޠݕग़ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 4VNNBSJ[FS
    "1* ཁ໿ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 8SJUFS
    "1* จষ࡞੒ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 3FXSJUFS
    "1* จষमਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 1SPNQU
    "1* --.ʹࣗવݴޠϦ ΫΤετ 0SJHJO
    5SJBM $ISPNF
     *OUFOU
    UP
    &YQFSJNFOU 1SPPGSFBEFS
    "1* จষߍਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    1SPUPUZQF $ISPNF͚ͩʁ
32. ϒϥ΢β૊ΈࠐΈAI API "1* ػೳ 8FCར༻Մ൱ ֦ுػೳར༻Մ൱ *OUFOU 5SBOTMBUPS
    "1* ຋༁ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ -BOHVBHF
    %FUFDUPS
    "1* ݴޠݕग़ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 4VNNBSJ[FS
    "1* ཁ໿ $ISPNF
     $ISPNF
     *OUFOU
    
    UP
    TIJQ 8SJUFS
    "1* จষ࡞੒ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 3FXSJUFS
    "1* จষमਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    &YQFSJNFOU 1SPNQU
    "1* --.ʹࣗવݴޠϦ ΫΤετ 0SJHJO
    5SJBM $ISPNF
     *OUFOU
    UP
    &YQFSJNFOU 1SPPGSFBEFS
    "1* จষߍਖ਼ 0SJHJO
    5SJBM 0SJHJO
    5SJBM *OUFOU
    UP
    1SPUPUZQF $ISPNF͚ͩʁ 8FC
    .BDIJOF
    -FBSOJOH
    8PSLJOH
    (SPVQ
    Ͱٞ࿦͞Ε͍ͯΔ
33. Issue͕ͦΕͧΕͷϦϙδτϦʹ͋Δ Mozilla / standard-positions Webkit / standard-positions
34. ϒϥ΢β૊ΈࠐΈAI API "1* 8FC.-
    8( .P[JMMBTUBOEBSET QPTJUJPOT
    8FCLJUTUBOEBSET QPTJUJPOT
    5SBOTMBUPS
    "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ -BOHVBHF
    %FUFDUPS
    "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 4VNNBSJ[FS
    "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 8SJUFS
    "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 3FXSJUFS
    "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 1SPNQU
    "1*  *TTVF͋Γ *TTVF͋Γ 1SPPGSFBEFS
    "1*   
35. ૊ΈࠐΈAI APIͷࣄྫ (Google I/O 2025ͷൃද) https://www.youtube.com/watch?v=CjpZCWYrSxM
36. ࠓ೔࿩ͤͳ͔ͬͨศརͳϒϥ΢βAIػೳ • Chrome DevToolsͰ΋AIΞγελϯεػೳ͕௥Ճ͞Ε͍ͯΔ • DevTools্͔ΒωοτϫʔΫ΍ΞΫηγϏϦςΟͳͲͷ໰୊ɺΤ ϥʔͷղੳ΍मਖ਼ͷࢧԉʹ࢖͑Δ • Chrome DevTools MCPΛ࢖ͬͯίʔσΟϯάΤʔδΣϯτʹWeb ϖʔδ্Ͱى͖͍ͯΔ໰୊ͷσόοάࢧԉ
37. ྫ
    $POTPMFλϒʹग़ͨΤϥʔΛ "*͕ղੳɾमਖ਼ఏҊͯ͘͠ΕΔ
38. ྫ
    /FUXPSLύωϧ্ͰϦιʔεͷ ಡΈࠐΈͷࣦഊݪҼΛ"*͕ղੳ
39. ·ͱΊ • AIػೳͷ։ൃʹ͸ʮαʔόʔαΠυAIʯʮΫϥΠΞϯταΠυAIʯʮϋ ΠϒϦουAIʯͷύλʔϯ͕͋Δ • ΫϥΠΞϯταΠυAI͸ϓϥΠόγʔอޢ΍Ϣʔβʔମݧ޲্ɺίε τ࡟ݮͱ͍ͬͨϝϦοτ͕͋Δ • ΫϥΠΞϯταΠυAIΛ࢖͏APIͷWebඪ४Խ͕ਐΜͰ͍Δ • Ұ෦ͷϒϥ΢β૊ΈࠐΈAI API͕ChromeͰར༻Մೳʹͳ͍ͬͯΔ
40. Thanks!