2021-01-01から1年間の記事一覧
データバインディングの身近にある例としては、 例えばあるWebサービスがあって、その中で何かの計算を行う機能があったとして、 数字を入力したらリアルタイムで計算結果が画面に表示されるようなイメージです。 (値が変更されるごとに計算処理は走るような…
HTMLファイル内でVue.jsを使用するには、マウントと呼ばれる処理が必要である。 方法は様々あるようだが、まずは教本などでよく出てくるパターンを参考に、何をしているのか書く。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js 3</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@3.1.5"></script> </body> <…</html>
JSにはいくつか固有の書き方があると(個人的に)思っています。 まずは関数と関数式の違いについて 引数nameで指定した文字に対してハローと返すだけの簡単な関数です 関数 function hello(name) { return name + 'さん、こにちは' }; 関数式ではこうなります…
データ駆動とは データの更新がきっかけとなって表示や動作が変わるアプリケーション設計の考え方 Vue.jsでは、JavaScriptでデータを更新すると Vueが自動的にDOMを更新してページの表示が変わる。 DOM操作がほとんど不要となる。 データとDOMが自動的に繋が…
v-forとは よくある「配列からデータを取り出してtableに表示して云々」を実現する。 仮引数を2つ用意することで「配列要素、インデックス番号」の順にセットすることも可能。 配列を絞り込みたい時 配列をそのまま表示するでなく、ソートしたり条件に合致す…
あｎ# おさらい ディレクティブとは、接頭辞v- がついたVueJsの属性。 これを使うことでデータバインディングなどが可能となる。 v-if 指定された条件式がtrueの場合にだけ、現在の要素を出力する v-show 式の真偽に応じて表示/非表示を切り替える 〜v-show …
アプリケーションのデータをDOMと結びつけること テキストボックスの双方向データバインディング <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <form> <label for="name">文字を入力してください:</label> <input type="text" id="name" v-model="inputText" />…</form></div></body></html>
イベントオブジェクトを使用 ⇨$event(Vue.jsのルールで決まっている名前) <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> //第二引数以降で$eventを使いイベントオブジェクトを受け取り、イベントハンドラでも参照できるようになる <button v-on:click="onclick('ようこそ！',$event)">クリ…</button></div></body></html>
v-on ディレクティブ イベント処理を実装する -> イベントとは、ボタンを押したりURLをクリックなどのこと またイベント時に実行されるコード(メソッド)のことをイベントハンドラーと呼ぶ イベントハンドラーはv-onディレクティブを使って設定する 下記はサ…
ライフサイクルとは Vueインスタンスの生成から破棄までの流れのこと ライフサイクルの変化に応じて呼び出されるメソッドのことを ライフサイクルフックと呼ぶ 下記の公式が非常に参考になる。 Vue インスタンス — Vue.js ぶっちゃけ初学者にはなんのこっち…
算出プロパティとは 既存データの加工を伴う取得のこと <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{localEmail}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </body></html>
ディレクティブ {{変数}}のマスタッシュ構文は便利だが、条件分岐や繰返し処理などは ディレクティブ機能を使う。 本機能は重要である。 「v-●●」で始まるのが特徴 例えば、属性値にJavaScript式を埋め込むにはv-bindを使います <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <a v-bind:href="url">ぐーぐ…</a></div></body></html>
Vue.Jsはフレームワークだが、CDN経由でライブラリをインポートするだけで簡単に利用できる。 まず先にコードを記載していくっ <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{message}}</p> ①マスタッシュ構文とよばれる、HTMLからデータオブジェクトにアクセスする構文 </div> </body></html>
Vue.Jsとは JavaScriptのフレームワーク。 JQueryを業務で少しでも使用したことがある方ならご理解頂けるかと思うが、 導入しやすくDOM操作を便利にしてくれる反面コードがごちゃごちゃしてくる。 Jqueryでは、入力値をDOMと呼ばれる文書ツリーから取得し、A…
Vue.js案件が熱いらしい。 何が熱いのかはあえて触れないが。 Javaエンジニアとしてキャリアスタートさせたが、なるべくフロントの最新技術に触れられる 案件で技術を磨いていきたい。 あとリモートできる現場が良い。 電車通勤、おめーはだめだ。 アフター…
ラムダ式とは ざっくりいうと、関数の定義とその実態の即時生成が行える式 記法 (型 引数名1,型 引数名2,...) -> { 処理; ... return 戻り値; } クロージャとは ラムダ式が持つ特性。 「自身が評価され関数の実態が生み出される際、その時点で アクセス可能…
関数オブジェクトとは プログラムの実行中に生み出したり、代入したりできるものを第一級オブジェクトという。 例えば,インスタンスでやデータ(文字列など)やデータ構造(配列)など。 Javaでは、関数も第一級オブジェクトとして扱える。 特徴 変数に代入可能 …
.projectファイルとは Eclipseでプロジェクト作成時に作成されるファイル。 DbfluteのハンズオンプロジェクトをGithub から落としてきた際に、 このファイルがgitignoreに含まれており、Gitでクローンしてもファイルに含まれていなかったため、プロジェクト…
※基本、下記の公式記事を参考に書いていきます。 DBFluteの紹介 | DBFlute DBFluteとは O/Rマッパー(※1)であり、DB管理支援ツール(※2)でもある ※1Object RelationalDataBase mapperの略。 名前のままだが、オブジェクトとRDBのデータの相互変換を行う。 ざっ…
分かっているようで言語化すると危ういシリーズ、、 ■静的型付け コンパイル時に型を決定し、型のチェックを厳密に行い安全性を担保する。 静的型付け言語にはJavaやC言語などがある ■動的型付け コンパイル時に型チェックを行わない、 故に実行時エラーが頻…
equals()は、2つの変数に入っているインスタンスを比較して等価であるかを判定する。 ■等価判定 equals()を使用する ２つのインスタンスが同じ内容であること。 何をもって同じとするかは、クラスの作成者が決める→equalsのオーバーライド Stringクラスなど…
Javaにおける全てのクラスの祖先はlang.objectクラスである。 全てのクラスは、Objectクラスで定義されたメソッドを持つことが可能。 自作クラスで、実装してもないのにequals()やtoString()が使えるのはこういった理由から。 とはいえクラスを作成したらオ…
数字や文字列などの単なる値を包み込んで(ラッピングして) 値を操作する機能(メソッド)を付与する為の役割をもったオブジェクト
Ajaxとは 通常のブラウザからのリクエストに代わってJavaScriptから Webサーバにデータをリクエストし、返されてきたデータもJavaScript自身が受け取る仕組みである。 受け取ったデータが既存のデータを書き換えない為、表示されたページは完全に書き換わら…
最近プログラミングが楽しい。 趣味で初めて2~3年になるが、今が一番楽しく熱中できている。 そんな私が言いたいことはひとつ。 プログラミングに限らず、何か目標や目的があるならば習慣化して続けるべき。 習慣化することで苦が苦ではなくなり思わぬ喜びが…
ある要素にイベントが発生すると、そのイベントに代入しておいたファンクションが実行される。 その時実行されるファンクションにはイベントオブジェクトというオブジェクトがパラメータとして渡される。 イベントオブジェクトには発生したイベントの種類や…
取得した要素.onsubmit = function() { 処理内容 }; document.getElementById('form').onsubmit = function () { console.log('押されたよ') } 取得した要素のイベントにファンクションを代入する形で イベントが発生したときの処理内容を設定 イベントに代…
イベントとは リンクやボタンのクリック、キーボード操作など。 要素にイベントを設定する 取得した要素.onsubmit = function() { 処理内容~ };
テンプレート文字列とは (`)で囲んだ文字列のこと。 便利な文字列表現が可能になり、記述がシンプルになり可読性が上がる 通常の文字列連結 const li = '' + item + ''; テンプレート文字列 const li = <li>item<li>; ${~}内でファンクションの呼び出し、計算も可能</li></li>
if文を使用して変数や定数に保存されている値や、オブジェクトのプロパティの 値などを調べることを評価するという。
