2017.10.22 技術書典3 え17「べころもち工房」で頒布した技術書です。 ◆動作確認・作業環境 - macOS Sierra 10.12.6 - Chrome 最新 - iTerm2 3.1.4 - Brackets 1.10 - Node.js 8.4.0 - vue-cli 2.8.2 ◆注意事項 - 2017.10現在の内容です。使用バージョンによっては操作方法が解説と異なる場合があります。 - ターミナルの操作はMacです。Windowsでの解説はしておりません。 ◆概要 Webデザイナー兼コーダーが JavaScript ライブラリ Vue.js（ ビュージェイエス）を使って自身のポートフォリオサイトを作った際の制作記兼解説本です。 ◆仕様 PDF形式 B5サイズ 49ページ（表紙含む） ◆目次 はじめに 2 Node.js ？ npm ？ vue-cli ？ 6 vue-cli で始めてみる 8 ファイル構成を見てみる 11 .vue テンプレート 14 URL のシャープマーク？ 16 ルーティングのこと 18 ページを作成する 22 リンクを設定する 26 json データから作品ページを作る 28 title description の設定 34 お問い合わせフォームの作成 38 サイトの見た目を良くする 42 アップロードする 46 おわりに 48 ◆はじめに（本文から抜粋） この本は、Web デザイナー兼コーダーが JavaScript ライブラリ Vue.js（ ビュージェイエス）を使って自身のポートフォリオサイトを作った際の制作記兼解説本です。 最初に Vue.js に触れたきっかけは 「ネットで情報を見るようになったな。面白そうだな」と思ったことでした。今まで JS といえば jQuery で DOM 操作を書くくらいなら……という状況だった自身にはつまづくポイントが多く、書き方がわからず放置してはまた作り直し、また放置しては作り直し、を繰り返していました。 今回は「どうしても Vue.js で何かを作ってみたい！気合いを入れて何かひとつ完成させるぞ！」と決心し、自分の作品を紹介するポートフォリオサイトを作ることにしました。正しくて適切な情報を見つけて理解して制作に活かす、という作業はほぼ初心者の私としてはとても大変でした。そのような経験を踏まえて、なるべく図版多め・参考URL 多めを意識してこの本を作ってみました。少しでも誰かの助けとなり、より良い創作活動のきっかけとなりますように。 べこ ◆この本で対象にしている方 - HTML/CSS が一通り書けて JavaScript が少し分かる人 - ターミナル操作できる（パッケージのインストールなど） - vue-cli を使用したので、Vue.js の公式サイトを一通り読めている人 ◆サイト・リポジトリ 実際に制作した内容は以下からご覧ください。 サイトURL： https://shirokuma.becolomochi.com (2020/12/19 URL変更になりました) リポジトリ： https://github.com/becolomochi/shirokuma 今後の修正情報は以下のブログでご確認ください。 https://becolomochi.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%97%E3%82%8D%E3%81%8F%E3%81%BE ◆注意事項 本文中に掲載されている図版はイメージを捉えやすいように作成してあり、厳密には正しくない場合があります。あくまでわかりやすさ優先で掲載してあります。 内容について注意を払っておりますが、掲載した内容の正確性については保証しません。この作品に関連して生じたあらゆる損害等について、理由の如何に関わらず、一切責任を追いません。