『リーダブルコード―より良いコードを書くためのシンプルで実践的なテクニック』を読んで、実践的に活用するための問題集を作りました。 使用している言語はJavaScriptもしくはTypeScriptで、範囲は第Ⅰ部「表面上の改善」の2章から6章までです。 問題を4つ掲載した後に解答例を記載しています。腕試しとして解いてもらったり、改善や感想のフィードバックもらえたりすると嬉しいです！ 問題1 適切な変数名 ウェブページの読み込み時間を計測する以下のようなコードがある。変数名についてどのような問題点があるかを指摘した上で書き直せ。 const start = (new Date()).getTime(); // webページを表示する処理(記載省略) const elapsed = (new Date()).getTime() - start; console.log(`読み込み時間：${el

Volta とは Voltaとは、JavaScript ツールマネージャーです。 タイトルでは Node.js のバージョン管理としていますが、 npm・yarn のバージョン管理も行うことができます。 公式サイトでは、「The Hassle-Free JavaScript Tool Manager（手間のかからない JavaScript ツールマネージャー）」と紹介されています。 チームの Node.js のバージョン管理を Volta に統一したところ非常に DX が上がり、Volta の恩恵を感じています。 この記事では、開発者の Volta 人口を増やすべく Volta の紹介と使用方法について解説していきたいと思います。 なかなか詳しく解説している日本語のソースはないので、公式ドキュメントを読んで適宜和訳しています。 公式ドキュメントを読むのがめんどくさいという人に読んでいただい

この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ

【はじめに】 フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。 Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript（主に jQuery）で静的な Web サイトの構築をしていました（2年間）。 その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました（2年半）。 この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。 これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。 マークアップエンジニアとフロントエンドエンジニアの違い 「マークアップエンジニア」「フ

There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.

When someone says 'SVG animation', what do you picture? From conversations at my workshops I've noticed that most people think of illustrative animation. But SVG can come in handy for so much more than jazzy graphics. When you stop looking at SVG purely as a format for illustrations and icons, it's like a lightbulb goes on and a whole world of UI styling opens up. One of my favourite use-cases rec

Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project. And now, after implementing a few projects with this

particles.js is a lightweight JavaScript library for creating particles.

注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので

Create a reusable button with Vue Dynamic ComponentsIn the good old days, we used to style things using classes. We'd have a .button class that could be used anywhere in our application and that's it. Easy, right? If you are building any kind of application, it's very likely you have a Button component. You know, a button that can be clicked and multiple things can happen: go to a different page,

追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以

Transitions in Vue.js are really great. There is no doubt that they can bring your app to life very easily but often you have to write them from scratch in each project or even bring some CSS library like animate.css to make them look good. What if we could encapsulate these into components and simply reuse them across several projects? We will look at several ways to define transitions and dig ou

Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル 近年大きな注目を集めるフレームワークとなったVue.js。その発展の裏には、開発コミュニティをストレスなく駆動させる、コミッターたちのさまざまな工夫がありました。黎明期からVue.jsを支える、コミッターの川口和也（kazupon）さんに、フレームワークを躍進させるために必要なことを聞きました。 WebアプリケーションのUI実装を簡単に行える、オープンソースのJavaScriptフレームワーク・Vue.js。利便性の高さと導入の容易さから、近年サービスに採用されるケースが増えています。 そして、Vue.jsの黎明期から、コミッターとしてフレームワークの成長を支えてきたエンジニアがいます。Vue.js日本ユーザーグループの運営に携わるkazuponこと川口和也（かわぐち・かずや／ @kazu_po