数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう - ICS MEDIA
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値をカンマ区切りにしたり、日付データを特定のフォーマットに変換したりといったことはみなさんも経験があるのではないでしょうか？ そのような数字や日付を変換するのに便利なのが、JavaScriptのtoLocaleString()メソッドです。このメソッドを使うことで、数値や日付をさまざまな形式に変換できます。この記事では、toLocaleString()メソッドの使い方と、その応用例を紹介します。 サンプルを別ウインドウで開く コードを確認する toLocaleString()メソ
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
Web制作にすごい役立つ！ コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用できるので、ブックマークしておくと便利です。 ToolsOcean ToolsOceanは完全に無料で利用できるオンラインツールが、たくさん用意されています。登録など面倒なことは一切ありません。 いくつか使用してみました。まずは、CSSの軽量化。 CSSだけでなく、HTML、JavaScriptの軽量化、整形も揃っています。
querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記
表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある． NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ． Array.prototype.slice.callする オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い． Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href) [].slice.callする Array.prototypeのかわりに[]で書く．ちょっと短い
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
URLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示する・「github1s」 - かちびと.net
github1sはURLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示するWebアプリです。 https://github.com/conwnet/github1s 例えば上のようなURLを https://github1s.com/conwnet/github1s というように、github.comをgithub1s.comとするだけでVSCode風のUIでGithubを閲覧できるようになる、というもの。昔別の用途ですが似たようなものがありましたね。Youtubeをなんか便利にする、みたいなのだった気がする。 各ブラウザのエクステンションも用意されていますが、前述のようにGithubのドメインに1sを加えるだけなので無くても良さそうですね。 勿論ツリーもコードもVSCodeライクになりますのでユーザーの方なら見やすくなるかもしれませんね。こちらのアプリはO
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト！ Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます： Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
パントンカラー全1320色をCMYK値に変換したチートシート Pantone Color Bridge Plus ＆ CMYK
PhotoshopやIllustratorなどで作成したデザインを印刷するとき、CMYK（C：シアン／M：マゼンタ／Y：イエロー／K：ブラック）の4色で表現するプロセスカラー印刷が一般的です。 パントンカラーを4色プロセス印刷のCMYKで再現した近似色をまとめた「パントーン・カラー・ブリッジ（英: Panton Color Bridge）」は、印刷会社、グラフィック、Webデザイナー向けの色見本帳です。特に、ロゴや商標、パッケージデザインなどで特色（ソリッドカラー）の指定、確認に向いています。 今回は、パントンソリッドカラー全1320色をCMYK値に変換したチートシート Pantone Plus Color Bridge CMYK と Pantone Color Bridge Plus Coasted をご紹介します。これがあれば、色見本帳が手元になくても、プロセスカラー印刷用の配色をオン
Vue.jsでカラーコードからRGB値にサクッと変換する方法
2022年4月27日 JavaScript, Vue.js, 便利ツール 色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい！という機会がちょこちょこありまして。グラフィックツールや既存のWebサイトでもできますが、もっとサクサク進めたくなって「Quick HEX to RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。 【Quick HEX to RGB】ってこんなサイト カラーコードを入力するとその場でRGB値に変換されます。 Enter キーか「Add」ボタンクリックで下のリストに追加されます。色を比較したい時やたくさんのカラーコードを変換したい時に便利。 値はクリックするとコピーできます。 ぜひ実際に使って動作を確認してみてくださいね：Quick HEX to RGB 制作手順 Quick HEX to
「Electron」を使って業務改善に役立つツールをつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※この記事はLIGアドベントカレンダー2018の15日目です。 こんにちは。バックエンドエンジニアのまさくにです。 LIGにおいて逃れえぬ仕事のひとつに「LIGブログを書く」という作業があるのですが、僕の場合、この仕事の中に「マークダウンからLIGブログ用のフォーマットを作り出す」という非生産的な作業が含まれています。 僕はたいていの文章をマークダウンで書いていて、このブログ記事も一度マークダウンで書き出してから、WordPressに取り込み、それからLIGブログ用のhtmlに直して公開しているため、この置換作業をこれまでイヤイヤやってきました。 マ ジ な ム ダ。 そこで今回は、マークダウンからLIGブログ用のフォーマットへ変更するためのツールを考えたいと思います。 作りたいものと選定 単純に「マークダウンをhtmlに変更したい」っていうわけではありません。LIGブログには、たとえば下
querySelectorAll()の結果はNodeListだけどforEach()が使える仕様です。（配列とかおれおれAdvent Calendar2018 – 11日目） | Ginpen.com
いまさら始めるgulp入門 | オレインデザイン
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
PHP Archive
JavaScript(ECMAScript) にはバージョンによって大きく機能に差があり、最新の書き方をすると古いブラウザでは動作しない場合があります。例えば ES6(ECMAScript Edition 6) ではクラスやモジュールの読み込みなど多くの機能が追加されましたが、それらは ES5 以前では備わっていないため、Internet Explorer などのレガシーブラウザでは機能しません。 そういった問題を解決するためには、TypeScript などの Javascript ではない言語(AltJS)で書いたものを ES5 対応のスクリプトにトランスパイルしたり、ES6 の書き方で書いたスクリプトを Babel で ES5 以前の書き方に変換するのが一般的です。 今回は Babel と webpack を組み合わせて、スクリプトの保存時に自動的に ES5 対応スクリプトに変換される
[JavaScript]配列の比較 : Strings of Life
JavaScriptで、配列の比較の際に==又は===演算子を用いると、その配列が参照しているメモリ上のアドレスが同じかどうか、でtrue/falseを返します。したがって、 var array1 = [1, 2, 3]; var array2 = [1, 2, 3]; console.log( array1 == array2 ); // FALSE!!! という結果になります。配列の値と値の順番が等しいか比較する方法として一番簡単なのは、toStringメソッドで文字列に変換して比較することです。 var array1 = [1, 2, 3]; var array2 = [1, 2, 3]; console.log( array1.toString() == array2.toString() ); // true // ↑の3行目の処理を詳しく書くと、以下のような流れ。 var st
![[JavaScript]配列の比較 : Strings of Life](https://cdn-ak-scissors.b.st-hatena.com/image/square/da78a05937633f7a2b4b2219826151c370cd607b/height=288;version=1;width=512/https%3A%2F%2Fparts.blog.livedoor.jp%2Fimg%2Fusr%2Fcmn%2Fogp_image%2Flivedoor.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript - 문자열에서 숫자만 추출
Essential Cheat Sheet: Convert jQuery to JavaScript | Envato Tuts+
配列風オブジェクトをArray.from()で本物の配列へ変換。（配列とかおれおれAdvent Calendar2018 – 05日目） | Ginpen.com