console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API - NxWorld
JavaScriptのデバッグ時などにconsole.log()を利用する人は多いと思いますが、Console APIには他にも呼び出された回数カウントや経過時間確認などといった便利なものが複数用意されています。 覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください。 ログレベルについて記載していないものは、Chromeが「info」に、FirefoxとSafariが「ログ」に出力されます。 console.assert()以降で紹介している出力イメージはChromeのものになります。 また、ブラウザによっては使用できなかったり出力内容が紹介しているものとは異なっている場合があります。 console.log()
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
JSON Pretty Linter - JSONの整形と構文チェック
ヒント基本的な使い方「元となるJSON」に、チェックしたいJSONデータを入力して下さい。準備ができたらチェックボタンをクリックして下さい。入力したJSONの構文が正しいかチェックして、結果を表示します。エラーがある場合は、その箇所を指摘します。改行とインデントを付け、また、ユニコードエスケープを日本語に直すなどして整形したJSONを表示します。構文チェックのツールとして、「JSONlint」を利用しています。仕様当サービスはJavaScriptで処理しているため、下記の仕様となっています。 値に含まれる不要なバックスラッシュは取り除かれます。小数点以下が0の場合(例: 1.0)、整数(例: 1)として認識します。実質同じ値でも型を厳密に区別している場合(例: 1ではなく、1.0でなければダメ)は、ご注意下さい。ビューアーキーをクリックすると、オブジェクトを閉じたり開けたりできます。「To
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 React ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
JavaScript で Chrome のウィンドウを閉じる方法 - Qiita
以前リリースしたとあるサービスで、「一部の入力フォームを別ウィンドウをポップアップして入力させ、終わったらリンクをクリックして閉じる」という JavaScript の処理を入れていたのですが、なぜか2015年頃から Chrome で画面が固まってしまう不具合が発生しました。2014年の春にテストした時は問題なく動いていたのですが。 どうやらブラウザーのバージョンアップに伴い、正しく子ウィンドウを閉じるための方法が変化してしまったようです。今ならどう実装するべきなのかを、少し検証してみました。 再現方法 不具合は以下の流れで発生します。確認したブラウザは Chrome 39.0.2171.99m (Windows) です。 親ウィンドウにある <a onClick="window.open()"> リンクを叩き、子ウィンドウをポップアップさせる。 子ウィンドウにある <a onClick="
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
「ネイティブアプリ開発者は絶滅危惧種なのか？」への感想文 - ナカザンドットネット
ポジション MSがRNめっちゃ使ってるという話について Brownfield事例は実質的にネイティブの事例 Skypeの事例ならどうなのか ネイティブアプリ開発者の仕事は減るのか まとめ みんなの反応 Xamarin勢の反応 Cordova勢の反応 iOSネイティブアプリ開発者の反応 jp.techcrunch.com こちらの記事への雑な感想です。感想は私の主観であり、ポジショントークであり、所属する組織の意見とは無関係であることを先に述べておきます。 また「ネイティブ」という言葉に「C/C++などから作られた機械語」という本来の意味に加えて、「プラットフォームの標準言語（WindowsのC#, AndroidのJava, iOSのObj-C）や標準開発ツールである」というニュアンスを含めることをご容赦ください。 ポジション こんな感じのポジションの人です。 中小企業向けにBtoBでアプ
date-holidays という祝日ライブラリが良い意味で狂っていた - hnwの日記
世界には色々なマニアがいるなーという話を紹介します。 先日Node.jsで使える祝日ライブラリを探していたところ、複数の国や地域の祝日に対応しているライブラリ date-holidays を見つけました。 commenthol/date-holidays: worldwide holidays このライブラリは本稿執筆時点で143ヶ国379地域の祝日に対応しています。この時点で頭がおかしい（ほめ言葉）のがわかると思うんですが、さらに凄いのがこれらの祝日をすべてYAMLで定義しており、このYAMLが変態的だという点です。 YAMLによる祝日の定義例 どう凄いかは実際のYAMLを見た方が早いと思うので、例を紹介します。下記は日本の祝日の定義の一部です。 01-15: name: en: Coming of Age Day jp: 成人の日 active: - from: 1948-07-20
画像圧縮やオートコンプリートなどWeb開発を簡単にするJavaScriptライブラリ厳選まとめ！ -
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービスなどを開発する際に簡単な記述でさまざまな機能を組み込めるJavaScriptライブラリをご紹介します。 画像、ファイル、音楽、オートコンプリート機能など、高度な技術をできるだけ簡単に実現してくれるJavaScriptライブラリを厳選し、その基本的な使い方も合わせて解説しているのでぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 ■画像の圧縮機能を組み込めるライブラリ！ 【 Compressor.js 】 ブラウザに標準で提供されているtoBlob()を応用して、カスタマイズ可能な非可逆圧縮を手軽にWebページへ組み込めるJavaScriptライブラリです。 さまざまなフレームワークにも組み込
)
Ambient Canvas Backgrounds - JavaScriptで背景アニメーションを生成
Webサイトの背景に動画を流したりするケースが見られますが、動画はサイズが大きくなりがちです。もっと軽量で、見た目のインパクトがある方法もあるでしょう。そのためにはJavaScriptで動的に作り出す方法が考えられます。 今回はその一つの方法として、Ambient Canvas Backgroundsを紹介します。Canvasを使い、背景を動かします。 Ambient Canvas Backgroundsの使い方 オーロラというテーマです。 渦巻き。 シフト。 合体。 パイプライン。 Ambient Canvas BackgroundsはJavaScriptで作っているので軽量に動きます。動的に作り出されているので多少のランダム性もあります。インパクトが強いので、効果的に使ってみたいライブラリです。 Ambient Canvas BackgroundsはJavaScript製のソフトウェア
レコメンドシステム入門 Javascriptで実装する｜es
レコメンド（推薦システム）に関して素晴らしい記事があったので訳してみました。訳に難があるが、そこはご勘弁ください。 プログラム実行してみると理解できると思います。入門者に打って付けの記事です。 以下、本文。 インターネットの世界はレコメンドで溢れていますね。 Amazonのように商品を購入するeコマース・サイト、Facebookのようなソーシャルネットワーク、YoutubeやNetflixのようなビデオ/映画サイトなど。これらのサイトに共通するのは、あなたに新しいものを推薦するために、映画、商品と友人などの過去のデータを使うことです。 この記事では、レコメンド機能がJavaScriptで、どのように動くか簡単に紹介します。推薦システムを実現するための、異なるアプローチも見ていきます。最終的にはアルゴリズムを切り替えただけで、結果を出力できるようにします。映画評論家の小さいデータセットと、M
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
JavaScript フレームワークを巡った話 - ジンジャー研究室
ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新卒入社したワークスでは ERP パッケージを提供するのに画面を Web 技術で作ってるというだけで、別に SEO の順位を競ったり広告をどうという話ではないし、瞬時に画面が表示されないと離脱率が〜という話でもない。ただ、画面はとにかく複雑で設定項目とががうじゃうじゃある。 あと、学生時代に PC に触れたのが Windows で「黒画面なにそれ美味しいの？」くらいに GUI に染まりきってたというのがある。工学系の研究を効率化するために C# で GUI を作ってたら、なんかソフトウ
JavaScriptの入門書を jsprimer.net で公開しました | Web Scratch
ここ数年書いているJavaScript入門本ですが https://jsprimer.net/ というURLで無料で公開しました。 まだ開発中です これからJavaScriptを始める人がES2015以降をベースにして学べる本 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるようになるもの Webサイト: https://jsprimer.net/ リポジトリ: asciidwango/js-primer: JavaScriptの入門書 もともと公開してありましたが、jsprimer.net というドメインを取ったのでURLが変わっただけです。リダイレクトされているので既存のブックマークはリンク切れにはなりませんが、気になる人はブックマークしなおしてください。 またリポジトリ（asciidwan
gRPC-Webが正式リリース。WebブラウザからgRPCを直接呼び出し可能に
Googleによって開発され、現在Cloud Native Computing Foundation（CNCF）によって開発がホストされているRPCフレームワーク「gRPC」は、プログラミング言語に依存せず、HTTP/2をサポートしたシンプルで高速なRPCを実現できる特徴を備え、マイクロサービスなど分散アプリケーションなどの実装で広く使われ始めています。 このgRPCをWebブラウザのJavaScriptから呼び出し可能にする「gRPC-Web」が正式リリースとなったことを、CNCFが発表しました。 これまではWebアプリケーションのバックエンドでgRPCを用いて開発を行ったとしても、それをWebブラウザから呼び出すには、WebブラウザとWebサーバ間をRESTful APIなどで接続し、WebサーバからgRPCを呼び出すという手法で、RESTfulとgRPCをブリッジすることが一般的でし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScriptの関数名の全て - Qiita
