いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
「 Javascript / Node.js で仕事自動化」記事まとめ - ほんじゃらねっと
Javascript と Node.js を使ってあれこれ自動化する記事が増えてきたので、 目次としてまとめておく。 blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net blog.honjala.net b
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール
連載目次 前回から始まった「MEANスタックで始めるWebアプリ開発入門」ですが、第1回、「LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成」では、MEANスタックの概要について説明とセットアップ、サンプルアプリの作成を通して最初のMEANスタックアプリに触れてみました。 今回からはMEANスタックの各構成要素についてもう少し詳細な解説をしていきます。第2回となる本記事では、MEANスタックの中心となる技術、Node.jsについて基本的な部分やインストール方法、その周辺ツールを紹介していきます。 サーバーサイドJavaScriptの実行環境「Node.js」とは 前回も少し説明しましたが、Node.jsとはサーバーサイドJavaScriptの実行環境です。2009年にRyan Dahl氏によって開発され、Google Chrome用JavaScript実
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
モノモーフィズム（単相性）について – JavaScriptのパフォーマンスを例に | POSTD
JavaScriptのパフォーマンスに関する講演やブログ記事では、よく単相的コードの重要性が強調されています。しかしながら、モノモーフィズム（単相性）／ポリモーフィズム（多相性）とは何なのか、それがどうパフォーマンスに影響してくるのかということについては、あまり分かりやすく説明されていません。私自身の講演でも、＜＜ 1.良い型、2.悪い型 ＞＞的な二者択一のスタイルに要約してしまうことが少なくありません。パフォーマンスに関するアドバイスを求められることがありますが、そういう時に最もよくリクエストされるのは、 モノモーフィズムとは実際のところ何なのか 、ポリモーフィズムがなぜ生じ、それがなぜ悪いのか、ということを説明して欲しいというものです。 困ったことに、そもそも「ポリモーフィズム」という用語そのものが相当に多重定義されています。昔ながらのオブジェクト指向プログラミングにおいては、 ポリモ
HTML/JavaScript/CSS対応のWebIDE「Orion 8.0」がリリース。ホバーツールでエラー表示などが強化
OrionはWebブラウザから使えるエディタ、デバッガなどが統合されたツールで、HTML/JavaScript/CSSに対応。ファイルマネージャ、エディタ、Gitによるバージョン管理、デバッガ、プレビューなどの機能が含まれています。 エディタのキーバインディングには、viとEmacsが標準で用意されており、マウスとカーソルキーだけでなく使い慣れたエディタの操作でコードの編集が可能。タグを入力するときには下記画面のように補完機能も自動的に働きます。
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
今すぐ使えるRactive.js入門 - Qiita
Ractive.jsとは http://www.ractivejs.org/ データバインドに特化したjsライブラリです。 状態監視にVirtualDomの概念を用いているため、挙動が軽く高速です。 実装をテンプレートと、それを監視するRactiveモデルに分離することで、デザインとロジックの分離を実現できます。 モデル設定の記述が直感的かつシンプルで、初見の開発者でも何となく実装を理解できることが強みです。 またテンプレートに必要最低限のロジックを備えているため、複雑なオブジェクトの展開も難なく行うことが出来ます。 Vue.jsほど対応ブラウザに偏りがなく、Angular.jsほど巨大ではない、 データバインドを手軽に取り入れたい際に非常に便利なライブラリです。 Knockout.jsとは立ち位置が似ているので、記法が好みな方を選べばいいのではないかと個人的には思っています。 対応ブラウ
JavaScriptで日本の祝祭日一覧を取得する - Qiita
はじめに JavaScriptで日付を操作するライブラリとして「Moment.js」や「XDate」等ありますが、和暦の取得や祝祭日の取得等には別のロジックが必要となることが不満で「UltraDate.js」というものを作ってみました。 Date.prototypeを汚さない形で日付の操作を行いたかったので ライブラリの中にDateオブジェクトを保持 Date.prototypeには無い関数を作成 Date.prototypeの関数をapplyで呼び出す といった形で作成しています。内部でDate.prototypeの関数をapplyで呼び出していますので、単純に「new Date()」としている所を「new UltraDate()」と置き換えるだけで現在のプロジェクトにも適用できるようになっています。 その中からいくつかDateオブジェクトのみでも使用できるように関数を切り出して、簡易版
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://h2md.axell-embedded.com/
