はじめに AWS(Amazon Web Service)でまず最初にやることといえば、IAM(アイアム)のユーザーの作成です。 IAMユーザーを作成することでコマンドラインやAWSのマネジメントコンソールへのアクセスを権限を絞った状態にできます。 AWSのセキュリティにとても重…

はじめに JavaScriptを扱っていると小数点が続く割り切れない数値を扱うことがよくあります。 JavaScriptのMathクラスには数値を四捨五入、切り捨て、切り上げを行うメソッドがあり、とても便利です。 今回は、小数点第1位を四捨五入、切り捨て、切り上げを…

はじめに Web APIからJavaScriptを使ってデータを取得できると本格的なプログラムが作れますよね。 今回はaxiosを使って、郵便番号から住所を取得する方法を考えてみました。 axiosのインストール まずはnpmを使ってプロジェクトにaxiosをインストールしてお…

はじめに JavaScriptでCSVなどのデータを扱う場合にカンマ区切りで配列に格納してデータを扱えると、とても便利ですよね。 文字列をカンマ区切りで配列に格納するには「split()メソッド」で一行で実装できます。 今回は、便利な「split()メソッド」を使って…

はじめに Pythonでif文を書いていると単純なコードなのに長いコードになることがあります。 単純なコードは三項演算子にして視認性の良いコードを書いてみませんか？ 三項演算子を使って奇数、偶数を判定する 例として三項演算子を使って奇数、偶数を判定す…

はじめに プログラムで特に利用頻度が多いfor文。 Pythonではrangeを組み合わせることで、とても簡単にループの範囲を指定する事ができます。 今回は、for文でrangeを使用して1から10までループする方法を紹介します。 Pythonのfor文でrangeを使用してループ…

はじめに Pythonは非常に短いコードで配列の操作を行うことができるようになっています。 今回は、Pythonにおいて、配列同士の結合を最も簡単に行う方法を紹介します。 Pythonで配列同士の結合を行う 下記のコードでは、配列１(array1)と配列２(array2)の結…

はじめに Reactの大きなメリットとしてstateによる状態管理があります。 さらにstateと三項演算子を使うことで不具合が発生しにくくシンプルにボタンなどの状態を変化させることができます。 今回は、React(JavaScript)の三項演算子を使ってボタンの表示、非…

はじめに Reactのアプリケーションを「npx create-react-app」コマンドで作成して useEffectを設定すると困った現象が発生します。 useEffect(() => { console.log("useEffectが呼び出されました"); }, []); どうやらuseEffectの処理が２回実行されている模…

はじめに ReactでuseEffectを使用する場合によくやってしまう問題について紹介します。 それは、useEffectで非同期関数を使用したい場合にasyncの設定方法を間違えてしまいます。 一見、問題なさそうな下記のコード・・・ useEffect(async () => { // 処理 }…

はじめに ReactでMaterial UIを使っているときにボタンの前後にアイコンがあれば Webページを訪れるユーザーにとって、とてもわかりやすいUIになります。 今回は、Material UIでボタンの前後にアイコン（Material Icon）を表示する方法を紹介します。 まずは…

はじめに JavaScriptで携帯電話番号、固定電話番号、郵便番号など番号の間にハイフンを入れる機会は多いと思います。 今回は携帯電話番号を例に番号の間にハイフンを入れる方法を紹介します。 携帯電話番号の間にハイフンを挿入 下記のJavaScriptを例に見て…

はじめに プロジェクトチームで開発をプログラムの改行位置や配列、オブジェクトの書き方などはどうしてもバラバラになってしまいますよね。 昔はコーディング規約なるものを作っていましたが非常に手間のかかるもの。 現在はプログラムの書き方をある程度自…

はじめに Webページで改行といえばタグですが動的に生成された文書に改行を入れるのは難しいもの。 そんな時は、CSSのword-breakプロパティが便利です。今回はword-breakを使ってHTMLの改行を制御する方法を紹介します。 word-break: break-all div { word-b…

はじめに Webシステムの構築にNodeJSを選択される方は多いでしょう。 NodeJSは開発環境の構築は非常に簡単ですが本格的なWebシステムやAPI、バッチまでもがJavaScriptで構築でき、非常に強力な仕組みです。 NodeJS バージョン16は既にサポートが切れているの…

1. はじめに JavaScriptでの配列はリストの内容を格納したり、様々な処理を実現するのに重要な役割を果たします。 配列は定義してお終いというのはあまりなく配列に値を追加したり、削除したりすることは多いです。 今回はJavaScriptで「配列に値を追加する…

1. はじめに JavaScriptなどのプログラム言語では「for」は「if」に次ぐ利用頻度の高いプログラムだと思います。 そのfor文は特定条件になったらループを抜けますが、別の条件でループを抜けたい場合もあるでしょう。 今回はbreakステートメントを使ってfor…

1. はじめに JavaScriptはWebと組み合わせることが多い言語です。 そのためにdocument.getElementを利用したHTML要素の取得と操作はWebアプリケーションを作るためには必須となってくるでしょう。 今回は、document.getElementを利用したHTML要素の取得方法…

はじめに 乱数生成処理はプログラムにおいて非常に良く使いますよね。 重複しないIDを振りたい時はもちろん、 ・ファイル名が重複しないようにアップロードしたい時 ・パスワードを生成したい時 ・ゲームでのアイテム出現確率をまばらにしたい時 JavaScript…

はじめに 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デザインにとってアイコンはとても大切な存在ですよね。ボタンにアイコンを付けるとボタンを押した後の動作がイメージしやすくなります。でも、アイコンの作成はとても手間とコストが掛かるもの。そこ…