メモ: JavaScript

ラベル JavaScript の投稿を表示しています。すべての投稿を表示

No	日付	内容	チェック
2	2022.02.18	基本的な正規表現パターンの書き方――使用頻度の高い「メタ文字」と「エスケープ」	2024.04.09
1	2022.01.14	「正規表現」とは――すぐに使う方法と「ECMAScript」のバージョン	2024.04.09

JavaScriptで正規表現

JavaScript(ECMAScript)で正規表現を使う方法のまとめ

・ECMAScriptで正規表現を使うには「RegExp」クラス、「String」クラスの一部のメソッドを使う

・RegExpクラスを使うには3つの方法がある

1. コンストラクタにマッチングパターン、フラグを指定

※作成されるたびにコンパイル (ループ中でパターンが変換する場合に使う)

const regex = new RegExp('パターン'); // RegExp('oo');
const regex = new RegExp('パターン', 'フラグ'); // RegExp('oo', 'g');

2. リテラル記法 (一般的な使い方)

※評価時にコンパイル (ループ中で毎回同じパターンを使う場合は効率が良い)

const regex = /パターン/; // regex = /oo/';
const regex = /パターン/フラグ; // regex = /oo/g;

3. コンストラクタを介したリテラル記法

const regex = new RegExp(/パターン/); // RegExp(/oo/);
const regex = new RegExp(/パターン/, 'フラグ'); // RegExp(/oo/, 'g');

・testメソッド (マッチングするか調べる)

const regex = /[\d]{4}/; // 4桁の数字
const str = '225-0002';
console.log(regex.test(str)); // true

・execメソッド (マッチングした文字列を取り出す)

const regex = /[\d]{4}/;
const str = '225-0002';
const array = regex.exec(str);
if (array !== null) {
　console.log('${array[0]}'); // 0002
}

・Stringクラス＋matchメソッド (マッチングした文字列を配列で取得)

const regex = /[\d]{3,4}/g;
const str = '225-0002';
const array = str.match(regex);
if (array !== null) {
　console.log(array); // ['225', '0002']
}

・Stringクラス＋matchAllメソッド (マッチングした文字列を反復子で取得)

※gフラグを指定すること

const regex = /[\d]{3,4}/g;
const str = '225-0002';
const array = str.matchAll(regex);
for (const match of array) {
console.log(match[0]); // 225 と 0002
}

・Stringクラス＋searchメソッド (マッチングした文字列の位置)

※先頭は0、ヒットしなければ-1

const str = '225-0002';
const regex1 = /[\d]{4}/;
console.log(str.search(regex1)); // 4
const regex2 = /[\d]{5}/;
console.log(str.search(regex2)); // -1

・Stringクラス＋replaceメソッド (マッチングした文字列を別の文字列に置き換え)

※gフラグを指定するとマッチングした全ての文字列を置換

const regex = /[\d]{4}/;
const str = '225-0002-0003';
console.log(str.replace(regex, '9999')); // 225-9999-0003
const regex2 = /[\d]{4}/g;
console.log(str.replace(regex2, '9999')); // 225-9999-9999

・Stringクラス＋replaceAllメソッド (マッチングした文字列を全て置換)

※gフラグを指定すること

const regex = /o{2}/g;
const str = 'Boo Foo Woo';
console.log(str.replaceAll(regex, 'ee')); // Bee Fee Wee

JavaScript, 正規表現

開発者向けのウェブ技術

既読日	No	記事日付	内容

※ 次回記事：羽ばたけ！ネットワークエンジニア

学習リンク, Web, JavaScript

!! (ダブルバン？)

JavaScriptで ! (exclamation 感嘆符ビックリマークエクスクラメーションマーク)を2つ繋げた記述を見かけた。

FirebaseWebコードラボ

return !!getAuth().currentUser;

何を意味しているのか良くわらかなったが、以下の説明によると
値があれば true、値が無ければ(nullなどであれば)falseを返すっぽい
Javascript「バン、バン。IShotYouDown」-Javascriptでのダブルバング（!!）の使用。| パトリック・ディバインより良い

上記サイトでは ! を2つ書くことを Double Bang と呼んでいた

JavaScript, Tips

JavaScript ガイド - JavaScript | MDN

既読日	No	記事日付	内容
			入門編 - JavaScript \| MDN

※ 次回記事：開発者向けのウェブ技術

学習リンク, JavaScript

書籍：JavaScriptプログラマのためのWebデザイン入門

※ 前回記事：プロになるためのPHPプログラミング入門
※ 記事一覧

JavaScriptプログラマのためのWebデザイン入門

タイトル	JavaScriptプログラマのためのWebデザイン入門 Web design Primer for JavaScript Programmer
著者	葛西秋雄／著喜安亮介／著
出版者	東京秀和システム
出版年	2010.9
形態事項	14,225p 24cm
ISBN	978-4-7980-2726-5
価格	(本体価格 \2800)
NDC10(NDC9)	007.645 (547.4833)
予約日	2021.11.15(月)
取得日	2021.11.19(金)

※ 次回記事：JavaScriptライブラリ実践活用厳選111

書籍

完：Link：TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

※ 前回記事：MongoDB Realmでモバイルアプリ開発を試してみよう!
※ 記事一覧
※ Vue.js 記事一覧

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

既読日	No	記事日付	内容
2021.11.16	3	2021.10.07	話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
2021.11.15	2	2021.10.01	コマンドラインツール「Vue CLI」で本格的なVue.jsプロジェクトを作成しよう
2021.11.14	1	2021.07.09	「Vue.js」入門 JavaScriptフレームワークをTypeScriptで学ぼう

※ 次回記事：Elasticsearch＋Hadoopベースの大規模検索基盤大解剖

学習リンク, JavaScript, TypeScript, Vue.js

既読日	No	内容
2021.08.18	-	バカ話ジェネレーター
2021.08.18	-	配列
2021.08.17	-	便利な文字列メソッド
2021.08.17	-	テキストを扱う — JavaScript での文字列
2021.08.17	-	JavaScriptでの基本演算 — 数値と演算子
2021.08.17	-	必要な情報を保存する — 変数
2021.08.17	-	何が間違っている? JavaScript のトラブルシューティング
2021.08.17	-	JavaScriptへの最初のダイブ
2021.08.16	-	JavaScript とは

JavaScript

変数名または式をプレースホルダ ${ } 構造内に含める
${ 変数名 }
例) 参考 https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings

let score = 9;
let highestScore = 10;
let output = `I like the song "${ song }". I gave it a score of ${ score/highestScore * 100 }%.`;

JavaScript #1：scriptタグのdefer？

※ 参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/script

この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。
defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 DOMContentLoaded イベントの発生が抑制されます。
この属性は、 src 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。
defer 属性はモジュールスクリプトには効果がありません。 — 既定で延期が行われます。
defer 属性のあるスクリプトは、文書に現れた順に実行されます。
この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、パーサーブロッキング JavaScript を排除することができるようになります。 async はこの場合と似た効果があります。

JavaScript #2：クラシックスクリプトとモジュールスクリプト？

クラシックスクリプトとモジュールスクリプト？

HTMLの仕様では、スクリプトには2種類存在する
・クラシックスクリプト (Classic script)

従来側のスクリプト

・モジュールスクリプト (Module Script)

MS Modulesのこと
scriptタグのtype属性に"module"を指定する

FullCalendar #5：イベントオブジェクト

※ 前回記事：#3：ツールバー
※ 記事一覧
※ 参考：Event Object - Docs | FullCalendar

イベントの表示

eventsオブジェクトにeventオブジェクトの配列を指定する。

プロパティ一覧

プロパティ	型	内容
id	String	イベントの一意の識別子。getEventByIdで使用
groupId	String
allDay	Boolean	終日セクションに表示するか？
start	Date object	イベント開始日時
end	Date object	イベント終了日時。終了がない場合はnull
startStr	String (ISO8601)	開始日(start？)のISO8601文字列表現。イベントが終日である場合は時間の部分はなし。
endStr	String (ISO8601)	終了日(end)のISO8601文字列表現。イベントが終日である場合は時間の部分はなし。
title	String	イベントに表示されるテキスト
url	String	ユーザーがこのイベントをクリックしたときにアクセスされるURL。参考) eventClickコールバック
classNames	文字列配列	['myclass1'、myclass2 ']のような文字列の配列。レンダリングされたイベントに添付されるHTMLクラス名を決定
editable	Boolean / null	この特定のイベントの編集可能な設定をオーバーライドする値
startEditable	Boolean / null	この特定のイベントのeventStartEditable設定をオーバーライドする値
durationEditable	Boolean / null	この特定のイベントのeventDurationEditable設定をオーバーライドする値
resourceEditable	Boolean / null	この特定のイベントのeventResourceEditable設定をオーバーライドする値
display	String (Type)	このイベントのレンダリングタイプ指定可能な値: "auto", "block", list-item", "background", inverse-background", "none" 参考) eventDisplay
overlap		この特定のイベントのeventOverlap設定をオーバーライドする値
constraint		この特定のイベントのeventConstraintオーバーライド
backgroundColor		この特定のイベントのeventBackgroundColorオーバーライド
borderColor		この特定のイベントのeventBorderColorオーバーライド
textColor		この特定のイベントのeventTextColorオーバーライド
extendedProps		解析中に指定されたその他のその他のプロパティを保持するプレーンオブジェクト明示的に指定されたextendedPropsハッシュのプロパティとその他の非標準プロパティを受け取る
source		このイベントの発生元であるイベントソースへの参照イベントがaddEventを介して動的に追加され、ソースパラメーターが指定されていない場合、この値はnullになる

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #4：イベントの表示

※ 前回記事：#3：ツールバー
※ 記事一覧
※ 参考：Event Object - Docs | FullCalendar

イベントの表示

eventsプロパティに、カレンダーに表示させるeventオブジェクトの配列を指定する。
最低限、イベント日付(start)とタイトル(title)を指定。
例えば以下の感じ

events: [{
  title: 'お休み',
  start: '2021-07-01',
},{
  title: 'お休み2',
  start: '2021-07-08',
}],

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar：記事一覧

No	日付	記事
3	2021.07.06	ツールバー
2	2021.07.04	日本語化
1	2021.07.04	とりあえず使ってみる

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #3：ツールバー

※ 前回記事：#2：日本語化
※ 記事一覧
※ 参考：https://fullcalendar.io/docs/headerToolbar

ツールバー

ヘッダとフッタの左側・中央・右側、それぞれに表示するオブジェクトを指定できる。
※ オブジェクトとは前月・翌月ボタンやタイトルのこと

ヘッダは "headerToolbar"、フッタは "footerToolbar" の属性に指定

さらにそれぞれに start(左側)、center(中央)、end(右側) の属性があり、
それらの値にオブジェクトの名前を","区切りの文字列として指定する。

指定可能なオブジェクトの名前
・title (現在の月/週/日を含むテキスト)
・prev (カレンダーを1か月/週/日に戻すためのボタン)
・next (カレンダーを1か月/週/日進めるためのボタン)
・prevYear (カレンダーを年に戻すためのボタン)
・nextYear (カレンダーを1年進めるためのボタン)
・today (カレンダーを現在の月/週/日に移動するためのボタン)
・dayGridDay (日ビュー)
・dayGridWeek (週ビュー)
・dayGridMonth (月ビュー)
・timeGridWeek (時刻ビュー)
・listDay (日予定リスト) ・listWeek (週予定リスト)
・listMonth (月予定リスト)
・listYear (年予定リスト)

ヘッダの左側、フッダの右側にすべて表示させてみる

<div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'ja',
            headerToolbar: {
                start: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
                center: '',
                end: '',
            },
            footerToolbar: {
                end: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
            },
        });
        calendar.render();
    });
</script>

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #2：日本語化

※ 前回記事：#1：とりあえず使ってみる
※ 記事一覧

日本語化

ググると色んなサイトに日本語化の説明が書かれているがどれもうまくいかなかった。
結局のところは locales-all.min.js の追加と、"locale: 'ja'" プロパティのだけで日本語化できそうである。

1) https://www.jsdelivr.com/package/npm/fullcalendar

locales-all.min.js を "Copy HTML" でコピーし、HTMLのmain.min.jsの下に貼り付け
※ main.min.jsの上だとエラーになる

2) FullCalendarコンストラクタのプロパティとして "locale: 'ja'" を追加

BODYタグ内は以下の感じ

<body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
            });
            calendar.render();
        });
    </script>
</body>
</html>

これで日本語化される

※ 次回記事：#3：ツールバー

FullCalendar, JavaScript, JS, ライブラリ

FullCalendar #1：とりあえず使ってみる

※ 記事一覧
※ 参考：https://fullcalendar.io/docs/initialize-globals

とりあえず使ってみる

1) VSCodeを起動し "!" Enter でHTMLテンプレートを生成

2) https://www.jsdelivr.com/package/npm/fullcalendar

上記より main.min.css と main.min.js それぞで "COPY HTML" でコピー
・main.min.css → headタブの一番したに追加した
・main,in.js → bodyタブに追加

3) divタグを追加、id属性を "calendar" とする (名前は何でもよい)

4) DOMContentLoadedイベントで 3)で追加したID (今回は"calendar") にFullCalendarを描画する

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
        });
        calendar.render();
    });
</script>

これでカレンダーが表示される。

※ 次回記事：#2：日本語化

FullCalendar, JavaScript, JS, ライブラリ

Link：はじめてみよう Firebase

※ 前回記事：IPv6で始めるネットワーク
※ 記事一覧

はじめてみよう Firebase

既読日	No	記事日付	内容
2021.05.07	2	2018.10.29	Firebase の基本操作を理解しよう！
2021.05.07	1	2018.10.25	Google の mBaaS 「 Firebase 」とは？

※ 次回記事：GCP入門編

学習リンク, JavaScript, Firebase

Link：Three.js入門サイト

※ 前回記事：Flutterで始めるモバイルアプリ開発
※ 記事一覧

Three.js入門サイト

Three.js入門編

済:4. Three.jsのカメラの制御
済:3. Three.jsのジオメトリの基本
済:2. Three.jsのマテリアルの基本
済:1. 簡単なThree.jsのサンプルを試そう

Three.js基本編

－:1. Three.jsのさまざまなマテリアル

※ 次回記事：Windows管理者のためのIPv6入門

学習リンク, JavaScript, Three.js

Link：TypeScriptで学ぶJavaScript入門

TypeScriptで学ぶJavaScript入門

前回記事：.NET開発者のためのPHPアプリお手軽開発入門

済:10. 関数の基本的な取り扱い方
済:9. 連想配列の取り扱い方
済:8. 配列の取り扱い方
済:7. 繰り返し処理（2）：for／for ... in文
済:6. 繰り返し処理（1）： while／do ... while文
済:5. 条件分岐
済:4. 式と演算
済:3. リテラルと列挙型
済:2. 変数
済:1. TypeScriptの概要

次回記事：Python入門

学習リンク, JavaScript, TypeScript

登録: 投稿 (Atom)

メモ

Link：ECMAScriptで学ぶ正規表現

ECMAScriptで学ぶ正規表現

JavaScriptで正規表現 (1)

JavaScriptで正規表現

Link：開発者向けのウェブ技術

開発者向けのウェブ技術

JavaScript：ダブルバン？

!! (ダブルバン？)

Link：JavaScript ガイド

JavaScript ガイド - JavaScript | MDN

書籍：JavaScriptプログラマのためのWebデザイン入門

JavaScriptプログラマのためのWebデザイン入門

完：Link：TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

Link：JavaScript の第一歩

JavaScript の第一歩

テンプレートリテラル

JavaScript

JavaScript #1：scriptタグのdefer？

JavaScript #2：クラシックスクリプトとモジュールスクリプト？

FullCalendar #5：イベントオブジェクト

イベントの表示

FullCalendar #4：イベントの表示

イベントの表示

FullCalendar：記事一覧

FullCalendar：記事一覧

FullCalendar #3：ツールバー

ツールバー

FullCalendar #2：日本語化

日本語化

FullCalendar #1：とりあえず使ってみる

とりあえず使ってみる

Link：はじめてみよう Firebase

はじめてみよう Firebase

Link：Three.js入門サイト

Three.js入門サイト

Link：TypeScriptで学ぶJavaScript入門

TypeScriptで学ぶJavaScript入門

その他の記事

JavaScriptで正規表現

!! (ダブル バン？)

JavaScriptプログラマのためのWebデザイン入門

JavaScript

イベントの表示

イベントの表示

FullCalendar：記事一覧

ツールバー

日本語化

とりあえず使ってみる

はじめてみよう Firebase

その他の記事

!! (ダブルバン？)