2018」25日目の記事です。devblog.thebase.inこんにちは。Groupに所属している三佐和です。ネットショップ作成サービス「BASE」のフロントエンドを担当しています。「BASE」の管理画面リニューアルプロジェクトのこれまでとこれからで話しているように、現在BASEでは本格的にフロントエンドをVue.jsで置き換えるプロジェクトが進行しています。これまでのBASEのフロントエンドは、主にマークアッパーを含むデザイナーが中心になってjQueryでゴリゴリと実装していました。Groupが発足したものの、まだまだこれからで、しばらくはデザイナーと協力してサービスを作っていくスタンスで開発を進めています。そのため、モダンなフロントエンドの考え方や新しく導入されたシステムについて、デザイナーの方へ伝えたり、慣れてもらうことの重要性が高まっていました。当初はこんな声もありました。Groupとして、主にデザイナー向けにVue.js勉強会を開催することにしました。Camp」と名付けました!このブログでは、それを開催する過程で伝えたかったことや考えていたこと、準備したことを紹介していけたらと思います。対象を考えるBASEの場合は主に以下の3種類のロールが「デザイナー」と呼ばれています。いわゆるマークアッパーで、jQueryを使ったフロントエンドコーディングができるUIデザインができて、HTMLとCSSでそれを表現できるUIデザイン、ビジュアルデザインの専門で実装はほとんどしないこのうち今回対象にしたのは、上の2つで、前提としてある程度HTMLとCSSのことは分かっている、ということをラインとしています。これらの条件に当てはまる人は一旦Vue.jsにはまったく触ったことがない人、と仮定しています。覚えてもらいたい・知ってもらいたいこと対象を絞ったので、次に覚えてもらいたいことを考えていきます。「デザイナー」と呼ばれる方にフロントエンドで責任をもってもらいたい部分は、主に以下の2つだと考えました。自社開発のコンポーネントを実際に利用した開発を体感してもらうcss-moduleを使ったスタイリングフロントエンドにおける簡単なCRUD操作これらであるとして題材を考えることにしました。Componentsな考え方に触れてもらう、というところまではすぐに決まりました。後半は、なにか一つアプリを作る体験をしてもらいたいと考えていました。これらを満たせるアプリを考えたときに、JavaScript界隈ではおなじみ(?)のTodoMVCというものを紹介してもらいました。これをベースに考えていくと上記のような要素が満たせそうだったので、これをアレンジしたTodoアプリを今回の題材にすることにしました。</li></ul>このようなリストに含まれるチェックボックスや削除ボタンのコンポーネントをBBQを使って書くと以下のように書くことができます。</li></ul>このような変更を全体的に行うことで、それぞれをBBQを使って実装することを体験してもらうことができます。ファイル内にスタイルを書くことで、そのコンポーネントの中でしか影響を与えないCSSを作ることができます。}</style>事前に準備したことテンプレートプロジェクトの作成デザイナーの人にwebpackの設定をしてもらいたいわけではないので、BASEで実際に使用している構成と近い形になるよう、事前に以下のような設定を行ったプロジェクトを準備しました。Vue.jsでの開発が始められます。一般的なwebpackの設定などは割愛しつつ、特に重要なポイントのみ列挙します。postcss-loaderwebpackを設定TypeScript、シングルファイルコンポーネント、css-moduleが使えるよう設定します。なっているSFCのファイルをimportするときに、記述されているコードをTypeScriptとして認識できるようにする必要があります。このために以下のような型定義ファイルを作成します。TodoListを作成していくドキュメントを用意をしました。開発環境作りやドキュメントを作りながら、どのような順序でチュートリアルを進め、どのような説明をどのタイミングで伝えたらVue.js初学者にとって分かりやすい勉強会になるかを考えて準備を進めてきました。Camp専用のSlackチャンネルの中で、参加メンバー同士で参考となるリンクや追加の課題を共有し合ったり、とサポートしてくれたおかげで会を円滑に進めることができました。楽しかったです!追加の課題なんかも丁度良い難易度に感じました。第二回目があれば是非参加したいと思います。題材がちょうど良かったです。ある程度人集まってしたので色々フォローしてもらったり解説してもらったりすごく有意義でした。業務でそれなりに使ってる方だったのでまあまあ自信もって臨みましたが、改めてこうやってステップバイステップでやっていく中で、結構基本的なところで理解できてなかった点が色々と発見できたので非常に良い機会でした!このような声をもらうことができたので、第二回目も開催できたら、と思います。BASEがもっと好きになる。)の開発チームによるブログです。Groupの大木です。Developerをしている東口です。Groupのマネージャーをしている山田です。12/1から始まっ...Archiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。