2020年は新型コロナウイルスの流行、それに伴うリモートワーク（テレワーク）やワーケーション、オンライン授業での学習といった大きな社会的変化がありました。 意図せず起きた変化ではありましたが、働き方や学び方の変化は、自分次第で何かを大きく変えられるチャンスでもあります。内閣府の調査*1によると、在宅勤務などで生じた空き時間を新たな挑戦に充て、オンライン学習でプログラミングなどIT関連の学習に取り組む社会人が増えているとのこと。 めまぐるしく変わる社会へ適応するためには、自分にとって必要な情報を見極めるだけでなく、時代と共に学び続ける姿勢も必要。新しい学びはきっとあなたの強い味方になってくれることでしょう。ちょうどオンライン学習プラットフォーム「Udemy」では、2020年12月30日（水）～2021年1月7日（木）の間、対象の講座を1,200円から受講できる新春セールを開催。講座は買い切り

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

通常現在の日時を取得する際はnew Date()が使用されることが多いがnew Date()はユーザーのデバイスの日時が取得されるためnew Date()だと都合が悪い場合がある。 例えば指定した時刻に何かを表示するためのタイマーなどは日本のサイトであれば日本の日時を基準にして実装されるためnew Date()だと意図した通りに動作しないことがある。 例えば3月14日の9時にホワイトデーのバナーをJavaScriptで表示したい場合、ユーザーのデバイスの日時が3月14日の8時になっていると指定した日時に表示されないという問題が発生する。 パソコンやスマートフォンはインターネットに接続していれば自動で時刻合わせが行われるため時間がずれることは通常は発生しないが、時刻合わせを自動にしていなかったり、逆に時刻合わせを自動にしていたため海外に行った際にその地域の時刻に変更されてしまい日本時間で表示

Takuma HANATANI2020-05-20Engineering Manager at LINE Corp. @potato4d フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。 この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 default export ではなく named export を利用すべきである理由について紹介します。 前提知識について なお、本記事は以下を前提知識として、詳細の説明を省きます。 ESModule と import / export についての基本 CommonJS module との違い esModuleInterop 周り(CJS → ESM の import については扱わないため) プロジェクトで使われている技

先日 window.open をしようとしたらポップアップブロッカーに阻まれて open することができなかった． Blocked まあ，これならよくあることなのだが，いかんせん自分の記憶では onClick のようなユーザーのアクション内で開かれた window.open は阻まれないことになってると思っていた．だからそのときも onClick のイベントハンドラ内で window.open したから大丈夫だろう，と思っていたら，見事にブロックされてしまったのでなぜだろう，となっていた． 検証 なので，検証するために 3 つのケースを用意してみた: 検証ページを用意したのであなたの環境でも試してみてね♥ 今回試すブラウザは Google Chrome を前提にしてます ケース1 const immediate = () => { window.open('https://www.goog

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

Oculus Questの予想を超えた性能の良さに感激しつつ、毎晩ライトセーバーを嬉々として振り回し続けている kouraku です。おはこんばんちわ。 さてさて今回は、モーダルを作ってみたいと思います。 これもよくライブラリにお世話になりがちなのですが、CSSでflexを使うのが当たり前になって来た昨今、要素を画面中央に配置することなど、もはや朝飯前。 表示非表示を切り替え、そこにアニメーションをつける程度であれば、わざわざライブラリを使うほどでも無いわけです。 いやむしろ、こだわったデザインや細かな動きなどの注文が来ると、ライブラリを使ったがためにエラく面倒なことをする羽目になることも多々ありますよね。 ということで、できるだけシンプルなモーダルを作りたいと思います（アニメーションは省きます）。 まずはポイントを確認 上記でも軽く触れたとおり、モーダルのコンテンツが画面中央に配置される

こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま

こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ

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:

クライアントサイドでPDF出力できればサーバ負荷軽減できていいなぁとか考えることがあると思います。 そんなときは、 bpampuch/pdfmake · GitHub に日本語フォントを導入することにより 日本語でクライアントサイドだけでPDF出力することができます。 NotoSansを使おうと思ったのですが、otf形式でttfに変換してもうまく動きませんでしたので、以下の源真ゴシックのttfファイルを利用させてもらいました。 jikasei.me ただ日本語のフォントは非常にサイズが大きく１つの太さの種類で5Mバイト以上あります。 これでは、クライアントサイドにやらして負荷を下げられればいいなという目論見よりも通信負荷の方が問題になってしまいます。 そこで、あまり使われない漢字等を省いてサブセット化して容量を減らします。 こちらを利用させてもらいました。 サブセットフォントメーカー とり

CSS は、レンダリングをブロックします。サイト表示を高速にするには、重要ではない CSS を非同期で読み込むことが効果的です。 一般的には JavaScript を使い非同期で読み込みますが、もう 1 つ方法があります。それは HTML に記述するだけの <link rel="preload"> での読み込み。 <link rel="preload">は、執筆時点で Chrome しか対応していません。 preload のブラウザ対応状況 主要ブラウザは対応予定ですが、開発が停止された IE は対応しません。IE のシェアが高い日本では、これからも <link rel="preload"> を使いにくいのが現状です。 しかし、loadCSS を使うことで全ブラウザに対応できます。 loadCSS は、Filament Group が開発した JavaScript の Polyfill で

この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

JavaScriptが誕生して2017年で22年を迎えます。 JavaScriptはそれ自体でも非常に便利ではありますが、JavaScriptを使って組み立てられた便利なプラグインが豊富にリリースされています。 2017年現在でも、日々新しいプラグインがリリースされ続けています。 そこで今回は、最近リリースされたプラグインの中でも、次のプロジェクトに取り入れたい、ユニークですぐに使えるJavaScriptライブラリをご紹介させていただきます。 少しのコードを挿入するだけで使うことのできるシンプルなものから、カスタマイズ性が高く汎用的なライブラリまで、幅広い顔ぶれが揃っています。 使えそうなライブラリがあれば、ぜひブックマークして保存をしておきましょう。 ユニークですぐに使えるJavaScriptライブラリ10選 1. humane.js スクリーンショット：2017年10月 humane.

const ua = navigator.userAgent; if (~ua.indexOf('iPhone') || ~ua.indexOf('iPod') || ~ua.indexOf('iPad')) { return 'ios'; } else { return 'other'; } const ua = navigator.userAgent; if (ua.includes('iPhone') || ua.includes('iPod') || ua.includes('iPad')) { return 'ios'; } else { return 'other'; } ※「それ、もっとスマートに書けるよ」を書いた人はnavigator.userAgentを配列だと勘違いしていますが、navigator.userAgentは文字列です。（だからua.indexOf()はArr

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne

10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use

JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上