https://portfolio-d9ccd.web.app
npm install
npm run serve
npm run build
npm run lint
https://portfolio-d9ccd.web.app
npm install
npm run serve
npm run build
npm run lint
https://hikopro.com/mosha-site/
上記のサイトで模写コーディングのおすすめサイトを載せてくれてるのでやってます。
所感
レスポンシブ対応の復習になりました。
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
Udemyで学習中です。
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
例:面積が最も小さい国ベスト3は?
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 句
例:アジアとヨーロッパの中で面積トップ3はどこ?
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;
vueのコードを学んだので、ヘッダーを作り直しました。
メニューの出し方とかボタンとか
https://zarigani-design-office.com/blog/drawer_menu/
https://zarigani-design-office.com/blog/hamburger_btn/
jQueryのとこはvueに書き変えました。
:classを使いました。
emitという新しいものを覚えました。
詳しくはメニューの方で
sample.vue作ってvueのコード色々試していきます。
ポートフォリオで使えるかはわからない。
下のサイトを参考にとりあえずカウンターを作りました。
https://qiita.com/ferretdayo/items/edcd2b6682148e477104
https://mebee.info/2020/02/09/post-5874/
上記のサイトをHeader.vueに記述し、
App.vueにimportしたところ、toggleと書かれた緑のボタンが出現
template内のtoggleを「ハンバーガーメニュー フリー」で検索した
画像にimg要素で置き換えた。画像はassetsフォルダに入れた。
画像がうまく表示されない場合は下のリンクのプロフィール写真を参考に
#9
toggleと書かれていたところに写真のものが入った。
しかし、枠が緑のまま。
そこで、template内のbutton要素のbtn-successクラスを消したところ緑の枠がなくなった。
ちなみにハンバーガーメニュー押したら左からメニューが出ます。
メニューの作り方変えました。
htmlとcssで作りました。
https://saruwakakun.com/html-css/reference/nav-drawer
グラフ一つの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のうちどれか一つの配列をひっぱてくれる
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も同じ感じでした。
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が変更された配列で適用される
上の流れで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が終わるまでグラフが表示されないようにしている
いろいろな機能を無事つけれたので完成としました。
まず、写真と閉じる範囲をかぶせていたのは、写真を消して閉じるボタンを押したらメニューが消えるようにvueで書きました。
残っていた問題としては、スクロールはボタンを押した時メニューが消えないということでした。
vueを学んで、例えばaboutを押した時headerのisActiveをfalseにすればできるかと想像しました。ダメでした。
そこで、emitというものを教わりました。
これを使うことで、子コンポーネントから親コンポーネントに情報を渡せて、
想像していた物ができました。
あとは、ヘッダーを固定していたので、スクロールするとタイトルが見えない問題です。
これは、margin-top:-60pxとpadding-top:60pxをやったら解決しました。
普通にmargin-top:60pxだと、mainとaboutの間に変なスペースができてしまいますが、
±0にすれば、見た目は変わらずsectionの範囲を広げることができます。
ということで、メニューも機能的なところはできたので、ポートフォリオひとまず完成です。
残りでメディアクエリ対応したいです。
とりあえず仕様書通りに書いたら上のようになった。
今のところ問題としてありそうなのは
・Header.vueで作った閉じるボタンがdrawerSectionの外で出ている→解決
・Menuの全体の背景色が黒になっている→解決
・drawerSectionを一番外にしたいのによくわからない要素がさらに外側にある→解決
・閉じるボタンがどこから作られているのかわからん→?
新しい課題は
・バツボタンなくなっちゃった→解決!
・箇条書きの・が出て来ない→持ち越し
・文字を縦の方で**に寄せたい→解決
・リンクのアンダーバー消したい→解決!text-decoration:none;
・リンク押したらスクロールする機能入れる→持ち越し
長かったので二つに分けました。
#20
とりあえず形にはなりました。
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/
速攻でコピペしたのでいまいちわかってません
問題: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
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に書いたらこうなりました。
あとはこれをレーダーチャートに変えればオッケー(絶対難しい)
importとexportをRadarにして、
線グラフと縦軸とか横軸を消しました。
レーダーチャートになったけど最小値が0になってなくて見にくい。
このサイト見つけました。
http://ajec.hatenablog.com/entry/2016/08/09/003357
Front-end押したら下のHTMLとか消えるようにしたいんだけどできない。
セレクタがおそらく理解できてない。
https://webllica.com/css-combinators/
とりあえずdivタグを並べて作ったらできました。
でもFront-endだけに反応するようにはまだできてない。
カタンのプログラムを作りたいなと思って探したらすでに作っている人がいました。
参照:https://qiita.com/kuboyoo/items/86ba6685c313cbcafb2d
まだpythonのコードがよくわかってないので色々いじって勉強します。
store.jsでstate,getters,mutation,actionsを作った前提でヘルパー関数という省略できる便利なやつ。
文字の折り返し
word-break:break-all
https://creive.me/archives/17653/
行間
line-height:1.em;
http://www.shoshinsha.com/hp/ref/css/line-height.html
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.