次世代バージョン管理ツール「proto」を解説（asdfやVoltaよりも便利） | Ask Nugey!（ヌギーにきいて!）
asdfやvoltaを超えるツール「proto」皆さんの開発環境には、いくつのパッケージマネージャーが入っていますか？ Node.jsのためのnvm、Pythonのためのpyenv、Rubyのためのrbenv... プロジェクトごとに異なる言語やツールを使う現代の開発では、これらの管理が煩雑になりがちです。 「Nodeのバージョン管理は何でしているんだっけ？ nodebrew？ nvm？？」 「新しいPCに環境を再現するのが大変！」 ...といった経験は誰にでもあるでしょう。 そういった無駄な時間を減らす便利なアプリがprotoです。 これ1つさえ入れておけば大体のものに対応でき、一元管理できる優れものです。 protoがサポートしているツール（言語やパッケージマネージャ）一覧は以下より確認できます↓ Supported tools この記事ではprotoの導入方法、基本〜実践的な使い方を
node 管理ツール: Volta, Proto - Qiita
Volta 概要 Node (npm, pnpm, yarn) のバージョン管理ができる、javaScript ツールマネージャー。 導入・削除方法 install 公式の方法で良さそう。 ※ 予めローカルの node は削除しておくこと。 ※ homebrew でのインストールは非推奨ぽそう。やはり公式が最大手。 uninstall こちらも公式の方法で。 Proto 概要 Bun, Deno, Node (npm, pnpm, yarn), Rust, Go などのバージョン管理ができる、javascript ツールチェーン。 導入・削除方法 下記サイトが一番わかりやすそう。 install 公式で良さそう。 公式が自動で環境変数設定してくれるので、mac は ~/.zshrc を選択すること。設定後、source ~/.zshrc で更新する。 uninstall rm -rf ~/
JSのツールチェーン管理ツール「proto」を使ってみる
はじめに 個人的に使ってみた所感です。 記載してある情報には誤りがある場合があります。ご了承ください 🙇♂️ ツールチェーンってなに？ 自分も初めて聞いたので ChatGPT に聞いてみました。 ツールチェインとは、ソフトウェア開発において、プログラムを作成するために必要な一連のツールの集合のことです。 なるほど。 JavaScript を例にすると、Node.js や Deno, npm や yarn などのツール群を総じてツールチェーンと表現するみたい。勉強になります。 最近、分からない単語が登場した時は Google さんよりも ChatGPT さんに聞きがちです。web の知識をまとめた上で噛み砕いて教えてくれるので理解が捗ります。もちろん情報の精査はしますが。 JavaScript のツールチェーン管理ツール「proto」 今回自分が見つけたのがprotoという Rust 製
レスポンシブ対応のためのJavaScriptによる2つの切替手法 | JavaScript
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。 ※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました レスポンシブ対応のためのJavaScriptによる2つの切替手法 2019.07.17 2024.04.02 JavaScript レスポンシブ こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。 レスポンシブウェブデザインのページで、CSSではメディアクエリを使用して見た目を端末別で分けたが、設置するUIがそれぞれ別になったので、JavaScriptによるイベントも別で付与したいということがあります。 本記事は端末の種類・画面幅によ
スワイプ／フリックしたときに処理を実行する
スワイプ／フリックしたときに処理を実行する最終更新日：2024-01-03公開日：2020-05-29スマホやタブレットなどのタッチ操作に対応した端末で、スワイプ／フリック操作があったときに指定した処理を実行する方法について解説します。 この記事のポイントイベントtouchmoveを使ってタッチポイントの座標を取得するスワイプ／フリックの開始位置と終了位置を比較すると向きが分かる スワイプ／フリックを検知するデモページはこちら。 ※スマホ／タブレットなどタッチ操作に対応した端末か、またはブラウザの端末シミュレーターを使って青いエリアをスワイプしてみてください。 ページでスワイプ／フリックがあると次の3つのイベントが発生します。 イベント名発生するタイミング スワイプ／フリックしたときに発生するイベントはtouchmoveです。 それ以外のtouchstartとtouchendはスワイプ／フ
Webフロントエンドパフォーマンスチューニング85選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
本記事は、Atit氏による「34 JavaScript Optimization Techniques to Know in 2021」（2021年1月3日公開）の和訳を、著者の許可を得て掲載しているものです。 2021年に知っておきたいJavaScript最適化技術34選 最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは
JSのレスポンシブ対応をresizeからmatchMediaに移行した
JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
Intersection Observer が良さそうなので試してみた - Qiita
個人的に辛いと思っていたこと レスポンシブ時で要素のスクロール位置がレイアウトによって変化する場合（SPだとレイアウトが縦長になるため） 感覚的に書けないつらさ １回のみの動作させるときはflag処理が必須（スクロールさせてfalseにしてfalse時は動作させないなど） スクロールイベントの発生は断続的なのでブラウザでの負荷がヤバい。 setTimeoutとかrequestAnimationFrameとかで軽減させる方法は一応ある ⇛ (関連記事) lazyloadなどの遅延読み込みをネイティブで分かりやすく出来ないか。 Intersection Observer という技術について こちらの記事で「Intersection Observer」というAPIを要素の遅延読み込みに利用していると知り、なんとなく調べてみることにした。 概要 Intersection（交点）Observer（監
最新のJavaScript: ES2016からES2019までの知るべき全て - Qiita
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された２つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
今すぐJavaScriptデバッグ効率を上げるconsoleテクニック - Qiita
こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES
React と Vue.js と Angular の比較 - kurosame’s diary
はじめに なんとなく React と Vue.js と Angular の比較メモを残したいと思った （今年は新規プロジェクトの立ち上げが多く、会社でフロントエンドのフレームワークをどれ使ったらいいか聞かれることが多かったため） 私は React 歴半年、Vue.js 歴 1 年半、Angular 歴無しと経験が浅いため、 自分の考えは極力書かず、ネット上や周りのフロントエンドエンジニアに聞いた情報を中心に書こうと思う ※ この記事は随時更新する予定 新しくフロントエンドフレームワークの比較記事が出てきたら、それを読んでこの記事に反映するぐらいの温度感でいます 機能比較 機能 React Vue.js Angular ベース構文 JS HTML HTML データバインディング 単方向のデータバインディング（Data ⇒ View） 基本的には単方向のデータバインディング（Data ⇒ Vi
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
コーディング時間を大幅短縮！Moment.jsでよく使う5つの機能 – ProgramMemo
// 日付を指定 var date_str = "2017-01-01 00:00:00"; // 1日足す 2017-01-02 00:00:00 console.log(moment(date_str).add(1, 'days').format('YYYY-MM-DD HH:mm:ss')); // 1日減らす 2016-12-31 00:00:00 console.log(moment(date_str).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')); // 1日と1時間足す 2017-01-02 01:00:00 console.log(moment(date_str).add(1, 'days').add(1, 'hours').format('YYYY-MM-DD HH:mm:ss')); // 1日と1時間減らす 20
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn JavaScript App
JavaScriptとWeb開発に関するInfoQトレンドレポート
