このエントリは以下のアドベントカレンダーの19日目の記事です。 はてなエンジニア Advent Calendar 2019 - Qiita 前日は id:onk さんの Percona Toolkit を読む - id:onk のはてなブログ でした。 KMC Advent Calendar 2019 - Adventar 前日は machida さんの (null) でした 突然ですが、先日行きつけのビアバーの店主が使っているPCが遅いという話があり、様子を聞くとどうやらHDDで且つメモリも4GBという雰囲気で、触ってみると、たしかにWindowsのホームメニューを出すのに数十秒とかかかっていて、これで暮らしているのは大変だろうと思い、HDDをSSDに、メモリは16GBに増強するということをしました。その結果見事に体験は改善されました。 一方、このときにふと思ったのは、速くなったねとは思

Vue.jsでフロントエンド再入門しました。仕事でjs触るけど、ゼロからあれこれやると分からないことが無限に発生しますね...。成果物はこちら。 GitHub - syou6162/go-active-learning-web ML News サーバーサイドはGoで書いていて、フロント周りがVue.jsです。それっぽい見た目になってきたので、Route53でドメイン取得しました。 前回までのあらすじ 初手 webpackを導入 Componentの導入 Bootstrapで見た目をマシにする SPA導入 SPAにするとGoogle Analyticsで正確にトラッキングできない問題 参考図書 前回までのあらすじ 今年の目標で自分であれこれ触って壊して試せる砂場を作る活動というのをやってきました。先月までは主にインフラとかミドルウェア周りをやりました。 下回りは整ってきつつありますが、表側が

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ

LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event

2011年1月15日にJSer.infoを開始してから今日でちょうど7年となりました。 今年は特にイベントもないので簡単にJSer.infoの振り返りを書いてみます。 去年の紹介記事 去年一年間に紹介したサイト数は1074でした。 また、今までのすべての紹介したサイト数の合計は7691でした。 JSer.infoの紹介したサイトデータはすべてデータ化されているので次のページから見れます。 jser/jser.info JSer.info Data Dashboard JSer.infoのゴール あらためて振り返るとJSer.infoのゴールは次のようなものです。 「JavaScriptに興味がある人にもっとJavaScriptを知ってもらう」 「JavaScriptの情報を整理して正確に伝える」 「更新コストを小さくして、継続できる形を作る」 毎年この時期になるとゴールを振り返って、そもそ

これはvim advent calendar2012の155日目の記事です。 ternについて javascriptで書かれたjavascriptの構文解析、型推論library https://github.com/marijnh/tern Marijn Haverbeke氏を中心に開発 browser中にcode editorを提供するjavascript component codemirror の開発者でもある 既存editorでのjavascript開発の改善を目的としており現時点ではemacs, vim, sublimetext, bracketsでternを用いたjavascriptの補完が可能。 tern for vimについて Marijn氏のgithubにternのためのvim scriptのrepositoryがある。 https://github.com/marij

新年明けましておめでとうございました。今年もゆるくお願いします。 全然正月とか新年に関係無いのですが。 何だかググってもあんまり情報が出てこないので。 Vimだけじゃないですが、ctagというコマンドがあります。これはソースコードの関数やら変数やらをインデックスしておくファイルを作ってくれるという便利コマンドでして、これを使ってVimから関数呼び出ししている部分でC-[を押すと、定義部分に飛んでくれてC-tで元の場所に戻るというとてもIDEライクに動かす事ができるものです。 で、これはずっと使っていたんですが、自分の専門(なはず)のJavaScriptの場合は、どうもあんまり上手く解析してくれない…。ちょっと不便ではあるんだけどまあ使えてはいたんで良かったんですが。現在、MozillaがDoctor JSというプロジェクトでJavaScript用のctagを作ってくれています。GitHub

最近また Javascript を書いています。 Chrome拡張のメンテナンスをしたい気持ちもありますが、最近盛り上がっている Vue.js を使ってみました。 モダンなウェブアプリケーション開発と言えば React.js ですが、どうしても JSXに違和感があったり、 そもそもいきなり大規模でリアクティブなアプリケーションを作るつもりも無かったので、小規模な開発からも 使えて、使いやすいと評判の Vue.js です。最初に書いておくと、Vue.js かなりいいですよ。 データをテンプレートに展開するようなデータバインディングは、ガイドを見れば十分だと思うので、 もう少し実践的なものにしようと思います。 Vue.js で AJAX 実は、Vue.js そのものは Ajax をサポートしていません。 以前は vue-resource というパッケージが公式のライブラリという扱いだったような

ページを下端までスクロールしたら次のページが読み込まれるInfinite Scroll（無限スクロール）をvue.jsで実装する方法を調べてみました． 一般的なInfinite Scrollの実装方法 スクロール可能な要素の scroll イベントを捕捉して，表示領域の位置を計算します．もし，要素の高さに達している場合は，下端までスクロールされたことになります． <div class="items"></div> .items { position: fixed; top: 0; bottom: 0; overflow-y: auto; } $('.items').on('scroll', function (e) { // jQueryを使う場合 var target = $(e.target); if ((target.scrollTop() + target.outerHeight(

こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F

初めて書く時困りそうなトピックごとに TypeScript との関わり方を示していく。導入や書き始めのハードルを下げるのが目的なので意識高いことは言わない。 https://github.com/remojansen/logo.ts 対象読者 ゴール 基本姿勢 何故そんなこといい加減な感じなのか 型の書き方 type annotation シグニチャ 型が合わない時 Structural typing any したい キャスト色々 キャストせざるを得ない時 import できない error TS2307:Cannot find module 'hoge'. error TS1192: Module '"hoge"' has no default export. や error TS2305: Module '"hoge"' has no exported member '_'. など 頑

2017年1月12日、WebmentionがW3C勧告になりました。 WebmentionはTrackbackに類似したプロトコルのひとつで、サイト上での言及を任意のURLに通知する方法です。 通知の受信側からみれば、他サイトにおいて言及された際、その通知を受信する方法の1つです。 Webmention仕様は、Pingback仕様の簡略版として策定が始まりました。 今ではPingbackのモダンなアップデート版であると言及されています。 WebmentionはHTTPとx-www-form-urlencoded（パーセントエンコーディング）を用いた、HTMLにおけるformの形式で送信されます。 これが、XML-RPCを用いているPingbackとの大きな違いであり、簡略化されているといわれるゆえんです。 すでにWordPressのプラグインが存在している（GitHub）など、各方面での実

TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs

JSer.info 6周年と300回記念イベントを開催しました。 参加して頂いた皆さん、発表して頂いた皆さんありがとうございます。 発表内容 JSer.info 6周年イベント - @azu JSer.infoの作り方 - @azu ECMA-402を知ってますか？ - @makoto_kato 2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo // Speaker Deck - @potato4d A piece of potential of Cognitive Services - @ovrmrw Opalのすすめ - @youchan HOW AMP WORKS - @kishu 翻訳: @purewish with Many LT 以下、JSer.info 6周年記念イベント - Paperに書かれた議事録です。 議事録を取って頂いた@suzuk

Nodeのアドベントカレンダー、既に終わった枠が空いていて、この際書きたいネタがあったんで参加しました。宜しくお願いします。 アドベントカレンダーの時期だけ出没する弱い日曜Haskellerです。普段の実務ではNode.jsにお世話になってます。宜しくお願いします。 さて、みなさんStream API使ってますか？Node.jsといったら非同期ですよね、やっぱり。しかしながら、JavaScriptでも他の言語でも、非同期処理自体は注目されているものの、まだexperimentalという感じで様々なAPIが考案されては消えていき、また元々そういう文化が根強くなかったところから来た人たちにとって、こういう文化はちょっと立ち入りづらいところもあるかもしれませんね。 今日は、主にそういう人たちに向けて、まず非同期の色々なAPIの紹介、そしてその中でのストリームのメリット、そして実際のStream

Vue.js 2.0 の createElement で Props と Events を静的に検証できたらいいなーという妄想です。 Nominal Typing するためのイディオムについてのページは https://basarat.gitbooks.io/typescript/content/do…