Lavavel Mixの使い方
概要
Lavavel Mix の使用方法を備忘録として 投稿させて頂くことにしました。
Laravel Mix とは
Laravelを使用しなくても使用可能なwebpackのwrapperツール。
↓
以下の場合に使用すると良い。
* 開発時は、jsファイルを分割して作成したい。
→ ビルドにより、jsをまとめる事が可能。
* jsファイルを圧縮したい。
→ コマンドにより、圧縮可能。
インストール方法
割愛。
ファイル
webpack.mix.js
ビルドするファイルを設定。mix-manifest.json
ビルド時に作成されるファイル。
webpack.mix.js の書き方
mix.js('[ビルドするファイル名]' , '[出力パス]')
バージョンを指定する場合
mix.setPublicPath('public')バージョンを指定する場合
mix.version()
jsの記述方法
以下を参照
実行方法
npm run dev 開発環境用。
npm run watch npm run production
Lavavel Mixの使い方 javaScript記述方法
概要
Lavavel Mix のjsファイルの記述方法を備忘録として 投稿させて頂くことにしました。
jsの記述方法
外部ファイルのjsを参照出来なくなる為、以下の何かの対応が必要になる。
- function、変数をグローバルにしないで、jsファイル内で参照元のjsファイルを指定する。
- function、変数をグローバルにする。
(ファイル内でのみ呼ばれているfunction・変数は、対応不要)。
グローバルにしない場合
- 外部ファイルから参照される場合は、「export」が必要。
呼び出される側(共通functionなど)
■function export [function名](引数...) 例 export func1(arg1){...} ■変数 export let [変数名] 例 export let variable;
呼び出す側(ファイル内の全てを呼び出す場合)
■function import * as [任意名] from "[呼ばれるファイル名のパス(.jsは覗く)]"; 例 // 同じフォルダ内にあるcmn.jsを読み込む。 // 「cmn」という名前にする。 import * as cmn from "[./cmn]"; // cmn.js 内のfunc1を呼び出す。 cmn.func1(); ■変数 import * as [任意名] from "[呼ばれるファイル名のパス(.jsは覗く)]"; 例 // 同じフォルダ内にあるcmn.jsを読み込む。 // 「cmn」という名前にする。 import * as cmn from "[./cmn]"; // cmn.js 内のvariableを呼び出す。 // 実際は、演算などに使用する。 cmn.variable;
呼び出す側(ファイル内の一部を呼び出す場合)
■function import {function名} from "[呼ばれるファイル名のパス(.jsは覗く)]"; 例 // 同じフォルダ内にあるcmn.jsのfunc1を読み込む。 import {func1} from "[../cmn]"; // cmn.js 内のfunc1を呼び出す。 func1(); ■変数 import {変数名} from "[呼ばれるファイル名のパス(.jsは覗く)]"; 例 // 同じフォルダ内にあるcmn.jsのvariableを読み込む。 import {variable} from "[../cmn]"; // cmn.js 内のvariableを呼び出す。 // 実際は、演算などに使用する。 variable;
グローバル(function・変数)にする場合
- onclick で呼び出す場合は、こちらにする。
- 通常のjs呼び出しと同義。
呼び出される側(共通functionなど)
■function window.[function名(任意名)]=function [function名](引数...) 例 window.func1 = func1(arg1, arg2); ■変数 window.[変数名] 例 window.variable;
呼び出す側
■function [function名(任意名)](引数...); 例 func1(arg1, arg2); ■変数 [変数名] 例 variable;
jsファイルの記述については、以上となります。
Googleスプレッドシートとエクセルの両方で曜日を表示する
概要
Google Drive 内で、日付(曜日含む)を記入することがあるのですが、
スプレッドシートとエクセルでは、曜日の表示方法が異なり、変換すると表示が変わってしまいます。
その解決方法を備忘録として、投稿させて頂くことにしました。
スプレッドシート
Google が提供するエクセルのようなものです。
現象1 エクセルで作成したものをスプレッドシートで確認した場合
エクセルで日付を記入。
[セルの書式設定]→[表示形式]タブ→[ユーザー定義]→[種類]で、「aaa」を入力すると曜日は正しく表示される。
しかし、作成したエクセルファイルをGoogle Drive上でスプレッドシートでファイルを開くと以下の表のようになる。
日付 | エクセルで表示 | スプレッドシートで表示 |
---|---|---|
2019/12/01 | 日 | aaa |
2019/12/02 | 月 | aaa |
2019/12/03 | 火 | aaa |
2019/12/04 | 水 | aaa |
2019/12/05 | 木 | aaa |
2019/12/06 | 金 | aaa |
2019/12/07 | 土 | aaa |
現象2 スプレッドシートで作成したものをエクセルで確認した場合
スプレッドシートで、エクセルで作成した手順と同様の作業を行う。
エクセルで日付を記入。
メニュー[表示形式]→[数字]→[表示形式の詳細設定]→[その他の日付や時刻の形式] で、「1930年8月5日火曜日」を選択する。
余分なものを削除し、「日(火曜日)」のみとする。
入力すると曜日は正しく表示される。 しかし、作成したスプレッドシートをGoogle Driveからダウンロードして、Excelでファイルを開くと以下の表のようになる。
日付 | スプレッドシートで表示 | エクセルで表示 |
---|---|---|
2019/12/01 | 日 | Sunday |
2019/12/02 | 月 | Monday |
2019/12/03 | 火 | Tuesday |
2019/12/04 | 水 | Wednesday |
2019/12/05 | 木 | Thursday |
2019/12/06 | 金 | Friday |
2019/12/07 | 土 | Saturday |
対応方法
エクセルでは、日本語とスプレットシートでは、英語と変換する方法が異なるので、 基本性能の表示形式を使用せずに、関数を使用する。
=CHOOSE(WEEKDAY([日付]),"日","月","火","水","木","金","土")
解説 WEEKDAY
使い方
WEEKDAY([日付])
説明
日付に対する曜日を1から7で返す。
日付 | 返す値 |
---|---|
2019/12/01 | 1 |
2019/12/02 | 2 |
2019/12/03 | 3 |
2019/12/04 | 4 |
2019/12/05 | 5 |
2019/12/06 | 6 |
2019/12/07 | 7 |
解説 CHOOSE
使い方 CHOOSE([インデックス],"日","月","火","水","木","金","土")
説明 インデックスに対応する引数の値を返す。
インデックス | 曜日 |
---|---|
1 | 日 | |
2 | 月 | |
3 | 火 | |
4 | 水 | |
5 | 木 | |
6 | 金 | |
7 | 土 |
解説 WEEKDAY & CHOOSE
WEEKDAYとCHOOSEを使用することにより、エクセル、スプレットシートのどちらでも、表示形式を意識せずに曜日を変換する事が出来ます。
日付 | WEEKDAYの結果 | WEEKDAY & CHOOSEの結果 |
---|---|---|
2019/12/01 | 1 | 日 |
2019/12/02 | 2 | 月 |
2019/12/03 | 3 | 火 |
2019/12/04 | 4 | 水 |
2019/12/05 | 5 | 木 |
2019/12/06 | 6 | 金 |
2019/12/07 | 7 | 土 |