TypeScript誕生の背景 | TypeScript入門『サバイバルTypeScript』
TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか？その答えはJavaScriptの歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代JavaScriptの誕生JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ
【JavaScript】本日未明、[ if - else ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 読みやすいコードを書きたい 複雑な条件分岐は、書いている本人も、後からそれを読む他人も非常に疲れるものです。 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついつい条件反射でif-elseを書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） if - elseを使わない条件分岐のレパートリーを増やす if - else文が絶対ダメということでは決してありません。 たくさんのレパートリー、つまり引き出しを持っておけば、適切な読みやすいコードをかける可能性が上がるかなと思うのです。 文と式 JavaScriptには「文」と「式」があります。 この2つの違いを意識することが重要ではないかと思います。 「文」は、マシンへの命令です。 「式」は数学的な値
![【JavaScript】本日未明、[ if - else ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6189b7c62c1fc92d2ef19a614c58949db9c63b2f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%2525E3%252580%252590JavaScript%2525E3%252580%252591%2525E6%25259C%2525AC%2525E6%252597%2525A5%2525E6%25259C%2525AA%2525E6%252598%25258E%2525E3%252580%252581%25255B%252520if%252520-%252520else%252520%25255D%2525E3%252581%252595%2525E3%252582%252593%2525E3%252581%25258C%2525E6%2525AD%2525BB%2525E4%2525BD%252593%2525E3%252581%2525A7%2525E7%252599%2525BA%2525E8%2525A6%25258B%2525E3%252581%252595%2525E3%252582%25258C...%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D14f38d2a33c88df06d0407b5c69769c0%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540impl_s%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253D7f0989a2a3e19e7a29422b3278fe987f%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Dc563a262385af1441cceca54579995d3)
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に保存す
アロー関数はthisを束縛しないとかいう謎文言について考える - Qiita
ES6で導入されたアロー関数式は従来のfunction式の代替構文ではあるものの、純粋な糖衣構文ではありません。 特にthisの扱いが異なることは有名です。 具体的にどう違うのかと言うと、アロー関数のthisは宣言時のスコープにおけるthis固定である一方、function式におけるthisは呼ばれ方によって決まります。 加えてアロー関数のthisはapplyやcallで上書きすることは出来ませんし、bindで新しい関数を作っても上書きされません。 「アロー関数はthisを束縛しない」 この特徴に対し、「アロー関数はthisを束縛しない」という説明がよくされています。 が、この文言よく意味が分かりません。 字面やthisの動きだけ見ると、アロー関数の方がthisの値が変わらないわけでより値を束縛してそうに見えます。 出所と原文 おそらく、この文言の出所はMDNかと思われます。 アロー関数式
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
型付き ⊄ 型なし - soutaroブログ
最近、TypeScriptについて考えることが多い。SideCIでWebフロントエンドの開発に使いはじめたこともあるし、Steepの開発をしていて「TypeScriptだとどうなるんだっけ？？」などと言いながら試してみることもある。 TypeScriptは型付きのJavaScriptである。構文はほとんど同じで、使えるライブラリもかなり近い。JavaScriptへの変換はかなり自明で、ランタイムは全く同じ。性能の差はない。Webpackやnpmを初めとするツール群もかなり共通しているし、アプリケーションも似たようなもん。書いている気分には、ほとんど差がない。つまり、TypeScriptとJavaScriptでプログラミングしているときに、なにか違いを感じるとすれば、それは（ほとんど）型付きの言語と型なしの言語の差と考えて良い。 RubyとJavaを比較するのとは、全然話が違う。構文も意味も
なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
同僚のコードレビューでこんなにクラスの設計が良くなったという話 - Qiita
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
「それ、もっとスマートに書けるよ」がもっとスマートに書けるよ - Qiita
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
RMP エンジニア・ブートキャンプ 2017 - ようこそ web フロントエンドの世界へ
社内の2017新卒向けブートキャンプ ( 研修 ) にて使用したスライド資料ですが、せっかくなので一般公開します。
Different ways to debug JavaScript code
Much of time of developers spent on fixing problems. When it comes to fixes, one need to be good and fast at debugging. Debugging is part of programming. It’s very difficult to write efficient JavaScript code without debugging. You must diagnose into code to find an actual root cause. In the era of IE, most of the programmer debug using alert. But now a day’s many methods and tools added into brow
JavaScriptの1msは4ms - Qiita
はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。 これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記）厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。 なぜ4msなのか 実はこの4msと
バグをどのように見つけるか
秋のJavaScript祭 in mixi 〜秋のJavaScript収穫祭〜 2016-10-15 https://javascript-fes.doorkeeper.jp/events/52089
2016年9月現在だとReactアプリのTypeScript採用は時期尚早（※追記あり） - Islands in the byte stream
追記(2019/04/16): 2017年半ばにここで触れているプロジェクトはTSに移行しました。今となってはTS+Reactの組み合わせは全く問題がなく、むしろ非常に相性のよい組み合わせであるとすらいえます。 TypeScript化の調査 2016年9月現在（React v15.3.1, TypeScript 2.0-rc）の話です。 いま開発しているウェブアプリのフロントエンドをTypeScript化しようと思ってちょっと調べてみたんですが、今やるのはいくらTypeScript推進派でもちょっと厳しいなと。 TypeScriptでimportできるライブラリは、TypeScriptのコード（.ts）またはdts: TypeScript definition files （.d.ts） のみ Reactは素のJS + 一部FlowType なのでdtsの公式提供は期待できない Defin
npm、一見無意味なパッケージを消したら1000件ものパッケージが依存するパッケージであったことが判明
npm、一見無意味なパッケージを消したら1000件ものパッケージが依存するパッケージであったことが判明 npmが一見無意味に思えるfsというパッケージをSPAMとみなして削除したところ、1000件ほどのパッケージが依存するパッケージだったので、削除を取り消した。 npm, Inc. Status - "fs" unpublished and restored 今日、数分ほど、"fs"というパッケージが、ユーザーからSPAMであるという報告を受けて、レジストリから非公開にされた。これは現在復旧されている。これは私(@seldo)による人為的なミスである。私は非公開が安全であるかを確認する内部のガイドラインに従っていなかった。ビルドが阻害されたユーザーに謝罪する。 詳細："fs"というパッケージは、無意味なパッケージである。これは単に"I am fs"をログに残して終了する。このパッケージが何
すべてのプログラマーが知っておきたいReactの7つの強み
JavaScriptはこの６年で大きくその地位を向上させてきました。JavaScriptは有名なサーバーサイド言語になり、オフラインファーストSPAは用語として定着し、そしてJavaScriptは他の言語のための有名なコンパイル先となりました。 JavaScriptは、ElectronやReact Nativeのような技術やハイブリッドアプリを通して、ついにはデスクトップとモバイルのプラットフォームとなってきています。 この3年でもう一つ革命が起こり始めました。FacebookのプログラマーであるJordan WalkeがReact.jsを生み出しました。Reactはそれ以来、数百ないし数千ものプログラマーのJavaScriptのコードの書き方を変えてきました。 Reactの途方もない成功の裏にはそれなりの理由があります。 1. バグが出にくいよりシンプルなコードReactはユーザーインタ
プログラマの三大美徳の啓発の勧め : 怠惰、短気、傲慢 ― JavaScriptで遅延評価 | POSTD
(編注：2016/5/31、頂いたフィードバックを元に記事を修正いたしました。) larry wall 怠慢と勤勉 コンピューティングにおいて、”laziness(怠惰)”は幅広い意味の単語です。大抵は、もし必要が無ければ何もしないということを意味します。その正反対を指すのは”eager(勤勉)”です。後で必要になる場合に備えて、できるだけ働くということを意味します。 以下のJavaScriptを見てみましょう。 function ifThen (a, b) { if (a) return b; } ifThen(1 === 0, 2 + 3) //=> undefined ここで、問題です。「JavaScriptは 2+3 を評価する？」答えはお分かりですね。「評価する」です。呼び出し関数に、引数を引き渡すこととなると、JavaScriptは eager(勤勉＝先行評価) で、式の全てを
フロントエンドにテストを導入 - Qiita
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。（数日前の自分です） 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ArangoDB : The new Graal ? Part 1
GitHub - Kuniwak/how-to-debug-js: https://speakerdeck.com/orgachem/guan-reru-js-su-zao-kujiu-ming-debatuguru-men
