Vue入門
4. 4 Copyright © Xchange Solutions All right reserved. Vueとは テンプレート(フロントUI)に特化したオープンソースのJavaScriptフ レームワーク。 データ駆動（データドリブン）、リアクティブプログラミング。 データが変わることで表示が変わる。 コンポーネント志向（HTML/CSS/JSを部品単位で扱う）。 MVVMパターン(Model-View-ViewModelパターン、Controllerレス)。 https://qiita.com/asip2k25/items/bd4bdccd5201d542953c DOM API(JSON) Vue 5. 5 Copyright © Xchange Solutions All right reserved. なぜJQueryでなくVueなのか？ DOMその
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
我が名は神龍……どんなテストもひとつだけ自動化してやろう - Qiita
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
The Complete Guide to Lazy Loading Images | CSS-Tricks
Images are critical for every website and application today. Whether it be marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are large in size making them the single largest contributor to the page size. As per the latest HTTP Archive data, the median page size on desktops is 1511 KB. Images make up for almost 650 KB of that size
JavaScriptのイベントをたくさん見られるサイト
JavaScriptでよく使うイベントの概要をざっくりまとめ、それぞれのイベントオブジェクトをコンソールで確認できるサイトです。
JavaScriptのイベントをたくさん見られるサイトを作る
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする
Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする Google Analytics （アナリティクス） のトラッキングを、ユーザーの同意有無によって有効にしたり、無効にしたりするための簡単な JavaScript を書いてみましたというお話。 少し前に会社の Web サイトでたまに更新しているコラムで、GDPR （General Data Protection Regulation）」、日本語で言うところの 「EU 一般データ保護規則」 に関連して、Google Analytics に新たに加わった 「データ保持」 の設定についての記事を書きました。 Google Analytics に新たに導入された「データ保持」の設定に関する誤解と対策 - バーンワークス株式会社 私、および私の会社は GDPR 等、法務関連が専門分野ではないため、具体的
Webpack を使わずに import 文を使う - Qiita
要約 2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。 しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。 ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。 本文 Webpack によるモジュール分割 Webpack は JavaScript の バンドル を担う。 たとえば、次のコードを分割することができる： 分割前
Web Components 入門として Hello World タグを作る - Qiita
Web Components とは何か 簡単に言ってしまえば、オリジナルタグを作れるHTMLの仕様です。 このあたりの記事が詳しいです。 https://html5experts.jp/shumpei-shiraishi/24239/ 良い感じに小さくまとまっている実装が無かったので自作してみました。 Hello, Worldタグを作る こんな感じになります。 https://iwtn.github.io/hello_world_tag/ 後述しますが、ブラウザのサポート状況は微妙でChromeでしか表示できないと思います。 ソースコードはこちら https://github.com/iwtn/hello_world_tag Developer Tools で見ると、オリジナルのタグで出来ていることがわかりやすいと思います。 3つの基本要素（本当は4つ）と基本的な作り方 template
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
PostHTMLプラグインの作り方 - Qiita
export default tree => { tree.match({ tag: 'span' }, node => { node.tag = 'p'; return node; }); } treeはASTにPostHTMLのAPIをつけたものです。 ASTの構成はposthtml-parserに書いています。 APIがtree.match(expression, cb)とtree.walk(cb)の2つしかなく、walkのほうは全ノード見ることになるのであまり使わないと思います。 なので基本的にtree.match()で処理していくことになります。 posthtml-match-helperを使えばセレクタ指定っぽくもできます。 ちなみにAPIを使わずに直接操作しても問題ありません。 親要素や兄弟要素にアクセスしたくなったときなどは直接触るしかありません・・・。 上記を覚えておけば
最新のウェブフロントエンド技術を無理してキャッチアップする必要はない - id:anatooのブログ
ウェブフロントエンド技術は変化が激しいと言われるけれども、多くの人にとって最新のウェブフロントエンド技術を無理してキャッチアップする必要は無い。以下理由。 ここでいう最新のウェブフロントエンド技術とは、新しいブラウザのAPIや新しいJavaScriptの文法や新しいフレームワーク・ツールなどを指す 今のHTML5はドキュメントを表現するプラットフォームだけではなくアプリケーションプラットフォームとしても機能するように進化をしている最中 だからアプリケーションプラットフォームとしての進化を支える新技術がたくさん出てきている 逆に言うと、アプリケーション(SPAとか)を書かない人にとってはキャッチアップする必要の無い場合がたくさんある また、それらのウェブフロントエンドの新技術を全てキャッチアップするのは基本的に不可能だと思う 自分はウェブフロントエンドやそれのパフォーマンスを専門の一つにして
クリーンなJavaScriptコードを書くためのガイド - Qiita
Clean Code PHP / Clean Code JavaScript 以下はClean Code JavaScriptの日本語訳です。 clean-code-javascript Introduction Robert C. Martinの著書Clean Codeは、JavaScriptにも当てはまることばかりです。 これはスタイルガイドではありません。 JavaScriptで3R(Readable、Reusable、Refactorable)なコードを推進するためのガイドです。 ここに書いてあることの全てに従わねばならないわけではなく、普遍的に合意されているわけでもありません。 ただのガイドラインであり、それ以上のものではありません。 しかしこれらは、Clean Codeの著者らが長年の集合知の結果をまとめたものです。 ソフトウェアエンジニアリングの歴史は僅か50年程度のものでし
事実上最後のJSON仕様「RFC 8259」と「ECMA-404 2nd Editon」公開。UTF-8エンコード必須に
RESTful APIのデータフォーマットなどで広く使われているJSON。IETFはJSON仕様「RFC 8259」を発表。従来の仕様をブラッシュアップしつつECMAの仕様との統一も実現した、事実上最後のJSON仕様になると見られる。 IETFからJSON（ジェイソン）の仕様を示した「RFC 8259」（The JavaScript Object Notation (JSON) Data Interchange Format）が公開されました。 IETFにおけるJSON仕様は、これまで「RFC 7159」が参照されていましたが、RFC 8259の公開によりRFC 7159は廃止（Obsolete）となりました。 RFC 8259は、多数の実装と十分な運用実績を積み重ねたインターネット標準「STD 90」としても参照されます。 ECMAとの統一を実現。事実上最後のJSON仕様になると見られる
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2018 年の Web 標準 / Web Standards 2018
Emergence.js
