2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3
Vue + TS に触れて2週間でシングルページアプリケーションを作ってリリースした話 - GS2 Blog
みなさん、こんにちは。GS2の丹羽です。 本日 Game Server Services は次世代版のベータテストを開始しました。 これまで提供していた GS2 を GS2 Classic と呼び、次世代版 GS2 を単に GS2 と呼びます。 gs2.io GS2 のリリースにあたっては非常に多くの新しいチャレンジを行いました。 それについては少しずつブログや登壇を通じて皆さんにお伝えしていきたいと思います。 今回は、GS2 のマネージメントコンソールをシングルページアプリケーションとして作りました。 しかも、Vue + TypeScript に触れて2週間で。というトピックで振り返ってみようと思います。 なぜ Vue + TypeScript にいたったか GS2 Classic のマネージメントコンソールは Google App Engine を使用していました。 弊社はフルサーバレ
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
GitHub - facebook/hermes: A JavaScript engine optimized for running React Native.
Hermes is a JavaScript engine optimized for fast start-up of React Native apps. It features ahead-of-time static optimization and compact bytecode. If you're only interested in using pre-built Hermes in a new or existing React Native app, you do not need to follow this guide or have direct access to the Hermes source. Instead, just follow these instructions to enable Hermes. Noted that each Hermes
JavascriptのObjectリテラルとJSON.parseについて - abcdefGets
V8のJSON.parseについて 最近(ちょっと前か)話題のオブジェクトリテラルよりもJSON.parseのほうが早い件について。 その理由を内部実装の観点から書く。 また注意点を最後に書いた。 話題のブログは以下から https://v8.dev/blog/cost-of-javascript-2019 パースについて V8はjavascriptコードをパースするにあたって、Lazy Parseを行っている。 Lazy Parse javascriptはブラウザという特殊な環境で実行される言語であるため、パースにも少々工夫が必要になる。 基本的にV8はすべてのソースコードをパースしない。 一旦グローバルスコープにあるものだけをちゃんとパースして、それ以外はPreParserというパーサで関数だけをかき集める。 function foo() { } function bar() { fu
2019年前半の「JavaScriptをちゃんとやるための地図」（追記あり）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の
"型パズル"との付き合い方
まえおき❌ 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 Registryの今後 - from scratch
さて、前回は tink と yarn v2 における CLI 戦略の話でした。次は JavaScript Registry についてです。 ちなみにこの内容が今回 JSConf.EU 2019 で一番盛り上がったトピックです。 JavaScript Registry とは JavaScript Package をバックエンドで管理しているサービスです。 npm が管理しているものがいちばん有名です。他にも GitHub が管理する Registry が公開される予定です。 The economics of Package Management the economics of package management slide: github.com video: www.youtube.com 「Package Managementの経済」というタイトルです。 聴講者からすると、何話すのか
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
![フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ffb135f328e171913e6cc1efa351ee753c6b7f94/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2Fphoto_47592_20151013_min.jpg)
ネットワークグラフ描画ライブラリ7個まとめ - Qiita
参考ページ D3.js D3.js v4/v5 force simulation 最小構成 – サンプル d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 sigma.js How to use Sigmajs to display your graph ? vis.js Network Examples vis.jsを使ってネットワークを書く vis.jsでグラフ描写 VivaGraphJS VivaGraphJS Amazon Visualization Cola.js Cola.js cola.jsによるデータビジュアライゼーション Cytoscape.js Cytoscape.jsを試してみた Cytoscape.js でインタラクティブなグラフ構造描画 - WordNet の可視化例 自律分散監視システムとそれを利用したネットワークグラフ
TypeScript教育用コンテンツ公開のお知らせ | フューチャー技術ブログ
2019年頭より少しずつ書いていたTypeScriptの教育コンテンツをクリエイティブ・コモンズ4.0の表示 - 継承 （CC BY-SA 4.0）で公開します。といっても完成版ではなく、アーリーアクセス版のような品質であることをご了承ください。 仕事ですぐに使えるTypeScript Web版に加えてPDF版もダウンロード可能です。 そもそもこの資料を書き始めたきっかけですが、フューチャーのようなB2Bな会社であっても、最近はフロントエンドの比重が高まっているところから出発しています。僕もフューチャーに転職後からReactでがっつり1年以上の案件をやったり、半年ぐらいのAngular案件をやったりしています。会社としてはVue.jsを推しています。グループ会社の東京カレンダーはReactを使っていたりもします。要件に合わせていろいろですね。B2B2Cな案件も多いですし、お客様の求めるUX
grdの作者が考える、いまフロントエンドエンジニアに求められる「速度という機能」 - エンジニアHub｜Webエンジニアのキャリアを考える！
grdの作者が考える、いまフロントエンドエンジニアに求められる「速度という機能」 Webパフォーマンスの改善に、並々ならぬ情熱を傾けるエンジニアの泉水翔吾（@1000ch）さん。氏の手がけるOSSはこの情熱を体現するかのように、パフォーマンス改善にフォーカスしたものが多数あります。なぜWebパフォーマンスにこだわるのか、そして現在のフロントエンドエンジニアに求められる技術を聞きました。 「サイトの表示に3秒以上かかると、訪問者の53%がそのサイトから離脱する」 Googleが公開した上記のドキュメントは、Webの「使いやすさ」とは、スピードと不可分なものであることを示しています。 「パフォーマンスはサービスが持つべき“機能”の一部」と語るのは、『超速! Webページ速度改善ガイド』の著者の一人である泉水翔吾（せんすい・しょうご／ @1000ch ）さん。彼は、前職の株式会社サイバーエージェ
実践TypeScript - 内容のご紹介 -｜Takepepe
ここ最近、TypeScript の盛り上がりが本当にすごいですね。私ごとながら、昨年末からずっと書き続けていた TypeScript の技術書が、ようやく本日校了しました。Twitter で告知をしたところ、想像以上に反響があり驚いています。あれだけ高価な本、予約するには情報が不十分です。「買ってみたが期待はずれだった」という方が出ないよう、内容についてご紹介します。 対象読者もし皆さまが、体型的にアプリケーションを構築する術を身に付けたいと考えているなら、別途、書籍や文献をお求めください。本書は、JavaScript には存在しない、TypeScript 特有の知識を体系的に学ぶための一冊です。想定している対象読者は、ある程度 JavaScript でアプリケーションを作った経験がある方で、型の話がメインです。 本書の目的様々な事情から、TypeScript の現場導
Generative Art with JavaScript #1 概要編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本稿は Generative Art の簡単な入門記事です。今回は周辺知識の説明を、 次回はサンプルコードの紹介 を行います。コードだけ読みたいという方は今回をスキップしても問題ありません。 「 Generative Art （ジェネラティブ・アート）」とはプログラムによって自動的に生成された芸術作品です。 「芸術」というと堅苦しい印象を受けますが、ノートの落書きでもノートルダム大聖堂にあるルーベンスの祭壇画でも本人次第で芸術足り得るので問題ありません。 本稿は Generative Art の概要とサンプルコードの紹介を通し、プログラ
メンテナンスしやすいVueComponentを設計するために気をつけていること
はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね？)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しい API
unstated-next による Redux に頼らない状態管理の考察
Nondestructive_TypeScript.md
Generative Artistry
JavaScriptの本を書くときに参考にしてるもの