フロントエンド– category –

HTML5のinputを使いたいinput type numberで小数点の値を入れたいHTML5の便利なINPUTタグはtype属性を指定することで入力制限やバリデーションなど便利な機能がブラウザで簡単に利用できます。以前type=numberの時に表示されてしまう右側の矢印ボタン(スピ...

ESLint:'$' is not defined. (no-undef)エラーが出たReactでjQueryって使っていいの？Reactで構築していたシステムに、ふとjQueryを入れないと実現できないような要件が発生しました。   そもそもReactとjQueryを共用してもいいのか・・？   そんな疑問を...

読み込む外部JSファイルに値を渡したい代表的なやり方をいくつか紹介しますJS初心者向けの記事です<script type="text/javascript" src="sample.js"></script>こんな感じで外部JSを読み込んで使うことは多いと思います。...

React × Reduxの連載記事の8回目です。今回はいよいよAPIとのREST通信を実装していきたいと思います。Javascript用のHTTP通信を行うライブラリはいろいろありますが、今回はaxiosを使って実装していきます。通信先となるAPIサーバー構築は今回は...

React × Reduxの連載記事の7回目です。今回は開発の効率をよくするためにHotReload(通称HMR)の実装とソースマップの出力設定を行いたいと思います。HotReloadができるようになると、Devサーバーで実行中にソースを修正した時に、ブラウザが再読...

React × Reduxの連載記事の6回目です。今回はページングの処理を実装していきたいと思います。前回の状態からサンプルページをいくつか追加し、routerによるページングができるところまでが今回のゴールです。React Redux環境でページング処理を...

React × Reduxの連載記事の5回目です。前回はMaterial-uiの実装を行い、デザインの変更を行いました。今回もデザイン関連の設定になりますが、cssファイルを作成して、webpackで読み込んで反映させる方法を書きたいと思います。複数のcssファイ...

React × Reduxの連載記事の4回目です。前回までで簡単なカウンターアプリがReact Reduxで出来上がっている状態なので、次はデザイン周りの実装をしていきたいと思います。今回はMaterial-UIを追加実装してみたいと思います。この記事でわかるこ...

React × Reduxの連載記事の3回目です。今回はESLintのJavascriptコードスタイルを設定していきたいと思います。ESLintを使用してJavascriptのコードスタイルガイドを導入している人は多いと思いますが、その中でもAirbnbのスタイルガイドが人気...

React × Reduxの連載記事の2回目です。今回は前回の環境構築編で作成したreact-reduxのsampleカウンターアプリを、Redux Toolkitを使ってducksパターンに変更していきたいと思います。環境周りは変わりませんので、まだ開発環境ができてない人は...

React × Reduxの連載記事を投稿していこうと思います。第一回目はサラのMacに環境構築を行っていきます。webpack4.42を使用してreact-reduxのsampleが動くところまでやってみたいと思います。とりあえずプラグインやライブラリ等は追々検討して...

画像や画面からカラーコードを取得したい無料で簡単に使えるツールがいい画面や画像から色を取得してカラーコードを調べたいことありませんか？デザイン作成の時なんかに色味を合わせるためにカラーコードを調べたりすると思います。その場合、RGBや16進数...

Javascriptで画像サイズ(高さと幅)を取得したいelement.naturalWidth/naturalHight以外の方法画面表示はしないでloadした状態で調べたいINPUTで指定した画像ファイルのサイズ(容量ではなくてHeightとWidth)をJS(Javascript)で取得したかったので、やり方を...

HTML5のバリデーションを無効にしたいinputの赤枠エラー表示だけ消したいHTML5から実装されたブラウザのバリデーション機能。いろんなTypeを設定するだけで入力チェックをブラウザが行ってくれるので便利なんですが、エラー時の表示がイケてない。特にブラ...