javascript

javascript

[javascript入門] 文字列が空かどうかチェックする方法まとめ

javascriptでの文字列に対する空チェックは、C#やPHPなどと異なり、「undefined」「null」「''(空)」など対象がさまざまです。今回は、文字列の空チェックの方法を、状態含めてまとめておきたいと思います。文字列が「空」で...
javascript

[javascript入門] 数値の長さ(桁数)を取得する方法まとめ

本投稿では、数値の長さを取得する方法の備忘録となります。今回は2パターンの取得方法をご紹介します。数値の長さを取得する方法toString()を使ってlengthで取得するMath.ceil()とMath.log10()を組み合わせて使うt...
javascript

[javascript入門] URL文字列かどうかをチェックする方法まとめ

今回は、URL文字列かどうかをチェックする方法の紹介です。今回紹介する方法は3つとなります。ヘルパー関数を作成するメリットURL()を利用したチェック方法正規表現を利用したチェック方法npmパッケージの「is-url」を利用したチェック方法...
javascript

[javascript入門] 3Dコンテンツを作成できるThree.jsを実際に使ってみた

今回は簡単に3Dコンテンツを作成することができるjavascriptライブラリ「Three.js」について導入方法から使い方までをまとめておきたいと思います。Three.jsとは?Three.jsは「WebGL」と呼ばれるWebブラウザで3...
HTML/CSS

HTMLやCSS、JavaScriptを利用したおすすめツールチップライブラリ10選

ツールチップとは、Webサイト上のオブジェクト(はてなマークやボタンなど)にマウスオーバーした際に注釈が表示する要素のことを刺します。特に問い合わせフォームなどに多くみられますが、ツールチップを使うことでより機能を明確に理解させることができ...
javascript

JavaScriptでスケジューラーを簡単に作成するおすすめライブラリ5選

アプリケーション開発にてカレンダーを作成することがあると思います。現在では、様々なライブラリが世の中に出回っていますので、今回は有料/無料問わず、おすすめのスケジューラ(カレンダー)フレームワーク、ライブラリを紹介します。おすすめスケジュー...
javascript

[JavaScript入門] definePropertyを使ってGetterおよびSetterを作成する

今回は、JavaScriptでGetterとSetterを表現していきます。Getterとは、「フィールドの値を取り出すだけのメソッド」であり、Setterというのは「フィールドに値を代入するためのメソッド」となります。Object.def...
HTML/CSS

[Webデザイン] HTML/CSS/Javascriptで作成するおしゃれなタイムラインデザイン5選

会社の沿革やポートフォリオの作成過程やフローなど、タイムラインを利用する用途は多々あるかと思います。今回は、おしゃれなタイムラインデザインについて紹介したいと思います。おしゃれなタイムラインデザイン5選VerticalTimeline中心に...
HTML/CSS

HTMLやCSS、javascriptを利用してtextareaをカスタマイズする方法(罫線や箇条書き)

問い合わせフォームなどでtextareaは必須レベルで利用します。このtextareaですが、実は罫線や箇条書きができるようにカスタマイズすることが可能です。本投稿では、textareaに対して、下記のカスタマイズ方法について紹介したいと思...
javascript

[javascript入門] 作業効率化のために文字列に関するヘルパー関数まとめ

どのような開発でも、作業効率をアップさせるために処理を関数化し、使い回します。今回は、様々な文字列操作をヘルパー関数として効率よく利用できるようなメソッドをまとめました。ヘルパー関数とはヘルパー関数とは簡単にいうと、「どこからでも呼び出すこ...
javascript

[javascript入門] オブジェクト配列の中の重複データを見つける方法

オブジェクト配列とは「{name:value}」のようなjson形式のデータを配列化したものとなります。今回は、シンプルにこのオブジェクト配列の重複データを見つける方法の備忘録となります。重複オブジェクトを見つける方法は下記の2通りあります...
javascript

[javascript入門] call関数とbind関数、apply関数の使い方まとめ

本投稿では、call()とbind()、apply()の使い方とそれぞれの違いについて簡単にまとめます。call()やbind()、apply()は関数をあたかもオブジェクトのメソッドであるかのように実行しちゃうことができる便利な昨日となり...
javascript

[javascript入門] 配列の中身を文字列連結して出力する方法まとめ

今回の投稿はjavascriptの入門編として、配列の中身を文字列結合して出力する方法のまとめとなります。今回は下記のケースに対して説明していきます。普通の配列の要素を結合して出力多次元配列を結合して出力Key:Valueオブジェクト配列を...
javascript

Reactをこれから学ぶ方必見!おすすめエディタ5選

はじめにWeb開発を行う時に利用するエディタですが、どのエディタを利用すれば良いか迷う方も多いかと思います。本記事では、Reactの開発を行う時におすすめのエディタを5つ紹介します。自分に合ったエディタが見つかれば良いなと思います。Reac...
javascript

[javascript入門] これだけは知っておいてほしいおすすめVue.jsプラグイン10選

はじめにVue.jsとは簡単にいうと、ユーザインターフェースを構築するためのjavascriptフレームワークとなります。人気が高く、シンプルで自由度が高いことが特徴で、とても高い生産性を発揮します。これからVue.jsを勉強するかたにも、...
javascript

[javascript入門] If文やSwitch文などの条件式に対してコード数を減らして表現する方法

はじめにIf分やSwitch分は、ある条件式を評価し、その結果を返す一般的な方法です。ただ、If文やSwitch文はコード数が多くなりがちで全体的なコード数が増大してしまうという懸念もあります。本投稿ではそういったことを解消するためにif文...
javascript

[javascript入門] 配列処理でよく使うmapとforEachの違い

はじめにjavascriptでよく利用する配列処理ですが、mapとforEachの違いをそこまで理解せずに利用している方も多いかと思います。どちらのメソッドもES5で導入された関数となります。今回は、このmapメソッドとforEachメソッ...
javascript

[javascript入門] おすすめモーダルダイアログが簡単に実装できるライブラリ5選

はじめにモーダルダイアログとは、表示されたメッセージやポップアップウィンドウを閉じたり入力しありしなければ、他の操作を行うことができないダイアログのことを言います。よくログインや会員登録や連絡先フォームなどで用いられます。今回はこのモーダル...
HTML/CSS

[javascript入門] jQueryプライグインを利用しないで簡単にbackground-imageのスライドショーを作成する方法

はじめに現在ではスライドショーを作るjavascriptライブラリは数多くあります。今回は、javascriptを使ってbackground-imageに設定した画像をスライドショーで表示する方法を紹介します。background-imag...
javascript

React開発者が必ず使うべきツール10選

はじめにReactはMetaとコミュニティによって開発されているJavascriptライブラリです。コーディングコストがとてみ少なく開発規模が大きくなっても保守管理しやすいということで注目されています。今回はそのReactでの開発をおこなう...