tuku– Author –
tuku
-
react.js
【React TypeScript】Material UIのChipを使ってみる!
今回は、React TypeScriptのアプリケーションでMaterial UIのChipを使う方法を紹介していこうと思います。Chipは情報の入力、選択、コンテンツのフィルタリング、アクションのトリガーなど様々な使い道があり、コンパクトな要素なのでぜひ使ってみてくださ... -
react.js
【React TypeScript】Rechartsを使って図を表示してみよう!
今回は、React TypeScriptのアプリにRechartsで円グラフを表示してみようと思います!Rechartを試してみたいと思っていた方は参考にしてみてください! まだ、React TypeScriptの開発環境を未構築の方は、「ReactとTypeScriptとRedux Toolkitの開発環境構... -
react.js
【React TypeScript】Material UIのCardに、AvatarやListを表示!CardActionsやCardHeaderの使い方も解説!
今回は、Material UIのCardに、AvatarやListを表示してみます!Cardを利用するにあたり、CardContentやCardHeadr、CardActionsなどの使い方も解説します。 CardはPaperを拡張したコンポーネントになっており、文字だけでなく画像なども表示できます。Avata... -
react.js
【React TypeScript】Material UIのGridとCardを使ってレイアウトを調整!
今回は、Material UIのGridとCardを使ってレイアウトを調整していきます!Material UIには、レスポンシブレイアウトグリッドを実装するためのコンポーネントであるGridがあるのでこれをアプリに導入する方法を知ってもらえると良いかなと思います。 まだ、... -
react.js
【React TypeScript】react -router-domの導入!Material UIのボタンを使って画面遷移をしよう!
今回は、Reactアプリケーションにreact-router-domを導入して画面遷移を実装していきます。Reactのアプリケーションは、SPA(シングルページアプリケーション)と言って画面遷移の仕組みが特殊なので、その辺も理解しておくと良いと思います。 今回は「Mat... -
react.js
【React TypeScript】Material UIを使ってヘッダーを実装してみよう!
今回は、ReactアプリケーションにMaterial UIを導入してヘッダーを実装していきます!Material UIを使ってみたいと思っていた方は、ぜひ参考にしてみてください! 今回は、ReactとTypeScriptを前提としています。もし環境構築がまだの方は、「ReactとTypeS... -
react.js
【React TypeScript】node-sassを導入して、SCSSを使おう!まだ、CSSを使っている人は必見!
今回は、Reactアプリケーションにnode-sassを導入していきます!まだ、CSSを使ってスタイルを定義している方は、ぜひ参考にしてみてください! まだReactアプリケーションの構築ができていない方は、「ReactとTypeScriptとRedux Toolkitの開発環境構築をし... -
react.js
ReactとTypeScriptとRedux Toolkitのフォルダ構成を変更しよう!
今回は、ReactとTypeScriptとRedux Toolkitのフォルダ構成を変更します。フォルダ構成の良し悪しで、開発効率が全然変わってきますので参考にしてみてください! もし、まだReactとTypeScriptとRedux Toolkitの環境構築ができていない方は、「ReactとTypeS... -
react.js
VSCode便利拡張機能!ES7 React/Redux/GraphQL/React-Native snippetsを導入しよう!
今回は、VSCodeの拡張機能のES7 React/Redux/GraphQL/React-Native snippetsを導入していこうといます!Reactからは少し脱線してしまいますが、便利な機能なのでぜひ導入してみてください。 まだ、Reactの開発環境の構築が終わっていない方は、「ReactとTy... -
react.js
React+TypeScriptのアプリにESLintとPrettierを導入しよう!VSCodeの拡張機能も紹介!静的解析ツールとフォーマッター導入編
今回は、React+TypeScriptアプリケーションにESLint(静的解析ツール)とPrettier(フォーマッター)を導入していこうと思います!静的解析ツールとフォーマッターをどうしたらいいかわからない方は参考にしてみてください! まだReact+TypeScriptの環境...