若者よ、フロントエンドエンジニアを目指すなら脱jQueryをしよう | QUARTETCOM TECH BLOG
突然ですが、私は40代です。 最近、弊社のフロントエンドエンジニア募集に興味を持ってくれる若者のスキルの欄に「jQuery」の単語がちらほら見える事が気になっています。フレームワークやらバンドルツールやら便利なものがたくさん存在する昨今、そんな時代に開発をスタートした若者が、なぜ古き良き時代の jQuery？？？たまたま読んだ記事に私と似たような感覚を持ち合わせた方がいたので、まずはそのURLを紹介させていただきます。 jQueryとは何なのか？なぜ使わなくても（あるいは使わないほうが）いいのか？ 上記の記事を読めば何が言いたいのかおおよそ見当が付くと思いますが、加えてチーム開発という観点から私の考えをこの記事にて紹介させていただきます。 開発環境の変化 昔々のお話 その昔、私が初めてWEBページなるものを作った時、ブラウザ相手のアプリケーションってなんて難しいんだろうと思いました。こっち
TypescriptのGASをJestでテストする - アクトインディ開発者ブログ
morishitaです。 時々、業務で使うツールをGASで作ります。 これまでのものはキャンペーン対応のものなど使い捨てとまでは言わないまでも、短い運用期間を想定したものでした1。 サービスレベル的にはベータレベルですが、少し運用期間が長くなりそう、かつプロトタイプ性が強くて変更が継続しそうなツールを作ることになったので、ちゃんとテストしようと思ってやってみました。 試したもの 次の要素を含むGASのプロジェクトでJestのユニットテストを導入しました。 @google/clasp 2.1.0 jest 24.8.0 Typescript ついでにこれも。 eslint 6.0.1 + @typescript-eslint/eslint-plugin 1.11.0 紹介するサンプルコードはこちらです。 gas-ts-jest-eslint-sample セットアップ 何はともあれ、必要なN
JavaScriptで密かに誤解されていること5選 - Qiita
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; func(...arr1, ...arr2); また、ES2018からはオブジェクトの中でも...が使えます。 当初この...を「スプレッド演算子」（spread operator）と呼ぶ向きがありましたが、よく見るとこれは全然演算子ではありませんね。 演算子の定義は人によって異なるかもしれませんが、「いくつかの式から式を作る働きをする構文」というのが一般に受け入れられている定義だと思います。例えばx + 1という式は、xという式と1という式を+で繋げる事でx + 1という式を得ています。この働きをする+が演算子です。 こうしてみると、...は式を作るのではありません。つまり、const arr2 = ...arr1;のようなものは受け付けられないということです。...が使えるのは配
I’ve spent 5 years writing a JavaScript framework on my own.
Typescene is a robust front end library written in TypeScript: strongly typed, no dependencies, no nonsense. It’s really great for desktop-like (or mobile) applications, not so great for blogs and other content. It isn’t backed by some major corporation, not even a startup, but it’s been built by me: one developer on a mission to build a no-nonsense dependency-less framework — not scared of rework
Nuxt + Sails + TypeScript + Fargateでタスク管理ツールを作ったら快適だった話 - Qiita
Repsona LLCの@GussieTechです。無料ガントチャート、無料カンバン、無料ドキュメント管理が便利な「理想のプロジェクト管理ツール」を作っています。 タスク管理ツール、情報共有ツール、便利ですね！ これまでいろんな仕事で、いろんなツールを使ってきました。それぞれ、特に不自由もなく、乗り換えるほどのモチベーションもなく使い続けていたんですが、不満が全くなかったわけではありませんでした。 ・遅い ・ダサい ・わかりにく ・カンバンがない ・ガントチャートがない ・Wiki的なものがない ・なぜか仕事がうまく進まない ・SNSみたいな感じで、社員がもっと楽しくつながれたらおもしろそう ・スキルがレベルアップしてる様子とか、可視化されたらおもしろそう ・勝手に仕事してくれたりしないかな、AIとかで ・使ってたら無意識にPMBOKみたいになるように、レールが敷かれていると便利な気がする
The cost of JavaScript in 2019 · V8
Show navigation Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. “The cost of JavaScript” as presented by Addy Osmani at #PerfMatters Conference 2019.One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant cost
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
JavaScriptでも単体テストを導入しよう！ってかテストって何？
昔はお遊び程度の使われ方をしていたJavaScriptも、本格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト（ユニットテスト） プログラミングにおいて、特に小さな規模の開発においては
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
"型パズル"との付き合い方
まえおき❌ Compiler API、Language Service❌ 難解な型パズルを出題して型マウント取る話❌ 全TSerが型パズルするべきだ🙆♀️ 型パズルと聞いて身構える方に身近に感じてもらいたい どっちが思考コストが高いかHTTPメソッド // ちゃんと渡せばOK const httpMethod: string = 'GET' // 正しくない値を渡してもエラーになってくれない const httpMethod: string = 'hogehoge'type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE' // ... // ちゃんと渡せばOK const httpMethod: HTTPMethod = 'GET' // 正しくない値を渡すと型エラー const httpMethod: HTTPMeth
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
clasp が Typescript をサポートした！ - Qiita
以前、GAS のGoogle謹製CLIツール claspと題して、@google/claspを紹介した。 このツールと新しい Google Apps Scriptの管理コンソールと Stackdriver Loggingのサポートにより GASの開発、運用環境は格段に使いやすくなった。 その後も開発は進み、なんと v1.5.0 以降で Typescript をサポートしたので、試してみた。 インストール 次のコマンドで、プロジェクトを初期化する1。 $ mkdir clasp-ts-sample $ cd clasp-ts-sample $ npm init -y $ npm install @google/clasp tslint -D $ npm install @types/google-apps-script -S $ tslint --init # tslint は必須ではないが
なぜJavaScriptでvarの巻き上げ（hoisting）が起こるのか - Qiita
なぜ、巻き上げるのか 日本語では「なぜ」の部分が調べられなかったので調べました。 海外のQAサイトに記載されていたので、翻訳を試みます。 引用元： https://www.quora.com/Why-does-JavaScript-hoist-variables おおまかな理由 ・関数において、定義が上で呼び出しが下だと読みづらいから（アンチMeta-Language） ・関数の相互呼び出しのため →副作用によりvarの巻き上げが仕様になった 詳細 以下、引用元のDan Shappir氏の回答を翻訳します。 First, it’s important to note that only variables declared using the var keyword are hoisted. Variables declared using the newer let and const
Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript
???Javascript is weird. Don’t believe me? Try converting an array of strings into integers using map and parseInt. Fire up your console (F12 on Chrome), paste in the following, and press enter (or run the pen below). ['1', '7', '11'].map(parseInt);
![Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript](https://cdn-ak-scissors.b.st-hatena.com/image/square/a72f1bb5be6a9d91b8e2649394cfc871da9ab24b/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1112%2F1%2Auq5ZTlw6HLRRqbHaPYYL0g.png)
A Future Without Webpack
A Future Without Webpack Snowpack installs npm packages that run natively in the browser. Do you still need a bundler? Update (03-29-2020): This article was originally written about a year ago about a new project called @pika/web. Early this year that project was superseded by Snowpack, a web application builder for less tooling and 10x faster iteration. This article has been updated all reference
JavaScript/TypeScriptの例外ハンドリング戦略を考える - Qiita
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptが辿った変遷 - Qiita
Why was the name 'let' chosen for block-scoped variable declarations in JavaScript?
外部ライブラリもインストール・型解釈できるTypeScript playgroundを作った
https://playground.type-puzzle.org/
