JavaScript, seminar

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

6月21日(日曜日)に午前11時から開催されたオンラインイベント「チャリティカンファレンス沖縄」を視聴しました。

午前中のセッションはいずれも中身の濃い素晴らしいものでした。

そして午後、お目当てのmicroCMSワークショップの受講。
ドキドキしながらの参加でしたがとても楽しかった!参加できてほんとによかった!

もともとNetlifyを使ったヘッドレスCMSの流れに興味を持っていて、microCMSが国産ヘッドレスCMSとして出てきたときに触ってみたんですが、具体的にどう活用できるか見えなかったのでした。

今回のワークショップで使いどころを考えるきっかけになればと思っての受講でした〜


2時間のワークショップの内容は「microCMS + NuxtでJamstackブログを作ってみよう」というもの。

講師はmicroCMSを開発しているウォンタ株式会社の柴田さんで、サポートとしてウォンタ株式会社の松田さんも入っておられました。

まず柴田さんが少し進めて、その後に受講者が手を動かす時間を取るで1セット。このセットを繰り返しで完成に持っていきました。
受講者が手を動かす間は柴田さんと松田さんが受講者の進捗を確認して、質問があるときは気さくに答えてくださいました。超貴重な機会!

柴田さんのカメラ映像と端末の画面をRemoで共有しながらのワークショップの受講でした。
RemoというWebサービスは、仮想の1フロアに4人くらいがシェアするテーブルが10個ほどあって、各テーブルを講師が回ることができる、というちょっとおもしろい設定がありました。
講師側からすると大勢を少人数に分けて相手にすることができるので、ワークショップにはとてもよいWebサービスであるように感じました。

参加資格と事前準備は下記のように伝えられていました。
開発業務をしていれば特に問題なく準備できる内容でした。

参加資格:
npmまたはyarnを扱うことができる

事前準備:
https://ja.nuxtjs.org/guide/installation/
1. create-nuxt-appを利用し、Nuxtの雛形を事前に用意(※途中の質問にあるサーバサイドのフレームワークはNoneを選択する)
2. npm run devコマンドでlocalhost上でサイトが見られるところまでやっておく
https://microcms.io
3. アカウント登録、ログインを事前に済ましておく

https://www.notion.so/microCMS-Nuxt-Jamstack-c7d68e68085a400f8eeb1887e97cdd6f

ワークショップは「microCMS + NuxtでJamstackブログを作ってみよう」を見ていただければわかるとおり、まあ盛りだくさんな内容で、実際はじっくり進めるというよりは講師の話を聞きながら手を動かす感じになりました。

流れは下記のとおり。2時間でこの内容はお腹いっぱい。森は最後までいきつくのに2時間+20分ほどかかりました。

  1. Nuxtプロジェクトを用意する → 環境を作ってnpm run devでブラウザ表示するまで
  2. microCMSの用意する → microCMSのサイトでアカウント作成&GUIでAPIの作成(タイトルと内容)と簡単なブログ投稿の作成
  3. ブログ一覧を表示する → axiosをインストールして /pages/index.vue にブログ一覧を作成。固定ページっぽい/pages/about/index.vueも作成
  4. ブログ詳細を表示する→ /pages/_slug/index.vueに詳細記事を作成
  5. CSSで見た目を装飾する→ sassのモジュールをインストールして vueファイル内でsassを書いて表示
  6. ビルドして静的ファイルを生成してみる → `npm run build && npm run export` で静的ファイルがdistフォルダに生成されるようにする
  7. ファイルをホスティングする → 6までに手を動かした内容をGithubの新規リポジトリを作ってpushしてNetlifyで公開
  8. microCMSとNetlifyを連携する → microCMSでコンテンツの変更があればNetlifyの公開サイトに反映するようにmicroCMSとNetlifyの設定を調整
  9. カテゴリーを追加する → 記事カテゴリーを作成&記事に反映&ブラウザで表示
  10. 下書き確認用のステージング環境を用意する → microCMSで「画面プレビュー」ボタンをクリックしたときに表示される環境を公開用の環境とは別にNetlifyに作って表示

フロントエンドエンジニアだったら特に問題なく触ることができる内容だったと思いますが、なかなかの量だったのでほかの受講者の方々も大変だったかもですね。。Githubのアカウントが必要だったり、Gitの扱いも慣れてないときつかったかも。

内容は最高に楽しかった!特にプレビュー環境を別途作るっていうのがなるほどでした。


ワークショップを受けた時点ではWordPressのように管理画面から階層のある固定ページを作ったり、機能てんこ盛りなエディタからページをつくるならWordPressを使えばいいと思うし、シンプルなものを作るならヘッドレスCMSがいいのかな、と思うところでした。

そもそもmicroCMSはブログを作るための仕組みじゃなく、アプリで利用するようなデータのAPIを自由に作れるのが大きなメリット。
アイデアを形にするときにほんとにありがたいWebサービスですね。

チャリティカンファレンス沖縄の運営の皆さん、講師の皆さん、素晴らしいイベントでした。ありがとうございました!
そしてウォンタ株式会社の柴田さん、松田さん、素晴らしいワークショップを本当にありがとうございました!

seminar

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

5/29(土曜日)にマークメイザンで開かれたかごべんの「テスト駆動開発体験会 2020.5 (JavaScript)」に参加しました。
講師の @tomo_masakura さんには事前に「前半は大丈夫だろうけど、後半は難しくなるから見学がいいかも…」と伝えられての参加でした。ついていけなくなったときはUIテストの方法を調べてやってみることにしますーと話していたのですが、果たして…。

動機

森はWebサイト制作をしてきているので、アプリやサービスを開発するプログラマではなく、テスト駆動開発にこれまでほとんど触れることはありませんでした。

とはいえ、周りにプログラマは多く、テストなしに開発できないという話をよく聞くので、どういうものか単純に興味を持ったのと、Webサイト制作の仕事にもその考え方を取り入れることができるのか知りたかったのでした。

準備

事前の準備は下記のとおり。

・WiFi が接続できるノートパソコンを必ずご用意ください
・GitLab.com or GitHub のアカウントを取得しておいてください
・指定した開発環境をセットアップしてください
・Node.js 12.7.0 以降
・JetBrains WebStorm (体験版があります)

テスト駆動開発体験会 2020.5 (JavaScript)

どれもすでに準備できていたので問題なしでした。
(講師の @tomo_masakura さんはGitLab&JetBrains製品の思想がとても気に入っておられて、勉強会や専門学校の授業でよく使われるので準備が不要でした。)

スタート

勉強会ではまずテスト駆動開発ってどういうもの?というところからスタートしました。

その答えは「プログラムを書いたらconsole.logで値を見るでしょ、このテストコードを冴えた仕組みでずっと残しながら開発する方法」ということでした。

この時点ではピンときてなかったですが、振り返るとたしかにそこには「冴えた仕組み」がありました。

一日に何回テストコードを実行していると思いますか?

講師からのドキドキ質問タイム。

一日に何回テストコードを実行していると思いますか?

  1. 3, 4回くらい
  2. 10回くらい
  3. 100回くらい
  4. それ以上

答えは「3. 100回くらい」でした。森がサイト制作するときにHTML/CSS/JavaScriptをlintにかけたらそのくらい行くだろうなと思って100回くらいと答えたんですが合っててびっくり。

よく考えたらlintを通すだけなら「テストコードを書く」ってことをしてないので、テスト駆動開発はかなり工数がかかる方法です。

ここで明らかになって、へえ、と思ったんですが、テスト駆動開発は「テストコードを先に書いて、実装コードを書く」。

これは「期末テストの数学で100点を取る」が先にあって、教科書を何度も復習したり、ドリルをいろいろ通ったりして、自分にテストを課しながら「100点を取る」目的達成に近づける、ということ。

プログラムだと何度でもテストできる。
結果は同じで、よりよいコードになるようにどんどんテストする。

仕様変更があってもテストコードがあるから、結果が変わらないことをちゃんと確認しながら開発できる。
なるほどなるほど。

Jestを利用する

自動テスト用のプログラムは Jest というのを使いました。

インストール周りの解説で長くなるのは意図するところではないので割愛。

ぱっと始めてみたい方はQiitaの「5分で始めるJestで快適テスト生活」をやって見られると良いかもです。

テストコードの実行

最初はテストコード用のファイルのみ作ってテストしました。

// describeはテストケースのグルーピング(複数のテストケースをまとめる)
describe('Sample', () => {
  // testはテストケース
  test('Hello', () => {
    // 変数に入れた結果をexpectでテストにかける
    const actual = 1 + 2;
    expect(actual).toEqual(3);
  });
});

1+2は3だよね、ってことをテストしてます。

WebStormのコンソールにテスト成功の結果が出てきます。
toEqual(3)をtoEqual(2)とかに変更するとテスト失敗の結果がでてきます。
なるほど、こういう感じでテストするのか〜と実感。

他のコードも書いてみたあとで、テストの進め方についてポイントの共有がありました。

  • テストケースは1つ書く、実装する、リファクタリングの繰り返し

一気にテストケースを書いて一気に実装というのはやらないそうです。
どこがバグが見つけにくくなるから。
とにかく少しずつ進める。

  • DBや外部APIに頼らないものはテストしやすい
  • DBや外部APIに頼るものは役割を切り離して、テストしやすい部分を中心にテストする

なるべくシンプルになるように進めるのは大事。

ここで前半が終了。うん、ばっちりついていけた!

途中ついていけなくなる

後半はGitLabからソースをクローンして、講師がコードを書きながら学ぶスタイル。

途中、WebStormの便利な機能を使ってリファクタリングをするところで詰まってしまい、ついていけなくなりましたが、講師のサポートで復帰。

ということでその後も少しつっかかりながらも無事最後まで体験を完遂しました。

講師の @tomo_masakura さん、ありがとうございました!とても楽しかったです!

仕様ができればテストコードが書ける

仕様ができればテストコードが書ける。プログラムは少しずつ作る。一気に作らない。

これはひょっとしてWebサイト制作にも応用できる?

サイト制作に応用?

デザイナは全体像を整えてから細かい部分を作ります。テスト駆動開発とは逆。

ただ、Adobe XDやSketchを使ってデザインするとシンボルを使うことになるので、シンボルができたらコーダーにファイルを共有してもらって、少しずつパーツを作り始める。

作ったパーツをUIテストにかけていく。スジのいい作り方にまとめるためにリファクタリングする。

サイトの全体像ができてきたらページを作っていく。

こういうことなのかな(手戻りが大きい進め方かも)。

まとめ

テスト駆動開発そのものはかなり興味深いものでした。体験会の内容は途中から難しくなりましたが、とても面白くて、サイト制作に照らし合わせて考えるいいネタを提供していただいたな、と。

プログラマは小さいものを積み重ねて大きくしていき、デザイナは全体の輪郭を整えてから細かいところを作るということをしているので、ツールの力を借りながら効率化する方法を探っていきたいところです。自分が知らないだけでモダンな開発方法があるはず…!

GUIテストツールを試してみて記事を書きます〜。

blog, seminar

3月16日(土曜日)に森が2010年まで在籍していた株式会社コンセントさんとWordBench鹿児島さんと共同で「IA塾」を開催することになりました!

WordBench鹿児島 × コーディングデザイン × Concent「IA塾」

森は株式会社コンセントには4年近く在籍しました。
情報設計(IA)にとても長けた会社で、クライアントの問題解決について突き詰めて調べる、突き詰めて考えるということが徹底していました。
とてもたくさん勉強させていただきましたし、いまでもなお得るものが多い会社です。

情報設計が得意な会社でIAとして働いている方から講義とワークショップをしていただきます。
鹿児島近辺でWebサイト制作をされている方にとって、Webサイト制作の視点を広げるものになります。ぜひご参加ください!

blog, seminar

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

ということで4つめのセッション。

blog, seminar

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

ということで3つめのセッション。