@ ts-checkを付けると、VS Codeが普通のJavaScriptもTypeScript扱いで見てくれるんだって。 | Ginpen.com
// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。 JavaScript Programming with Visual Studio Code Type checking 普通のJavaScriptコードでも、 `//@ts-check` を付けておくとVS CodeがTSっぽく型を見てくれるんだって。これ便利だ。https://t.co/bciWQKhYft pic.twitter.com/twczq1klX1 — 高梨ギンペイ (@ginpei_jp) August 16, 2018 （@tsのひとごめん。） DOMノードどーすんの問題 引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや…
非同期やるならasync/awaitでもっとらくらく。（現代的JavaScriptおれおれアドベントカレンダー2017 – 11日目） | Ginpen.com
現代的JavaScriptおれおれアドベントカレンダー2017 – 11日目 概要 Promise を使った非同期の処理をさくさく書けるやつです。 簡単な例としては、まず Promise オブジェクトを返す関数↓があったとして、 // 指定ms待つ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function sayAfterSleeping(message) { console.log('ぐー……'); sleep(1000) .then(() => { console.log('むにゃ……'); return sleep(1000); }) .then(() => { console.log('あ、ごめん寝てた。えっと……'); return sleep(1000); })
Babelを使って現代的JavaScriptを始める。（現代的JavaScriptおれおれアドベントカレンダー2017 – 01日目） | Ginpen.com
現代的JavaScriptおれおれアドベントカレンダー2017 – 1日目 基本的にIE以外の現代的なブラウザ（つまり更新されているもの）では、特に何もしなくても現代的なJavaScriptをだいたい利用することができます。 それでも古い環境に対応するため、あるいはより先進的な記法を使う場合、Babelの力を頼りましょう。 Babel · The compiler for writing next generation JavaScript 前提知識 CLI npm package.json Babelとは 「次世代JavaScript記法のためのコンパイラ」です。コンパイラじゃなくてトランスパイラという表現を使う人もいます。 Babelは「黒い画面」で動くツールで、これを使うと新しい文法で記述したJSファイルを変換して、古い文法で構成されたものを生成することができます。そしてそれは古い環
JavaScript待望のクラス。（現代的JavaScriptおれおれアドベントカレンダー2017 – 04日目） | Ginpen.com
現代的JavaScriptおれおれアドベントカレンダー2017 – 04日目 JavaScriptはオブジェクト指向プログラミング言語の一種ですが、「クラスベース」の他言語と異なり「プロトタイプベース」だと言われています。クラスの代わりにプロトタイプ prototype を使ってあれやこれやしてきました。 そんな我が道を行くJS君でしたが、やっぱり寂しかったのか、クラスの仕組みが導入されました。継承もできる。使っていきましょう。 使い方 ざっくりこんな感じ。 class Sushi { constructor(neta) { this.neta = neta; } get name() { return this.neta; } make() { console.log(`Hey ${this.name} o-match!`); } } const tuna = new Sushi('tu
新しいChromeでスクロールが取れない？ scrollingElement？ | Ginpen.com
知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。 なんだこれ Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。 事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。 Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。 あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。 scrollingElement なるものが で、ちらちら見てたら
VueでAjaxやるときはaxiosがおすすめなんだって。（Vue.js始めるおれおれアドベントカレンダー2016 – 14日目） | Ginpen.com
data: { sending: false }, methods: { form_submit (event) { this.sending = true axios.get(url, data) .then(res => { this.sending = false console.log(res.status, res.statusText, res.data) // => 200, "OK", { message: "You just sent the data!" } }) .catch(error => { this.sending = false throw error }) } } もっとVueに繋げる vue-resourceはVueと密に繋がって、 this.$http.get() みたいな感じで使うそうだ。 axiosは完全に独立しているけれど、 this から参照で
Vueで「スクロールに合わせて何かする」のってどうするんだろ。（Vue.js始めるおれおれアドベントカレンダー2016 – 10日目） | Ginpen.com
Vue.js始めるおれおれアドベントカレンダー2016 – 10日目 作れないことはないんだけど、どうするのが最良なんだろうか。とりあえず作ってみた。 スクロールを拾う 方々でスクロールを監視する必要はないので、偉い部品に任せる。それが main.js なのか App.vue なのか。今回は試しに main.js でやってみた。 main.js const app = new Vue({ el: '#app', render: function (createElement) { return createElement(App) }, methods: { startWatchingScroll: function () { document.addEventListener('scroll', () => { const scrollTop = document.body.scroll
フォームを繰り返して出力するときに属性値を変えようとしてちょっと詰まった。（Vue.js始めるおれおれアドベントカレンダー2016 – 3日目） | Ginpen.com
Vue.js始めるおれおれアドベントカレンダー2016 – 3日目 なんだかこんな感じのことを言われてしまいまして。 [Vue warn]: id="item-name-{{item.id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">. 読んで字のごとくなんですが、属性で title="{{foo}}" みたいな書き方は（昔は大丈夫だったけど）今は駄目で、代わりに :title="foo" みたいにしてね、とのことでした。（ちなみに昔の文法を知ってたんじゃなくてAngularJSと混同して間違えました。） 警告が出
Vue.js始めるおれおれアドベントカレンダー2016 | Ginpen.com
Vue.js始めるおれおれアドベントカレンダー2016の記事一覧です。 最近になって初めてVue.jsを触ってみたんだけど、割と良い感じだったのでもうちょっと色々やってみようかなと思って今年はこれにします。去年はDOMの話でした。 Hello Worldから体験してみる。 ガイドを読んで基本文法まとめ。 フォームを繰り返して出力するときに属性値を変えようとしてちょっと詰まった。 TODOリストができたのでチュートリアル形式でお送りします。 Vuexをさっくりインストールしたけどまだよくわからない。 computedすごいぞ賢いぞ！ vueifyを使って良い感じにコンポーネントを扱えるようになったよ。 ESLintプラグインでVueの書式に合わせて書こう。 ただの文字列をコンポーネントに渡す話。 Vueで「スクロールに合わせて何かする」のってどうするんだろ。 Vueでフォームの値を取得する方
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
分割代入や引数の「残り全部」を持ってくるやつ……。（現代的JavaScriptおれおれアドベントカレンダー2017 – 17日目） | Ginpen.com