JavaScriptでエラーの原因となるHoisting（巻き上げ）、その仕組みをGIFアニメで分かりやすく解説
JavaScriptでエラーの原因となるHoisting（巻き上げ）はなぜ起こるのか、その仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🔥🕺🏼 JavaScript Visualized: Hoisting by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScript Hoisting（巻き上げ）の仕組みをGIFアニメで分かりやすく解説 Hoisting（巻き上げ）は、JavaScriptでのエラーの原因をGoogleで検索しても分からず、StackOverflowなどで質問した際に目にする用語の1つです。「そのエラーはHoisting（巻き上げ）が原因で発生している🙃」と言われることがあります。 Hoisting（巻き上げ）とは何のことでしょうか？
5日目: リッチフロントエンド - はてなインターン2019 (公開版)
講義を始める前に 質問があったらその場で聞いてください 他の受講者の理解にもつながります 声を出すのが難しければ、Slack でも OK スライドモードで画面に写しながら話しますが、手元で資料を開きつつ聞くと理解しやすいと思います リッチなウェブページを作ってみよう HTML 構造 CSS 見栄え JavaScript 動き Single-Page Application HTML, CSS, JavaScript を駆使したリッチなウェブページ 書いたことあるよ、という方 🙋♀️ HTML HTMLとは セマンティクス コンテンツカテゴリ HTML Webページを記述する言語 code:example.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>HTML文書</title>
ワイの正規表現入門 - Qiita
とあるWeb制作会社にて ワイ「社長、こないだ頼まれたショッピングサイトの件なんですけど」 ワイ「ご注文フォームのコーディング、完了しましたで！」 社長「おお、ありがとうな」 ワイ「ほな、飲みに行ってきますわ！」 社長「・・・いや待てや（まだ15時やし）」 社長「何やこのフォーム」 ワイ「何ですかいな」 ワイ「デザイン通り、完璧にコーディングできてますやん」 社長「いやバリデーションが全くされとらへんがな」 ワイ「グラデュエーション？」 ワイ「何を卒業するんでっか」 社長「バリデーションや」 社長「貴様をこの会社から卒業させたろか」 バリデーションとは 社長「バリデーションちゅうのは、不正な値やないかどうか確認することや」 社長「例えば数字を入力してほしいフォームに、文字列を入力して送信されても困るやろ？」 社長「そういうのをちゃんとチェックするのがフォームバリデーションや」 ワイ「あ、あ
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload
デスクトップからの画像ファイルはもちろん、PCのカメラで今撮影した写真のアップロード、写真サイトからのアップロード、Twitter、Instagramからのアップロードにも対応したJavaScriptの画像アップローダーを紹介します。 Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます。 Uppload Uppload -GitHub Upploadの特徴 Upploadのデモ Upploadの使い方 Upploadの特徴 Upploadはカスタマイズにも対応した、JavaScriptの画像アップローダーです。 写真画像をドラッグアンドドロップでアップロード。 PCのカメラで撮影した写真画像をアップロード。 写真画像をサイト（Unsplash、Pexels、Pyramidなど）から検索してアップロード。 写真画像をWebサービス（Twitte
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
JSDocの書き方・出力メモ - Qiita
最近はJavaScriptを書くことが多く、「仕様書出せ！」と言われるのでJSDocでの記述・出力メモ。 やりたいこと ./srcフォルダに機能別に保存され、module.exportsされる関数の仕様を記述・出力する セットアップ めんどくさいのでグローバルにインストールします。
3歳娘「パパ、関数をカリー化して？」 - Qiita
再就職する前のワイ ワイ「あー、今日は休みやな」 ワイ「いうて昨日も一昨日も休みやったけど」 娘（3歳）「パパ、お絵かきしよ」 ワイ「ええで」 娘「あれ描いて。あの・・・アンパンマ（ｎ」 ワイ「おっとそこまでや」 ワイ「著作権のあるものを言うたらアカン」 ワイ「あれやな？アンパンパーソンのことやな？」 ワイ「描いたるで」 ワイ「チョイチョイチョイ、と」 ワイ「こうやな」 娘「わあ。上手。」 娘「次は食パンマ（ｎ」 ワイ「食パンパーソンやな？」 ワイ「描いたる描いたる」 ワイ「チョイチョイチョイ、と」 ワイ「こうや」 ワイ「ついでにバイキンパーソンも描いたる」 娘「すごいね。上手だね。」 娘「じゃあ、次は・・・」 娘「カリー化された関数を書いて」 ワイ「（おっと？）」 ワイ「カリー・・・カレーパンパーソンのことかいな？」 娘「ちがう、カリー化された関数書いて」 ワイ「お、おう」 ワイ「分かる
React Static 設定大全 - Qiita
Reactベースのイケてる静的サイトジェネレータ「React Static」の翻訳シリーズの続編です。 基礎概念編 https://qiita.com/IYA_UFO/items/b7946674a782374f7eb2 React Staticの殆どの設定はstatic.config.jsに書くことになり、こちらにツールとして学習が必要な内容が集中しています。 逆に言うと他はほぼReactです！ ということで、以下は公式ドキュメント「設定static.config.js」編の抄訳です。 MIT License Copyright (c) 2013-present, Nozzle, Inc. https://github.com/nozzle/react-static/blob/master/LICENSE static.config.jsファイルの設置は任意ですが、React Stati
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
経年劣化に耐える ReactComponent の書き方 - Qiita
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
最新のJavaScript: ES2016からES2019までの知るべき全て - Qiita
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された２つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
具体例から学ぶ！作り込みたいWeb制作のためのJavaScriptライブラリdat.GUIのススメ - KAYAC engineers' blog
(こちらの記事はクライアントさんであるJTさんの許可を得て事例を掲載しました。この場を借りてお礼を申し上げます。ありがとうございます！) どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 Tech KAYAC Advent Calendar 2019最終日、25日目の記事を担当します、フロントエンドエンジニアのたがみです。普段何してるかは18日目の記事で話しているので省略します。 先日は自分の趣味爆発させた記事を投稿してしまいましたが（趣味爆発にも関わらず投稿を許可してくださったみなさまありがとうございます）、今年の締めはちゃんと技術の記事を書こうと思い、今回は去年と同じく私の今の推しライブラリについての布教活動をしていきたいと思います。 今年私が色々な案件をやっていて「これは色々と役立てたな〜」と感じたのはdat.GUIでした。元々は同僚さんが使ってるのをみて「
JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
【TypeScript】TS初心者の、TS初心者による、TS初心者のためのTS入門 - ecbeing labs（イーシービーイング・ラボ）
はじめに ブンブン Hello world. どうもこんにちは。開発です。 前回「もし新人プログラマが「プリンシプル・オブ・プログラミング」を読んだら」の記事を書かせて頂いたあの開発です。 プログラマ界隈では「1年に1言語」とは言いますが、かくいう私も一念発起して新しい言語を学ぼうと思った次第でございます。 しかし、ただ学ぶだけではペースも落ちますし、やる気の上下も大きいと考えました。 そこで、”学んだ内容を記事にする”というタスクを自分に課すことで学習効率を無理やり持ち上げようと画策致しました 。 そんなわけで今回は、「新人プログラマがどのように未収得の言語を学習するか」について津々浦々と文字列を列挙したいと思います。 はじめに What's TypeScript 概要 JavaScriptとの違い 詳細 文法 型宣言 型推論 実際にやってみた 何はともあれ書いてみましょう 差分進化(D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kinesis