javascript[JavaScript入門] definePropertyを使ってGetterおよびSetterを作成する
今回は、JavaScriptでGetterとSetterを表現していきます。Getterとは、「フィールドの値を取り出すだけのメソッド」であり、Setterというのは「フィールドに値を代入するためのメソッド」となります。Object.def...
javascript
javascript
HTML/CSS[Webデザイン] HTML/CSS/Javascriptで作成するおしゃれなタイムラインデザイン5選
会社の沿革やポートフォリオの作成過程やフローなど、タイムラインを利用する用途は多々あるかと思います。今回は、おしゃれなタイムラインデザインについて紹介したいと思います。おしゃれなタイムラインデザイン5選VerticalTimeline中心に...
HTML/CSSHTMLやCSS、javascriptを利用してtextareaをカスタマイズする方法（罫線や箇条書き）
問い合わせフォームなどでtextareaは必須レベルで利用します。このtextareaですが、実は罫線や箇条書きができるようにカスタマイズすることが可能です。本投稿では、textareaに対して、下記のカスタマイズ方法について紹介したいと思...
デザイン[UIデザイン] HTML/CSS/Javascriptで作成するおしゃれなパスワード入力フォーム5選
今回は、HTMLやCSS、Javascriptで作成するおしゃれなパスワード入力フォーム（input要素）を紹介します。パスワード入力は、アカウント作成を行うWebサービスでは欠かせないアイテムとなっています。この要素をおしゃれに見せること...
javascript[javascript入門] オブジェクト配列の中の重複データを見つける方法
オブジェクト配列とは「{name:value}」のようなjson形式のデータを配列化したものとなります。今回は、シンプルにこのオブジェクト配列の重複データを見つける方法の備忘録となります。重複オブジェクトを見つける方法は下記の2通りあります...
javascript[javascript入門] call関数とbind関数、apply関数の使い方まとめ
本投稿では、call()とbind()、apply()の使い方とそれぞれの違いについて簡単にまとめます。call()やbind()、apply()は関数をあたかもオブジェクトのメソッドであるかのように実行しちゃうことができる便利な昨日となり...
javascript[javascript入門] 配列の中身を文字列連結して出力する方法まとめ
今回の投稿はjavascriptの入門編として、配列の中身を文字列結合して出力する方法のまとめとなります。今回は下記のケースに対して説明していきます。普通の配列の要素を結合して出力多次元配列を結合して出力Key:Valueオブジェクト配列を...
javascriptReactをこれから学ぶ方必見！おすすめエディタ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...
javascriptReact開発者が必ず使うべきツール10選
はじめにReactはMetaとコミュニティによって開発されているJavascriptライブラリです。コーディングコストがとてみ少なく開発規模が大きくなっても保守管理しやすいということで注目されています。今回はそのReactでの開発をおこなう...
javascript[javascript入門] console.log以外のコンソールログ出力方法まとめ
はじめにjavascriptの開発時、console.log利用してブラウザなどのコンソールにログを出力するケースが多いかと思います。よく利用するconsole.logですが、他にもwarningメッセージやエラーメッセージなど、各用途ごと...
javascript[Javascript入門] 全てのループ処理方法まとめ
はじめにJavascriptの開発において、ループ処理は必ずといっていいほど利用する処理の一つです。ここでは、そのループ処理方法をまとめました。ループ処理まとめFor文一番身近なループ処理として「for」が挙げられます。このfor文は指定さ...
javascript[Javascript入門] 絶対に覚えておくべき配列の処理方法まとめ
はじめに配列は、どのアプリケーションを製造する上でも必ずといっていいほど利用するオブジェクトの一つです。本記事では、この配列データの処理方法は15のポイントに分けてまとめました。配列データを処理する15のポイントForEachForEach...
javascript[Javascript入門] Javascriptを使って簡単に電卓を作成する
はじめに本投稿では、Javascriptを使って簡単な電卓を作成するサンプルを紹介します。電卓を作成するHTML+CSSまずは、見た目を作成します。Sample002+-×÷7894561230.C=body{width:510px;mar...
javascript[JavaScript] 可読性や業務効率を高めるCleanなJavaScriptコードの書き方まとめ
はじめにjavascriptを利用して開発している方は多くいるかと思いますが、その中でクリーンなコードを意識して作業している人はどれくらいいるでしょうか？クリーンなコードとは可読性を重視し、再利用やリファクタリングが可能なコードのことを指し...
HTML/CSS[javascript] checkboxにチェックがされたかどうか判定する方法まとめ
checkboxは「オン」「オフ」の二つの値を切り替えるHTML要素となります。チェックボックスはinput要素のtype属性に対して「checkbox」を指定することで利用す流ことができます。今回はこのcheckboxに対してチェックされ...