目次
はじめに
こんにちは、及川です。前回のアンさんのブログ記事に引き続き、Zine作成についての記事になります。
前回のブログ記事は以下です。
blog.lab.sugimototatsuo.com
ネットワークデザインスタジオの大学院生3名で制作した「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブック」は以下から詳細を見ることができます。
私は、「PART 2 Konva.jsを使った写真デコサイトのつくり⽅」を担当しました。今回は、なぜKonva.jsをハンズオン形式で紹介することにしたのか、また、Zine執筆を振り返って学んだことをまとめたいと思います。
なぜKonva.jsをハンズオン形式で紹介することにしたのか
今回のZine「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブック」は、3つあるPARTの内容がバラバラです。これはアンさんのブログ記事でも触れられていますが、3人の興味関心にはあまり共通点がなかったためです。そんな中見つけた共通点が「JavaScript」でした。そこで、JavaScriptのライブラリに関するZineを作成することが決まりました。
私は、大学の授業内でJavaScriptを使用したことをきっかけに、オンライン教材や独学で学んできました。最近はもっぱら、JavaScriptの上位互換と言われているTypeScriptを使ってReactやNext.jsを中心に学んでいますが、今回は初心に戻ってJavaScriptを利用した「何か」をテーマに執筆することになりました。
今回私が選んだライブラリ、Konva.jsは、HTML5 2D キャンバスのためのライブラリです。また次のブログで紹介できたらと思いますが、大学学部4年次の卒業制作で大活躍したのがKonva.jsでした。卒業制作を作る際に、Konva.jsのデモ・チュートリアルの豊富さに驚きました。一方で、それぞれのチュートリアルは繋がりがなく、ハンズオン形式で慣れていくタイプの私にはなかなかとっつきづらいとも感じました（Reactなどのチュートリアルがハンズオン形式と認識しています）。もちろん、一長一短あると思うのですが、ハンズオン形式を好む方々にもぜひKonva.jsを気軽に使っていただきたいな、と思い今回の内容ができあがりました。私と同じようにハンズオン形式が好きでKonva.jsに少しでも興味がある方に読んでいただけたら嬉しく思います。
Zine執筆を振り返って
デザイン・コードが固まってからZineを執筆したほうがよいと学んだ
今回のZine執筆では、機能の洗い出し、Figmaでのデザイン作成を行なった後に、コードを書いて、Zineを書いて、コードを書いて、Zineを書いて…というような進め方をしました。理由としては、コードが完成し切ってからZineを執筆すると漏れが出てきそうだと思ったから、また、コード書いている時にふと感じたポイントなどをそのまま原稿に落とし込むことができるのではないかと考えたからです。しかし、1/3程度の執筆を行なったところで、「あれ、もっとコードをこう書いたほうがよかったかな…」「あ、ここ間違えている」「ここのコード、うまく動いてないぞ…？」など、原稿の修正が必要になりました。その時に「やっぱり一度コードを完成させてから、原稿を執筆したほうがよかったかな」と反省しました。
技術書を書くというのは、こんなに大変で工程が多く労力がかかるものなのかと、いつも読ませていただいている技術書の執筆者の方への感謝の思いがいっそう強くなりました。
他者にもわかりやすいコードを再度強く意識した
私は現在、エンジニアとして長期インターンシップに参加させていただいているため、一人でコードを書いていたときよりは「他者にもわかりやすいコード」を意識しているつもりでした。しかし、今回「人に見られる」ことを強く意識してコードを書き進めていると、何度も「あれ、ここでいいんだっけ」「ここだとまとまりがないかな」などと手が止まることがありました。そういった意味では、なかなかチーム開発を行う機会のない学生は、ブログやZineなどで「人に見られる」ことを意識しながらコードを書くことはとても勉強になるのではないかと思いました。
おわりに
初めてのZine作成は、正直計画的とは言えずバタバタしてしまいましたが、無事に完成させることができてホッとしています。
拙い部分も多いかと思いますが、是非読んでいただけたら嬉しいです。
