技術広報のyayawowoです。
突然ですが、変化の多いフロントエンド関連の情報を日頃どのようにインプットされておりますでしょうか？
SNSやWeb記事、最近ではPodcastという方もいると思います。
しかしながら「時間に余裕がない！」という方も多くいらっしゃるはずです。
そんな方のために、ラクスでは
フロントエンド関連の最新ニュースや記事を定期的にピックアップし、エンジニア同士が楽しみながら学習するためのコミュニティ『フロントエンドTechCafe』
という憩いの場を定期的にご提供しております。
本記事では、2020年～2021年に開催した「フロントエンドTechCafe」のイベント内容をまとめております！
- フロントエンド領域の知見を高めたい方
- フロントエンドエンジニアを目指している方
- フロントエンドTechCafeにご興味ある方
などなど、是非ご参考いただけますと幸いです。
【目次】
「”フロントエンド” TechCafe」は、JavaScriptなどフロントエンド関連の技術要素を軸としてエンジニアと技術が交差する憩いの場（カフェ）になることを目指しています。 主に、JavaScriptに関して学習中の初級エンジニア～シニアエンジニアを対象としておりますが、 という思いで開催をしております！ 初開催したのは、2020/7/31です。 ＜ 導入トピック ＞ ＜ Vue.js関連情報 ＞ ＜ TypeScript関連情報 ＞ ・ TypeScript4.0で導入された新機能 ＜ ES関連情報 ＞ ・仕様一覧（Finished Proposals） ＜ サーバーサイド関連情報 ＞ ＜ JavaScript・フロントエンド全般 ＞ 議題内容の詳細（記事リンク）などは、以下ShowNoteをご確認ください！
hackmd.io 2020/11/11に、「Vue3」をテーマに2回目のフロントエンドTechCafeを開催し、 参加者も300名近くなり、 「CompositionAPIは嬉しい」 などが話題となり、大変盛り上がりのあるイベントとなりました。 第3回目は2021/2/10に開催！ ＜ 印象に残った・興味深いトピックス ＞ ◆ Vue3リリース ◆ Chromium edge のリリース ◆ webpack5リリース webpack（=モジュールバンドラー）とは？ ◆ TypeScript4.0 のリリース ◆ Vuex4リリース ◆ Babel 7.9.0リリース ＜ ツール・ライブラリ ＞
◆ Vite ◆ core-jsのメンテナンス再開 ここでメンテナンスを取り巻く状況についてをご紹介しました。 メンバーからも、 ・多くの人が利用していると思うが開発継続には人員や収益などのリソースが必要 のような意見がありました。 ◆ StateOfJS2020（10000人のエンジニアによる投票結果） ◆ Denoの紹介やNodeとの違いなど 本時間では、Node.jsの問題点やDenoの特徴について、参加者と話をしました。 その他トピックとして、 などをピックアップし、限られた時間の中で参加者と一緒に楽しむことができました。 議題内容の詳細（記事リンク）などは、以下ShowNoteをご確認ください！
hackmd.io 2021/3/10に開催した本イベントは、参加申込が450名を超える大人気イベントとなりました！ ＜ ラクスエンジニア＋参加者の皆さまお薦めのツール類 ＞ ◆ VSCode拡張 ◆ 開発者ツール / Chrome拡張 ・ブラウザマクロのアドオンで、JSソースを3個まで入れることが可能で便利 ◆ Webページ関連（参考情報系） ◆ JSライブラリ json server htmlhint Testing library ◆ API関連 Swagger Postman WireMock Open API generator その他のツールとしては、 議題内容の詳細（記事リンク）などは、以下ShowNoteをご確認ください！ 3/10に開催した「「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe」が大好評ということもあり、2021/6/16に同テーマにて再演しました！ ＜ ラクスエンジニアのお薦めのツール類 ＞ ◆ Google Chrome拡張 OneTab Awesome Screenshot stylus
chrome.google.com などなど、前回ご紹介したツール等も踏まえてフロントエンド開発に欠かせない便利ルール・設定・プラグインをご紹介させていただきました！ 議題内容の詳細（記事リンク）などは、以下ShowNoteをご確認ください！ 2021年度最後のフロントエンドTechCafeは、ラクスのフロントエンドエンジニアの目線から押さえておくべき技術を6テーマにてご紹介しました。 本テーマは、弊社フロントエンドエンジニアが執筆した以下記事を参考にしておりますので合わせてご確認ください！ ＜ JavaScript ＞ 【DOM操作の例】 ◆ ES6（ES2015）以降の記法 ◆ API呼び出し 【FetchAPI】 XMLHttpRequest（XHR）とjQueryでの書き方は、ShowNoteをご確認ください！ ＜ TypeScript ＞ ◆ TypeScriptの特徴 👇 ＜ フレームワーク ＞ ◆ フロントエンドフレームワークの種類 当日はフレームワークの世界/日本のシェア率を比較したりしました！ ＜ ④SPA（Single Page Application） ＞ 近年では、Webアプリケーションでも、スマートフォンのアプリのような柔軟で表現に富んだ操作性や体験が求められることが多くなったため、SPAが重要とされております。 ＜ テスト ＞ ＜ メジャーなブラウザ ＞ 議題内容の詳細（記事リンク）などは、以下ShowNoteをご確認ください！ ラクスでは、フロントエンドエンジニアだけでなく幅広い職種で採用を強化しております。 【こんな方におすすめ】 以下申込フォームとなります。 「イベントで登壇していた●●さんとお話をしたい・・・」 フロントエンド関連の最新ニュース・記事について語り合う、「フロントエンドTechCafe」のまとめはいかがでしたでしょうか？ などにとって本ブログ及び、フロントエンドTechCafeが有意義な情報となっていますと幸いです。 最後までお読みいただきありがとうございました！ エンジニア中途採用サイト カジュアル面談お申込みフォーム イベント情報フロントエンドTechCafeとは
なお、ラクスで採用している技術要素の関係から、JavaScriptやTypeScriptなどの話題が多くなる可能性がございます。
そちらはご承知おきくださいませ。2020年度開催
フロントエンドのニュースや記事を紹介して語り合う会@TechCafe（Vue,TS成分多め）
初回の議題は以下のような内容でした。
・2020年の11の必見のフロントエンドトレンド
参考にした記事から注目ポイントを厳選し、今後のトレンドについて意見交換をしました。
◆ Vue3 RCリリース
新機能であるComposition API 、Teleport 、Fragments、Emits Component Optionについて紹介。
また、Vue Composition APIのメリット/デメリットをまとめた記事を見た上で、コンポ―ネント間でのロジックの断片化などの課題感を実際の現場状況と踏まえ協議しました。
・ TypeScript、JavaScritpの誕生背景や歴史
・ TypeScriptのenumについての評価
などなど
◆ ES2020リリース
・JavaScript: Latest Stage-4 features
についてご紹介しました。
イベント当時にStage4まで進んでいる提案リストもあるようです。
DenoとNodeのパフォーマンス比較記事を紹介。
残り時間を利用し、JavaScript・フロントエンド全般の気になった記事を基に議論しました。
JavaScriptライブラリを読むコツや、DOMとうまく付き合う方法などがありました。「Vue.js 3.0」を語るフロントエンドTechCafe
リリースノート、vue3マイグレーションガイド: イントロダクション、RFCを見ながら
以下議題について当社出演者が語り合いました。
「プロダクトが大規模化する中でコードの分割をするも、2系のmixinでは難点が多そう・・・」
「UnitTestも書きやすくなりそう」
「Vue3への移行は？」「2020年の振り返りイチオシ情報」を語るフロントエンドTechCafe
タイトルの通り、2020年のフロントエンド関連の様々なニュースのうち、出演者イチオシのものを選んで語り合った会です。
リリースノート、マイグレーションガイドなどでリリース内容の確認をしました。
www.publickey1.jp
旧edgeとの違いや、サポート終了の話で盛り上がりました。
webpack.js.org
webpack5変更点とは？
といった観点で記事をピックアップし、語りました。
devblogs.microsoft.com
追加機能をまとめたQiitaの記事を見ながら、どのように導入ができそうか話しました。
今回のアップデートは、安全性や利便性を高める比較的安定した機能追加が多かったとこのことです。
弊社メンバーは、「機能よりもVSCodeの構文ハイライトの高速化が気になった」とのことでした。
github.com
Vue4の基本的な使い方は前バージョンと変わらないが、初期化が大きく変わっているとのこと。
リリース内容だけでなく、その他のエコシステムやUIライブラリなどもピックアップしております！
7.9.0 Released: Smaller preset-env output, Typescript 3.8 support and a new JSX transform · Babel
8.0に向けた準備。
JSX変換の最適化やパンドルサイズの縮小が追加されました！
github.com
Viteは、ノーバンドルなビルドツールです。
ビルドが遅いという話がメンバーからよく話に上がるVue CLIと比べてると、開発は楽になりそうであると話題になりました。
core-jsとは、babelのpolyfill内部で使われているモジュール集であり、
ブラウザによっては実装されていないPromiseやArray系の関数を使えるようにするものです。
5年間、1人のメンテナによってメンテナンスがされ続けていたが、交通事故を起こしてしまい開発が停止。
メンテナが2020/10に復帰し、開発が再開されたのことです。
・開発が終了するリスクを考えると、自身も何かしらの形で利用しているOSSへ貢献していきたいと思わされた
2020.stateofjs.com
それぞれの分野のランキングの推移は…？
Denoは、Node.jasの作者であるRyan Dahlが新たに作ったJavaScriptの実行環境です。
deno.land
「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe
では早速、当日お話しした内容を見てましょう。
※イベント申込時に、参加者の皆様にアンケートを実施しました。
visualstudio.microsoft.com
marketplace.visualstudio.com
code.visualstudio.com
marketplace.visualstudio.com
marketplace.visualstudio.com
marketplace.visualstudio.com
marketplace.visualstudio.com
chrome.google.com
chrome.google.com
developer.mozilla.org
chrome.google.com
developer.mozilla.org
caniuse.com
www.npmjs.com
www.npmjs.com
testing-library.com
swagger.io
www.postman.com
wiremock.org
openapi-generator.tech
インテリセンス（コード補完など）ツールであるTabneneやkite、
Bootstrapなどと同じCSSフレームワークの一種であるtailwindcssなどがあげられました。
hackmd.io2021年度開催
「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe #2
◆ VSCode拡張
chrome.google.com
chrome.google.com
hackmd.io「再入門！フロントエンドエンジニアが押さえておくべき技術」を語るフロントエンドTechCafe
tech-blog.rakus.co.jp
◆ DOM操作の仕方
DOM(DocumentObjectModel）とは、ブラウザが表示しているHTMLの要素をJavaScriptで操作しやすいようにしたデータ構造です。
また、「操作しやすい」といっても、最近では直接DOMを扱うこと自体を避けるようにもなってきています。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<section>
<img src="example.png">
<p>リンクは<a href="https://foo.example.com/">こちら</a></p>
</section>
</body>
</html>
const link = document.querySelector('a');
link.textContent = 'あちら';
link.href = 'https://bar.example.com';
ES(ECMAScript)とは、JavaScriptの標準規格を定めたものです。
JavaScriptとECMAScriptの関係ですが、JavaScriptはあくまでブラウザ上で動作するスクリプト言語で、厳密にはブラウザによって仕様が異なります。
ECMAScriptは、JavaScriptの標準規格で、各ブラウザはECMAScriptの仕様に沿ってJavaScriptを開発しています。
フロントエンド開発ではバックエンドのAPI呼び出しの知識が必須となります。
この辺りもJSフレームワーク任せなことが多いが、基礎知識として覚えておくと良いと思います。
API呼び出しの書き方例は以下の通りです。// APIを呼び出した結果をconsoleログに出力
const url = 'https://foo.example.com/api'
async function callApi() {
const res = await fetch(url);
const text = await res.text();
console.log(text);
}
callApi();
JavaScriptに変換されれます。
また、TypeScriptで書かれたプログラムを実行したい場合、TypeScriptをそのまま実行するのではなくTypeScriptをJavaScriptに変換させて実行します。// typescript
const foo: string = 'foo';
// javascript
"use strict";
var foo = 'foo';
フロントエンドフレームワークとは、UIのコンポーネント化やリアクティブなデータバインティング処理をまとめたものです。
以下、メジャーなものを抜粋しました。
ja.reactjs.org
angular.jp
その他に、コンポーネント指向や仮想DOMについても分かりやすく整理し、参加者の皆さんで語り合いました。
SPAとは、（極めてざっくり言うと）ユーザーがアクセスするWebページは空の最初の１ページのみで、バックエンドのAPIを呼び出し動的に画面の要素の構築、画面遷移を行うタイプのアプリケーションことです。
◆ テストの種類
テストの種類は以下があげられます。
イベント当日は、各テストのメリット/デメリットについてお話ししました。
最後にメジャーなブラウザについてご紹介しましたが、時間が限られおり読み上げる程度で終了してしまいました…。
取り上げたブラウザは以下の通りです。
hackmd.ioラクスのエンジニアと話をしてみたい方へ
とはいえ、まだ応募する段階ではないという方にはカジュアル面談をご案内しております！
rakus.hubspotpagebuilder.com
などご要望がありましたらその旨をご記入の上、お申込みください！
お気軽にどうぞ 😊まとめ
2022年度もフロントエンドTechCafeの開催を予定しております！
ご興味持たれる方がおりましたら、是非ご参加くださいませ。
次回、フロントエンドTechCafeは、ラクスconnpassページにてご案内させていただきます。
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！
rakus.connpass.com
