いせゆう
https://scrapbox.io/files/62626e8e575fd70023f74eb7.png
自己紹介
Spikers'incというバレーボールのサークルに入ってます
株とNFTに興味はあるが、なんだかんだと結局何も調べていない今日この頃
開発はほとんどやったことないですが、皆さんに助けてもらいながら頑張りたい
日誌に参考サイトのURL載っけてるんっで興味があれば参考にどうぞ〜
個人メモ
興味あるページ
エンジニアリング日誌
ルール
やることを細分化する
必ず次の作業を決めてからその日の作業を終わる
4/22~4/28(第1週)
4/22(Fri)
とりあえずprogateとバックエンドで迷ってるのでどっちにも片足ずつ突っ込んでみる。
合宿までにWebアプリを作りたい。
てかフロントエンドもやりたいwww
4/23
progate Command Lineのレッスンを完了!!
なんか昔やってたぽいけど復習(大体知ってた)
Scrapboxの使い方調べて色々いじってみた
UserSettingでcssもやろうと思ったけどようわからんかったからやめた
結局やりました...。
js
css
いせゆう.icontest
Reactの環境構築
4/24(Sun)
scrapboxの見た目について、外部リンクのリンク名は"[]"の中に"url 空白 表示したいリンク名"でいけるっぽい
progate Git完了!
技術ドリブンになりかけてるかもだから早々になんか作る方向にシフトしないとかな?
まだ見てないけど...
とか良さげ
JSXというJavaScriptの拡張構文があるらしい。 コンポーネントとという、Reactの構成部品を作る
最も簡単なコンポーネントは関数、定義すると関数名をhtmlっぽいタグとして使えるようになる
code:js
function 関数名(props){}
(<関数名 value=0 ... />);
Reactのコンポーネントでは引数の値は使うだけで変更したりはしちゃだめらしい
基本的にクラスで値を管理して、メソッドで操作する感じ
コンストラクタの使用とか, superで何を引き継いでるのかとかは要確認
こっちの方がぱっと見詳しく書いてあってReact入門よりも良さげかもしれん TODOアプリの作成完了!
importするのにいちいちexport defaultって書かなくちゃなのがだるい...
基本stateを取得して値をいじってセットしての繰り返しな感じ
次回以降の作業
あたりかなぁ...
4/25(Mon)
なんかのアプリとか作るときのディレクトリとかの構造の参考になるかも↓
progate RubyⅠ 完了
progate RubyⅡを始めたけど有料コンテンツだったから途中でやめた
Reduxなるものがあるらしい、コンポーネント整理に有効?
"疎結合"がキーワード
とりあえず諸々のインストールは完了
次回以降の作業
Unityの勉強(3D)
Reactに関しては今残ってる作業が終わったらオリジナルの開発に移りたい
4/26(Tue)
4/27(Wed)
これやったけど全然何やってるのかわからんかった...
と思ったがバックエンド勉強会に参加
Goの環境構築やってたら何も聞けなかったので多分自分でやる
なんかエラー出てきて無限にできないと思ってたら関係ない拡張機能のやつでGoは普通に実行できた涙
次回以降の作業
Go
Unityの勉強(3D)
4/28(Thu)
Gitについて使い方(コマンド)を以下にまとめる
- 最初に誰が変更したかを記録するためにユーザネームを登録する
- 同じくemailも登録
- これはやらなくてもいいらしいが見栄えの問題
$ git config --global color.ui true
これで登録した内容を確認できる
$ git config -l
Gitに関するコマンドを知りたくなったら
$ git config --help
または
$ git help config
最初に管理したいディレクトリに移動して、ここでGitを使うぞって宣言する
$ git init
次に編集したファイルをステージする(ファイル名を.にすればディレクトリ内の全ファイルがステージされる)
最後にファイルをコミットする
$ git commit
上のコマンドを入力すると画面が切り替わり入力を求められるので、コミットしたファイルにどのような変更を加えたのかをコメントとして残しておく
vim使ってるなら多分iでコメントを打てるようになってesc押してからZZで抜けられるはず?
でもいける
次、編集したファイルをステージにあげたのかコミットしたのかわからなくなった時は
$ git status
で確認できる
また、どのファイルを変更したかを確認したいときには
$ git log
$ git log --oneline
$ git log -p
$ git log --stat
ステージの状態でファイルを変更前に戻したいなら
ファイル内の変更内容の確認は
$ git diff
ステージ後は
$ git diff --cached
それ以下のディレクトリに含まれるファイルに対して、gitコマンドを適用しないようにするには
.gitignoreというファイルの中に無視したいファイル名を記述しておく
直前のコミットにおいて軽微な修正があった場合には
$ git commit --amend
とすることでlogに新しいコミットを追加することなく、前回のコミットに対する修正ができる
修正前のバージョンに戻したい時は
$ git reset --hard HEAD
$ git reset --hard HEAD^
git resetをした後にそれを取り消すには
$ git reset --hard ORIG_HEAD
現在あるブランチの確認
$ git branch
ブランチの作成
ブランチの移動
ブランチのマージは
不必要なブランチの削除は
commitに対してわかりやすい名前(バージョン)をつけるには
$ git tag バージョン名 //直近のコミットにタグをつける タグ名を消したい時は
gitコマンドの短縮名(エイリアス)をつけるには
どんなエイリアスをつけたかを確認するためには
$ git config -l
dotinstall git 完了
今週の振り返り
やったこと
progate (CommandLine, Git, Ruby I)
dotinstall (Git)
ScrapboxのUserSettingをいじる
React入門で色々と入門記事を漁った(めっちゃ簡単なToDoアプリ制作)
Goの環境構築
次回以降
メンターの人に相談したら方向性固まった
Nuxtでいくつかアプリ作れたらNextに移行する感じかな?
みやりんがポートフォリオサイト作りたいって言ってたから私も作ろうかな
開発はgithub使いながらできるようにしたい
デプロイまでいけるといいな
4/29~5/6(第2週)
4/29(Fri)
メンターの方々と話してたらなんかいい感じの案が出てきて人と話すのも大事って思った
4/30(Sat)
5/1(Sun)
なんかどんどん方向性がそれて言っているが、、、
謎にホームページのデザインを作成し始める
この絶妙なダサさはどうしたらいいんだろうか、、、
https://scrapbox.io/files/626dbd39b00544001d237b35.png
5/2(Mon)
5/3(Tue)
ポートフォリオのコードを少し書いた
jsもvueもさして分かってないのにいきなりNuxt使おうとしたのは流石に馬鹿だと気づいたので、先にその辺の足場を固める
TypeScriptはプロトタイプベースらしいが、クラスベースの感覚からすると違和感しかない
オブジェクトとメソッドについても気持ち悪い
5/4(Wed)5/5(Thu)5/6(Fri)
5/7~5/13(第3週)
5/7(Sat)
5/8(Sun)5/9(Mon)5/10(Tue)
5/11(Wed)
Next.js 勉強会参加
5/12(Thu)
5/13(Fri)
HidakaさんのNotionを参考にNext.jsの続き
今週の振り返り
あっちゃこっちゃ手を広げていたら方向性を見失いつつあるので、どっかしらの作業を一旦完了させられるようにしたい。
来週以降は、授業時間中には
Next.js
バックエンド勉強会
それ以外の時間には、
Vue.js
ポートフォリオ作成
etc..
をやっていきたい。
5/14~5/20(第4週)
5/14(Sat)
日高さんのNext.js入門の続き
gitignoreとはなんぞ?
後でやっていただけるらしいのでとりあえず放置
Git Graph超便利!!
useStateを使うと、状態を保持する変数と、状態を変更する関数の二つが返ってくる
他にもuse〇〇があるっぽい
jsのfilter関数は、配列の要素に対して、設定した条件に合う要素のみを新しい配列に加える
Dynamic Routesなる機能があるらしい
Umm...何となく分かったようなわからないような
とりあえず現状公開されているところまでできたので、Next.js入門は一旦終了
5/18(Wed)
UdemyでVueの勉強
5/20(Fri)
日高さんのNext.js入門の続き
わからないとこが結構あるから後で調べたい
でもとりあえず動いた!!
今週の振り返り
なかなか自己学習に時間を回せていない今日この頃
日高さんのNext.js入門で、firebaseを使ったtodoアプリはできた
解説読んでてわからないところが多々あったので、そこら辺を見直しながら機能の追加をするか、
新しいアプリケーションを自分で作ってみて、firebaseの復習をするか...
とにかく、来週はまとまった時間を確保して、もう少し自己学習にコミットできるようにしたい
5/21~5/27(第5週)
5/21(Sat)
UdemyでVueの勉強
vite(ヴィートって読むらしい)ってなんぞ?
script内の変数をtemplate内で使うときは{{ }}で囲む
ディレクティブでtemplate内で関数を使ったりする?
style scopedだと他のファイルには適用されなくなる
動的な値操作にディレクティブを使う
リンクの場合はv-bind:href0="url"
code: ex.vue
<script lang="ts">
const input = (event: any) => {
...
}
</script>
<template>
<input v-on:input="input" />
</template>
上のコードでscript内のinputのeventに実際に文字が入力されるたびにinput要素の情報が入ってくるのはなんでなん???
vueはリアクティブな値を変更したらtemplateを再読み込みする
リアクティブな値にするためには、refを使う
code: vue > script
import { ref } from 'vue'
const foo = ref<T>(初期値)
foo.value = 変更する値
オブジェクトは定数だが、プロパティはいじれる
refはプリミティブな値にだけ使える
複数の値を持ったオブジェクトをリアクティブにするためにはreactiveを使う
code: vue > script
import { reactive } from 'vue'
const foo = reactive({
name: 'Ise',
age: '20',
...
})
foo.name = 'Yuu'
双方向にbindする場合にはv-modelを使うと良い
なんらかの条件を元に値を生成する時にはcomputed
単純に関数を使うのでもいいが、computedを使うとVue側でキャッシュなどの操作が走り、動作が軽くなるらしい
基本的にはcomputedでいいが、watchというのもあるらしい
code:vue > script
import { ref, reactive, watch } from 'vue'
const user = reactive({
name: 'Ise',
age: '20',
...
})
const { name } = toRefs(user)
watch(name, () => {
...
})
toRefsに関しては、reactiveで一気にリアクティブなオブジェクトを作って、要素一つ一つにref使うみたいにバラせるから便利
optionsAPIからcompositionAPIに変わったらしい
compositionAPIのがわかりやすい
script setupを使うとreturnの記述を減らせる
ライフサイクルフックなるものがあるらしい
リストの要素を同的に削除する時には、filter関数を使って、選択された要素以外で、新しいリストを作る処理をする
v-if, v-showがある
v-showの方が動作が軽いが、elseは使えない
propsを用いた親子コンポーネント間でのデータのやり取りでは、基本的に子は親から受け取った要素を使うだけで、変更はしない方が綺麗である
Propsに関数を渡して、親コンポーネントで定義した関数を、子コンポーネントのイベントが発火したタイミングで呼び出すこともできるが、Vueでは推奨されていない
5/23(Mon)
Udemyの続き
復習のために同じ仕組みのやつもう一回作ってるけど全然覚えとらん...
htmlのinputタグで結構色々と入力に制限がかけられる驚き
inputタグの中の値によって、htmlの要素を変化させる方法がわからん...
input要素がからならbuttonをdisabledにしたいだけなんだが...
5/24(Tue)
Udemyの続き
昨日散々悩んでたのに、一瞬でできてしまった。
どうやらv-bindを使うだけでよかった模様。じゃあv-bindって結局なんなん?
v-bindはhtmlの要素に使用すると、属性を動的に変更できる!!
typeとか、classもいける.styleも!!
コンポーネントに使えば値を渡せる
EmitとPropsの使い方がまだいまいちわからんなぁ
v-bindはstyleの中でも使える
slotsを使うとコンポーネントを親子で共有できるらしい
動的コンポーネントを使うと便利
teleportを使うと、タグを任意の位置に移動させられる
Vueのプロバイドインジェクトは、Reactのコンテキスト
5/25(Wed)
Agile開発の動画見た
インセプションデッキ
"なぜ"は使わない
Udemyの続き
provideとinjectを使えばpropsやemitなしに値の受け渡しができる
InjectionKeyを使えば型を指定できる
5/26(Thu)
Udemyの続き
ディレクティブは独自に定義できる
ディレクティブ名はvFooBarとする
ディレクティブには.つなぎで修飾詞(モディファイヤー)をつけれる
@click.preventとすると、ブラウザのデフォルトの挙動としてbuttonが押される際にページ遷移させようとするのを阻止できる
モディファイヤも独自に設定できる
5/27(Fri)
portfolio作成開始
今週の振り返り
基本的にずっとUdemyでVue.jsの学習をしていた。
もう少しで講義を全て見終わるので、来週までに完了させたい。
Vue.jsで家計簿アプリを作ります。
SassとかjQueryの勉強もしたい(こっちを優先するかも)
mixinもやりたい
5/28~6/3(第6週)
5/28(Sat)
Sassの勉強
ファイルを分割して管理すると良いらしい
その時に_をファイル名の先頭につけると、コンパイル後のにcssファイルが生成されなくなるので、部品としての役割だけのScssファイルには_を先頭につけてパーシャルとする方が良い
6/1(Wed)
cssについて
基本
インライン要素, ブロック要素の特徴を押さえる
scssについて(mixinの説明もあるよ)
擬似要素, 擬似クラスはこういうのあるんだーくらいには知っておく
6/4~6/10(第7週)
6/8(Wed)
css続き
配置
基本的に配置はflexboxだけ使えれば問題ない
グリッド使ってもいける
6/11~6/17(第8週)
6/15(Wed)
諸事情でVueで作っていた家計簿をReactで作り直すことにした
ただ、Reactを完全に忘れたから復習から
エントリポイントを使ってimportが長くなるのを防げる
慣習的にエントリポイントはindex.jsファイルを使う
タグを一つしか使っていなくても、仕様変更の時を考えてコンポーネントに切り出しておく
Hooksについて
クラスコンポーネントでしか管理できなかったstateやライフサイクルを関数コンポーネントで扱えるようにする
stateを使う理由は、DOMを直接変更するとパフォーマンスが落ちるから、仮想DOMを変更するため
code:stateについて
// stateの宣言
// stateの更新
setState(newState)
//stateについて、ひとつ前のstateにアクセスするときにはprevStateを使う
code:useEffectについて
// 第二引数の値が更新されると呼び出される.[]が空なら初回レンダリング後のみ実行
// 第二引数の[]を書かない場合は再レンダリングごとに毎回実行
useEffect(() => {
console.log("stateが", state1, state2, "に更新された")
DBを使う段階までいったらこれをみろ
6/17(Fri)
reactでtypescript使おうと思ったらバグったので、色々調べてみる
結局、わからなかったので新しく作り直した。
フィードバック
期限切れました辛い、環境の変化は大変
フレームワークの移行,つらい
「移行してみてどうですか?」→「React は CSS と JS がいっしょ」 なるほど
React一緒に頑張りましょう〜本のことは6/29までにまとめようと思っているので参考に
皆reactやってますね。javascriptの派生みたいな物でしょうか。ここら辺のサイト見るだけでも参考になりそう。知らない単語が沢山出てる。。
6/18~6/24(第9週)
6/20(Mon)
家計簿アプリ作成の続き
6/22(Wed)
支出項目リストの作成
6/23(Thu)
JSX中にmap関数などを使う場合には、子要素にkeyを指定した方が良い
firebaseに接続!!
データベースの接続が失敗した場合に、エラー箇所を修正してページをリロードしてもうまくいかないことがあるので、npm run devをもう一度実行すべき
このエラーを探してめっちゃ時間を無駄にした。
6/24(Fri)
データベースに値を追加するところの処理で苦戦中
DBを扱う関数に値がちゃんと渡ってないっぽい
今週の振り返り
家計簿アプリを作っていたが、DB周りの処理がいまいち理解できていないままなので、その辺をもっとしっかりと固めていきたい。具体的に入れたい機能はかなりあるのだが、来週の水曜日までにどこまでできるかはかなり謎。DBを理解すればサクサク進められるのだが...。
フィードバック
分からないことあれば、React・Nextはある程度詳しいので、聞いてくれれば教えるよ〜
BadRequestだから、なにかリクエストがミスってるのかな?
動いてるのすごい
宮本凜.iconfirebaseとの連携で家計簿作成か、超進んでる!
ちゃんと困っている部分が把握できてるのはいいね!解決まで頑張ってい!
計画
機能の追加
グラフを表示したい
ログイン画面作りたい
月ごとに切り替えられるようにしたい
6/25~7/1(第10週)
6/25(Sat)
グラフの描画について、useEffectを使うと、画面が描画されたのちに内部処理が実行されるため、リロードするとグラフに使用しているデータがからの配列のままグラフの引数に渡されてしまい、リロード直後のみグラフが描画されないという問題がある。
ここでuseLayoutEffectを使用すると、内部の処理を実行したのちに描画処理が走るため、グラフの引数に意図したデータを持たせた状態で描画させることができた。
リストに追加する時の入力用のinputタグの列は非表示にしておきたいが、マウント、アンマウント処理を使えばいけそうか?