Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Componentsを使ったウィジェット埋め込みの話
Search
nabeliwo
April 24, 2023
Technology
0
350
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
April 24, 2023
Tweet
Share
More Decks by nabeliwo
See All by nabeliwo
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
750
Dive into SmartHR UI
nabeliwo
3
1.2k
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
170
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
91
React事始め
nabeliwo
0
550
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
470
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
180
Other Decks in Technology
See All in Technology
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
210
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
150
caching_sha2_passwordのはなし
boro1234
0
220
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
Agile TPIを活用した品質改善事例
tomasagi
0
350
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
130
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
130
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
150
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
230
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
32
12k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.3k
The Invisible Side of Design
smashingmag
299
50k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Code Review Best Practice
trishagee
67
18k
Code Reviewing Like a Champion
maltzj
522
39k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Embracing the Ebb and Flow
colly
85
4.6k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
How STYLIGHT went responsive
nonsquared
99
5.4k
What's in a price? How to price your products and services
michaelherold
245
12k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Transcript
8FC$PNQPOFOUTΛͬͨ ΟδΣοτຒΊࠐΈͷ 5VF"OPUIFSXPSLTY4NBSU)3'SPOU&OE%FFQ%JWF OBCFMJXP 4NBSU)3ϓϩμΫτΤϯδχΞ
ࣗݾհ OBCFMJXP 4NBSU)3 ϓϩμΫτΤϯδχΞάϧʔϓ ϓϥοτϑΥʔϜ։ൃϢχοτ ϑϩϯτΤϯυΤϯδχΞ 5ZQF4DSJQU 3FBDU /FYUKTͳͲ
ϓϥοτϑΥʔϜࣄۀͷ͝հ
CONFIDENTIAL ͜͜ʹηΫγϣϯλΠτϧΛ ೖΕͯΈΑ͏ʂ
4NBSU)31MVTЌ൛ͱ w 4NBSU)3Λͬͱศརʹ׆༻͢ΔͨΊͷ֎෦ ΞϓϦέʔγϣϯΛಋೖͰ͖ΔΞϓϦετΞ w Ϣʔβʔͱ֎෦ΞϓϦέʔγϣϯύʔτφʔ Λͭͳ͙ͨΊͷ৽͍͠ίϛϡχέʔγϣϯ νϟωϧ
ࠓ͢͜ͱ
ࠓ͢͜ͱ w 1'ࣄۀͰ8FC$PNQPOFOUTΛ࠾༻ͨ͠ w ͳͥ8FC$PNQPOFOUTΛ࠾༻ͨ͠ͷ͔ w ࣮ࡍʹͬͯΈͯͲ͏͔ͩͬͨ w ࠓޙͷ1'ࣄۀͷٕज़తͳల
8FC$PNQPOFOUTͬͯ ͦͦͳΜ͚ͩͬͷ͓͞Β͍
8FC$PNQPOFOUTͱ w ࠶ར༻ՄೳͳΧελϜཁૉ w 4IBEPX%0.ʹΑΔΧϓηϧԽ w )5.-ςϯϓϨʔτʹΑΔϚʔΫΞοϓ w Σϒඪ४
8FC$PNQPOFOUTͷ"1*Λϥοϓͯ͠؆୯ʹѻ͑ ΔΑ͏ʹͨ͠ϥΠϒϥϦɻ 4NBSU)3Ͱ-JUΛ༻ͯ͠ΧελϜཁૉΛ࡞ͬͯ ͍·͢ɻ
1'ࣄۀͰ8FC$PNQPOFOUT Λ࠾༻ͨ͠
௨ۈܦ࿏ݕࡧ w ग़ൃɺతɺ௨ۈखஈΛೖྗ͢Δͱࣗಈ Ͱ௨ۈܦ࿏௨ۈඅΛग़ͯ͘͠ΕΔ w /"7*5*.&ͱ(PPHMF.BQͷ"1*Λ༻ͯ͠ ͍Δ w طଘͷैۀһฤूը໘Λ֦ு͢Δ
ΦϓγϣϯػೳΛΠϯετʔϧ
ैۀһ߲͕ΧελϚΠζ͞ΕΔ
௨ۈܦ࿏ݕࡧػೳͷٕज़తͳ༷ w Πϯετʔϧ͠ͳ͍ͱ͑ͳ͍ w Πϯετʔϧ͢Δͱैۀһใฤूը໘ʹ௨ ۈܦ࿏༻ͷϑΥʔϜΟδΣοτ͕֎෦͔Βຒ Ίࠐ·ΕΔ w ΟδΣοτͷ࣮4NBSU)3ʹͳ͍
ΟδΣοτͷ࣮͕֎ʹ͋Δཧ༝ w ࠓޙΦϓγϣϯػೳͰΠϯετʔϧ͞Εͨػೳ͕ 4NBSU)3ʹຒΊࠐ·Ε͍ͯ͘ w શͯ4NBSU)3ʹ࣮͍ͯ͘͠ͱΦϓγϣϯػೳ Ճͷʹ4NBSU)3Ͱ৽ن࣮͠ͳ͍ͱ͍͚ͳ͍ w ࠓޙSEύʔςΟΞϓϦΛ૿͍ͯ͘͠ w
֎ͷΞϓϦଆͰΟδΣοτΛ࡞Δܗʹ͍ͨ͠
ຒΊࠐΈΟδΣοτΛ 8FC$PNQPOFOUTͰ࣮͍ͯ͠·͢
ͳͥ8FC$PNQPOFOUTΛ ࠾༻ͨ͠ͷ͔
8FC$PNQPOFOUT࠾༻ཧ༝ w 4NBSU)3ଆͷΟδΣοτຒΊࠐΈͷهड़Λ γϯϓϧʹ͔ͨͬͨ͠ w ΟδΣοτ֎͔ΒͷӨڹΛड͚ͣɺ֎ʹӨ ڹΛ༩͑ͳ͍ܗʹ͔ͨͬͨ͠ w 4NBSU)3ͷϑϩϯτΤϯυͷෳࡶੑͷഎܠ
ΟδΣοτຒΊࠐΈΛγϯϓϧʹ w ࠓޙຒΊࠐΈ͍ͨΞϓϦͷɺΟδΣοτͷ ͲΜͲΜ૿͍͑ͯ͘ఆ w ͭͳ͗͜Έ෦Λγϯϓϧʹ͠ͱ͔ͳ͍ͱޙʑ ා͍ w 8FC$PNQPOFOUTͰ͋Ε4NBSU)3ଆ +4ΛಡΈࠐΜͰΧελϜཁૉΛݺͿ͚ͩ
ຒΊࠐΈ࣮ͷྲྀΕ w ຒΊࠐΈ͍ͨΞϓϦଆͰίϯϙʔωϯτΛ࣮ ͢Δ w ΧελϜཁૉ໊ͱϏϧυͨ͠+4ͷύεΛ 4NBSU)3ʹ͢ w 4NBSU)3ଆΒͬͨใΛઃఆϑΝΠϧͰ ཧ͢Δ
˞IBNMͰ͢ ˞આ໌͍͢͠Α͏৭ʑม͑ͯॻ͍ͯ·͢
4NBSU)3 ௨ۈܦ࿏ݕࡧ ϑΥʔϜ࣮ σʔλϕʔε 8FC$PNQPOFOUT ʹΑΔΧελϜ ϑΥʔϜ࣮ Ϗϧυͨ͠+4 ૢ࡞ Ϗϧυ
$IBOHF&WFOU %JTQBUDI 4VCTDSJCF ߋ৽
௨ۈܦ࿏ݕࡧػೳͷ8FC$PNQPOFOUTͱ 4NBSU)3ͷΓऔΓ ΠϕϯτͷEJTQBUDIͱTVCTDSJCFͷΈ
ӨڹΛ༩͑ͳ͍ܗʹ͔ͨͬͨ͠ w 8FC$PNQPOFOUTͰ͋ΕΧελϜԽ͞Εͯ ͍ΔͷͰɺ4NBSU)3ଆͷάϩʔόϧͳελΠ ϧͷӨڹΛड͚ͳ͍ w 8FC$PNQPOFOUTͷ࣮ʹΑΓ4NBSU)3 ଆͷ6*Λյ͞ͳ͍
ͦΕͬͯ3FBDUͰྑ͍ͷͰʜʁ
4NBSU)3ͷϑϩϯτΤϯυͷෳࡶੑ w ैۀһใΛมߋ͢Δํ๏ैۀһใฤूը໘ ͱਃϑΥʔϜͷ௨Γ͋Δ w ैۀһใฤूը໘IBNM K2VFSZɺਃ ϑΥʔϜ3FBDUͰಈ͍͍ͯΔ w ͲͪΒͷύλʔϯͰಉ͡ܗࣜͰѻ͏ͨΊʹ
8FC$PNQPOFOUTʹ͍ͯ͠Δ
࣮ࡍʹͬͯΈͯͲ͏͔ͩͬͨ
ྑ͔ͬͨͱ͜Ζ w બఆཧ༝ʹॻ͍࣮ͨݱ͍ͨ͜͠ͱશͯͳ͘ ࣮ݱͰ͖ͨ w 4NBSU)3ͷෳࡶͳࣄΛ8FC$PNQPOFOUT ଆྀ͕͢Δඞཁ͕ͳ͍ w γϯϓϧͳΠϯλʔϑΣʔε
͍͠ͱ͜Ζ w 4NBSU)36*͕͑ͳ͍😭 w %JTQBUDIͱ4VCTDSJCFͷΈͱ͍͏औΓܾΊ͠ ͯΔ͕ɺϧʔϧ؆୯ʹΔͿ͜ͱ͕Ͱ͖Δͷ ͰSEύʔςΟʹಉ͡ΓํΛͤ͞Δͷةͳ͍
w 4NBSU)3ͷϓϩμΫτͰ൚༻తʹ͑Δ3FBDU ίϯϙʔωϯτू w #VUUPO *OQVUͳͲͷγϯϓϧͳཁૉͪΖ Μɺ%JBMPH%SPQEPXO %BUF1JDLFSͷΑ͏ͳ ෳࡶͳͷ͋Γͱͯศར
4NBSU)36*͕͑ͳ͍😭 w 4NBSU)3ͷ6*ͷ$44Λίϐʔͯ͠͏Έ͍ͨ ͳ͜ͱΛ͍ͯͨ͠ w ෳࡶͳͷ͍͠ͷͰɺಉ͡%BUF1JDLFSͳͷ ʹϑΥʔϜ͝ͱʹݟͨҧ͏ͱ͍͏͜ͱʹͳͬͯ ͠·ͬͨ
4NBSU)36* 8FC$PNQPOFOUT
ࠓޙΛݟਾ͑ͨ੬ऑੑͷ w 8FC$PNQPOFOUTͷίʔυ͕4NBSU)3Ͱ ࣮ߦ͞ΕΔͨΊɺΖ͏ͱࢥ͑ͳΜͰͰ͖Δ w SEύʔςΟʹຒΊࠐΈΟδΣοτΛ։์͢Δ ͱ͖αϯυϘοΫεԽͷΈΛ༻ҙ͠ͳ͍ͱ ͍͚ͳ͍
ࠓޙͷ1'ࣄۀͷٕज़తͳల
w 4NBSU)36*ͷ8FC$PNQPOFOUTԽ w αϯυϘοΫεԽͷٕज़ݕ౼
4NBSU)36*ͷ8FC$PNQPOFOUTԽ w 3FBDU 7VF 7BOJMMB FUDʜͲ͔͜ΒͰ͑Δ Α͏ʹ͍ͨ͠ w 4NBSU)36*Λγϡοͱ8FC$PNQPOFOUTʹ ஔ͖͑Δͷ͍͠
w ·ͣCVUUPOͳͲͷ؆୯ͳ6*Λม͍͑ͯ͘ͳ ͲΛͯ͠ࢼ͍͖͍ͯͨ͠
αϯυϘοΫεԽͷٕज़ݕ౼ w JGSBNF w 2VJDL+4Λ8BTNԽ͢Δ w 8FC8PSLFS w 4IBEPX3FBMN"1*
ࠓޙͷϓϥοτϑΥʔϜͷల։ʹ ͝ظ͍ͩ͘͞ʂʂʂʂ
࠷ޙʹ
4NBSU)3ΤϯδχΞΛืू͍ͯ͠·͢ʂʂ 4NBSU)3ΤϯδχΞ࠾༻<ݕࡧ>
͋Γ͕ͱ͏͍͟͝·ͨ͠