JavaScriptのFetch APIを利用してリクエストを送信する
JavaScriptにおいて、XMLHttpRequest（XHR）に代わるAPIとして、Fetch APIというものが提供されるようになりました。XHRと同等の機能を提供しますが、Fetch APIはよりシンプルで強力です。使い方を学んでみましょう。 基本的な使い方 Fetch APIはPromiseベースの簡単なAPIです。リクエストするにはfetch(url)を呼び出すだけです。 fetch('file.txt') fetch()メソッドはPromiseを返します。PromiseはResponseオブジェクトとして解決されます。返ってきたPromiseを実際に処理してみましょう。 fetch('file.txt') .then((response) => response.text()) .then((text) => console.log(text)) .catch((error
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
Svelteを使ってみた - Qiita
JavaScriptはフレームワークについて考え直すときが来ています / Svelteを使ってみた 今回はJavaScriptのノンフレームワーク、Svelteを紹介しましょう。 また新FWかよ、もういいよ。 まあそう言わずにちょっと見てってくださいよ。 何しろあのFront-End Developer Handbook 2017でも今後伸びるって言われてますよ、これは今後も期待大ですよ！？ これまでのFWと何が違う？ JavaScriptはフレームワークについて考え直すときが来ていますになんとなく書いてあるけど、トランスパイラで変換した後のJavaScriptがフレームワークを読み込む必要がないというのが特徴です。 とりあえずHelloWorldしてみましょう。 Svelteをインストール npm install -g svelte-cli npmについては別記事などを参照。 最近のはW
javascriptプログラマのレベル10 : tech.kayac.com - KAYAC engineers' blog
週末料理をしていて足を切ってしまいました。agoです。 以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。 Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー 当時あまりコミュニティとのつきあいがなかったので、「自分のスキルの絶対位置」、「次のレベルへ行くために必要なもの」を知ることで非常に安心感を感じた記憶があります。 いま確認したところ、「JavaScriptプログラマのレベル10」はないようなので書いてみました。 Perlプログラマ Schemeプログラマ Rubyプログラマ （本家に直接リンクできるURLが無かったため、参照ページへリンクしています） haskellプログラマ 堕落したCプログラマ HTML知識レベル プログラマレベル 企業法務 JavaScriptの業務スキルレベル 判別表 （５
JavaScriptの「this」を「HUNTER×HUNTER」で理解 - Qiita
本記事は下記を参考に漫画、「HUNTER×HUNTER」に置き換えながら説明する内容となっております。誤字脱字、間違い等ありましたらコメントを頂けますと幸いでございます。 JavaScriptの「this」は「4種類」？？ javascriptの「this」は「念能力者」？？ この記事ではベースとなる４種類の「this」を念能力者として紹介します。 念能力者を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン（キャラの自己紹介） ２：関数呼び出しパターン（パクノダで考えよう） ３：コンストラクタ呼び出しパターン（具現化系能力者で考えよう） ４：apply,call呼び出しパターン（クロロ=ルシルフルで考えよう） メソッド呼び出しパターン（キャラの自己紹介） メソッド呼び出しパターンはキャラの自己紹介 var ゴン=フリークス = { 系統: '強
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
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
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
JavaScriptだけでサーバーの日時を取得する方法のメモ
JavaScriptでサーバに設定されている日時を取得する方法を忘れないようにメモっておきます。PHPとかなら簡単なはずなんですけどね。結構、手こずったので色々備忘録的に書いておこうと思います。同じような課題に出くわした方の参考になれば幸いです。 ただ、JavaScriptはあまり得意ではないので、勉強しながらやってます。以下、あくまでご参考程度に。より良い方法があったら、ぜひご教授いただきたいです。 やりたいこと まずは、やりたいことの説明から。やりたかったのは以下のようなことです： フォームで年月日の入力を3つのドロップダウンに分けて設置する その際、「年」のオプションを現在の年をベースに自動で書き出したい PHPなどのサーバサイド言語を使えない環境で実装する たとえば、2017年には2015年から2019年を選択肢として表示していたものを、2018年になったらコードの更新なしに201
[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はNodeJSやフロントJSで利用可能な、EventEmitterを使った、イベント駆動な実装方法をブログに書きたいと思います。 目次 本記事を試すための環境 この記事の内容は、nodejsで動作します。新し目のバージョンでお試しください（僕の環境ではv6.2.2で動作確認しています）。 また、BabelでフロントエンドビルドやWebpackでフロントエンドビルドを使えば、フロントエンドでもEventEmitterを利用可能です（いくつかのプロジェクトで利用されているのを見かけたことがあります）。 EventEmitterとは EventEmitterは直訳の通り、イベントを発火することができる機能で、主に「イベントを発火する人」と「イベントを受け取る人」の大きく2つに使い方が分かれます。具体的には、 イベントを発火する人 関数名 説明 という感
![[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebe6155d1a3add398b3612821db040e9cb671b95/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F474.jpg)
React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita
ギークハウス Advent Calendar 2016の12月２２日の記事です。 他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。 なぜVue.js？？ 普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん？？ Webpack? JSX?? Flux?? Redux?? 「落ち着け！とりあえず日本語でOK」状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ
[フロントエンド] Webページで編集した内容をJavascriptから動的にダウンロードする - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はWebページで色々と編集した内容について、Javascriptを用いてその内容を動的にダウンロードする方法をブログに書きたいと思います。 目次 デモ こんな感じです。以下のテキストエリア内に書いた内容について、ボタンを押すとテキストファイルとしてダウンロードすることができます。 テキストファイルとしてダウンロードする Javascriptから動的にダウンロードする実装方法 上記の実装は以下のように行うことができます。 HTML <textarea id="content"></textarea><br> <button id="download">テキストファイルとしてダウンロードする</button> Javascript // クリック時の動作を指定する var btn = document.getElementById('download
![[フロントエンド] Webページで編集した内容をJavascriptから動的にダウンロードする - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/12e1c036d0c20eb6871f751212a748f2ae2ce95c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F470.jpg)
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
Google製のWebプログラミング言語 Dart を試してみる | DevelopersIO
Dart（ダート）とは？ Wikipediaによると、 Dart（ダート もしくはダーツ。当初は Dash と呼ばれていた）はグーグルによって開発されたウェブ向けのプログラミング言語である。2011年10月10日～12日に開催された デンマークのオーフスで開催された「GOTOカンファレンス」で公開された。 この言語は、ウェブブラウザー組み込みのスクリプト言語であるJavaScriptの代替となることを目的に作られた。 Dart｜Wikipedia より引用 と、あります。当初はJavaScriptと置き換わるような構想だった様ですが、 Googleは、DartをJavaScriptの直接的なコンペティタと見なすことをやめ、位置づけをJavaScriptへコンパイルされる言語と変えて、TypeScriptやCoffeeScriptなどと同列に置いた。 GoogleのDartプログラミング言語
フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ
サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。 開発進行中も本番モードでの運用時も、ソフトウェアアプリケーションにおいてロギングは大切です。 サーバーを運用しているなら、サーバーサイドの言語選択にかかわりなく無数のライブラリーを利用でき、広範に及ぶストレージメカニズムやログ出力を扱う際の各種ツールも使えます。 しかし、クライアント側アプリケーションとなるとロギングは見過ごされがちで、利用できる手法もかなり限られています。 この記事ではクライアント側アプリケーション、特にJavaScriptを中心としたシングルページアプリケーション（SPA）におけるロギングの実装方法を紹介します。 コンソール エラーとメッセージのロギング方法でもっとも一般的かつ分かりやすいのは、おそらくコンソールの使
addEventListener の第3引数が拡張されてるという話 - Qiita
Webアプリケーションのお話です。 イベントハンドラを登録する addEventListener メソッドの引数は以下の形で覚えている人が大半だと思う。 element.addEventListener('click', myClickHandler, useCapture); 参考記事 EventListenerOptions これまでの第3引数 useCapture は boolean 型をとり、イベントハンドラがキャプチャフェーズ or バブリングフェーズのどちらで処理されるかを制御するものだった。 この第3引数が Object 型も受け付けるようになり、現状、それぞれ boolean 型で once , passive , capture パラメータをとる。 once true でイベントハンドラが1度だけ処理される。 例えば Window の load イベントハンドラは通常1度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」
DeNA Engineering - DeNAエンジニアのポータルサイト
https://qiita.com/inoinojp/items/e368589c7787823dce4c