【Arch Linux】ジェルからJavaScriptをminifyしたい - j-kyodaのつぶやき
シェルスクリプトの中でしたいので、コマンドラインからシンプル呼べるものが欲しかった。 ES2015に対応しててほしい。 圧縮率も気にしない。 node, npmのインストールは、避けられなさそうなのでよいとして、 モジュールをグローバルインストールしたくない。 調べてみると、minifiyツールは、terserを使うのがよさげ、 npxコマンドを利用すると、ローカルインストールのパッケージをコマンドラインから呼べそう。 インストール npm install terser minifi npx terser -c -m -o build/js/something.min.js build/js/something.js よし、きた。 求めよ、されば与えられん。 先人たちに、感謝。 参考 2019年のJavaScript minifier "terser" - Qiita npm でローカルイ
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT
ブラウザで動画編集! ffmpeg.wasmの活用方法紹介 | さくらのナレッジ
こんにちは! テリーです。コロナのワクチンができたかも!?といううれしいニュースが話題になりましたね。自宅引きこもり生活もそろそろ終わりが見えてきたでしょうか。多くの芸能人がYouTubeにチャンネルを開設してくれたおかげで、入浴中に10分程度のお気に入りチャンネルを毎日見る習慣ができてしまいました。自分もヒカキンのようなYouTuberになって一儲けしてやろうと思い立ち、スマホで撮影してみましたが、編集の大変さでギブアップしてしまいました。オンラインで動画編集して、誰かに作業を手伝ってもらったり、アドバイスしてほしいですよね。そこで今回は、ブラウザで動画編集するのに役立つ最新技術をご紹介します。 今回紹介する技術 rnnoise-wasm ffmpeg.wasm wasmとは wasmはWebAssemblyの略称または拡張子で、ワズムまたはワスムと読みます。WebAssemblyとは、
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
JavaScript Primer - 迷わないための入門書
非同期処理:Promise/Async Function この章ではJavaScriptの非同期処理について学んでいきます。 非同期処理はJavaScriptにおけるとても重要な概念です。 また、ブラウザやNode.jsなどのAPIには非同期処理でしか扱えないものもあるため、非同期処理を避けることはできません。 JavaScriptには非同期処理を扱うためのPromiseというビルトインオブジェクト、さらにはAsync Functionと呼ばれる構文的なサポートがあります。 この章では非同期処理とはどのようなものかという話から、非同期処理での例外処理、非同期処理の扱い方を見ていきます。 同期処理 多くのプログラミング言語にはコードの評価の仕方として、同期処理（sync）と非同期処理（async）という大きな分類があります。 今まで書いていたコードは同期処理と呼ばれているものです。 同期処理
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
Modern Web Development on the JAMstack を読んでまとめた - console.lealog();
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
PDF.js の導入方法と苦労した話
こんにちは。 島根支社の原田です。 JavaScript で PDF を表示する際にライブラリとして PDF.js が話題にあがると思います。 PDF.js は名前の通り JavaScript で実装されているライブラリです。 HTML5 の技術を使っているため、最新のブラウザであればほぼ問題無く使うことができます。 本稿では、PDF.js を利用した PDF の表示までの導入部分と、実装で苦労した話をしていきます。 下準備 最初に、プロジェクトのディレクトリを作成し、npm init します。 $ mkdir fenrir-pdfjs $ cd fenrir-pdfjs $ npm init 次に、最低限必要なパッケージをインストールします。 $ npm install --save-dev browserify $ npm install --save-dev pdfjs-dist こ
パーフェクトJavaScript
2011年9月23日紙版発売 2014年11月1日電子版発売 井上誠一郎，土江拓郎，浜辺将太 著 B5変形判／544ページ 定価3,520円（本体3,200円＋税10%） ISBN 978-4-7741-4813-7 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle 楽天kobo 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 1冊で言語仕様から最新の技術までを網羅した内容です。本書はJavaScriptで本格的なWebアプリケーションを作りたい人を対象に，前半でJavaScriptの言語仕様を掘り下げて解説し，後半で今求められるJavaScriptの応用分野として，クライアントサイドJavaScript，HTML5，Web APIの利用，サ
MarkerClustererを使ってカテゴリ分けする - Google Maps 活用講座
説明 MarkerClusterer ライブラリを使うと大量のマーカーを簡単にコントロールすることができます。 このページでは、マーカーをカテゴリ分けして、さらにMarkerClustererを使う方法を紹介します。 マーカーのカテゴリ分け 最初にマーカーをカテゴリ分けします。コードの中では、次のようにしています。 var markers = {}; for(...) { category = data.category; var marker = createMarker({ position : latLng, title : data.title, icon : categoryIcons[data.category], description : data.description }); markers[category].push(marker); } マーカークラスターの作成
Googleマップをイラストマップみたいにしたい。
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
マップタイプを設定する | Google Maps JavaScript API入門
Google Maps APIでは複数のマップタイプが標準で用意されています。ここでは地図を表示する時に使用するマップタイプを設定する方法について解説します。 1.地図の作成時にマップタイプを設定する 2.後からマップタイプを設定する 3.サンプルコード 地図の作成時にマップタイプを設定する 地図でマップタイプを設定する方法は2つあります。地図を作成時に指定する方法と、作成後に別のマップタイプを設定する方法です。地図を作成する時にマップタイプを指定するには、中心座標やズームレベルと同じようにマップタイプを表すmapTypeIdプロパティに値を設定します。 設定できる値はgoogle.maps.MapTypeIdクラスで定義されており、次の4つの中から1つ指定します。 ROADMAP 道路や建物などが表示される地図です SATELLITE 衛星写真を使った地図です HYBRID ROADMA
Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。 - Qiita
Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。JavaScriptGoogleMapsAPI クロージャを利用する事で目的の動作を行えるみたい。 まずクロージャが何者かを知る必要があり、以下のサイトがすごいわかりやすかった。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures Googleのドキュメントを読み解く。 Googleのデベロッパーサイトに、ソースコード付きで記載があった。これも、読んでいてすごいわかりやすかった。 https://developers.google.com/maps/documentation/javascript/events?hl=ja#EventClosures せっかくなので 自作のサンプルコード（抜粋 & 簡略
クロージャ - JavaScript | MDN
function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側の関数で宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を使用
関数から呼び出し元へ値を返す
関数の中で return 文を使用することで呼び出し元へ値を返すことができます。また必要なければ return 文を実行するときに戻り値を省略して呼び出し元へ処理を戻すこともできます。ここでは JavaScript にて関数から呼び出し元へ値を返す方法について解説します。
regex101: build, test, and debug regex
An explanation of your regex will be automatically generated as you type.
働クリッカー
働クリッカーってどんなゲーム？一時期一世を風靡した、ブラウザゲーム『クッキークリッカー』を元ネタにした、クリックゲームです。 操作方法も簡単。とにかくクリックしてクリックしてクリックするだけ！ ……ではないのがこのゲーム。 C キーを押してコンソールを呼び出し、チートコードを叩き込んでやりましょう！ 普通のクリックゲームとして遊ぶもよし、チートコードで超高速クリアタイムを叩き出すもよしの、プログラミング学習ゲームです。 チートコードの書き方働クリッカーで使用するチートコードは、 JavaScript というプログラミング言語で記述します。 JavaScript ってなんだかよくわからない……って人は、コンソール画面右上の？アイコンをクリック！ リファレンスの下にサンプルコードがついていますから、それを元に、改造してみましょう。 働クリッカーを利用してプログラミング体験をさせる方へ働クリッカ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Greative
長文日記
