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
JavaScriptのテンプレートリテラル / Template Literal of Jav...
Search
ygkn
June 20, 2019
Programming
0
210
JavaScriptのテンプレートリテラル / Template Literal of JavaScript
ygkn
June 20, 2019
Tweet
Share
More Decks by ygkn
See All by ygkn
カラースキームつくったよ / How to create color-scheme
ygkn
0
210
入門 React Hooks / Introduction of React Hooks
ygkn
0
210
Other Decks in Programming
See All in Programming
チームの境界をブチ抜いていけ
tokai235
0
220
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
680
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
360
CSC509 Lecture 08
javiergs
PRO
0
250
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
14k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Featured
See All Featured
Building an army of robots
kneath
305
46k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Code Review Best Practice
trishagee
72
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Making Projects Easy
brettharned
120
6.4k
For a Future-Friendly Web
brad_frost
180
10k
Transcript
JavaScript の テンプレートリテラル やぎちゃん
自己紹介
文字をくっつけよう!
文字をくっつけよう!
もじぴったん
None
+演算子のなところ 加算?結合?
+演算子のなところ 加算?結合?
+演算子のなところ 加算?結合?
文字列の結合?
テンプレートリテラルで書く
さっきの
テンプレートリテラルで書く
テンプレートリテラルで書く
One more thing...
None
None
None
None
None
とはならない!
None
これ is 何?
None
これ is 何? タグ付きテンプレート文字列 →テンプレートリテラルで書かれた文字列(の配列)と埋め込まれた変数を受け取る関 数
タグ付きテンプレート文字列の例 (from MDN)
None
None
None
タグ付きテンプレート文字列と @emotion/styled (styled-componentsも可)
Styled Components?
Styled Components?
Styled Components? 一種のHOC
Styled Components?
Styled Components?
まとめ!!! • テンプレートリテラルは文字の連結だけじゃないよ! • 文字列と埋め込む変数を別々に関数に渡すのでいろいろできるよ!! • ↑の例として SQL や CSS
in JS のライブラリがあるよ!!!
ありがとうございました!