npm install と npm ci って結局どう使うの？2023年版 - Mitsuyuki.Shiiba
うりうりさんの↓のコメントを見て、そういえばnpm ciって見たことあるけどチェックしてないなぁ。というかnpm installも雰囲気で使ってるなぁ。と思ったので、うりうりさんに教えてもらったことを手がかりに、npm installとnpm ciについて調べた。 これ、node_modulesキャッシュしてたり npm install使ってるけど npmのグローバルキャッシュ(~/.npm)をキャッシュした上で npm ciで早くなったりしないんだろうか GitHub Actions上でテストを約3倍早くした話https://t.co/MpmFktGBxU— wreulicke (@wreulicke) March 14, 2023 ちょこっと検索して見てみたところ、新旧情報があって自分が混乱したのと、公式ドキュメントには概要は書かれているものの詳しい内容は書かれていないので（僕が見つけ
RedwoodJS を Ruby on Rails と比較してみる
RedwoodJS RedwoodJS は JavaScript/TypeScript で構築されたフルスタック Web アプリケーションフレームワークです。RedwoodJS プロジェクト自体は Tom Preston-Werner 氏 (GitHub 創設者であり Gravatar や Jekyll などの作成者) が中心となり始まりました。 私自身もつい最近になって同じ職場の @sakitoさんに存在を教えてもらったばかりです。 RedwoodJS は、READMEから抜粋するだけでも、次のような機能を持ちます。 フォーマット・ディレクトリ・ビルドなどに関するデフォルト構成 単一ファイルによるルーティング定義 GraphQL Client / API (with Serverless deploy) の構築 ページ・レイアウトなどのジェネレータ CRUD 操作に特化した Scaffo
PDF-LIB - JavaScriptでPDFを作成、更新 MOONGIFT
Web上で扱うことも多いPDF。ただドキュメントとして表示するだけで、あえてJavaScriptから操作することは殆どないでしょう。しかし、JavaScriptとPDFが連携できるようになれば、もっと可能性が広がりそうです。 今回紹介するPDF-LIBはWebブラウザ、nodeのどちらからでも操作できるPDFライブラリです。 PDF-LIBの使い方 JavaScriptだけでPDFを作成しています。 既存のPDFにテキストを追加することもできます。 複数のPDFを一つにまとめることも。 画像を差し込むサンプル。 フォントを指定して実行。 メタデータを追加することもできます。 さらにSVGをPDFに描画します。 PDF-LIBは新規のPDFはもちろん、既存のPDFに手を加えることもできます。レポートを作るレベルになるとそれなりに難しそうですが、簡単な内容であればJavaScriptだけでPD
Parallel vs concurrent in Node.js
In a heated debate over technicalities on the internet, you may have heard the argument "Yeah, that may be concurrent but not parallel computing." You're wondering what do they mean anyway? What's the difference? Most importantly, should I care? As it turns out, Node.js can be categorized into one of these. On the general level, though, as long as you keep in mind that the CPU is pretty much alway
JavaScript Registryの今後 - from scratch
さて、前回は tink と yarn v2 における CLI 戦略の話でした。次は JavaScript Registry についてです。 ちなみにこの内容が今回 JSConf.EU 2019 で一番盛り上がったトピックです。 JavaScript Registry とは JavaScript Package をバックエンドで管理しているサービスです。 npm が管理しているものがいちばん有名です。他にも GitHub が管理する Registry が公開される予定です。 The economics of Package Management the economics of package management slide: github.com video: www.youtube.com 「Package Managementの経済」というタイトルです。 聴講者からすると、何話すのか
ReactとVueを改善したSvelteというライブラリーについて - Qiita
海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
業務システムでこそ使えるPWA - Speaker Deck
FRONTEND CONFERENCE 2018 https://2018.kfug.jp/ での発表資料です。
Vue Native
Vue Native is a framework to build cross platform native mobile apps using JavaScript
PhantomJSの開発が終了しリポジトリがアーカイブ化された
QtWebKitをベースにしたヘッドレスブラウザであるPhantomJSの開発が終了され、2018年6月2日にリポジトリもアーカイブされました。 ariya/phantomjs: Scriptable Headless Browser 以前にもお伝えしていましたが、PhantomJSはQtWebKitをベースにしていて安定版が利用しているバージョンも古いままでした。 また、QtWebKitの新しいバージョンへアップデートを行うベータ版も開発されていましたが、Headless Chromiumが公開されたことや個人でPhantomJSのメンテナンスを続けていくの難しいという問題もあり開発は停止していました。 2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules - JSer.info 2017-09-05のJ
vim-javascript から tigris.nvim に乗り換えたら快適だった - 丁寧に手を抜く
最近neovimに乗り換えてから、javascriptの編集中にたまに固まる現象が発生して困っていた。 再現条件をいろいろ試したらどうやらvim-javascriptのインデント処理で無限ループしている様子。 という訳でvimの設定を見直してみることにした。 要件としては、インデントはPrettierでやるので、シンタックスハイライトだけ綺麗にやってくれればいい。 調べたら tigris.nvimというプラグインを見つけた。 これはnodeベースのプラグインで、Babylonを使って構文解析をしてハイライトを実現している。 Babylonはbabelプロジェクトの一部で、JSX, Flow, Typescriptを標準でサポートしている。 だからvim-javascriptのようにvimコミュニティが必死で新たな構文のサポートを追いかける必要がない。 ソースコードを覗いたらシンプルな実装だ
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
React VRで始めるお手軽WebVRプログラミング
React VRというのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。 React VRを知らなくても、ReactやReact Nativeなら知っているという人もいるかもしれません。VRコンテンツを作るには新しいフレームワークやライブラリなどを学ぶ必要がありましたが、Reactと同じ考え方を使ってVRコンテンツを作ることができる点が、他のフレームワークと異なる点です。 ネイティブVRが最高の体験をもたらすとは限らない VRというと何らかのVRヘッドマウントを装着して体験するものというイメージがあります。また、VRヘッドマウントは高額で、VRを体験するハードルが高かったことも事実
Web Budget API と Web に導入されつつある Budget と Cost の概念 | blog.jxck.io
Intro PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。 その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。 基本概念と現時点での API 外観について解説する。 Update 提案されて以降長いことアップデートがなかったが、 Mozilla Standard Position をリクエストしたところ、仕様が消えていたことがわかった。 https://github.com/mozilla/standards-positions/issues/73#issuecomment-373681407 元のリポジトリに Issue で現状を問い合わせたところ、結局開発者からの支持が得られず、 Obsolete されたとのこと。 blink-dev では Intent
ES2016 / ES2017の最新動向を追ってみた - Qiita
今回はES2016で実装された2つの仕様と、ES2017以降で実装されるであろうStage 4の仕様の紹介をしていきたいと思います。 Array.prototype.includes() 配列内に求めている値が入っているかをtrue or falseで返しています。 今までの値チェックの方法はindexOf()とか使って値が入っているかどうかを確認していましたが、正直-1を返すとかが若干ややこしかったので返ってくる値がboolean型なのは可読性がぐっと上がるだろうなと感じたので、今後はこれを使っていこうと思いました。 const arr = ['hoge', 'fuga', 'piyo']; console.log(arr.includes('hoge')); // true console.log(arr.includes('hogera')); // false
2017年に見ておきたい12のJavaScriptライブラリ | TechAcademyマガジン
JavaScriptライブラリには、有名なものでjQueryやReactといったものが存在します。そこで、あまり知られていないものの急速に台頭している12のJavaScriptライブラリを紹介しています。ぜひご覧ください。 本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。 JavaScriptのライブラリは数多く存在しているため、その中のどれにエネルギーを注ぐべきかを決めるのは難しく思えるかもしれません。 成長を続けて広く採用されるようになるライブラリもあれば、中には使用されなくなったり、別の新規プロジェクトに吸収されて消滅するライブラリもあります。 ほとんどのエンジニアは、jQueryやReactなどの有名なライブラリはすでにご存知かと思います
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
