【イベント報告】わたしの”好き”に出会える図書館

8月18日(日)豊能町立図書館と、とよのていねいのコラボイベントとして「半畳サイズのマイ図書館」を開催しました!
いつも図書館を利用するものの、子連れだとゆっくり本を選べないことも…今でこそ絵本コーナーくらいは、だいたいこの辺りにこの絵本があってと4年通ってわかるようになってきたものの、自分一人でサッと本を選ぶのは難しいなというのが図書館に通い出して最初の感想でした。そんな人にも嬉しい、新しい本に出会えるイベントを企画しました!

気分は本屋さん!憧れの書店員になりきって好きな本を選んでみよう!

今回のイベントでは、「半畳サイズのマイ図書館」として、図書館にある蔵書で好きな本、オススメな本をチョイスしてまるで小さな本屋さんのように並べて紹介するというもの。形態としては、マルシェのように、出店する側はオススメ本について熱く語り、来場者の人は、普段は見つけることのない本たちに出会えます。「出店」というと語弊がありますが、参加者一同の気分はすっかり本屋さんなので、その気分をお伝えするためにも記事では「出店」という言葉で表現しています。

図書館の集会室にてスタートです!

「読んでみたい」に繋がる言葉を紡ごう

まず8月4日(日)にプレイベントとして出店者向けに「読んでみたくなるPOPの作り方」をレクチャー。POP作りで有名な書店員さんのPOPを参考に、自分が選んだ本に思い思いの言葉を紡いで行きます。簡単そうに思えるPOP作りも意外と奥深く、読んでみたい!と心を動かすことのできる言葉の選び方に私たちも頭を捻らせました。

思わずPOPも読み込んでしまう…
小学2年生もPOP作りを楽しみました!絵も素敵!

さぁ!いよいよマイ図書館がオープン!

迎えたイベント当日。それぞれの出店者さまに書店の名前をつけて頂き、「この半畳はわたしの空間!」と書店作りにも力が入ります。書店のネーミングも選んだ本も、POPの言葉やセンスもそれぞれ個性が光ります。

男性ならではの視点で攻めるチョイス!
夫婦で出店するのもアリ◎

熱い想いを語りまくれ!オススメ本の紹介座談会

11時からは出店者による座談会がスタート!書店の紹介から、オススメ本の紹介まで、大好きな本だからこそついつい熱が入ります。
今回、座談会に参加してくださった来場者の方も、「この出店者の人と趣味がバッチリあう!」と大変気に入られた様子で、半畳に並べられた本たち全てをカメラでパシャリ。「今回はこの本を借りていくけれど、次回はあの本もいいな」と微笑む姿にお気に入りの本にたくさん出会えた喜びがヒシヒシと伝わってきました。
また、出店者の方も自分のチョイスした本がどんどんと旅立っていく様子に、「こんな気持ちのいいイベントはないなぁ」と心がホクホクと温まったようでした。

本を持つと不思議とサラサラと話せるようです
この半畳を丸ごと写真に記録して帰る来場者も◎

自分の「好き」に共感してもらえる喜び

12時からは自由に出店者の並べた本を見ていただくお時間。出店者も席をたってもオッケーのフリースタイルでしたが、やっぱり来場者の方とお話しながら本のオススメポイントを語るのがこのイベントの醍醐味。娘と一緒に出店したわたしは完全に絵本のみのラインナップでしたが「孫の為にこれを借りていこうかな?こんなおもしろい本があったなんて知らなかった」という声に、自分の好きに共感してもらえることの喜びを感じました。

読書が苦手なので、娘と絵本をたくさんチョイスしました
当日の飛び入り参加枠も作りました!
本ソムリエの小学生のチョイスが渋くて素敵すぎる…

本を通じた人の関わりが地域を温かくするかもしれない

いつも通っている図書館。わたしの好きを伝えるのも良し。新しい好きに出会うのも良し。本を通して出会える「好き」の発見と、本を介して繋がる人と人の関わりが、地域をもっとより良くしていくのかもしれないなぁと感じました。
また次回は冬頃に開催を予定していますので、出店者、来場者共に一緒にこの場を作りあげて頂けたらとても嬉しいです。
わたしも次の開催に向けて、また新しい本に出会っていきたいと思っています。さぁ、図書館に出かけよう!きっと新しい出会いが待っているから……

Nuxt.jsを使おう:初心者のとっかかり編

  • 環境構築編
    • PCの設定など、一回だけ行う作業
    • 記事ではMacを対象としていますが、Windowsでも応用可能です
  • プロジェクト構築編
    • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
  • 日常業務編
    • プロジェクトの進行中、つまり仕事を進めるときに行う作業
  • 初心者のとっかかり編(いまここ)
    • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

Nuxt.jsを業務で使うための必要最低限は前回までの3回で説明できたと思いますが、おそらくそもそもNuxt.jsって何?ってところから疑問が残る形になっていると思います。

はじめに – Nuxt.js

インストール – Nuxt.js

ディレクトリ構造 – Nuxt.js

設定 – Nuxt.js

ルーティング – Nuxt.js

公式サイトが、これ以上ないくらいわかりやすく的確に説明されていますので上記以外のページもとにかく熟読することを強くオススメします。
しますが、公式ドキュメントにおびえる初心者の気持ちもよくわかりますので(私も初心者の時は初心者ですので)このページではその補足として、まずとっかかりを探すための勘所などを説明していきたいと思います。

ざっくり言うと、あれやこれやをいちいち個別に設定しなくていいってこと

再度紹介しますが、公式ドキュメントのこちら
はじめに – Nuxt.js https://ja.nuxtjs.org/guide
にあるように、Vue.jsやVueRouterなど、いろいろなライブラリがあらかじめ便利に設定された状態がNuxt.jsと考えることも出来ます。
ということはNuxt.jsを使いこなすには土台となるVue.jsやVueRouterなどの知識が前提として必要になるということでもありますが、そんなに一度に覚えるのはとても大変だと思いますので、ひとまずはNuxt.jsはそういうもんだと覚えておくにとどまることにします。
ただし、Vue.jsについて全く予備知識ゼロだとつらいかと思われますので、ひとまずVue.jsについて説明します。
ややこしいですが、Vue.jsというライブラリを使いやすくしたのがNuxt.jsというフレームワークです。言葉を意味まで含めて正確に理解する必要はないですが、なんとなくNuxt.jsというものがあってそれはVue.jsというものを使ってるんだな、と思っていれば理解が深まります。で、まずはNuxt.jsを置いといてVue.jsのリンクから紹介します。

はじめに — Vue.js https://jp.vuejs.org/v2/guide/

こちらの、Vue.js公式サイトの説明を熟読することをオススメしますが、最初に読んだだけでは大部分がなんのこっちゃかわからないと思います。それでいいです。

Vue.jsについて、誤解を恐れずに説明するなら、jQueryのようなJavaScript便利ツール、あれのもっと高性能版がVue.jsです。

「自分はjQueryで事足りてるし、それ以上の高性能版は特に必要ないかな」と思われるのもごもっともです。最初に出しといてなんですがこの記事でjQueryと比較してどうこう、ということについてこれ以上突き詰めることはしませんので、Vue.jsが必要ないと感じたら無理に使う必要はないものです。

ただし、Nuxt.jsはVue.jsなどをひとまとめに便利に使うフレームワークですので、Nuxt.jsを使いたいのであれば最低限のVue.jsへの理解は必要になってきます。どの部分が最低限かは人によって意見が違うと思いますが、最初はVue.jsがさっぱりわからなくてもNuxt.jsを使っていくうちに自然と使いこなしていくようになります。
逆に、今までVue.jsやVueRouterを使いこなしていた人なら、Nuxt.jsの強力な機能はきっと気に入るはずですし、トラブルシュートや「こんなことしたい」ときの検索語句の切り分けなども適切に行えるはずです。
早い話がつまり、わかってないまま読み進めていってもOKということです。

ディレクトリ構成の説明

公式サイト [ ディレクトリ構造 – Nuxt.js https://ja.nuxtjs.org/guide/directory-structure ] を読みながら、補足する形で説明を進めていきましょう。
ディレクトリの中には設定次第で構成を変えることが出来るものも存在しますが、ここではデフォルトの設定で進めるものとします。

layout, pages ディレクトリ

上の3つのリンクを参考にしながら、説明を進めます。ちなみに上記3つは全て同じページですがアンカーリンク先が違います。

まずプロジェクトのルートフォルダに置いたapp.htmlファイルが大本のテンプレートになります。通常、このブログを参考にプロジェクトを作成した場合は存在しませんが、特に理由がない限りわざわざ作る必要はないと思います。headやbodyタグの属性をちょっといじりたい場合なんかは、nuxt.config.jsで設定できますので、app.htmlを触る機会というのはまず起こらないと考えて差し支えありません。

次にlayoutsフォルダについて説明します。layoutsフォルダに置いたvueファイルが、レイアウトファイルになります。
このブログのやり方でプロジェクトを作成した場合はすでに layouts/default.vueというファイルが出来ているはずなので、参考にしてください。このファイルがデフォルトのレイアウトになります。
もしページによっては違うレイアウトを使いたい場合、例えばlayouts/blog.vueというファイルを作るとページによってレイアウトを指定することも出来ます。詳しくはlayoutsディレクトリを参考にしてください。
ちなみにですが、layouts/default.vueを開いてみてください。

<template>
  <div>
    <nuxt />
  </div>
</template>

こんな記述があるかと思います。templateという見慣れないタグがありますが、その直下にdivタグ、さらにその下にnuxtというまた見慣れない独自タグがあります。vueファイルはこういうのなんだなーと現段階ではなんとなく認識しておいてください。
ちなみにちなみになんですが、nuxtタグの部分が、後述するpagesフォルダの中のページに置き換わります。置き換わります、って言ってもこれも現段階ではナンノコッチャだと思いますが、そのままわからないままで読み進めて結構です。

次はPagesフォルダの説明です。pagesフォルダに置いたvueファイルが、静的ページでいうところのページ遷移の役割をします。
詳しくは公式ガイドのルーティングをご覧ください。「動的なルーティング」以降はちょっとむずかしいかも知れませんが、完全に理解できなくても心配いりません。vueファイルの配置がサイトマップと対応しているんだな、ということだけわかれば結構です。
ここもデフォルトでindex.vueというファイルが出来ているはずなので、開いてみてください。

<template>
  <!-- HTMLに馴染みの深い記述がある -->
</template>

<script>
  // JavaScriptが書かれてある
</script>

<style>
  /* CSSが書かれてある */
</style>

この形になっていることに気が付かれたのではないでしょうか。これこそがNuxt.jsフレームワークが使っているVue.jsというライブラリの、コンポーネントという機能の基本形ですので、少し頭の片隅に置いといてみてください。

components ディレクトリ

pagesフォルダでごりごりNuxt.jsサイト制作が行えるようになってきたら、ぜひとも使っていきたいのがこのcomponentsディレクトリです。
デフォルトでLogo.vueというファイルが入っているはずです。どこで使われているかと言うと、デフォルトで入ってたpages/index.vueです。

~/pages/index.vueの中に

<script>
import Logo from '~/components/Logo.vue'
export default {
  components: {
    Logo
  }
}
</script>

↑こういう記述と、

<template>
  <!-- 中略 -->
  <logo />
  <!-- 中略 -->
</template>

こんな記述があります。

ちょっと話題が関連情報にずれますが、〜(半角チルダ)とか@(半角アットマーク)の記号はエイリアスと言ってプロジェクトのトップディレクトリを指せる、Nuxt.jsで使える便利な記号なのでフォルダの指定のときには積極的に使っていきたい機能のひとつです。

話題をcomponentsフォルダに戻しますが、このフォルダに入れたvueファイルはコンポーネントとして使うことが出来ます。
使う時は、

  • まずscriptタグの中で
    • インポートする
    • componentsオブジェクトに登録する
  • templateタグの中で
    • 呼び出す

他の使い方も出来ますが、基本形は上記のような手順が一般的になります。

このとき名前に法則性があって、

  • scriptの中ではアッパーキャメルケース(大文字から始まる、大文字で単語を区切る命名法則)
  • temlateの中ではチェインケース(原則として全て小文字で、単語と単語をハイフンで区切る命名法則)

となっています。命名規則に関してはこちらも参考にしてみてください。
例えば

<template>
  <div>
    <h1>テスト</h1>
    <p><daigaku-map</p>
  </div>
</template>

<script>
import DaigakuMap from '~/components/DaigakuMap.vue'
export default {
  components: {
    DaigakuMap
  }
}
</script>

こういう対応になります。
馴染みがないと最初ちょっと戸惑うと思いますが、回数重ねればだんだんと馴染んできますので、がんばって習得してみてください。

少しお説教臭くなるかも知れませんが、わたしがウェブサイトデザイナーさんやコーダーさんにNuxt.jsをおすすめしたい理由のひとつに、このコンポーネントが使いやすいことがあります。
ウェブサイトにマテリアルデザインを取り入れてみたり、BootstrapやVuetify.jsなどのフレームワークを取り入れてみたりしてると、いえ、そうでなくてもサイトにちょっとした要素を追加するたびに思いの外深くなるネストや複雑化するCSSに悩まされるコーダーは多いと思います。
そんなとき、画面の要素を気軽にコンポーネント単位で切り離して設計できるVue.jsとそれを簡単に使うNuxt.jsの恩恵は、使えば使うほど多大なものに感じるはずです。
最初の取っ掛かりは難しい印象を受けるかも知れませんが、必ずマスターできますので、マスターしたときの恩恵が計り知れないほどコーダーさんにも大きいので、ぜひとも挑戦してみてほしい機能です。

assets, static ディレクトリ

assetsディレクトリとstaticディレクトリのどちらに何を入れれば良いのか、議論の余地があるのですが、我社では原則として以下のようなルールで振り分けています。

  • png, jpeg, gifなど画像ファイル
    • 通常ページ内で使う場合はassets
    • OGPやfavicon.icoなど外部から読み込む可能性のものはstatic
    • その他、ファイル名が変わってまずいものはstatic(assetsだとwebpackがファイル名を変える可能性が高いので)
  • css
    • 原則としてassets
    • 外部ライブラリのcssファイルなど、自分で編集・保守を行わないファイルはstaticを検討
  • js
    • 原則としてassets
    • 外部ライブラリなど、自分で編集・保守を行わないファイルはstatic

ディレクトリに関して、最初の取っ掛かりは以上を踏まえていればなんとかなるかと思います。
静的ページだけでなくて、Nuxt.jsをつかってガンガンにリアクティブなフロントエンド開発やサーバーサードレンダリングなどに挑戦したくなったら、他のディレクトリにも関心がいくかと思いますが、その頃にはリンク先の公式ガイドも読めるようになっていて何が書かれてあるかわかると思いますので、ぜひとも挑戦してみてください。

ディレクトリのエイリアス

componentsディレクトリの項目でも触れましたが、ディレクトリ構造、フォルダのパスと言った方がわかりやすいでしょうか、プロジェクトのトップディレクトリをエイリアスで指定できます。

ディレクトリ構造 – Nuxt.js

このとき、~半角チルダか@半角アットマークがソースディレクトリのトップを指してて、~~半角チルダ二つか@@半角アットマーク二つがプロジェクトディレクトリのトップを指しています。
初期設定ではふたつのディレクトリに違いはないので、つまり半角チルダも半角アットマークも、半角チルダ二つも半角アットマーク二つも、どれでも好きなものを使えることになります。

選び方の目安としては、将来的にソースディレクトリとプロジェクトディレクトリのパスを分けたい事情が出てくる可能性を考えたときに、ふだんだいたいはソースディレクトリのトップを指したい場合が多いと思うので半角チルダひとつか半角アットマークひとつのほうを選べばいいと思います。

チルダとアットマークのどちらを使うかに関しては、好きなほうを使いたいところですが、CSSのパス指定の時に半角チルダを使うと「~/」半角チルダと半角スラッシュの組み合わせでエラーになるため、アットマークのほうを優先的に使っていった方が良いように思えます
詳しくはこちら公式サイトにも少し書いています。

ヘッダーはどこに書く?

デフォルトでは
nuxt.config.js
に書きます。詳しくはこちらを参考にしてください。

ビュー – Nuxt.js

ディレクトリ構成の項目でも少し触れましたが、プロジェクトのトップにapp.htmlを置かなければデフォルトで以上の設定が効くようになります。オリジナルのapp.htmlを置いた場合にはその設計に従ってください。

vueファイルを書く

こちらを参考にしてください。

ビュー – Nuxt.js

最初のうち、特に難しいことをせず静的ページを構築したいだけなら、次のポイントを押さえておけばすぐに作業に取りかかれると思います。

ディレクトリの説明でも使いましたが、

<template>
  <!-- HTMLに馴染みの深い記述がある -->
</template>

<script>
  // JavaScriptが書かれてある
</script>

<style>
  /* CSSが書かれてある */
</style>

ひとつのvueファイルにtemplate(HTMLのようなもの)、script、cssを一度に書けます。
今までscriptはscriptファイルに、cssはcssファイルにと、それぞれ専用のファイルに分けるほうが良しとされてきたのに、vueファイルでは一度に書いた方が管理しやすいとされています。これは、vueがカスタムコンポーネントと言って機能をひとかたまりの単位にわけて、コンポーネントにつきひとつのファイルで管理できるようになっているためです。「お問い合わせボタン」とかを、コーディング進うちに機能や要件が増えてきてHTMLもCSSもJavascriptもぐっちゃぐっちゃになったり、影響範囲が把握できずに別のところで不具合が出てしまったり、しかもそれをローンチまでに見つけられずに稼働してから発見される、みたいなシナリオが、だいぶ回避しやすくなります。

Nuxt.js案件、手伝ってくれるコーダーさん、どちらも募集中です!

弊社では、Nuxt.jsを使った静的ページ作成にとどまらず、サーバーサイドレンダリングのアプリケーション、シングルページアプリケーション、プログレッシブウェブアプリなどなど、横文字かっこよさげな今時の技術トレンドを押さえた案件も多数行っております。技術に縛られるのでは無く、人や地域に活かすために技術のその先を提供するためにも、基礎的な技術探求を追い求めています。なにかお手伝いできそうなことありましたらぜひともお声がけください。