【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際
![【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bf449aecedd4337da846b0aadc121a2a1f5652e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND00NENRU21GMllWTmpjbWx3ZE9PQWtlYWNyT2FYcGVhY3F1YVlqdU9BZ1ZzZ1lYTjVibU1nTFNCaGQyRnBkQ0JkNDRHVjQ0S1Q0NEdNNXEyNzVMMlQ0NEduNTVtNjZLYUw0NEdWNDRLTUxpNHUmdHh0LWNvbG9yPSUyMzMzMyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NCZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249Y2VudGVyJTJDbWlkZGxlJnM9MDQxOGFmOThjYjQ3NmY0NTJjNzNkMWUyZThmNmQxOWU%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RR2x0Y0d4ZmN3JnR4dC1jb2xvcj0lMjMzMzMmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NDUmdHh0LWFsaWduPXJpZ2h0JTJDYm90dG9tJnM9NTYzMWFlYzJkN2M0MWMwYTI1MDRiZWZhOTk2OTliNGU%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Db39e38892a91f7de69ef1909da2cf5f1)
忙しい人のためのjavascriptでざっくり理解する関数型 - Qiita
対象読者 本記事はタイトルの通り、javascriptという身近な言語で関数型プログラミングのエッセンスを概要レベルで学びたい人向けの内容です。本気で「関数型」を追求している方にとっては物足りたいどころかツッコミどころも多いかと思いますが何卒ご容赦ください。 しかし一方で、「関数型って最近聞くけどどういうものなんだろう？」と思っている方々にとっては、『明日から使える』レベルで実践的な内容になるように心がけています。 そもそも関数型って？ 2019/08/25 コメントで頂いたご指摘を元に修正しました。どういう形で修正させて頂くか迷ったのですが、ここでは「ざっくり理解する」に主眼を置いた表現を目指すことにいたしました。キチンとした定義を勉強したい方はコメント欄をご参照ください。 関数型言語や関数型プログラミングの定義を厳密に理解しようとするとやや難しい話になるので、ここではざっくりと、関数(
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
JavaScriptのthisがよくわからないので徹底的に調べてできるだけわかりやすく解説してみる - Qiita
JavaScriptのthisがわからない?偶然！わたしもー わたし 「あれ、このエレメントどうやって取り出すんやろ・・・せや、console.log(this)してみよ・・・」 わたし 「あれ？ undefined? なんでや？ 3行上で同じことやるとちゃんと表示されるやん・・・」 ... .... ..... ...... わたし 「なんでやねん！？thisわけわからんわ！？」 という状況に直面したので、JavaScriptのthisをちゃんと知っておこうと思い、アウトプットもかねて記事を書くことにします。 thisとは thisとは、thisが所属している関数を実行するオブジェクトのことである。 ... ... ...🤔 🤔 🤔 ？？？ (大丈夫、書いてる私も意味わかってないで） thisには２パターンある thisには２パターンあります。どこで使うかによって、thisが指す内
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？ - Qiita
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？HTMLJavaScript 調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこしググると見解として、 HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。 https://allabout.co.jp/gm/gc/380498/2/ などと記載されていて、なるほどと思ったのですが、 Qiitaのページも含め、ざっと確認したページではJSライブラリはすべてheadに書かれており、 なぜ「はじめからJSを全部body
JavaScriptで数値の区切り文字を使いたい物語 - Qiita
桁数の多い数値をプログラム中に書く場合は、1_234_567のように間に区切りを入れることで桁数を分かりやすくしたいことがありますよね。実際、既に多くのプログラミング言語でこれが可能です。Java, Kotlin, Swift, Perl, Ruby, Rustなどの言語で1_234_567が可能です。また、C++は1'234'567のように_ではなく'を用いて区切るのが特徴的です。 JavaScriptにおいてはまだこれは不可能ですが、できるようにしようという提案は古くから知られていました。それがnumeric separatorというプロポーザル（提案）です。日本語に直すと「数値区切り文字」とかでしょうが、何となくしっくり来ないのでこの記事ではnumeric separatorと呼ぶことにします。当該のプロポーザルは2017年4月に起草され、同5月にはStage 1に認定されています。
サーバーレスを使用して最初の６ヶ月で学んだ６つのこと - Qiita
こちらの記事は6 things I’ve learned in my first 6 months using serverlessの和訳になります。 サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。 10月に行われたServerlessconfの後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は Python Flask appにLambdaを導入するのに必死でしたが、そのおかげでより良い方法を思いつきました。 そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。 レッスン１ Pythonの使用は避けましょう Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWeb
if文の条件式が複数あるときのスマートな書き方
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
今からでも追いつける！ JavaScriptの「標準ライブラリ」を学ぶ - Qiita
標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？ 何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
JavaScriptの関数名の全て - Qiita
JavaScriptに限った話ではありませんが、関数というのは名前を持っていたり持っていなかったりします。関数名は普通はプログラムの読みやすさくらいにしか影響しませんが、JavaScriptでは必ずしもそうではありません。 例えばReactで関数コンポーネントを使う場合は関数名がコンポーネント名となり、React用開発者ツールなどで見ることができデバッグに役立ちます。また、Gulp v4もエクスポートした関数名がタスク名となります。 関数名は、関数オブジェクトのnameプロパティで取得できます。 function foo() { console.log('foo!'); } console.log(foo.name); // "foo"
[フロントエンド] Yamlというデータ構造に入門する - YoheiM .NET
こんにちは、@yoheiMuneです。 JS界隈だとJSONフォーマットが主流ですが、最近はyamlというフォーマットも使うようになりました。今日はYamlについてブログを書きたいと思います。 目次 Yamlとは Yamlとはデータ構造の一つで、JSONやXMLと同じくデータを構造で表現します。例えば以下のような感じです。 # ユーザー定義だよー user: name: Yohei favorites: - Ramen - Tennis 上記のようにYamlではデータ構造をインデントで表現し、また-などの記号を用いて表現します。JSONやXMLに比べて記号が少なく人間にも読みやすいというのがポイントです。またJSONとの違いとして「コメントが書ける」というのも大きなポイントかなと思います。 また、Yamlは古くからある定義のようで、最近だとDockerやCircleCIやpm2など色々と使
![[フロントエンド] Yamlというデータ構造に入門する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/64ad42ba8faaa1978c3a858103edecb230c6c578/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F485.jpg)
社内勉強会で Electron の話をしました - kondoumh のブログ
そもそも社内勉強会で喋るというのが初だったかも。 Electron early 2019 from Masahiro Kondoh www.slideshare.net 趣旨としては、 Electron 熟成してきてるよ クロスプラットフォーム開発大変だけど Electron はけっこう手軽 PWA の方が流行るかもしれないけどねー という感じです 簡単なハンズオンもやりました。 WebView を使うサンプルを作ってみる 独自の Menu を追加してみる WebAPI からデータを取得してレンダリングしてみる 先日の Vue アプリの Electron 化もデモしました。 blog.kondoumh.com Main process 経由で OS ネイティブのプログラムと Web 画面の相互運用ができることに興味を示した人がいました。
JavaScript/Vue.jsアプリのパフォーマンス改善 一休.comスマートフォンサイトを高速化するためにやったこと
2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、
JavaScriptで正規表現文字列をエスケープする方法 | 綺麗に死ぬITエンジニア
JavaScriptで正規表現を利用する際、生成したRegExpオブジェクトが思いどおりに動かない場合があります。 それは、もしかしたら正規表現で利用する特別な文字列がエスケープされていないのが原因かもしれません。 時々、正規表現へ動的な文字列を突っ込みたくなる時があるので、備忘録として正規表現文字列をエスケープする方法を記載します。 利用ケースJavaScriptで文字列を正規表現RegExpを使って検索する場合、検索したい文字列に正規表現で利用する特別な文字が含まれていると正しく検索できません。 例えば、以下のような場合です。 var searchText = '詳しくは[こちら](https://s8a.jp/?tag=JavaScript)。'; var url = 'https://s8a.jp/?tag=JavaScript'; var regexp = new RegExp(
Adobe Analytics: カスタムリンク計測を1行で書く
マーケティングテクノロジーの情報やノウハウ・TIPS、エクスチュア社の情報を発信。【ブログネタ募集】ご興味のある分野を教えてください！ご要望の内容を記事に起こします！メニューの「ブログへの」リクエストよりお送りください。 menu こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。 Adobe Analytics のリンク計測用関数のs.tlの四番目の引数である variable override ですが、 あまり使われてないというか知られてないようですね。 連想配列形式で変数を渡せるので、コードが1行でスッキリ書けるので私はよく使ってます。 //custom link tracking s.tl(true, "o", "customlink", {linkTrackVars:"events,eVar1", linkTrackEvents:"event1", eVar1:"f
JavaScriptのIteratorとGeneratorを使って反復処理を書く
反復処理はプログラムの基本です。プログラミング言語がどの程度反復処理を補助してくれるかによって、プログラミングの快適性は大きく変わります。 JavaScriptは反復処理に関しては、どちらかというと遅れている言語でした。ですが、IteratorとGeneratorの導入によって、それが変わろうとしています。 ItreableとIterator JavaScriptにおいて、繰り返し可能なオブジェクトのことをIterable（反復可能）と言います。Iterableの代表例としてはArrayやMapがあります。これらは複数の値を持つので、反復可能と言えます。 IterableなオブジェクトはIterator（反復子）を持ちます。IteratorはIterable[Symbol.iterator]()で取得可能です。 const array = [1, 2, 3]; const iterator
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連番の数字の配列を作成（es2015 ver) - Qiita
JavaScript markdown-itとよく使うプラグインまとめ | nansystem
eslintの各configの違い - Qiita
