Vue.jsでポートフォリオサイト制作記

Vue.jsでポートフォリオサイト制作記

  • Digital
    500 JPY

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://becolomochi.com リポジトリ: 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 ◆注意事項 本文中に掲載されている図版はイメージを捉えやすいように作成してあり、厳密には正しくない場合があります。あくまでわかりやすさ優先で掲載してあります。 内容について注意を払っておりますが、掲載した内容の正確性については保証しません。この作品に関連して生じたあらゆる損害等について、理由の如何に関わらず、一切責任を追いません。

About shipping
Shipped from warehouse

These products are shipped from BOOTH warehouse as soon as payment is confirmed.

Shipped from home

These products are packed and shipped from the seller. "Ships within ~ days" are the estimated number of days from when payment is confirmed at BOOTH until the item is shipped.
Items shipped by Anshin-BOOTH-Pack will be delivered anonymously.

Download item

You will be able to download these products from "Purchase History" at any time after payment is confirmed.

Shipped from pixivFACTORY

These products are manufactured and shipped by pixivFACTORY as soon as payment is confirmed.

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://becolomochi.com リポジトリ: 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 ◆注意事項 本文中に掲載されている図版はイメージを捉えやすいように作成してあり、厳密には正しくない場合があります。あくまでわかりやすさ優先で掲載してあります。 内容について注意を払っておりますが、掲載した内容の正確性については保証しません。この作品に関連して生じたあらゆる損害等について、理由の如何に関わらず、一切責任を追いません。