【Vue.js】リッチテキストエディタ「vue-quill-editor」の使い方
「vue-quill-editor」はVue.js製のリッチテキストエディタを実装するライブラリです。その内部構造は、GitHubで★32,685を誇る有名なテキストエディタライブラリ「Quill」で構築されています。Quillは、シンプルなAPIで構成されているので開発者向けにも使いやす
JavaScript
WEB制作で使用するDOM操作から、開発で使用するサーバーサイドとの通信、配列操作などJavaScript全般の技術を解説しています。筆者のコアになる言語です。
記事数
75
【Vue.js】vue-pdfを使ってPDFプレビューを表示する方法
開発環境@vue/cli 4.5.15vue@2.6.14vuetify@v.2.6.6vue-pdfとはvue-pdfは、vueコンポーネントを使ってPDFを簡単に表示・閲覧できるようにするためのVue.js用ライブラリです。vue-pdfを使えば、た
【JavaScript】unixtimeを日付・日時に変換する方法
アプリケーションを構築する過程で、データの保存日時や更新日時を保存したり、UI上に表示したりする場面があると思いますが、Unixタイムスタンプから「2022/05/17 10:00」のような見やすい形式に変換する必要があります。今回は、JavaScriptでUnixタイムスタンプを日時形式
【Vue.js】ファイルサイズのバイト数をKB・MB・GBに変換する方法
アプリケーションを構築する上でファイルサイズを表示する場面があるかと思いますが、全てのファイルがバイト数のまま表示されているとユーザービリティはとてつも無く下がります。KB・MB・GBなど適切な単位に変換して表示すればファイルサイズを把握しやすいと思います。今回は、JavaScriptでフ
【Vue.js】enter押出でフォームを送信する方法（全角入力・変換対応）
開発環境vue@2.xvuetify@2.x検証環境機種：Mac mini (M1, 2020)ブラウザ：Chrome, Firefox※safariは挙動が異なるので、動作検証中です。全角入力の変換完了と同時に送信されるアンチパター
【JavaScript】オブジェクトを配列に変換してループ処理を実行する方法
JavaScriptでforEachやfilterなどのループ処理を実行した結果、"object.forEach is not a function"や"object.filter is not a function"のエラーが発生するケースがあると思います。原因は、forEachやfil
【Vue.js】テキスト検索でリストの絞り込み機能を実装する方法
今回はVue.jsでテキスト検索（絞り込み）機能を実装してみました。ソースはコピペで動きます。もし不明な点や質問、ご指摘がありましたら、記事下のフォームからコメントをお願いします。実際の挙動と仕様当機能の仕様は、何らかの飲食店のリストがあったと仮定して、ユーザーが自分の興味のある検
【Vue.js】ドラッグ&ドロップでファイルアップロード機能を実装（プレビュー付き）
開発環境vue@2.xvuetify@2.x実装イメージ1.初期画面2.ドラッグ中3.ドロップ時ドラッグ&ドロップを開始した際にデザインを変更したり、ドロップされたファイルの情報を表示し
【Vue.js】checkboxの複数選択、個別選択、全選択機能を実装する方法
実装イメージチャットなどの機能で「ユーザーを選択して追加する」的な場面を想定して実装をしました。選択済みのレコードの背景色が変わるようになっています。ソースはコピペで動きますので、コードだけ欲しいという人は次のCodePenから持っていってくださ
【解説】JavaScriptで記事の目次を自動生成する方法
今回の記事では、JavaScriptを使用して、記事の目次を作成するコードを解説します。実装では、要素の作成・描画などの基本的なDOM操作や、ループ処理を用いています。もちろん、フレームワークは使用せず、素のJavaScriptを使用しております。目次についてサイト(記事)
【JavaScript】スマホでスワイプを無効にする方法
今回の記事では、JavaScriptを使用して「スワイプ」を無効にする方法について解説します。JavaScriptを使用した実装になります。スワイプは、スマートフォンで使用されるイベントになりますが、ユーザーにとって便利な反面、WEBサイトの動作不良の原因になることもあります。スワ
【JavaScript】async/defer属性の使い方
今回の記事では、外部JavaScriptファイルを、async / defer属性を使用して非同期で読み込む方法について解説します。JavaScriptは、何もしなければ基本的には同期的に読み込み・実行がされます。この同期的なJavaScriptが、WEBサイトのパフォーマンスにおいて障害になる場
【JavaScript】アコーディオンメニューの実装方法
今回の記事では、JavaScriptでアコーディオンメニューを作成する方法を解説します。アコーディオンは、WEB制作の場面でよく使用される技術になります。特に、スマートフォンなどの表示領域が限られたデバイスでは、効果的に使用することができます。※実装では、jQueryなどのライブラリは使用
【JavaScript】ハンバーガーメニューの作り方
今回の記事ではハンバーガーメニューの作り方について解説します。ハンバーガーメニューの実装は、JavaScriptはもちろん重要ですが、HTMLの構造やCSSの当て方も非常に重要になります。WEB制作の場面では何かと実装する機会の多い機能になるので、これを機に理解を深めてみてください。※実装
【JavaScript】画像の拡大プレビュー機能の実装方法
今回の記事では、画像にhoverした際に、拡大プレビューを表示する機能を実装していきます。ECサイトの商品ページなどで、よく見られる機能です。※紹介する実装方法は、素のJavaScriptで実装しており、ライブラリは使用していません。あくまで、機能の内部的な仕組みを学びたい方向けの記事にな
【JavaScript】サムネイル画像の切り替えを実装
今回の記事では、サムネイル画像をJavaScriptで切り替える機能を実装していきます。下記の画像ようなイメージで、ECサイトなどでよく利用されています。メイン画像の下に連なっているサブ画像をクリックすると、メイン画像が切り替わる使用ですね。実装jQueryなどのライブラリ
【JavaScript】Lazy Load(画像遅延読み込み)の実装方法
今回の記事では、Lazy Load(画像遅延読み込み)について解説します。必要性の考察や、実装するにあたり、サンプルコードを紹介しています。Lazy Loadは、WEBサイトの速度を改善するための重要な概念になりますので、参考になりましたら幸いです。Lazy Loadとはリ
【JavaScript】CSVデータの読み込み + 出力
今回の記事では、CSVデータを読み込んでブラウザ画面で表示させるサンプルコードを紹介します。それでは早速紹介していきましょう。■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】要件CSVデータに格納されたユーザーの属性に関するデータを出力
Intersection Observerで要素の出現を検知
Intersection Observerは、特定の要素が画面内に出現したかどうかを検知することができます。具体的には下記のようなケースが挙げられるでしょうか。ページが一定以上スクロールされた際に、特定の要素を出現させるある要素が出現した際に、別の要素に対して変更を加える
JavaScriptでページネーション実装【ライブラリなし】
今回の記事では、自作ページネーションのコードをご紹介します。検索エンジン内には、jQueryやVueなどのフレームワークに依存した実装方法の紹介記事が多かったので、汎用性を意識して、生のJSで処理を組んでみました。■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選
