「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

対象読者 本記事はタイトルの通り、javascriptという身近な言語で関数型プログラミングのエッセンスを概要レベルで学びたい人向けの内容です。本気で「関数型」を追求している方にとっては物足りたいどころかツッコミどころも多いかと思いますが何卒ご容赦ください。 しかし一方で、「関数型って最近聞くけどどういうものなんだろう？」と思っている方々にとっては、『明日から使える』レベルで実践的な内容になるように心がけています。 そもそも関数型って？ 2019/08/25 コメントで頂いたご指摘を元に修正しました。どういう形で修正させて頂くか迷ったのですが、ここでは「ざっくり理解する」に主眼を置いた表現を目指すことにいたしました。キチンとした定義を勉強したい方はコメント欄をご参照ください。 関数型言語や関数型プログラミングの定義を厳密に理解しようとするとやや難しい話になるので、ここではざっくりと、関数(

現在、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がわからない?偶然！わたしもー わたし 「あれ、このエレメントどうやって取り出すんやろ・・・せや、console.log(this)してみよ・・・」 わたし 「あれ？ undefined? なんでや？ 3行上で同じことやるとちゃんと表示されるやん・・・」 ... .... ..... ...... わたし 「なんでやねん！？thisわけわからんわ！？」 という状況に直面したので、JavaScriptのthisをちゃんと知っておこうと思い、アウトプットもかねて記事を書くことにします。 thisとは thisとは、thisが所属している関数を実行するオブジェクトのことである。 ... ... ...🤔 🤔 🤔 ？？？ (大丈夫、書いてる私も意味わかってないで） thisには２パターンある thisには２パターンあります。どこで使うかによって、thisが指す内

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこしググると見解として、 HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。 https://allabout.co.jp/gm/gc/380498/2/ などと記載されていて、なるほどと思ったのですが、 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に認定されています。

こちらの記事は6 things I’ve learned in my first 6 months using serverlessの和訳になります。 サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。 10月に行われたServerlessconfの後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は　Python Flask appにLambdaを導入するのに必死でしたが、そのおかげでより良い方法を思いつきました。 そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。 レッスン１　Pythonの使用は避けましょう Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWeb

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？　何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び

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:

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、@yoheiMuneです。 JS界隈だとJSONフォーマットが主流ですが、最近はyamlというフォーマットも使うようになりました。今日はYamlについてブログを書きたいと思います。 目次 Yamlとは Yamlとはデータ構造の一つで、JSONやXMLと同じくデータを構造で表現します。例えば以下のような感じです。 # ユーザー定義だよー user: name: Yohei favorites: - Ramen - Tennis 上記のようにYamlではデータ構造をインデントで表現し、また-などの記号を用いて表現します。JSONやXMLに比べて記号が少なく人間にも読みやすいというのがポイントです。またJSONとの違いとして「コメントが書ける」というのも大きなポイントかなと思います。 また、Yamlは古くからある定義のようで、最近だとDockerやCircleCIやpm2など色々と使

そもそも社内勉強会で喋るというのが初だったかも。 Electron early 2019 from Masahiro Kondoh www.slideshare.net 趣旨としては、 Electron 熟成してきてるよ クロスプラットフォーム開発大変だけど Electron はけっこう手軽 PWA の方が流行るかもしれないけどねー という感じです 簡単なハンズオンもやりました。 WebView を使うサンプルを作ってみる 独自の Menu を追加してみる WebAPI からデータを取得してレンダリングしてみる 先日の Vue アプリの Electron 化もデモしました。 blog.kondoumh.com Main process 経由で OS ネイティブのプログラムと Web 画面の相互運用ができることに興味を示した人がいました。

2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、

マーケティングテクノロジーの情報やノウハウ・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の導入によって、それが変わろうとしています。 ItreableとIterator JavaScriptにおいて、繰り返し可能なオブジェクトのことをIterable（反復可能）と言います。Iterableの代表例としてはArrayやMapがあります。これらは複数の値を持つので、反復可能と言えます。 IterableなオブジェクトはIterator（反復子）を持ちます。IteratorはIterable[Symbol.iterator]()で取得可能です。 const array = [1, 2, 3]; const iterator

eslintのeslint:recommendedとgoogleとairbnbとstandardの違い ありそうで無かったeslintのconfig比較表です。 2017/8/3現在、下記バージョンでの調査となっています。 - eslint: 4.3.0 - eslint-config-google: 0.9.1 - eslint-config-airbnb-base: 11.3.1 - eslint-config-standard: 10.2.1 Possible Errors rule eslint: recommended google airbnb standard