Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
Vue.jsの仮想DOMと差分レンダリングの仕組み① - Adwaysエンジニアブログ
こんにちは、@binarytaです。 何回かに分けて記事を公開していこうかなと思っております。 前提 Vue.js version : 2.5.13 対象読者 JSフレームワークの知見がある 仮想DOMの仕組みを知りたい はじめに なぜVue.jsか？という質問が飛んできそうなので一応述べさせて頂きます。 そもそもですが僕がコミットしているチームではVue.jsを使っています。 なぜVue.jsを選択したかというと、流行りのフロントエンドフレームワークだということももちろんありましたが、Vue.jsのhtmlの記述がReactのようなJSX記法ではなく限りなくhtmlに近いDSLを持っていることが一番大きいです。 それに加え、既存のプロジェクトに適用しやすいようなメリットが多かったのも選択した理由になりますが、その辺に関しては以下のVue.js公式ページを参照してみてください。 https
Reduxは不要ではないか？ - Qiita
僕の本職はサーバーサイドなのですが、半年くらいReactとReduxを使ったフロント部分を触ったので、書きたいと思います。 先にReact.jsについてですが、本家がチュートリアルをしっかりと用意しており、学習コストも高くなく、悪くないものだなと思いました。 しかし、Reduxが入った途端、めっちゃ複雑になった印象があります。chromeのプラグインを入れて開発するのが普通とか言われたのですが、そんなものを使わないと作業できないくらいに複雑で辛いなぁという印象です（Javascriptは、console.logがあれば、ほぼ開発できる気がします。） ここから先は、こんなこと考える人も居るんだなぁ程度で見てください。Reduxが好きな人はすごく嫌な記事かもしれません。その場合は、ここでそっ閉じしてください。 Reduxはモダンだから採用した これよく聴くのですが、本当に辞めてほしいです。jQ
なぜプロダクトに 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"><
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
JavaScript Stringでサロゲートペアを扱う - teppeis blog
JavaScriptで強力なUnicodeを扱う方法について書きます！（嘘） 先月末に発売されたWEB+DB PRESS Vol.78で「フロントエンドの国際化」の記事を書いたのは前回書いた通り。 WEB+DB PRESS Vol.78に「フロントエンドの国際化」について書いた！ - teppeis blog 記事内で、JSの文字列は基本UTF-16なのでサロゲートペアがうまく扱えないっていう問題は書いたけど、じゃあどうすればいいの？っていうのは載せられなかったので書く。 文字数のカウント 「𠮷（U+20BB7、つちよしだ）」や「𩸽（U+29E3D、ほっけ）」はUTF-16ではサロゲートペアで表現するのでlengthが見た目とズレる。 console.log("𠮷野家で𩸽".length); // 7 これを「5文字」とカウントしたいという話。 正規表現を使う方法 たぶん実装が一番
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
FluxやReduxがまた分からなくなったので、個人的なまとめをしました。 「これ間違ってるぜ！」ってのがあればコメント等でご指摘していただけると嬉しいです。 また何か気付きがあればちょこちょこ更新入れることもあります。 Fluxって？ Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。 JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。 そのためFluxではその流れを一方向にまとめよう！といったことをやっています。 Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。 基本的には以下の様な流れです。 またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
TypeScriptのユーザがFlowを使ってみた感想
SuPICEではTypeScriptを用いて開発をしています。著者である私もTypeScriptのユーザです。 (今更感がありますがTypeScriptは静的に型の検査を行うAltJSです)静的な型の検査というとFlow typeも挙げられると思います。最近個人的にFlowを使う機会が手に入りました。 丁度良い機会なのでTypeScriptのユーザがFlowを使用してみての感想を書いていこうと思います。 開発環境 Visual Studio Codeで使う分にはどちらもさほど差がないように感じます。定義へ移動。関数や変数の説明の表示、補完、etc.。個人的にやって欲しいことは大体やってくれています。Visual Studio Code優秀ですね。 DefinitelyTypedとFlow-typed 型定義のレポジトリですね。最初DefinitelyTypedと比べてFlow-typedは
サーバサイドレンダリング — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
Parcel – The zero configuration build tool for the web.
The zero configuration build tool for the web. JavaScript. CSS. HTML. TypeScript. React. images. SASS. SVG. Vue. libraries. Less. CoffeeScript. Node. Stylus. Pug. Electron. Elm. WebGL. extensions. GraphQL. MDX. XML. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
Node学園祭2017資料まとめ - 技術探し
nodefest.jp 2017/11/25, 26で開催されました。 今回は、前回よりも更にto be more more globalをテーマに作っていきました。 一日目はセッション、スポンサートーク、LT等でした。 二日目はセッションと参加者が手を動かすワークショップを行いました。 両日ともに、3ラインで進みました。 自分は一日目はBホール(402)の司会をしていて、二日目はCode And LearnでNodeへのコミットのサポートをしていました。 全部見れてないので、わかっている部分の資料だけ貼りたいと思います。 もし資料があったら教えてくれるとついったーとかでください。 Twitter ハッシュタグ モーメント 資料まとめ 1日目 Opening talk Node.js at Alibaba Source to Binary - journey of V8 javascrip
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
「フロントエンド開発に再入門する」タスクフォースの進め方 | MEDLEY Developer Portal
2017-11-09「フロントエンド開発に再入門する」タスクフォースの進め方こんにちは。開発本部の宍戸です。 メドレーでは定期的に、テーマに沿って組織の技術的な底上げを行うための機会（タスクフォースと呼んでいます）を行っています。そのタスクフォースの１つとして先日、フロントエンド開発力のベースアップを目的としたタスクフォースを行いました。本記事では、その取組みについてご紹介したいと思います。 背景メドレーには現在 20 人弱のエンジニアが在籍しており、その約半数がサーバーサイド出身者です。また普段の開発においては、一つの機能をフロントからサーバーサイドまで一貫して一人が担当するケースが多くあります。サーバーサイド出身者のフロントエンド開発のスキルセットには多少ばらつきはあるものの、普段の開発業務ではレビュー等でそれぞれサポートしつつ開発を行っています。 しかし、フロントエンドの基礎的な部分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･
GitHub - airbnb/react-sketchapp: render React components to Sketch ⚛️💎
今さら聞けないSPAのCORS対策の話
