ES6の新機能「class構文」 – 基礎編 – | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのゆたろです！ ECMAScript連載の第3回となります。今回は、ECMAScript2015から実装された機能の1つ、class構文について説明していきます。個人的に思うclass構文を使うメリットは、ソースが見やすくなったり、継承がしやすくなったりなど。 当記事では、すでにprototypeを利用して定義したものをclass構文に置き換えていくので、上記のメリットを確認していただければと思います。 prototypeをclass構文に置き換える まずは、prototypeをclass構文に置き換えていきます。 そもそもprototypeとは？ ES6以前ではclass構文が実装がされていなかったので、prototypeという機能を使ってclassを実装していました。prototypeの詳細は、下記をご参照ください。 Object.prototype
最新版で学ぶ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
KUTE.js | JavaScript Animation Engine
The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
react.rocks - react リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
D3.jsとThree.jsで日本地図を可視化してみた2 - データマイニングエンジニアが気まぐれに更新するブログ
2015-09-14 D3.jsとThree.jsで日本地図を可視化してみた2 D3.js 可視化 Three.js Javascript itoeiji110704.hatenablog.com上の前回記事では、D3.jsとThree.jsを使って日本地図を描画しました。そこからさらに勉強を進めまして、より3Dに描画できるようになりましたので、データも乗せて作ってみました。画像をクリックするとページを移動します。 ちなみに色やウインドウの形状は、あるアニメを参考にしてみました。 近未来っぽくてカッコイイ感じなのに惚れまして笑前回は日本地図をHTML5のCanvasに描画して、テクスチャとしてThree.jsのオブジェクトに貼り付ける方法を取っていました。結局その方法をやめて、D3.jsのpathメソッドやtopojsonなどで描画する地形の座標を解析して、Three.jsのオブジェク
iOS で click イベントがわけのわからない動作をする件について - Qiita
iPhone や iPad などでも、 JavaScript の click イベントは基本的に有効です。 しかし、これらのデバイスで click イベントを拾おうとすると、うまくいかないことがあります。 このあたり、結構わけのわからない仕様になっているので、順を追って説明します。 なお、以下の説明では jQuery 1.9以上の使用を前提としています。 どういうときにうまくいかないか とりあえず、以下のHTMLを前提とします。 ... <body> <p id="child1">...</p> <p id="child2">...</p> </body> ...
結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita
var request = [ { url: 'hoge00.json', params: { hoge: 123, huga: 456 } }, { url: 'hoge01.json', params: { hoge: 246, huga: 912 } }, { url: 'hoge02.json', params: { hoge: 369, huga: 1368 } }, { url: 'hoge03.json', params: { hoge: 492, huga: 1824 } }, { url: 'hoge04.json', params: { hoge: 615, huga: 2280 } } ]; var results = []; var doneCount = 0; for (var i = 0; i <= request.length; i++) { $.ajax({
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
JavaScript ファイルに動的にパラメータを渡す方法
<script> var foo = "{$foo}"; var bar = "{$bar}"; </script> <script src="/js/hoge.js"></script> よくある簡単なパターンですが、最もメンテナンスがしにくいです（経験上）。 良くないところは、 ・渡したいパラメータが JavaScript のグローバル変数になる。 ・記述する順番に気を付けなければならない。 ・JavaScript と PHP（Smarty）が分離できない。 ・script タグが２つあってカッコワルイ（超重要！！）。 です。 後述のパターン２～４を検討した方が良いです。
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
ひらがなをカタカナに一括変換する方法 - JavaScript TIPSふぁくとりー
《2017年6月13日 12:00 PM 公開/更新》 ひらがなをカタカナに一括変換する方法 [計算・変換] JavaScriptを使えば平仮名(ひらがな)を片仮名(カタカナ)を相互に一括変換するのも簡単です。ユーザが入力したフリガナ文字列を「カタカナ」か「ひらがな」のどちらかに統一する必要があるなどの場合に便利です。「カタカナ」と「ひらがな」は文字コードの並び順が同じなので、単純に足し引きするだけで相互に変換できます。JavaScriptで正規表現を使えば、文字列中に含まれる「ひらがな」や「カタカナ」だけを対象にして簡単に揃えられます。 平仮名(ひらがな)と片仮名(カタカナ)を相互に一括変換できると便利 平仮名(ひらがな)と片仮名(カタカナ)は、0x60を足し引きすれば相互変換できる 正規表現を使って、平仮名(ひらがな)を片仮名(カタカナ)に一括変換する方法 正規表現を使って、片仮名(カ
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
JavaScript内の CDATA → 文字列配列 変換ツール
Firefox 17から無効となるE4X。 Greasemonkeyスクリプト内でCDATAを使用している方も多いと思います。(私もその一人でした) そんな方のために、CDATAを文字列の配列に変換するスクリプトを作りました。 変換サンプル var hoge=<><![CDATA[ <pre class="hoge" id='fuga'> hoge </pre> ]]></>.toString(); var fuga=<><![CDATA[<pre class="hogehoge" id='fugafuga'> fuga </pre>]]></>; var fuga=<><![CDATA[<pre class="bar" id='bar'>bar</pre>]]></>.toString(); var hoge=['<pre class="hoge" id=\'fuga\'>', ' ho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
How do I create a GUID / UUID?
Google AnalyticsのトラッキングIDをJavaScriptから取得する - Qiita
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
Chart.js
