ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

JavaScript

Babelのインストールおよび使用方法

本記事では、Babelのインストール方法および使用方法について紹介していきます。 Babelは、ES2015やES2017形式で記述したJavaScriptの ソースコードをES5以前の形式に変換するツールです。本記事の内容です。 package.jsonを作成する Babelをインストールす…

webpackでconfigファイルの共通部を外部ファイルへ切り出す

本記事では、webpackでconfigファイルの共通部を 外部ファイルへ切り出して管理、使用する方法を紹介していきます。本記事の内容です。 webpack-mergeをインストール configファイルの共通部を別途ファイル化 各環境毎のconfigファイルで共通configファイル…

webpackで使用するconfigファイルを指定(選択)する方法

本記事では、webpackで使用するconfigファイルを指定する (選択する)方法を紹介していきます。本記事の内容です。 webpackのconfigファイルを準備する 開発用(webpack.config.development.js) 本番用(webpack.config.production.js) ビルド時に使用するconfi…

Visual Studio CodeでVue.jsの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用してVue.jsを用いた開発を行うために インストールしているプラグインについて紹介していきます。本記事の内容です。 vetur VueHelper vetur Vue.jsのコードスニペットです。 入力補完などを行ってくれるのですが、触っ…

webpackで本番用と開発用にビルド方法を切り替える

本記事では、webpackで本番用と開発用にビルド方法を 切替える方法を紹介していきます。本記事の内容です。 本番用ビルド設定 開発用ビルド設定 開発用ビルド設定のdevtoolについて 本番用ビルド設定webpack.config.jsに、mode行を追加します。 内容は、下記…

webpackを使用してjsファイルをまとめる方法

本記事では、webpackを使用してjsファイルを まとめる方法を紹介していきます。本記事の内容です。 webpackって何? webpackを使用する準備 webpackのインストール webpackの設定ファイル作成 JavaScriptソースコードの準備 ビルド jsファイルをまとめた結果…

JavaScriptの処理をブラウザ上で止めてデバッグする方法

本記事では、JavaScriptの処理をブラウザ上で止めて、 デバッグする方法について紹介していきます。本記事の内容です。 JavaScriptのソースコードに一文加える ブラウザの開発者ツールを開く JavaScriptのソースコードに一文加えるJavaScriptのソースコード…

動的に後から追加したDOM要素にイベントを設定する(jQuery)

本記事では、動的に後から追加したDOM要素に イベントを設定する方法を紹介します。本記事の内容です。 何がしたいのか? 駄目なソースコード うまくいくソースコード 何がしたいのか?動的に後から追加したDOM要素にも動的にイベントを設定したい。 今回は…

JavaScriptのlinqで使用できる関数一覧

JavaScriptのlinqで使用できる 関数の一覧を作成したので、載せておきます。本記事の内容です。 使用できる関数一覧 使用できる関数一覧 関数名 引数 aggregate seed, func, resultSelector all predicate alternate alternateValueOrSequence any predicate…

FrontendのJavaScriptでlinq

FrontendのJavaScriptでlinqを使用できるので、linqそのものやJavaScriptのlinq、 使用するまでに行ったことを紹介していきます。本記事の内容です。 そもそも、linqとは? JavaScriptのlinqとは? ライセンス インストール方法 使い方(サンプルコード) 使用…

WindowsのカレンダーライクなDatePicker(bootstrap-datepicker)

本記事では、WindowsのカレンダーライクなDatePickerである bootstrap-datepickerを紹介していきます。本記事の内容です。 bootstrap-datepickerとは? デモページ ライセンス 使用するための準備 サンプルコード 使い方 bootstrap-datepickerとは?Bootstra…

TimePickiで値変更時に関数を実行させる方法

本記事では、TimePIckiで値を変更した時に 任意の関数を実行させる方法を紹介していきます。本記事の内容です。 TimePIckiって何? サンプルコード TimePIckiって何?下記の記事を参照してください。 j-levia.hatenablog.jpサンプルコード公式ドキュメントに…

時、分を個別に入力できる時間入力コントロール(コンポーネント)(TimePIcki)

本記事では、時、分を個別に入力できる時間入力コントロール、 TimePickiについて紹介していきます。本記事の内容です。 TimePIckiとは? ライセンス 使用するための準備 サンプルコード 使い方 TimePIckiとは?jQueryのTimePIckierプラグインです。 公式ペ…

Handsontableで列を非表示にする(非表示列を持たせる)

本記事では、Handsontableで列を非表示にする (非表示列を持たせる)方法を紹介していきます。本記事の内容です。 Handsontableって何? サンプルコード Handsontableって何?下記の記事を参照してください。 j-levia.hatenablog.jpサンプルコード非表示にし…

JavaScriptでExcelライクなグリッドを使う(Handsontable)

JavaScriptでExcelライクなグリッドを使用するための ライブラリである、Handsontableについて書いていきます。本ブログの内容です。 Handsontableのダウンロード ライセンス サンプルコード 使い方 公式ドキュメント 日本語情報 Handsontableのダウンロード…