[B! javascript] hideharaのブックマーク

【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 でローカルイ

hidehara 2022/09/01

npm install terser && npx terser -c -m -o file.min.js file.js でつかえる。うまくうごいた！

リンク

何故くそややこしいReactを勉強しないといけないのか？ - Qiita

逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。自分もそういうダメグラマーの一人でした。だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの3大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT

hidehara 2021/11/05

React 楽しそうって思えた！

javascript

リンク

ブラウザで動画編集! ffmpeg.wasmの活用方法紹介 | さくらのナレッジ

こんにちは!テリーです。コロナのワクチンができたかも!?といううれしいニュースが話題になりましたね。自宅引きこもり生活もそろそろ終わりが見えてきたでしょうか。多くの芸能人がYouTubeにチャンネルを開設してくれたおかげで、入浴中に10分程度のお気に入りチャンネルを毎日見る習慣ができてしまいました。自分もヒカキンのようなYouTuberになって一儲けしてやろうと思い立ち、スマホで撮影してみましたが、編集の大変さでギブアップしてしまいました。オンラインで動画編集して、誰かに作業を手伝ってもらったり、アドバイスしてほしいですよね。そこで今回は、ブラウザで動画編集するのに役立つ最新技術をご紹介します。今回紹介する技術 rnnoise-wasm ffmpeg.wasm wasmとは wasmはWebAssemblyの略称または拡張子で、ワズムまたはワスムと読みます。WebAssemblyとは、

hidehara 2021/01/07

wasm凄い！ ffmpeg がブラウザで動いちゃう！？サーバー側にデータあげてないのがいいねぇ

リンク

JavaScript Primer - 迷わないための入門書 #jsprimer

JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるように書かれています。初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは﹁はじめに﹂から読んでみてください。書籍版このウェブサイトの内容はアスキードワンゴから書籍として出版されています。書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。書籍版は次のサイトから購入できます。 Amazon 達人出版会︵電子書籍版

hidehara 2020/10/08

これ読破して身に付けたいわ

リンク

JavaScript Primer - 迷わないための入門書

非同期処理:Promise/Async Function この章ではJavaScriptの非同期処理について学んでいきます。非同期処理はJavaScriptにおけるとても重要な概念です。また、ブラウザやNode.jsなどのAPIには非同期処理でしか扱えないものもあるため、非同期処理を避けることはできません。 JavaScriptには非同期処理を扱うためのPromiseというビルトインオブジェクト、さらにはAsync Functionと呼ばれる構文的なサポートがあります。この章では非同期処理とはどのようなものかという話から、非同期処理での例外処理、非同期処理の扱い方を見ていきます。同期処理多くのプログラミング言語にはコードの評価の仕方として、同期処理︵sync︶と非同期処理︵async︶という大きな分類があります。今まで書いていたコードは同期処理と呼ばれているものです。同期処理

hidehara 2020/10/08

この JS primer 書籍すげーな。 sync と async の話をベースに Promise まで

javascript

リンク

JavaScriptの「コールバック関数」とは一体なんなのか

近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript︵最近ではTypeScriptも︶から学び始めるなんて昔ではなかなか考えられなかったことです。そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。コールバック関数ってなんなんだコールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります‥ setTimeout(function() { console.log('He

hidehara 2020/10/08

とてもすっきり理解できた setTimeout, setInterval などから Promise まで

リンク

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もパワフルになったその分ユーザーの要求も増えるやることが増えると処理は遅くなる遅いページは見向きもされないモバイル当たり前の世界だ

hidehara 2020/10/01

JS / API / Markup で JAMstackと呼ぶのか。ああ、これだよ。20年前には手作業だったやつの解決方法は。たぶんCMSの80%は置き換え、世のWAFの仕事を奪えるぜ！ ●考え方 ●infrastructure ●development ●webサービス ●webデザイン ●security ●javascript

リンク

Greative

Greative is Great Creative

hidehara 2018/08/21

SPA : Single Page Application 面白そう。このガイドブック、SPA始める前に一読すると良さそう。React とか名前きいたことあるぐらいの人向けかなと。 ●javascript ●Web

リンク

PDF.js の導入方法と苦労した話

こんにちは。島根支社の原田です。 JavaScript で PDF を表示する際にライブラリとして PDF.js が話題にあがると思います。 PDF.js は名前の通り JavaScript で実装されているライブラリです。 HTML5の技術を使っているため、最新のブラウザであればほぼ問題無く使うことができます。本稿では、PDF.js を利用した PDF の表示までの導入部分と、実装で苦労した話をしていきます。下準備最初に、プロジェクトのディレクトリを作成し、npminit します。 $ mkdir fenrir-pdfjs $ cd fenrir-pdfjs $ npminit 次に、最低限必要なパッケージをインストールします。 $ npm install --save-dev browserify $ npm install --save-dev pdfjs-dist こ

hidehara 2016/10/13

PDF.js 利用の日本語エントリー

javascript

リンク

パーフェクトJavaScript

2011年9月23日紙版発売 2014年11月1日電子版発売井上誠一郎，土江拓郎，浜辺将太　著 B5変形判／544ページ定価3,520円︵本体3,200円＋税10%︶ ISBN 978-4-7741-4813-7 Gihyo Direct Amazon 楽天ブックス丸善ジュンク堂書店ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表などこの本の概要1冊で言語仕様から最新の技術までを網羅した内容です。本書はJavaScriptで本格的なWebアプリケーションを作りたい人を対象に，前半でJavaScriptの言語仕様を掘り下げて解説し，後半で今求められるJavaScriptの応用分野として，クライアントサイドJavaScript，HTML5，We

hidehara 2016/04/19

パーフェクトシリーズいいかも。まだ最初しか読んでないけど。翻訳本じゃないのに、この詳細さは好きかも？

リンク

http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_marker_clusterer.html

hidehara 2016/04/08

Google の JS向けライブラリ MarkerClusterer の利用説明

リンク

Googleマップをイラストマップみたいにしたい。

サイト制作において、アクセスマップなどの地図の表示はどうしてますか？﹁Google MapsAPI﹂を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。記事中に出てくる画像は2012.3現在のもののため、現在のGoogle MapsAPIでの表示とは異なりますので注意です…X(。リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました︵2015.7.20追記︶。まずはしっかり抑えておきたい﹁Google MapsAPIの基本﹂から。基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google MapsAPIの基本 Google マップはGoogle API キーを発

hidehara 2016/04/07

おぉぉー、このサイトの情報量はすごい。カスタムしたい時の情報が山盛り１ページにまとめられてて便利。

リンク

マップタイプを設定する | Google Maps JavaScript API入門

Google MapsAPIでは複数のマップタイプが標準で用意されています。ここでは地図を表示する時に使用するマップタイプを設定する方法について解説します。 1.地図の作成時にマップタイプを設定する 2.後からマップタイプを設定する 3.サンプルコード地図の作成時にマップタイプを設定する地図でマップタイプを設定する方法は2つあります。地図を作成時に指定する方法と、作成後に別のマップタイプを設定する方法です。地図を作成する時にマップタイプを指定するには、中心座標やズームレベルと同じようにマップタイプを表すmapTypeIdプロパティに値を設定します。設定できる値はgoogle.maps.MapTypeIdクラスで定義されており、次の4つの中から1つ指定します。 ROADMAP 道路や建物などが表示される地図です SATELLITE衛星写真を使った地図です HYBRID ROADMA

hidehara 2016/04/07

マップタイプは 4つ

リンク

Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。 - Qiita

Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。JavaScript Google MapsAPI クロージャを利用する事で目的の動作を行えるみたい。まずクロージャが何者かを知る必要があり、以下のサイトがすごいわかりやすかった。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures Googleのドキュメントを読み解く。 Googleのデベロッパーサイトに、ソースコード付きで記載があった。これも、読んでいてすごいわかりやすかった。 https://developers.google.com/maps/documentation/javascript/events?hl=ja#EventClosures せっかくなので自作のサンプルコード（抜粋 & 簡略

hidehara 2016/04/07

リンク

クロージャ - 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 を使用

hidehara 2016/04/07

JSのクロージャー、雰囲気で使ってた以上に深いみたい。。

javascript

リンク

関数から呼び出し元へ値を返す

関数の中で return 文を使用することで呼び出し元へ値を返すことができます。また必要なければ return 文を実行するときに戻り値を省略して呼び出し元へ処理を戻すこともできます。ここでは JavaScript にて関数から呼び出し元へ値を返す方法について解説します。

hidehara 2016/03/19

undefine 遭遇しまくってる！

javascript

リンク

regex101: build, test, and debug regex

An explanation of your regex will be automatically generated as you type.

hidehara 2016/03/13

正規表現のチェックにいい！カラーリングがきれいなので、よくわかる

リンク

働クリッカー

働クリッカーってどんなゲーム？一時期一世を風靡した、ブラウザゲーム﹃クッキークリッカー﹄を元ネタにした、クリックゲームです。操作方法も簡単。とにかくクリックしてクリックしてクリックするだけ！ ……ではないのがこのゲーム。Cキーを押してコンソールを呼び出し、チートコードを叩き込んでやりましょう！普通のクリックゲームとして遊ぶもよし、チートコードで超高速クリアタイムを叩き出すもよしの、プログラミング学習ゲームです。チートコードの書き方働クリッカーで使用するチートコードは、 JavaScript というプログラミング言語で記述します。 JavaScript ってなんだかよくわからない……って人は、コンソール画面右上の？アイコンをクリック！リファレンスの下にサンプルコードがついていますから、それを元に、改造してみましょう。働クリッカーを利用してプログラミング体験をさせる方へ働クリッカ

hidehara 2016/03/13

高校生がプログラム入門するのにヒットしそうな環境。ライセンスも良いなぁ。深く考えずにやってみて5秒はきった。。。

リンク

長文日記

hidehara 2016/03/12

日本でも、こんな凄い学校が始まってるのかぁ。ロージーの教材、触ってみよう。

リンク

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

hidehara 2016/02/26

これ真似たら、すぐに環境作れそう

リンク

はてなブックマーク

タグ

関連タグで絞り込む (42)

javascriptに関するhideharaのブックマーク (54)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス