JavaScript

JavaScript

create-react-appへのTailwind CSSの設定方法と簡単な拡張方法

とりあえずReactにTailwind CSSを導入したいcyan、greenなどの色の追加方法がわからないCSSフレームワークといえば、BootstrapやMATERIAL-UIなどが有名ですが、誰が作っても同じようなデザインになることか...
JavaScript

ReactからGoogleapis の Youtube Data APIを呼び出す方法 ~Search APIを呼び出して動画の検索ページと再生ページを作成する~

React から外部のAPIを呼び出すサンプルを作成してみました。外部APIの題材としてYoutubeのData APIのSearchを利用し、動画の検索ページと再生ページも作成していきます。システム構成今回はAPI部分を中心に説明しますが...
JavaScript

javascriptのwindow.matchMediaでreactのカスタムフック(useMediaQuery)を作成してレスポンシブ対応

Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。javascriptのwindow.matchMedia()の使用...
JavaScript

reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する

react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを1から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。 ...
JavaScript

Express(Node.js)でTypeScriptを利用した開発環境構築 ~REST APIのひな形を作成する~

フロント側ではReact、Vue、Angularなどは静的型付け言語であるTypeScriptでコーディングされることが一般的になってきました。今回は、Node.jsのフレームワークであるExpressについてもJavaScriptではなく...
JavaScript

「リッチメニュー」と「クイックリプライ」を利用した無料でできるLINEチャットボットアプリの作り方 (node.js + Heroku)

今回はクラウド環境Herokuを利用して無料でLINEチャットボットを作成してみました。メッセージをそのまま返すサンプルはよくあるので、もう少し処理を加えて小学生低学年レベルの計算問題をやりとりするLINEチャットボット「バーチャル先生」を...