JavaScriptの正規表現で文字列を抜き出す「グループ化」
JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます（他に適切な方法があるようでしたらすいません）。 １．特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
HTML5 & JavaScript でビデオプレーヤーをサクッと作ろう！
どうも、こんにちは。江嵜です！ 今日は HTML5 と JavaScript でビデオプレーヤーを作ってみましょう！ 「Web でビデオプレーヤーなんて作ろうと思ったら、結構めんどくさいんじゃないの？」とお思いのアナタ！ HTML5 からは全然そんなことないんです！ほんの数十分でビデオプレーヤーを作れてしまいますよ。 案ずるより産むが…で、とりあえずコード書いてみましょう！ 今回作るもの 今回、こんな感じのものを作ってみましょう。 操作はシンプルに、動画を操作するための Start・Stop・Pause。 あとはフルスクリーン表示と、動画読み込み用のボタンを配置しました。 それと動画の下にあるプログレスバーですね。 こちらも操作可能ですよ。 コーディング！ 今回は HTML, JavaScript, そしてデザインの為の CSS が必要ですね。 あと、動画選択前に表示しておく画像が 1 枚
JavaScript用語集 開発環境関連 [2021/1]
JavaScript による開発に向けて道具や環境を整えるにあたり、実に様々な用語があります。 N番煎じどころではない話題ではありますが、それらの主観的な説明を試みました。 Disclaimer: React やその他の各種フレームワークなどは入れていません。 すべて独学、かつメチャ小規模なものばかり作っている人なので、偏りがあります。 古かったり間違ってたりしましたらぜひ教えていただければ……。 冗長な読み物感を多少含みます。 同じような or さらに詳しい情報がググれば山のようにあるので、ぜひ個別の確認を。 なお、URLを明示しないリンクは基本的に記事内で飛ぶだけで、外部リンクは基本URL付きです。 目次 一般 言語 エディター／バージョン管理 実行環境 JavaScript 標準仕様 パッケージ コーディングスタイル モジュール バンドル コードのサイズ削減 書かなかったこと 一般
![JavaScript用語集 開発環境関連 [2021/1]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ddff3c07f7a3c04ea627a55a04be83d9ec48716b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--6e0UA6-K--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AJavaScript%2525E7%252594%2525A8%2525E8%2525AA%25259E%2525E9%25259B%252586%252520%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E9%252596%2525A2%2525E9%252580%2525A3%252520%25255B2021%25252F1%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AFAL%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dTaFp1N0g2XzE5eVBIR3dSTURrcGEtNGRqU1ppUDNPVEhQems9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
YouTube Player APIを使う時のtips集 ｜ Tips Note by TAM
以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement
五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第二回 CSSの構造このページの最終更新日：2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. You can
Vue.jsでクリックイベントを２つ持たせる方法 - Qiita
v-on:click="click_1(); click_2()" @click="click_1(); click_2()" <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> <title>Vue.js</title> <style> p { padding: 2em; width: 200px; border: solid; } p:hov
【d3.js】グラフにテキストを追加する方法 | UX BEAR【ゆえっくま】
3d.js(v5)で、グラブにラベル（テキスト）を追加する方法をご紹介します。 下記の散布図を使って、円にラベルを追加していきます。 HTML/JavaScriptサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> svg{ font: 10px sans-serif; background-color: #eee; text-align: right; padding: 3px; margin: 1px; color: #333; } </style> <script src="d3.min.js"></script> </head> <body> <script> // 1. データの準備 x座標,y座標,r半径 var dataset = [ [1, 4, 4], [2, 6, 4], [3, 11, 4
バックエンドエンジニアのためのVue.js、React、Angular入門（2025改訂版） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 解説のバージョン（2025年3月時点） Vue3.5 React19 Angular19 WEBシステム、WEBプログラム開発において昨今ではVue、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれていました。その原因について、自分はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事はバックエンド処理をメインにこなしてきたWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説となります。
jQueryしか書けなかった自分がVueを使えるようになるまでの話と同じような環境の人たちへ - Qiita
この記事はVue #2 Advent Calendar 2019の10日目です。 昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。 JavaScriptといえば、jQueryだった Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。 使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。 1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。 V
Node.js + Express + Socket.ioで簡易チャットを作ってみる - Qiita
Node.js + Express + Socket.ioで簡易チャットを作ってみる 詳しくはSocket.ioのドキュメントをご覧ください。 https://Socket.io/docs/ やりたいこと Node.js+Socket.ioの組み合わせはよく知られていると思います。 今回はこの組み合わせを使用してチャットを作ってみることを目標にしたいと思います。 Socket.ioとは Socket.ioについて紹介する前に、WebSocketとは何かの説明をする必要がありますので、WebSocketとは何者かを解決していきたいと思います。 WebSocketとは WebSocket（RFC6455）はリアルタイムかつ双方向な通信を実現するプロトコルです。 元々はHTML5の仕様の一部として進められていましたが、現在では単独のプロトコルとして策定されています。 WebSocket通信では、
ブラウザからシリアルポートにアクセスするSerial API - ASnoKaze blog
blink-devメーリングリストに「Intent to Implement: Serial API」として「Serial API」の実装に着手する旨の投稿がされている。 この「Serial API」はW3CのWICGで議論がされており、ブラウザからシリアルポートにアクセス可能にする。3DプリンタやArdbinoなど、様々なデバイスと接続できるようになる。 パーミッションの要求については、すでに実装されている「Web Bluetooth」「WebUSB API」とおなじになるようだ。 sample 仕様では、Ardinoからデータを読み込む例が示されている //Request the list of ports from the user SerialPort.requestPorts().then(ports => { //Pick the first matching port var
【JavaScript入門】split()で文字列の分割＆正規表現の活用法まとめ！ | 侍エンジニアブログ
JavaScriptのコードを書いていると、文字列をいつくかに分解して使いたいなんて場面があったりしますよね。 そんな時、どのようにコードを書けばいいのかわからない… という方もいるかもしれません。 そんな方必見！ 今回は、文字列を分割する際によく利用される「split」メソッドについて解説していきます。 基本的な使い方や、分割のパターン、応用的な実装方法などまで幅広く解説していきます。 これで文字列分割は完璧。しっかり学んでいってくださいね。 ＞＞＞ 今すぐ「split」の使い方を知りたい方はこちら 「split」とは？ まずは、「split」メソッドの基本的な知識から学習を始めましょう。 splitはStringオブジェクトの組み込みメソッドとして用意されており、文字列を任意の箇所で区切って分割することが可能になります。 一般的な構文としては、次のようになります。 var str =
node.jsとProcessingをOSCでやりとり - Qiita
2017-06-22 [コマンドの変更] npm install ws ↓ npm install node-osc 長い間単純なミスを記載してしまっていました．．． すみません．．． npmを使ってインストールしました 参考公式ページ https://github.com/termie/node-osc https://www.npmjs.com/package/node-osc oscP5 Processing内の[Add Library]から検索したらありました Github https://github.com/sojamo/oscp5 リファレンス等 http://www.sojamo.de/libraries/oscp5/ #サンプルコード 前回のwebsocketでのサンプルコードとだいたい同じにしています。 サーバ側のnode.js var osc = require('n
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
Phaser 3 でゲーム作成入門 - Qiita
0. 対象 JavaScript はそこそこわかる人 phaser って何？くらいの人 1. Phaser 基本のキ 世界で一番人気のゲームエンジン（範囲：JavaScript + 2D + オープンソース） github スター数: 21357 凄すぎだろ... 商用OK MIT ライセンス 高速 WebGLで動作, クライアントが対応してなければ Canvas にフォールバック 特別な開発環境不要 CDN から 1 JSファイルをロードするだけで使える npm でもインストールも可能 好きなエディタを使える TypeScript の定義ファイルも同梱 2. チュートリアルから学ぶ Phaser 3 Phaser のことを本当に何も知らなくても、そこそこ面白いゲームが作れる公式のチュートリアルがある。これをいじって、Phaser 3の概要をつかむ。 2.1. 動くもので遊ぶ チュートリア
Phaser - A fast, fun and free open source HTML5 game framework
Thousands of games Millions of players Billions of sessions Why use Phaser? For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Use it if you care about any of the following: Super-fast 2D games With a constantly improving hardware renderer, it doesn't matter if you're creating the next bullet-hell hit on Steam - Phaser can handle it. Friendly API We c
JavaScriptで整数のみの乱数を作る方法と注意点 | PisukeCode - Web開発まとめ
JavaScriptのrandom関数は浮動少数点の乱数を返してきます。 なので整数のみの乱数を作ろうとした場合は少しだけ工夫が必要 ここではそのテクニックについてコード例と一緒に紹介したいと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://366service.com/jp/qa/db24cb0810fe43ded17663e02d61e807
Element: append() method - Web APIs | MDN