ryuya-matsunawa / portfolio Goto Github PK

JavaScript 10.57% HTML 1.91% Vue 77.00% CSS 4.60% Shell 5.92%

portfolio's Introduction

portfolio

portfolio url

https://portfolio-d9ccd.web.app

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

portfolio's People

Contributors

Watchers

portfolio's Issues

lintの設定

"extends": [
"plugin:vue/recommended",←にしたら解決
"eslint:recommended"
],

模写コーディング

https://hikopro.com/mosha-site/
上記のサイトで模写コーディングのおすすめサイトを載せてくれてるのでやってます。

初級

Progate上級編
所要時間：3時間

所感
レスポンシブ対応の復習になりました。
float使って全体の要素から外れてしまったけど、https://qiita.com/shizuma/items/e79702c915a557491884
ここのclearfixを使ったら解決
floatは浮いてるイメージを持つ。
コードレベルの点では、Progateと比べると冗長になっているところがいくつかあった。

時間あったら続きやります。

追加課題挑戦？

内定者研修の追加課題そろそろできるんじゃないかと思えてきました。
ということで、イメージをしときたいなと

まだSQLの使い方というか連携のさせ方がわからんからできないかな
そのうちやりたいです

参考になりそうなサイト
Dockerで動かせるVue.js+Rails+Postgresのサンプル開発環境
https://qiita.com/tubutubu_mustard/items/8182728a1a0eb7a5f086

Docker環境にRails5.2.1をVue.jsも添えて...DBはPostgreSQLだよ！
https://qiita.com/asapon_rb/items/507558aad52dc7dd2b32

【画像判定AIアプリ開発・パート1】TensorFlow・Python・Flaskで作る画像判定AIアプリ開発入門進捗状況

Udemyで学習中です。

SQL例文①

SELECT * FROM world
→worldテーブルから*（全てって意味）を取得する。

SELECT 句 : 結果として取得するカラムを指定
*:アスタリスク→ワイルドカードと呼んで、「全て」や「なんでも」という意味

カラムは縦の列、レコードは横の行
カラム名はname,continent,…のところ
例：欲しいカラムがnameの場合
SELECT name FROM world

WHERE 句
例：日本の面積を調べるとき
SELECT area FROM world WHERE name = 'Japan'
WHERE name = 'Japan'→'Japan'のレコードを取得

例：日本の面積(377930)より大きいレコードを取得する
SELECT * FROM world WHERE area > 377930

AND
例：上のに追加して、日本の人口(127090000)より多いレコード
SELECT *
FROM world
WHERE area > 377930
AND population > 127090000
→AND ：○○かつ××

OR
例：面積か人口が日本以下の国を取得する
SELECT * FROM world WHERE area <= 377930 OR population <= 127090000

ORDER BY
例：日本より面積と人口が大きい国でGDPが最も少ない国は？
SELECT *
FROM world
WHERE area > 377930
AND population > 127090000
ORDER BY gdp
→昇順(小さい順)

例：日本より面積と人口が大きい国でGDPが最も多い国は？
SELECT *
FROM world
WHERE area > 377930
AND population > 127090000
ORDER BY gdp DESC
→降順(大きい順)

例：最も人口が少ない国は？
SELECT * FROM world ORDER BY population

例：面積が最も小さい国ベスト３は？
SELECT * FROM world ORDER BY area

サブクエリ(副問合わせ)
例：人口が変わったらどうする？（日本より面積と人口が大きい国でGDPが最も少ない国は？）
SELECT *
FROM world
WHERE area > 377930
AND population >
(
SELECT population
FROM world
WHERE name = 'Japan'
)
ORDER BY gdp
→()内で最新のものを取得している

例：面積も副問合わせを利用する
SELECT *
FROM world
WHERE area >
(
SELECT area
FROM world
WHERE name = 'Japan'
)
AND population >
(
SELECT population
FROM world
WHERE name = 'Japan'
)
ORDER BY gdp

LIKE 句
例：'Ja'で始まる国を探して
SELECT *
FROM world LIKE 'Ja%'
→LIKEを使うとJaから始まるものを探せる
→％：ワイルドカード（Ja％→Japan,Jamaica）

インデックス

IN 句
例：アジアとヨーロッパの中で面積トップ３はどこ？
SELECT *
FROM world
WHERE continent IN ('Asia', 'Europe')
ORDER BY area DESC

SUM
例：全世界の総人口は？
SELECT SUM(population)
FROM world;

例：アジアの総人口は？
SELECT SUM(population)
FROM world
WHERE continent IN ('Asia')

COUNT
例：世界にいくつの国がある？
SELECT COUNT(*)
FROM world;

ポートフォリオ実装メモ完成版(Header)

vueのコードを学んだので、ヘッダーを作り直しました。

メニューの出し方とかボタンとか
https://zarigani-design-office.com/blog/drawer_menu/
https://zarigani-design-office.com/blog/hamburger_btn/

jQueryのとこはvueに書き変えました。
:classを使いました。

emitという新しいものを覚えました。
詳しくはメニューの方で

ポートフォリオ実装メモ(全般)

下の写真みたいにwarningが出てるとき

npm run lint
npm run stylelint
をすると勝手に直してくれる！

ポートフォリオ実装メモ②(menu)

閉じるボタンというかメニューが消える機能はHeader.vueで作っているみたいです。

ということでちょっとずるいけど閉じるボタンの写真が貼られる位置にこの閉じる範囲を重ねれば消えるはず

これでバツボタン押せばホームに戻る
見た目作り終わったら直します。

今の問題
・箇条書きの・がない→とりあえずこのまま放置、余裕あったら
・スクロールボタンにする
・スクロールボタン作れたとしても元の画面に戻らない説
→おそらく戻るボタンの対応範囲がバツボタンの写真にしかないから

vue お試し

sample.vue作ってvueのコード色々試していきます。
ポートフォリオで使えるかはわからない。

下のサイトを参考にとりあえずカウンターを作りました。
https://qiita.com/ferretdayo/items/edcd2b6682148e477104

ポートフォリオ実装メモ(header)

https://mebee.info/2020/02/09/post-5874/
上記のサイトをHeader.vueに記述し、
App.vueにimportしたところ、toggleと書かれた緑のボタンが出現

template内のtoggleを「ハンバーガーメニューフリー」で検索した
画像にimg要素で置き換えた。画像はassetsフォルダに入れた。
画像がうまく表示されない場合は下のリンクのプロフィール写真を参考に
#9

toggleと書かれていたところに写真のものが入った。
しかし、枠が緑のまま。
そこで、template内のbutton要素のbtn-successクラスを消したところ緑の枠がなくなった。

ということで、仕様書にそったものがひとまず完成しました。

ちなみにハンバーガーメニュー押したら左からメニューが出ます。

一応こっちもscssで書きました。

メニューの作り方変えました。
htmlとcssで作りました。
https://saruwakakun.com/html-css/reference/nav-drawer

ポートフォリオ実装メモ(Chart)

グラフ一つのvueファイルで書けるようになりました。

ミスりそうなとこだけ残しときます。
90行目の:category="chartCategory"のところ、

最初はdivタグのv-ifとかと同じとこかと思っていましたが <Chart />の中に書かないといけません。

Chart.vueのpropsでcategoryの状態を定義していて、Skill.vueの:category="chartCategory"を <Chart />の中に書くことで、categoryって名前のものを"chartCategory"ということにしてChart.vueに渡してる。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

mapGettersはヘルパー関数というgettersを使うときに省略できるやつ。

watchはcategoryの値が変わるたびにrendarSkillChartのメソッドを呼び出している。これのおかげでボタンを押すとcategoryが変わって別のグラフが表示されるようになる。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

アロー関数の(category)はfindで使うときの引数を示してるらしい

if文はstate.skillcategoriesの長さが0より大きいときだけ{}の中の操作を行うようにするため。どうやら謎のオブジェクトができるからこれ書かないとだめらしい

return state.skillcategories.find((skill) => skill.category===category);
はstateの中のskillcategoriesの中からfrontendかbackendかdevopsのうちどれか一つの配列をひっぱてくれる

ポートフォリオ実装メモ②(skill)

ディレクティブ
v-on:click
→クリックしたらイベントを発生できる

v-vind
→classを追加することができる

v-if
→要素を出し入れできる

なんやかんやで一つのグラフだけ出るように設定できました

あとやりたいことはどれか一つグラフが出ている時消せないようにしたい

ポートフォリオ実装メモ(main,vision)

mainコンポーネントの実装のメモです。

プロフィール写真
img src="リンク"で貼れると思ったらlocalhostの方は画像が出て来なかった
→portfolio内に画像がないから反映されないのでは？
→元のApp.vueの時に使われていたVの画像がどこにあるか探した
→aseetsフォルダにlogo.pngとあったのでassetsフォルダ内にプロフィール写真のファイルを作る
→img src="./assets/sample.png"と書いたら解決！と思いきや…
→sample.pngがありませんとエラーが出る
→よく見ると、src/components/aseets/sample.pngを探そうとしていた
componentsとassetsは同じ階層だから見つからない
→おそらくこれが相対パスの話だけどまだ完全には理解できていない
→とにかく、.を増やしたらできた。img src="../assets/sample.png"
ピリオド二つで2階層戻ってちゃんとsrc/assets/sample.pngのリンクに飛んでいた

グラデーション
background: linear-gradient(180deg, #80E1F7, #06C1E6);
→#80E1F7の色が上から始まって下が#06C1E6の色になる。
→degが角度らしい
参考：https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

scss使ってみた
button入れる時にsass-lorderをインストールしたのでsassとscssが使えるようになった
まだ使い方があっているかわからないがひとまずmain.vueのstyleの中身を少し変えた

visionも同じ感じでした。

vuex まとめ

stateとgetterの使い方
https://qiita.com/asapon_rb/items/195847cc87aa36f3c889

commitとmutation
http://www.fumiononaka.com/Business/html5/FN1909002.html

ポートフォリオの流れ

App.vueのmountedにあるthis.$store.dispatch('getSkill')でactionsを呼び出す
↓
store.jsのactionsのgetSkillのcommit('setSkill',第2引数)でmutationのsetSkillを呼び出す
actionsは非同期通信？というものらしくここでaxiosを使う
↓
store.jsのmutationのsetSkillでstateの中の配列を変更する
mutationが終わった後にloadedがtrueに変わる
↓
store.jsのstateの中のskillsが変更された配列で適用される

gettersの作成

上の流れでstateにはskills.jsonの内容がそのまま表示されてる
このstateを元にgettersで配列を作る

skillNameという名前のgettersを作り、skills.jsonのskillのnameだけを配列にする

skillName: (state) => {
if(state.skills){
const skillNameArray = []
state.skills[0].skill.forEach((Skill) => {
skillNameArray.push(Skill.name)
})
}
return skillNameArray

if文はstate.skillsが存在していれば{}の中の操作をしますよって意味
↓
まず、skillNameArrayという変数を空で定義する
↓
stateの中のskillsの中のインデックス番号0のものの中のskillの中からnameだけを
skillNameArrayにpushすることで、skillNameArrayが書き換わる
↓
最後にreturnで変わったskillNameArrayを確定させてる

(おまけ)
上の書き方だと、Front-endのスキルの名前しか配列を作れない(同じようなものを後2つ作らないといけない)
そこで、インデックス番号に対応するようにかけばコードが冗長になるのを防げる

skillName: (state) => (index) => {
if(state.skills){
const skillNameArray = []
state.skills[index].skill.forEach((Skill) => {
skillNameArray.push(Skill.name)
})
}

このように書くと、インデックス番号に応じてnameを
pushしてくれるので、三つ分の配列を作れる

グラフの表示(インデックス番号に対応前提)

chart.vueのmountedのgetSkillでロード時にメソッドを呼び出す
↓
chart.vueのgetSkilllメソッドで
namesという変数に$store.getters.skillName(0)を定義している
gettersの中に作ったskillNameでインデックス番号0のもの、
ここではFront-endの中のスキルの名前のリスト['HTML','CSS',…]みたいなやつをnamesと定義している
↓
chart.vueのlabelsが書かれているところにnamesをいれる
この場合は、this.data.labels = names

データ書けたはずなのにグラフ出ない問題

skill.vueのv-ifにisFrontActive && loadedと書き、
computed:{
isDevOpsActive(){},

loaded(){
return this.$store.state.loaded
}
}
と書くことで、mutationが終わるまでグラフが表示されないようにしている

ポートフォリオ実装メモ完成版(menu)

いろいろな機能を無事つけれたので完成としました。
まず、写真と閉じる範囲をかぶせていたのは、写真を消して閉じるボタンを押したらメニューが消えるようにvueで書きました。

残っていた問題としては、スクロールはボタンを押した時メニューが消えないということでした。
vueを学んで、例えばaboutを押した時headerのisActiveをfalseにすればできるかと想像しました。ダメでした。

そこで、emitというものを教わりました。
これを使うことで、子コンポーネントから親コンポーネントに情報を渡せて、
想像していた物ができました。

あとは、ヘッダーを固定していたので、スクロールするとタイトルが見えない問題です。
これは、margin-top:-60pxとpadding-top:60pxをやったら解決しました。
普通にmargin-top:60pxだと、mainとaboutの間に変なスペースができてしまいますが、
±0にすれば、見た目は変わらずsectionの範囲を広げることができます。

ということで、メニューも機能的なところはできたので、ポートフォリオひとまず完成です。
残りでメディアクエリ対応したいです。

ポートフォリオ実装メモ①(menu)

とりあえず仕様書通りに書いたら上のようになった。

今のところ問題としてありそうなのは
・Header.vueで作った閉じるボタンがdrawerSectionの外で出ている→解決
・Menuの全体の背景色が黒になっている→解決
・drawerSectionを一番外にしたいのによくわからない要素がさらに外側にある→解決
・閉じるボタンがどこから作られているのかわからん→？

メニューの作り方変えたら写真の感じになりました。

新しい課題は
・バツボタンなくなっちゃった→解決！
・箇条書きの・が出て来ない→持ち越し
・文字を縦の方で**に寄せたい→解決
・リンクのアンダーバー消したい→解決！text-decoration:none;
・リンク押したらスクロールする機能入れる→持ち越し

とりあえずバツボタンは生み出した。

長かったので二つに分けました。
#20

ポートフォリオ実装メモ(footer)

とりあえず形にはなりました。
https://qiita.com/shuheq/items/5d905e1c0f9916496485
記事を参考にまずはボタンらしきものができました。

でもtopに戻れなかったので、こっちの記事も追加しました。
https://helloworld-blog.tech/javascript/vue-js-smooth-scroll%E3%81%A7top%E3%81%AB%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B

戻れるようになったので、あとは写真を探して文字のところを変えたりしたら下の感じになりました。
普通に写真を入れるだけだとはみ出ないので、
position:relative;
top:-10px;
をやったらいい感じになりました。

どっちかの加えた時に右に謎のボタンが生まれているのがちょっと問題

styleにあったrightとbottom消したら目視は消えました。
多分まだどこかに残ってるけど

コピーライトはこの記事参考にしました
https://ameblo.jp/copyright-copyright/entry-10442780938.html

ポートフォリオ実装メモおまけ

追加機能を色々つけたくて試してます。
まずはヘッダーを固定させたけど、スクロールしているときは少し薄くしたい。
ということで薄くできるようにしました。

参考：https://qiita.com/torano_tomo/items/909d9673d9c1866541d3

あと、Front-endとかBack-endを押した時に青い枠ができるのも嫌だったので消しました。
https://www.memory-lovers.blog/entry/2020/01/27/180000
下みたいなやつ

お問い合わせ用のもの作りました。
Progateに書いてあったから作るのは簡単です。

メールアドレスと内容のところに文字が書かれているときだけ送信ボタン押せるようにしました。
送信ボタン押したら内容をリセットします。
本当は文字が入力されてない場合エラー文が出るようにしたかったけどちょっと想像できてないです。
あとは、バックエンドの知識ついたらちゃんと送信機能付けてデータが保存されるようにしたい

ロード時にアニメーションを加えました。
https://digipress.info/tech/opening-loading-shutter-with-pure-css/
速攻でコピペしたのでいまいちわかってません

firebaseのエラー対応

問題：portfolioディレクトリでfirebase deployを行ったが、Error parsing triggers:Cannot find module 'firebase-functions'というエラー分が出ました。

解決策：funtionsディレクトリの中でnpm install行い、portfolioディレクトリに戻り再度firebase deployを行ったところ正常に作動しました。

参考：http://banbara-studio.hatenablog.com/entry/2017/04/18/083455

ポートフォリオ実装メモ①(skill)

Githubのリンクまではvisionとほぼ一緒なので割愛

グラフはここので作れるらしい
https://qiita.com/kiyc/items/a94a202bf06fff644f62

yarn add vue-chartjs chart.js
をやろうと思ったけど、yarnって使ってなくない？(こっちでやると必要なファイルがnode_modulesに入れられてしまう)
ということでちょっと調べたところ
npm install vue-chartjs chart.js --save
こっちをターミナルで打った方がいいです。

Chart.vueを作って、サイトのIndex.vueの中身をSkill.vueに書いたらこうなりました。