2021年4月25日React

Thumbnail of post image 117

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

React

Thumbnail of post image 155

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

2021年1月18日React

Thumbnail of post image 114

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

React

Thumbnail of post image 182

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

2020年12月13日TypeScript,express(node.js),Development

Thumbnail of post image 197

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

2020年9月13日Docker,kubernetes,React,Development

Thumbnail of post image 044

最近は、開発環境をDockerで構築することが多くなってきたので、Reactアプリの開発環境構築手順をまとめました。 また、本番デプロイ用にDockerHubへのPushとkubernetesへのデプロイ用YAMLの作成手順についてもまとめ ...

2020年6月7日express(node.js),heroku,LINE

Thumbnail of post image 198

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