Promise チェーン
前置き: コールバック の章で言及した問題に戻りましょう。私たちは順次実行される一連の非同期タスクを持っています。例えば、スクリプトの読み込みです。上手くコード化するにはどうすればよいでしょう？ Promise はそのためのいくつかの方法を提供します。 この章では promise チェーンを説明します。 次のようになります: new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).t
【Javascript】ファイルのパスからファイル名や拡張子を取得したい！
どーも！ たかぽんです！ 先日ファイルのパスから拡張子を除いたファイル名をどうにかして取得したい！ ってなったので、調べてみました！ やりたいこと まず、やりたいことはファイルのパス(dir1/dir2/hoge.jpgみたいなやつ)から、"dir1/dir2/"と".jpg"を除いた"hoge"を取得したかったんです。 いろんな方法で取得できそうだったので、色々試してみました！ 早速ですが、以下にコードをはっつけておきます！ (function(){ // 入力されるオリジナルのパス const path = 'hoge/huga/hugo/filename.jpg'; console.log('original = ' + path); // hoge/huga/hugo/filename.jpg // さくっとファイルのパス、拡張子、ファイル名を取得してみる match = path
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
PromiseによるJavaScript非同期処理レシピ集
Promiseの概念はずいぶん浸透してきました。Promiseは単なる「新機能」のひとつから、もはや非同期処理における基本となりました。有志のライブラリなどもPromiseを返すのが当たり前になってきていて、コールバックでの処理はオプションであることが多くなりました。 さて、そうなってくるとPromiseの概念がどうこうというよりも、実用的なケースに対するコードスニペットがほしくなってきます。そこで今回の記事では、よくあるケースに対しての具体的解決策をいくつか提示します。 この記事について この記事では、JavaScript初心者に向けた、実用的な観点に焦点をあてて説明します。よっていつもの記事ほど正確性や厳密性はありません。 Promiseの「仕様」について詳しく知りたい場合は、MDNを読むなり、仕様書を読むなりしてください。 世界はPromiseに染まった Promise！Promis
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
JavaScript学習ロードマップ - Qiita
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
HTMLやJavaScriptを挿入できるショートコード「Insert HTML Snippet」WordPressプラグイン
Insert HTML Snippet の導入方法 管理画面の「プラグイン」⇒「新規追加」から「Insert HTML Snippet」と検索すると表示され、そこからインストールすることができます。 ダウンロード：Insert HTML Snippet Insert HTML Snippet の使用方法 プラグインを有効化すると管理画面のサイドバーに「XYZ Html」と表示され、その中の「HTML Snippets」をクリックして「HTML Snippets」ページを開きます。 ページにある「Add New HTML Snippets」をクリックすると、インサートするコード入力画面（Add HTML Snippet）に切り替わります。 「Add HTML Snippet」画面にある、「Tracking Name」にコード名をアルファベットで入力して、「HTML code」にコードを入力し
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
面倒な作業不要で、Webアプリ開発が劇的にはかどる！至高のJavaScriptライブラリ6選 - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います！ 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください！ ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ！ 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
JavaScriptからGoogleタグマネージャに登録している任意のタグを呼び出す方法 | アユダンテ株式会社
以前の記事でご紹介した「特定のページ」を指定するルールはもっとも需要の高いものだと思いますが、それと同様に「任意のタイミングでGoogleタグマネージャを呼び出す」ルールもまた必要とする方が多いものだと思います。 そこで今回は予告した通り、初心者向けの解説シリーズ第2弾として、JavaScriptを使って任意のタイミングでGoogleタグマネージャを呼び出す方法をご紹介します。 例えば「特定のJavaScriptの処理の最中や処理が終わったタイミングで、Googleタグマネージャに登録している特定のタグを配信させたい」といった場合の、設定方法などですね。 Googleタグマネージャにおける「ルール」とは？（復習） eventマクロとは 具体的なJavaScriptの記述とGoogleタグマネージャでの設定方法 【まとめ】eventマクロとJavaScriptを使ってタグを呼び出す Goog
jQueryによるフォームデータ取得方法のまとめ
jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 2012.06.19追記：テキストフィールド・テキストエリアの取得方法も追加しました。 2014.05.11追記：チェックボックスの取得方法をattr()からprop()に変更しました。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。 １．セレクトボックスの値を変更したときに取得 セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組
Parsley - The ultimate JavaScript form validation library
Parsley, the ultimate JavaScript form validation library Validating forms frontend have never been so powerful and easy. Get started today v2.9.2 Intuitive DOM API Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation. View example » Dynamic for
Mandrillを使ってJavaScriptだけでメールを送る
English ver.: Send a mail by JavaScript with Mandrill B! 59 0 0 0 このブログを置いているGitHub Pagesでは PHPとか動かすことが出来ないわけですが、 そんな状況でメールをブログ側から送りたいと思った時、 JavaScriptだけでメールを送る方法があったのでそれについて。 Mandrill Mandrill Transactional Email from MailChimp - Mandrill Mandrillというサービスがあって、このサービスのAPIを使うと JavaScriptだけでメールを送ることが出来ます。 無料だと、月に12000通まで送ることが出来て、 それ以上使いたい場合には100万通までは1000通毎$0.20、 それ以上で500万通までは$0.15/1000通、 それ以上では$0.10/1
JavaScript難読化「String.fromCharCodeメソッドを少し変形させる」
マルチドメイン対応、ビジネス仕様 高性能レンタルサーバー 【シックスコア】 9．String.fromCharCodeメソッドを少し変形させる ソース2-2で日本語の文字列を英数字に置き換え、String.fromCharCodeメソッドで元の文字に戻すやり方を紹介しました。この方法では、ファイルサイズが大きくなり過ぎることが一つの問題だったのですが、ここでひとつの対策法をご紹介します。 ファイルサイズが大きい理由の一つは、原文の日本語１文字（２バイト）に対して数字は５桁（５バイト）になっていることがあります。これを減らすことを考えます。ソース2-2をよく見ると、12300台が多いのが分かります。12354番が「あ」ですから、ひらがながこの辺りの数字であるためにそうなっているのが分かります。 そこで、単純に引数の数字をString.fromCharCodeで元に戻すのではなく、「あらかじめ
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
働クリッカーという JS を学べるゲームを作りました。
どんなゲームなの？ 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading and Playing Sound Files
要素の横幅と縦幅（高さ）を取得（paddingとborderを含む） | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
