完全未経験の学生がvue.jsでポートフォリオ作成した

7755 ワード
JavaScript HTML ポートフォリオ Vue.js 未経験エンジニア HTML テキストリンク

Portfolio

トップページ

フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話

上記の記事に触発されて，自分もvue.jsでポートフォリオを作成しました．
他の動機として，私は普段の研究やバイトではpythonばかり使ってるので，web系の言語も習得したいなと思って始めました．ただ最初はDjangoを使ってなにかバックエンドのものを作ろうとしたのですが，思ったよりも時間がかかりそうなので，先にvue.jsでフロントエンドを経験してみました．

完成度低いですが，最近忙しくて作業する時間がなく，どうやって作成したのかを忘れてしまいそうなので，いま記事を書いてます(本当に完成度低い)．

上記の記事では1週間で仕上げていますが，私の場合は経験値のなさからかそれとも自頭の違いからか，理解に時間がかかり1か月ぐらいグダグダ勉強してた気がします．作り始めてからは1週間ぐらいだったと思います．

よく初学者にある"何がわからないのかわからない"っていう状況が非常に多くてそれを打開するために，いろいろな本や動画，記事を参照しました．

中身はよくあるVue.jsでSPAを実現したってだけの簡単なウェブサイトです．なんの新規性も技術的な深化もありません．

あとはGithubでissue管理して，作業を行いました．
以下の記事の手順で行うとチームでの作業を疑似体験できるため非常にいい経験になると思います．
Githubでissue管理して開発しよう

学習編

pythonとCとC++への理解があるだけで，フロントエンドに関しては完全未経験でした．HTMLもCSSもJavascriptも未経験でしたので1から勉強しました．

HTML, CSS, JavaScript

Progate

progate

たくさんの方が薦めていますが，私には合いませんでした．
どの講義も実践を絡めた習うより慣れよ方式なので，定義や枠組みをしっかり理解してから使いたい私のスタイルとは合わなかったです．

結局以下の本を使用しました．この本は最近読んだ技術系の本でも一番好きです．レイアウト，色使い全ていいです．おしゃれなベジタリアン向けレシピ本を読んでる感じで，一日で読み終わってしまいました．値段高めで英語ですけど，家に置いておいてもオシャレだなと思います．

HTML and CSS: Design and Build Websites

JavaScriptに関しては，あまり勉強しませんでした．理由としてはもともとpythonができるってことで，コードをみても理解不能になることなどはなかったからです．つまり何がわからないのかわからない状況にはならずに，わからない箇所があっても調べればどうにかなるって感じでした．他の言語の経験がなくてもjavascriptに関してはprogateでサラッとどんな仕様なのか見ておくだけでいいのかなと思います．

Vue.js

公式リファレンス

これもいろんな方が薦めていますが，私には難しかったです．そもそも他のweb系の技術を学んだことがなかったので，言葉の意図がわからなかったりそもそも意味がわからないってことばかりでした．

結局いろいろ本や記事を読んでみて，なんとなくわかってきたところで，以下のビデオに沿ってたくさんアプリを作りました．単純にSPA仕様のポートフォリオを作りたいだけなら必要ないですが，実際ポートフォリオ作成はコードを書く練習にはならなくて，ただ技術をなんとなく使って終わりになってしまいました．なので実際にゴリゴリコード(javascript)を書いて成長って意味でオススメです．英語で10時間ありますが，かなり初歩からの説明となっており，わかりやすいです．

Vue 3 Tutorial - Full Course 10 Hours 10 apps

もし本を読みたかったらなんでもいいと思います．数冊読んでみたのですが，全部書いてあることは同じでした．

以下の記事も参考に読みました．
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！
【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する
Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり
Vue.jsまとめ【初心者】
vue.js＋Vuexチュートリアル

実装編

使用したツール

HTML, CSS, JavaScript, Vue.js, Bootstrap(いらない)

Vuetifyも入れようと思ったんですが，最初にnpm run devした後に入れることがうまくいかなくてやめました(Bootstrap同様にポートフォリオ作成の必要条件ではないですし…)

仕様

未完成の仕様もありますが，以下のことを試みました．

・SPA
・GitHub pagesでのdeploy
・Google font
・レスポンシブ対応
・多言語対応(まだ途中で放置)

コンテンツ

自分は完全未経験なので全然書くことがありませんが，とりあえず

・自己紹介
・スキル
・作成したもの
・投稿(Qiitaへの投稿)

にしました．

レイアウト

ここはなんのリファレンスにも頼らずに自分で適当にやってので流し読みしてください．

ワイヤーフレーム

ワイヤーフレームというWebページのレイアウトを定める設計図を作成するのが当たり前らしいです．
自分は見様見真似の自己流でやりました．
以下のサイトが無料で，デフォルトのデザインもたくさん入っていて使いやすかったです．

Figma

こんな感じで適当に，いろいろいじって遊んでました．
先にこれでデザインを決めると，HTMLとCSSを書くときに非常に楽でした．

配色

これは普段の研究室やバイトのパワポ作成で学んだ処世術ですが，基本的には三色ぐらいでまとめると見やすいです．(Webサイトにも当てはまるのか？)
その三色(もしくは四色)の決め方としては，パレットがあります．
Color paletteとググれば無限に出てきますので，その中で気に入った配色のものを使用しました．
具体的には以下のサイトを使用しました．

Color Hunt

アバター

別に必要ないですが，この機会にWebエンジニアっぽいのを作ってみました．

画像

なんでもいいと思います．
私は好きなアニメのSouth parkのアバター作成を用いました．

South Park Avatar Creator

加工

よくある丸型のアイコンの作製．
ただの画像の切り抜きなので，何のソフトでも可能ですが，私は以下のサイトを利用しました．
背景とかいろいろいじれます．

Free Profile Picture Maker

完成したアバターが以下のものになります．

SPA

詳しい技術的な仕様は，もっと詳しい方々の記事を読んでください．Single Page Applicationとあるように，ページ全体を先にロードして，ボタンぽちぽちしてもいちいちサーバ側と通信しないで済む技術です．

これはVue-routerというプラグインを導入することで，実現することができるようになります．
最初はよくわからなかったのですが，以下の記事を参考にとりあえず導入してゴチャゴチャいじってたら理解できました．

今さら聞けない？Vue Router
Vue-routerを使って、SPAをシンプルにはじめてみる

Google Fonts

フォントをこちら側で提供しないと，ブラウザによって異なるフォントになってしまいます．
なので，Google Fontを使って特定のフォントが表示されるようにしました．
なぜか?(簡単すぎるからか)リファレンスがなかったので以下の記事にしました．
Google FontsをVue.jsで使用する

GitHub pagesへのdeploy

この記事を参考にさせていただきました．
vue-cliで作ったアプリをGithub Pagesにデプロイ
しかし，うまくいかずにstackover flowで調べたところ，vue-cli3では以下のファイルが必要みたいでした．
以下のvue.config.jsを作成してconfig内に置いてやる必要があります．

vue.congig.js
module.exports = {
  outputDir: 'docs',
  assetsDir: './',
  publicPath: './'
}

これを置いたあとにbuildすれば大丈夫です．

作ってみて

素直に楽しかったです．ただしこれは初歩の初歩で，実際の業務で応用を含めてゴリゴリ自分でコードを書いていくともっと楽しくなるのかなって気がしますね．