Coder's High - HAMWORKS Special

Coder's High HAMWORKS Specialと題して、次の2本で構成します。

• 最近のフロントエンドのビルド環境とローカル開発環境
• フロントエンド開発の現場でよく利用するJavaScriptメソッドや関数

当日参加できない方も、こちらにお申し込みいただければ、後日アーカイブ（録画）を視聴いただけます。

なお、イベント開催日以降のお申し込みはできません。

セッション概要：
駆け出しエンジニアと繋がりたい人にも伝えたい
まだgulp使ってるの？ 最近のフロントエンドのビルド環境とローカル開発環境

数年前は gulp.js や Grunt.js を使い、SassファイルのCSS 変換や JavaScript の結合、画像の圧縮、書いたコードのエラーチェックなど、作業の様々なことを自動化してきたビルド環境。デザイナーでもそれらツールを活用してきて、いまでも現役で活用されているところを見かけます。私も以前はgulp.jsを活用し、その便利さを自身の勉強会でも伝えてきました。

しかし、ビルド環境をつくる壁があり、手間で使わないまま開発をしてしまうプロジェクトもまだまだあります。特にCSSやJavaScriptはビルド前提でコードが書かれることが多いですが、HTMLについては導入されていないことが多いです。また、HTMLの開発で多いのは、共通部分をPHPやSSIインクルード前提に作られているサイトにもかかわらず、ローカルの確認環境が用意されていなく、オンラインのサーバーにアップしないと見れない、という場合も多く耳にします。

このセッションでは、最近のビルド環境をどのように構築し、複数人でも共有しやすく、ローカルの確認環境を用意しやすくするかの再確認と、CSSやJavaScriptだけでなく、HTMLでもビルドするメリットなどをお話します。

セッション概要：
ググり方がわからないけどフロントエンド開発の現場でよく利用するJavaScriptメソッドや関数

昨今の現場は、React や Vue など各種 JavaScript のフレームワークが、単純なサイトの構築からWebアプリ構築まで幅広く利用されています。少し前までは jQuery を利用してた部分も React や Vue などに置き換わり、JavaScript 単体のメソッドや関数を駆使して構築することが多くなりました。

このセッションでは、ググり方がわからないのに、昨今のフロントエンド開発の現場でよく利用される JavaScript 単体のメソッドや関数などをピックアップし、サンプルコードを交えて紹介します。JavaScriptのコードで、見たことがあるけどどのような機能なのかわからなかったり、「そんな書き方があったの！？」と思うようなモダンな書き方などをご紹介します。

例

ES2015以前では、オブジェクトへの呼び出しを rectangle.width でアクセスしていました。
ES2015以降には、分割代入という機能が実装されました。この機能は、例にあるように { } オブジェクトからデータを抽出して変数として割り当てることができます。

``
// ES2015以降
const rectangle = {
width: 200,
height: 100,
ham: '（´°ム°）'
}
const { width, height } = rectangle;
console.log(width); // 200
console.log(height); // 100
console.log(ham); // ham is not defined

// ES2015以前
console.log(rectangle.width); // 200
console.log(rectangle.height); // 100
console.log(rectangle.ham); // （´°ム°）
``

イベント概要

• 開催日：2021年7月14日[水] 20:00-22:00（23:00までアフタートーク）
• 形式：オンライン（Zoomウェビナー）
• 参加費：3,800円

当日の進行などに関して

• 19:45以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
• Zoomウェビナーのため、参加される方のカメラ、マイクは自動的にオフになっています（オンにできません）。
• 質問事項は、Zoomウェビナー内の「Q&A」でなく、Sli.doにご記入ください。事前に記入いただくことも可能です。
• ツイートされる場合には、ハッシュタグは「#cssnite」をお付けください。
• 終演時間は若干の延長の可能性があります。また、終了後、1時間を目安に「アフタートーク」を予定。

視聴環境

ハンズオンとして参加される方は、Zoomの視聴用のデバイスと操作用のPCを分けてご用意いただくのがオススメです。

• 操作用のPC
• Zoom視聴用のデバイス（PC/タブレット/スマホ）

後日の視聴

当日見られなかった方、および、改めて見返したい方には、5日後（翌月曜日）に発行するフォローアップメールにて視聴URLをお知らせします。

• 動画の公開は開催から3週間を予定。

その他

• 開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
• 本セミナーのタイトルや内容は調整されることがあります。

協賛

CSS Niteには次の企業をはじめ、多くの制作会社に協賛いただいています。