HTML
CSS
JavaScript
frontend
2019

「Front-end Developer Handbook 2019」について超ざっくり翻訳

英語ができないエンジニアのメモです、

もし翻訳に間違いなどありましたら、編集リクエストを投げてもらえると助かります。。。


そもそも「Front-end Developer Handbook」とは


概要

原文はこちら


何が書いてあるの?

フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。

PDFでダウンロードしたり、Webブラウザ版をオンラインで読むことも可能。


誰が書いたの?

「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」(O'Reilly)や「jQuery Cookbook」(O'Reilly)、「JavaScript Enlightenment」(O'Reilly)などを執筆したCody Lindley氏。

参考:https://github.com/codylindley


0.1 — Recap of Front-end Development in 2018


1. React had several notable releases this past year that included, lifecycle methods, context API, suspense, and React hooks.

Reactは、昨年、lifecycle methods, context API, suspense, React hooksなど注目すべきリリースをいくつか発表した。


2. Microsoft buys Github. Yeah, that happened.

MicrosoftがGithubを買収。


3. Fonts created by CSS became a thing.

CSSによって作成されたフォントが人気になる。


4. What I used to call front-end driven apps, gets labeled "serverless". Unfortunately, this term is overloaded. However, the term JAMstack does seem to be resonating with developers.

私がフロントエンド駆動のアプリと呼んでいたものは、「サーバーレス」というラベルが付けられている。残念ながら、この用語は過負荷である。しかし、JAMstackという用語は開発者に共鳴している。


5. Google offered some neat tools this year to help make webpages load faster, i.e. squoosh and quicklink.

Googleは今年、ウェブページの読み込みを速くするための便利なツール(squooshやquicklink)を提案した。


6. Vue gets more Github stars than React this year. But React remains dominate in terms of use.

Vueは今年、Reactより多くのGithubスターを獲得した。しかし、Reactは依然として利用の面で支配している。


7. A solution similar to React, without a virtual DOM or JSX, is introduced RE:DOM.

仮想DOMやJSXを使用せずにReactに似たソリューションが、RE:DOMとして導入された。


8. Alternatives to NW.js and Electron show up, DeskGap and Neutralino.js.

NW.jsとElectronに代わる、DeskGapとNeutralino.jsが登場。


9. In 2017 the great divide between a front-end HTML & CSS developer v.s. front-end application developer is realized/verbalized. In 2018 that divide has grown wider and deeper and more people start to feel the divide.

2017年、front-end HTML & CSS developer と front-end application developer の間にある大きな格差がはっきり/言語化された。 2018年、その格差はより広く、より深くなり、より多くの人々がその格差を感じ始めた。


.10 This year, like most recent years, was stock full of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue etc...) Let me list them for you. Radi.js, DisplayJS, Stimulus, Omi, Quasar.

ここ数年のように、今年も、主流のJavaScriptアプリツール(React、Angular、Vueなど)と対抗しようとするアプリ/フレームワークソリューションが溢れていた。リストアップしよう。 Radi.js, DisplayJS, Stimulus, Omi, Quasar。


11. JavaScript frameworks start offering their own languages that compile to JavaScript (e.g. Mint).

JavaScriptフレームワークは、JavaScriptにコンパイルされる独自の言語(例えばMint)の提供を開始する。


12. CodeSandbox evolves to become the dominant solution for online code sharing.

CodeSandboxは、オンラインコード共有のための主要なソリューションになるまで進化している。


13. CSS Grid and CSS Flexbox are fully supported in modern browsers and get taken for some serious rides. But many are left wondering when to use which one and how.

CSS GridとCSS Flexboxは最近のブラウザで完全にサポートされており、いくつかの深刻な問題に対応している。しかし、それらをどのように使用するのか、多くの人が疑問に思ったままである。


14. Many realize the long terms costs of bolted on type systems (e.g. TypeScript and Flow). Some concluded bolted on systems are not unlike bolted on module systems (i.e. AMD/Require.js) and come with more issues than solutions. Minimally, many developers realize that if types are needed in large code bases, that bolted on systems are not ideal in comparison to languages that have them baked in (e.g. Reason, Purescript, Elm).

多くの人が、型(TypeScriptやFlowなど)を導入することによる長期的なコストを認識している。

一部では、システムに固定されるのと、モジュールに固定される(AMD/Require.js)では違わず、解決よりも多くの問題があると結論づけた。

多くの開発者は、大規模なコードベースで型が必要な場合、システムで固定されていることが、それらを焼き付けた言語(Reason、Purescript、Elmなど)と比べて理想的ではないことを認識している。


15. CSS Variables gain browser support among modern web browsers

CSS Variablesは最近のウェブブラウザの間でブラウザサポートを得る


16. The flavors of CSS in JS exploded and some question the practice.

CSS in JSの人気は爆発的であり、そのプラクティスに疑問を抱く人もいる


17. ES modules are now usable in modern browsers and dynamic imports are close behind. We are even seeing a shift in tooling around this fact.

ESモジュールは現在、最新のブラウザで使用でき、動的インポートはすぐ後ろにある。


18. Many realize that end to end testing is the starting point of doing tests correctly in large part due to Cypress (i.e. Cypress first, then Jest).

多くの人が、E2EテストがCypressによるテストの大部分を正しく行うための出発点であることを認識している(Cypressが最初、次にJest)。


19. While Webpack was heavily used again this year, many developers found Parcel to be easier to get up and running.

Webpackは今年も頻繁に使われるようになったが、多くの開発者はParcelの方が起動しやすく実行しやすいと感じた。


20. One of the most important questions asked this year was, what is the cost of JavaScript.

今年の最も重要な論点の1つは、JavaScriptのコストである。


21. Babel 7 was released this year. That's a big deal because the last major release was almost three years ago.

Babel7は今年リリースされた。最後のメジャーリリースはほぼ3年前だったので、それは大事件である。


21. The reality of too much JavaScript change too fast is realized and people start talking about what you need to know before you can even learn something like React. The fight is real.

JavaScriptの変更が早すぎるという真実が現実のものとなり、Reactのようなことを学ぶ前に、知っておくべきことについて人々が話し始めている。戦いは本物だ。


22. Most developers found GraphQL, via Apollo, and see it as the next evolution for data API's.

ほとんどの開発者はApolloを介してGraphQLを見つけ、データAPIの次の進化と見なしている。


23. Gulp and friends definitely took a back seat to NPM/Yarn run. But this did not stop Microsoft from getting in the game with Just.

Gulpと友達は間違いなくNPM / Yarn runに後部座席を取った。しかし、これはMicrosoftがJustに参戦するのを妨げるものではなかった。


24. This year, one can not only lint/hint HTML, CSS, and JavaScript they can lint/hint the web itself.

今年は、HTML、CSS、およびJavaScriptだけでなく、Web自体をlint/hintにすることができる


25. The 2018 Front-End Tooling survey is worth reading if only to realize just how much jQuery is still used.

2018年のFront-End Tooling調査は、どれだけのjQueryがまだ使用されているかを理解するためだけに読む価値がある。


26. It can't be denied TypeScript gained a lot of users this year.

TypeScriptが今年多くのユーザーを獲得したことは否定できない。


27. VScode, dominates as the code editor of choice.

VScodeは、選択のコードエディタとして優位。


0.2 — In 2019, Expect...


1. Hopefully, more of this to come. "Stepping away from Sass".

うまくいけば、もっとくるだろう。 「Sassから離れる」


2. Still a good idea to keep an eye on and learn about the up coming additions (and potential additions) to CSS via https://cssdb.org

https://cssdb.org を通じて、CSSに今後追加される機能(および将来追加される可能性のある機能)について注意を払い、学習することをお勧めする。

The WebP image format from Google could reach support from all modern browsers this year.


3. GoogleからのWebP画像フォーマットは、今年、すべてのモダンブラウザからの支持を得ることができた。


4. Prepack will continue to cook.

Prepackは調理を続けるでしょう。


5. GraphQL will continue to gain massive adoption.

GraphQLは大規模的に採用され続けるだろう。


4. The, "State of JavaScript" survey authors will add a "State of CSS" survey in 2019.

"State of JavaScript"調査の著者は、2019年に "State of CSS"調査を追加する予定だろう。


5. Keep an eye on Web Animations API.

Web Animations APIに注目。


6. Someone you know will try and convince you to use TypeScript.

あなたの知っている誰かが、TypeScriptを試して、あなたに使うように説得するだろう。


7. Babel will get some competition from swc-project.

Babelはswc-projectとの競争をある程度受けるでしょう。


8. The case for, JAMStack's will continue.

JAMStackのは続くだろう。


9. Chasing the one code base to many platforms will continue.

1つのコードベースを多くのプラットフォームに追いかけるのは続くだろう。


10. More developers will turn to languages like ReasonML over JavaScript/TypeScript for large code bases.

より多くの開発者は、大きなコードベースのためにJavaScript/TypeScriptよりもReasonMLのような言語に目を向けるだろう。


11. More, largely used projects will start to shed jQuery in favor of native DOM solutions.

さらに、主に使用されているプロジェクトはネイティブDOMソリューションを支持してjQueryを脱ぎ捨て始めるだろう。


12. Web Components! At this point, I have no idea how Web Components will play out. Reality is they are not going away, and they have not gained a lot of momentum/usage once the hype ended.

Webコンポーネント!現時点では、Webコンポーネントがどのように機能するかはわからない。実際に、それらは消え去っていないし、誇大宣伝が終わっても多くの勢い/用法を得ていない。