やっぱりwebpackがわからない（エピソード1）
やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド
Java の上の JavaScript エンジン Nashorn の基本 - A Memorandum
Nashorn とは Java から Nashorn を使う Java オブジェクトを渡す JavaScript の関数を Java から呼び出す JavaScript のオブジェクトを Java から呼び出す JavaScript 内で Java クラスを利用する JavaScript と Java の型 文字列 数値 配列 リストとマップ ラムダ Java クラス・パッケージのインポート JavaScript で Java インターフェースを実装する JavaScript 関数を Java インターフェースの実装として利用する スクリプトを事前コンパイルする Nashorn で REPL する jjs でシェルコマンドを使う nashorn をシェルスクリプトとして使う 例えば まとめ Nashorn とは Java7 までは JavaScript スクリプティングエンジンとして Ri
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
Google Maps JavaScript APIの使い方まとめ
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
ES2015 (ES6)についてのまとめ - Qiita
##ECMAScriptとは ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの 開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された ES2015 (ES6)とは 先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと [公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html ES2015で可能となる新たなシンタックス let・constキーワードによる変数宣言 class構文 関数の引数のデフォルトパラメータ（D
指定した範囲の整数配列の作り方 in JavaScript ES6 - 無駄と文化
この記事は原文: Array Number Ranges in JavaScript ES6 を、著作者であるDavid Arvelo氏の許可を受けて翻訳したものです。 注意 この記事の公開後、ECMAScriptの技術委員会によりリスト内包表記はES6の仕様から削除されました。 この記事はサポート予定の他の機能についても言及しているため、未編集のままにされています。 ここ数日間、私はECMAScript 6について深く掘り下げて学ぶ日々を過ごしました。ES6は、ES5と比較してとても素晴らしく、ES6が近い将来に使えるようになる事によるWebの可能性に興奮を覚えました。 実行環境がどうであれ、あなたがJavaScriptプログラマであれば(パッと見は難しく感じても)ES6の新機能を学ぶことには大きな価値があります。なぜなら、イテレータ, ジェネレータ, クラス定義, ブロックスコープ,
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
JavaScript/ウィンドウ/確認ダイアログを表示する - TAG index
確認ダイアログを表示するスクリプトです。 OKボタンとキャンセルボタンが付いたダイアログが表示されます。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ // 「OK」時の処理開始 ＋ 確認ダイアログの表示 if(window.confirm('本当にいいんですね？')){ location.href = "example_confirm.html"; // example_confirm.html へジャンプ } // 「OK」時の処理終了 // 「キャンセル」時の処理開始 else{ window.alert('キャンセルされました'); // 警告ダイアログを表示 } // 「キャンセル」時の処理終了 } // --> </scrip
JavaScriptのクロスドメイン問題対応方法
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_CrossDomainテスト</title> <script language="javascript"> <!-- var winEntPopup; //メッセージが送られたときに反応するイベントリスナー window.addEventListener("message", receiveData, false); //データを受け取る関数 function receiveData(e) { document.FormTest.bro_info.value =e.data; } //ポップアップで呼び出し function fnc_popupWindo
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
<select id="select" name="select"> <option value="0">sample</option> <option value="1">sample1</option> <option value="11">sample11</option> <option value="101">sample101</option> </select>
HTTPサーバーとWeb開発
最近では、Webアプリケーションの開発を行う上で、Ajaxはあたりまえのように使用される クライアントサイドの技術になった。 この技術により、次のようなことが実現することができ、今までにないリッチなWebアプリケーションを 開発することが可能になった。 動的なWeb画面の表現 パフォーマンスの向上 Web画面のユーザビリティー しかし、Ajaxを使用する上で必ず考慮すべき点がある。それがクロスドメインの制約である。 クロスドメインとは、下記のようにAサーバーから既に読み込んだWebページ上より、 異なるドメインのサーバー（Bサーバー）に Ajax（XMLHttpRequest）を用いてデータアクセスを行なうと、 ブラウザーのセキリュティーエラーが発生しAjax通信を行なうことができないという問題がある。
JavaScriptでGETパラメーターを取得する - Qiita
JavaScriptでGETパラメータを取得する関数。 "var getVal = getUrlVars();"とかやると、GETパラメータがObjectで入る。 /** * GETパラメータを配列にして返す * * @return パラメータのObject * */ var getUrlVars = function(){ var vars = {}; var param = location.search.substring(1).split('&'); for(var i = 0; i < param.length; i++) { var keySearch = param[i].search(/=/); var key = ''; if(keySearch != -1) key = param[i].slice(0, keySearch); var val = param[i].s
私のJavaScript情報の集め方 - Qiita
ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
「生JavaScriptで十分」な人にこそTypeScriptをおすすめしたい理由 – mzsm.me
こんにちは。 TypeScript Advent Calendar 23日目の記事となります。 昨日22日目はmizchiさんでした。 今日は、まだTypeScriptを使っていない人、特に、「普段JavaScriptをよく触っていて、altJSに興味はあるけど、いまいち新しい言語を覚えるほどのモチベーションはない」という人に向けて、僕がTypeScriptを使いはじめて感じたことを書いてみたいと思います。 筆者がTypeScriptを使い始めるまでのプログラミング言語遍歴 話を始める前に、まずは筆者がこれまでに使ってきたプログラミング言語を振り返ってみます。 JavaScript (2000〜現在) HSP (2001〜2003) PHP (2004〜2009) Python (2009〜現在) …というように、まともに触ったことがあって、それなりに使えるようになったプログラミング言語は
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tutty.info
すぐできる AngularJS
http://dhmo.wktk.so/android/android-webview%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81/