自分なりの解釈 今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦 少し躓いたところを忘備録として記録します。 親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。 その際に使…
自分なりの解釈 今日は1からなるべくノーヒントで０からGoogleBooks APIを使用したSPAの開発に挑戦 少し躓いたところを忘備録として記録します。 親側からpropsを使用したdataの受け渡しを行う際は画面描画が終わってから子側のdataに代入する。 その際に使…
自分なりの解釈 Google books apiを使用したSPAの作成 今日学習した処理の流れ 子側のコンポーネントから親側のコンポーネントに$emitを使って値を渡す。 親側は渡された値を参考にメソッドでdataを作成。 作成後、別のコンポーネントへpropsを使用してdata…
振り返り 今日は何も見ずにGoogle Books APIsを使用してデータの取得、vuetifyを使用してのデータの表示、コンポーネント間でのデータのやり取り、ローカルストレージへのデータ保存の実装に挑戦。 Google Books APIsを使用してデータの取得 特につまること…
今まであまり意識する機会がなかった処理速度について少し調べました。 ほとんどの内容は今の自分にはまだまだ理解できない部分でしたが、その中でも気づきがあった部分のみ忘備録として記録します。 i.nil? は i == nil より4倍から5倍近く処理が早い。 nil…
自分なりの解釈 コンポーネントを跨いでデータをローカルストレージに保存する流れ 子側のコンポーネントから親側に値を渡してローカルストレージに保存する必要がある。 子側から値を渡すためにthis.$emit('任意のイベント名', 渡したい値)とする。 親側でr…
自分なりの解釈 googlebook APIを使ってデータを取得後表示するまでの流れ vuetifyのv-text-fieldコンポーネントにv-modelで入力値をdataと紐付ける v-btnタグで検索ボタンを作成しクリックで検索メソッド発火 検索内容のkeywordをURLに組み込む必要がある …
自分なりの解釈 用意していないURLへのアクセス index.jsのroutesのオブジェクトに path '*'を追加する。*を追加することで指定していないすべてのpathを表す。 redirectで遷移先を指定するか、存在しないページ用のコンポーネントを作成して指定する。 こう…
自分なりの解釈 Vue Routerを初めて触ったイメージ webページに見立てたコンポーネントをリクエストに応じて<router-view/>の部分を差し替える。 差し替えるだけだから動作が軽く高速。 処理の流れはrouter-linkタグならto=""で指定されたViewコンポーネントがrouterフォル</router-view/>…
自分なりの解釈 vue-cliを使用したマルチページモード 流れとしては エントリーポイントをページ毎に作成する vue.config.jsファイルに追記 pages: { index: { entry: 'src/index/main.js', template: 'public/index.html', filename: 'index.html', title: …
自分なりの解釈 Vue-cli npm run serverでサーバーを立ち上げようとするとエラーが発生 Component name "Index" should always be multi-word との記載あり。 コンポーネントの名前は二語以上繋げて命名するべきと書いてあるっぽい ESLintでの設定でエラーを…
自分なりの解釈 Vue CLI 初めてVue CLIを使用してファイルを作成してみるとVScodeの一行目にwarningの波線が発生。 babel.config.jsが読み込まれず混乱しているのが原因のようです。 VScodeのsetting.jsonに "eslint.workingDirectories": [ {"mode": "auto"…
自分なりの解釈 コンポーネントフォームでのやり取り v-model使用 ゴールはコンポーネントで作成したフォームの入力値を親側で受け取ること。 そのために、コンポーネントのテンプレートの中で入力値を監視するためにv-modelでcomutedの処理と紐付けてセッタ…
自分なりの解釈 v-onとv-bindを使用したフォームのコンポーネント 親から子へはprops 子から親へはthis.$emit('任意のイベント名', 値) 子側(コンポーネント側)で入力値を親側に返すための処理が必要。 this.$emit('任意のイベント名', 返す値)をメソッドや…
自分なりの解釈 コンポーネント HTMLタグを組み合わせた使い回し可能な一つのパーツ 呼び出す時もつけた名前をHTMLタグのと同じ形で使用するためHTMLのタグ名と被らないように2語以上で命名するのが望ましい let comA ={template:`<div></div>}のように記述するが templ…
自分なりの解釈 非同期通信 最近はasync関数とawaitを使うようになっているらしい。 async関数を使用すると返り値がPromiseという処理の完了を判別できる型になる。 awaitを使用すると処理が完了してから次の処理を実行するタイマーのような役割と関数び本来…
自分なりの解釈 computed dataの値を監視して変化があった場合に処理を実行してリターンで返す todoリストの処理の流れ 入力欄の値をnewItemとしてv-modelで取得 ボタンクリックで発火 addItem関数処理へ addItem関数でnewItemを配列に追加 newItemを初期化 …
自分なりの解釈 v-showとv-ifは同じ挙動をするが内部の処理が異なる。 v-showは表示の準備がされているものの表示と非表示を要素にdisplay:noneを付与したり取り消して表現している。初期値が非表示の状態でも描写のコストが掛かっている。 v-ifは表示する要…
自分なりの解釈 v-onの修飾子preventは本来の挙動を防ぐために使用する。 例えば、aタグをクリックした際にページ上部に遷移してしまう挙動を@click.preventとすると改善できる。 Vueインスタンスのdataに記述したものは記述した時点ゲッターとセッターが定…
自分なりの解釈 仮想DOMを使用 どのHTMLタグにJavaScriptの処理が付与されているか判別しやすい idやclassを使用して要素を取り込む必要がないので変更が容易 v-bindで複数の属性を付与したい場合は、dataで属性名をキーに持つオブジェクトを作成してv-bind=…
自分なりの解釈 ・WEBページに動きを加えるライブラリ ・el:で適応範囲を設定 ・data:{}でWEBページで使用する変数を定義(処理を加えることはできない) ・methods:{}で関数の定義 ・computed:{}で何らかの処理を実行した変数をreturnしてあげる ・ディレクテ…
今日はLaravelとpaizaで学習したので新しい学びを忘備録として記録します。 Laravelではリクエストを受けるとindex.phpを最初に読み込む。 その中に記述されているbootstrap/app.phpでサービスコンテナが読み込まれている。 サービスコンテナとは中に色んな…
新しく学んだ知識を忘備録として記録します。 コンポーネント ⇨色んなところ(bladeファイル)に持ち運びできる雛形素材 bladeファイルやコントローラーからデータを渡してあげるとはめ込んで表示できる アルゴリズム：ソートの考え方 配列の中身を比較して一…
今日はpaizaとLaravelで学習をしました。 今日の新しい学びを忘備録として記載します。 PHPで文字を切り出す substr(何を, どこから, 何文字) split("何で区切る", 何を) ※正規表現使用可能 explode("何で区切る", 何を) ※正規表現使用不可 上記二つとも返り…
今日はpaizaを進めていく中で調べた新しい知識について忘備録として記載します。 each文で要素を検証しながら要素をdeleteで削除しようとすると削除予定の要素が残ってしまうことがある。 これは要素を削除した瞬間にブロック内の変数が次の要素に移ってしま…
今日はpaizaのAランクに挑戦しましたが2件タイムオーバーでアウトでした。 悔しい・・・ その後はLaravelの動画で学習を開始！ しばらく進めるとDBとの接続がうまくいかない・・・ 対処方法を色々検索して試してなんとか接続できました！ 明日も引き続き学習…
今日はpaizaでAランク問題に挑戦しました。 1時間ほどかけてできたコードは見事にアウトでした・・・ 悔しくてどうすれば実現できたのか考えているとこうすればできるかも？と思い浮かんだの再トライするも思うようにいかず・・・ まだまだ実力不足でした。 …
今日はプロゲートのPHPレッスンを一通り終わらせました！ 変数がどこからきてるのか戸惑うこともありましたが無事に終わらせることができました。 その後はpaizaのDランク問題にPHPで挑戦！ 言語が違うだけでこんなに難しく感じるのかと思いました。 もっと…
今日も引き続きPHPを学習しました。 プロゲートでのPHP最終レッスンを進めていく中で、ビューファイル間で変数のやり取りをしている感じが少し違和感があって処理手順の理解が遅れているな感じました。 慣れだとは思いますがしっかりと処理の流れを把握して…
今日もプロゲートにてPHPを学習しました。 少しだけ複雑になってきましたが、楽しく学習できています。 ＜忘備録＞ 3種のアクセス権 private クラス内のみ 自分の部屋 pabulic 誰でも 公共施設 protected 家族のみ 自分の家 __construct = initializeメソッ…
