はじめに JavaScriptで標準で存在する「Math.random()」メソッドがあります。このメソッドはJavaScriptでランダムな値を生成する時に便利です。 今回はこの「Math.random()」メソッドを使って乱数を生成する方法を紹介します。 Math.randomメソッドの使い方 …

はじめに JavaScriptの世界では、配列はなくてはならない存在です。特定の要素を配列から見つけ出すシーンも多くありますよね。今回は、シンプルに配列からデータを検索する方法からオブジェクトの配列を検索する方法を紹介しましょう。 「indexOf」メソッド…

はじめに JavaScriptを用いた日時処理はよく使う仕組みの１つです。現在日時を特定のフォーマット形式で表示するにどうしたらよいのでしょうか。そこで今回はJavaScriptを用いて現在日時を任意の文字列フォーマットに変換する方法についてご紹介します。 現…

JavaScriptでの文字列から数値への変換 JavaScriptでは、文字列を数値に変換するための方法があります。シンプルに変換するNumberメソッドと2進数や16進数も変換できるparseIntメソッドです。 Numberメソッドで文字列を数値に変換する 具体的なNumber()の使…

はじめに JavaScriptでは配列を繰り返し処理することが多くあります。その時に使えるのがとなる関数がmap()メソッドです。ここではこのmapメソッド具体的な使用例を含めて紹介していきたい思います。 配列.mapを使用した繰り返し処理 オブジェクトの配列をma…

始めに 本記事ではJavaScriptで配列を並び替えるためのorderメソッドについて解説します。orderメソッドの基本的な使い方から、応用テクニックまで理解することで、更にJavaScript開発の幅が広がるでしょう。 orderメソッドを使った配列の並び替え 単純な配…

JavaScriptで配列を効率よく扱うfilterメソッドとは？ JavaScriptでは、配列（Array）から特定の要素だけを取り出すためにfilterメソッドが提供されています。これはある条件に一致する要素だけを新たな配列として作り出す非常に便利な機能です。 filterメソ…

Web開発で意外と難しい横並び Web開発をしていると度々直面する横並びデザイン。Reactでも最終的に吐き出されるのはhtmlであるため、floatやpositionを使うパターンは多いのではないでしょうか。 今回はReactのMaterial-UIを使って横並びを実現する方法を紹…

配列を定義して値を追加する JavaScriptで配列の末尾に値を追加するには、push()を使います。配列をループして他の配列に詰め替えたい時によく使います。 let ary = ['A', 'B', 'C']; ary.push('D'); では、JavaScriptの配列の途中に値を追加するには、どう…

JavaScriptのコンソール出力 C、Javaでは「printf」など各言語ではコンソール出力処理があります。それと同じようにJavaScriptでは「console.log()」を使います。 console.log()の使い方 JavaScriptでコンソールを出力するには「console.log()」の括弧内に変…

1. JavaScriptのlength JavaScriptに限らず、どんな言語でも配列の要素数の取得は欠かせません。繰り返し処理に非常に適しているからです。JavaScriptで配列の要素数を取得するにはlengthを使用します。 2. JavaScriptのlengthの使い方 JavaScriptで単純に配…

1. ReactのMaterial-Iconsでページをお洒落にしよう Webデザインにとってアイコンはとても大切な存在ですよね。ボタンにアイコンを付けるとボタンを押した後の動作がイメージしやすくなります。でも、アイコンの作成はとても手間とコストが掛かるもの。そこ…

1. MaterialUIとは MaterialUIとは、Reactで利用でき、整ったUIを実現することができます。ボタン、テキストフィールド、セレクトボックス、スライダー。用意されているコンポーネントは非常に多岐に渡ります。MaterialUIの公式サイトは下記です。 MaterialU…

1. JavaScriptのスクロール処理 WebシステムをJavaScript開発していると案外必要となるのがスクロール位置の調整。 scrollTopメソッドを利用して自動縦スクロールを実現できますが、スクロール量を計算したり、とても大変。。。 そこで便利なのがScrollIntoV…

1. useStateを使ったReactの状態管理 Reactでは、useStateを使うことで関数コンポーネントでstateを変更する自動的に再レンダリングされるように制御することができます。 2. useStateの定義 useStateは関数コンポーネント内で下記のように定義します。useSt…