CodePen - Front End Developer Playground & Code Editor in the BrowserBuild, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Native ESM時代とはなにか
最近の日本のフロントエンド界隈では「Native ESM時代」という言葉が聞こえてきます。Native ESM時代におけるビルドツールがどうなるかといったことが主な話題です。 個人的には面白い概念なので流行ってほしいと思い、Native ESM時代とは何かを解説する基礎的な資料を用意しました。 そもそもNative ESMとは Native ESMとは、ES Modulesのことです。つまり、ECMAScript仕様の一部として定義されたモジュールシステムを指します。現在、モダンな部類のフロントエンド開発において広く用いられている、import宣言でインポートしexport宣言でエクスポートするのがES Modulesです。 特に、ES Modulesはブラウザによって直接理解されるモジュールシステムです。Nativeという単語はこのことを強調しています。 Native ESM時代とは N
バブリング と キャプチャリング
例から始めましょう。 このハンドラは <div> へ割り当てられますが、<em> や <code> のような任意のネストされたタグをクリックしたときにも実行されます: <div onclick="alert('The handler!')"> <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em> </div> 不思議ですよね？実際にクリックしたのは <em> でしたが、 <div> のハンドラが実行されるのはなぜでしょう？ バブリング(Bubbling)バブリングの原理はシンプルです。 要素上でイベントが発生すると、最初にその要素上のハンドラが実行され、次にその親要素のハンドラが実行され、さらに他の祖先を実行します。 たとえば、3つのネストされた要素 FORM > DIV > P があ
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
setTimeout(...,0)などの使いドコロ - Qiita
0ミリ秒、お待ちください〜 クライアントサイドのJavaScriptを使っていると、setTimeout()はそこそこ使う機会が来る関数かと思います。これは、 実行する関数 待機時間（ミリ秒単位） という2つの引数を取って、指定時間後に関数を実行する機能です。…そこまではいいのですが、ときどき第2引数に0を指定するような使い方があります。「0ミリ秒に実行」だと、そのまま実行しても何も変わらないような気がするのですが、いったいどういう意味があるのでしょうか。 JavaScriptはシングルスレッド postMessageやWeb Workerといった一部の機能を除いて、ブラウザ上のJavaScriptはシングルスレッドで動いています。つまり、関数に入っていないトップレベルコードなら読み込まれた時点から実行完了するまで、コールバック関数であれば呼び出されてからその関数を抜けるまで、そこにあるコ
酔っ払ってもコードが書きたい！JavaScriptを書き散らかしてPrettierに介護してもらう方法 - pixiv inside
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
JavaScript環境構築の設定をひとつずつ丁寧に -そのプラグインってどうして必要なの！？-：はしご屋さん
この本はWebフロントエンド開発の環境構築を1つ1つ丁寧にみていく本です。 特に設定が足りない状態で動かすとどうなるのか、なぜその設定が必要なのかについて踏み込んでいきます。 環境構築の難しさは設定をどれか1つでも間違えると動かないことにあります。 そのため環境構築をする上では、自分がした1つ1つの設定が何をしているのかを正確に把握しなければいけません。 そこでこの本では暗黙的に「そういうものだから」と思われがちな設定に注目し、解説します。 どの設定を足さなければ動かないのかをなるべくサンプルコードを示しながら解説します。 例えば、次のような例を扱います。 * babel-cli を使わずにトランスパイル * @babel/preset-env を使わずにトランスパイル * ESLintのpluginとextendsの役割の違い、またはその例外について * eslint-config-pr
JavaScript中級者への道【5. コールバック関数】 - Qiita
JavaScript中級者への道【5. コールバック関数】 JavaScriptのつまづきやすそうなところ 関数はオブジェクトの一種 4種類のthis 関数スコープ 非同期関数 コールバック関数 ← いまここ クロージャ プロトタイプ継承 コールバック関数とは 既に「関数の引数に関数が渡せる」ということを学びました。 これを利用して、「ある特定の処理が終わったら、引数に渡した関数の処理を実行する」といったように 処理のフローを制御することが出来ます。(というより、非同期の場合は制御する必要があります) その際、引数に渡される関数のことを「コールバック関数」といいます。 Wikipediaのコールバック (情報工学)を見る限り、同期/非同期関係無く、引数に関数を取る実装を指しているようです。 ですが、JavaScript界隈で「コールバック関数」といえば、非同期処理に関する記事が多く見受けら
GitHub - jquense/yup: Dead simple Object schema validation
Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation. You are viewing docs for the v1.0.0 of yup, pre-v1 docs are available: here Killer Features: Concise yet expressive schema i
Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets 原文公開日: 2019/12/13 著者: Younes SERRAJ サイト: CapSens -- フランスのFinTech系Web開発会社です タイトルは内容に即したものにしました。画像は元記事からの引用です。 2020/01/16: 初版公開 2021/05/13: 更新 皆さんはアセットやJavaScript周りの変更で消耗してませんか？npm、Babel、ES6、Yarn、Webpack、Webpacker、Sprockets、これらのどこがどう違うのかさっぱりわからなかったりしますか？ Rails 6アプリケーションでJavaScriptエコシステム全体がどのように機能しているかという
encodeURIComponentが世界基準だと誤解してた話
URLをいじくるプログラムをいじっていて、仕様がよくわからなくて悩んだのでまとめます。 2/23: 追試部分を追記 2018/7/14: JavaScriptのURLSearchParamsと、GoのPathEscapeについて追記 ことの経緯 HTTPとはなんぞやとか、GETとPOSTがどうの、それぞれでパラメータがどういう経緯でウェブアプリケーション(とかCGI)に渡って来るのかぐらいは知っていました。で、ウェブでXHRでGETリクエストを送る場合にはJavaScriptのencodeURIComponent()で各パラメータをエンコードして、&でくっつけて、URLの末尾に?で付与すればいいんだよね？と思っていました。こんな感じに。 これを受け取る側は、JavaScript(node.js)ならdecodeURIComponent()を使っているはずだ。ウェブの世界ではJavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - standard/eslint-config-standard: ESLint Config for JavaScript Standard Style
GitHub - airbnb/javascript: JavaScript Style Guide
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
GitHub - blakeembrey/change-case: Convert strings between camelCase, PascalCase, Capital Case, snake_case and more
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
