node.jsでvue.jsをインストール
node.jsとは
javascriptの実行環境を一つ
javasctiptをサーバーサイドで使用することができる
インストールの手順
npmのバージョン確認
npmはnode.jsのバージョン管理ツール
npm -v
node.jsのバージョン確認
node -v
vue-cliをインストール
vue-cliとは
vue.js環境構築の手助けをしてくれるツール
npm install -g vue-cli
インストールできたかVueのバージョンを確認
vue --version
テンプレートをwebpackにしてプロジェクトを作成
vue init webpack ディレクトリ名
追加で機能をつけるか聞いてくるので,今回は全部OKにした
最後に作成したディレクトリに移動して実行
cd ディレクトリ名
npm run dev
Vueのトップページが開けたら成功
Javascript prototype
prototypeとは？
クラスの概念なかったバージョンでその代わりとして使われたもの
prototypeプロパティと言われる
コンストラクタ関数につけることで、インスタンスした際に自動的に関数が入る
// コンストラクタ関数
const Fruit = function(name,price){
this.name = name ;
this.price = price ;
}
// プロトタイプ
Fruit.prototype.sayPrice = function( ){
console.log ( this.name + "の値段は" + this.price + "円です" ) ;
}
プロトタイプのメリット
メモリの削減ができる
コンストラクタ関数にメソッドとして追加することもできるが
インスタンス１つ１つにメソッドが入る
しかしプロトタイプは共有で使われるため、かかれない
// コンストラクタ関数
this.name = name;
this.price = price;
}
// プロトタイプ
console.log(this.name + "の値段は" + this.price + "円です");
}
var Banana = function(name,price){
this.name = name;
this.price = price;
this.sayPrice = function(){
console.log(this.name + "の値段は" + this.price + "円です");
}
}
const banana = new Banana('バナナ',120);
console.log(banana);
後から書き換えることができる
インスタンスした後にメソッドを変更したい場合
コンストラクタ関数に書くと
インスタンス１つ１つ変更しないといけなくなる
しかし、プロトタイプの場合
変更内容を同じように書き足すことで
全てのインスタンスのメソッドを書き換えることができる
const Fruit = function(name,price){
this.name = name;
this.price = price;
}
Fruit.prototype.sayPrice = function(){
console.log(this.name + "の値段は" + this.price + "円です");
}
const orage = new Fruit('オレンジ',100);
const grape = new Fruit('ぶどう',120);
console.log(orage.sayPrice()); // オレンジの値段は100円です
console.log(grape.sayPrice()); // ぶどうの値段は120円です
Fruit.prototype.sayPrice = function(){
console.log("今日のオススメは" + this.name + "で" + this.price + "円です");
}
console.log(orage.sayPrice()); // 今日のオススメはオレンジで100円です
console.log(grape.sayPrice()); // 今日のオススメはぶどうで120円です
Javascript オブジェクトについて
Javascriptで扱うものは全てオブジェクトかオブジェクトのように使えもの
オブジェクトはメソッドとメソッドがある
var human = {};
human.name = "momonomono"; // プロパティ
human.age = 28; // プロパティ
human.sex = '男'; // プロパティ
human.sayInfo = function(){ // メソッド
return "私は" + human.name + "です";
}
new をつけることでオブジェクトを簡単に作ることができる
var obj1 = new human(); // 二つとも一緒
var obj2 = human();
console.log( obj1 ); // { }
console.log( obj2 ); // { }
オブジェクトを使うことで同じようなデータを持ったものを大量に作ることができる
var Fruit = function(name,price,color){
this.name = name;
this.price = price;
this.color = color;
this.barker = function(){
return this.name + "が" + this.price + "円だよー";
}
}
var banana = new Fruit('banana',120,"黄");
var orange = new Fruit('orange',150,"橙");
値には様々な型があるが、どれも一時的にオブジェクトのようになる
var num1 = 100;
var num2 = new Number(100);
console.log(typeof num1); // number
console.log(typeof num2); // object
console.log(typeof num1.toString());
//number型だけどobjectの使い方ができてる
console.log(typeof num2.toString());
autocomplete
autocompleteとは
テキストまたは数値が入るタグ<input><textarea>などに使われる
同じnameタグをつけると、以前使用した履歴などが候補として
出力されるのを回避することができる
<input type="text" name="title">
<input type="text" name="title" autocomplete="off">
wordpress テンプレートタグ
分割したパーツの呼び出し
wordpressはwebページを分割して使いまわすことで
簡単に多くのページを作ることができる
header , footer ,sidebarの三つが分割できるテンプレとして用意されている
header : htmlのheadで囲まれているところらへん
footer : 最下層のタグ
sidebar : 横に置くメニューバーなどに使われる部分
その他の呼び出し
第一引数で一般テンプレートのスラッグ名
第二引数で特例のテンプレート
使用例
content-menu.phpを呼び出す
サイトの設定情報や、絶対パスを出力
分割したhead , footer のアクションをスタートさせる
参考文献
覚えるべきWordPressテンプレートタグ | はじめてのWordPressまとめ
オブジェクト指向 アクセス権
アクセス権
プロパティ、メソッドの前につけることによって
外からアクセスできる範囲をしてすることができる
アクセス権を指定する理由
プロパティへの値を渡す方法は参照渡し
参照渡しとは関数に実際の変数を代入して値を変える方法
オブジェクト指向のインスタインスも参照渡しのため
アクセス権を指定しないと
無意識的にでも元の値を変えられてしまう場合がある
function num1($num){
$num = 5;
}
function num2(&$num){
$num = 5;
}
$num = 1;
num1($num);
echo $num;
num2($num);
echo $num;
アクセス権の種類
public
どこからでもアクセスできる
private
そのクラスの中からしかアクセスできない
protected
そのクラスの中からしかアクセスできない
使用例
class Menu{
public $name;
private $price;
protected $type;
public function __construct($name,$price,$type){
$this->name = $name;
$this->price = $price;
$this->type = $type;
}
}
$curry = new Menu('カレー',700,'主食');
echo $curry->name; // カレー
echo $curry->price; // 出力されない
echo $curry->type; // 出力されない
ゲッター,セッター
private,protectedで指定したプロパティの
値を取り出す、値を変更するために
その専用のメソッドを用意することで取り出せる
使用例
class Menu{
private $name;
private $price;
private $type;
public function __construct($name,$price,$type){
$this->name = $name;
$this->price = $price;
$this->type = $type;
}
// ゲッター
public function getName(){
return $this->name;
}
// セッター
public function setName($name){
$this->name = $name;
}
}
$curry = new Menu('カレー',700,'主食');
// ゲッター使用
echo $curry->getName()."<br>";
// セッター使用
$curry->setName('ラーメン');
echo $curry->getName();
オブジェクト指向
オブジェクト指向
それぞれ共通の要素や動きを一つにまとめて
それを基準として物を作っていくこと
メリット
同じようなデータを簡単に大量に作ることができる
新たに増やしたい機能を簡単に増やすことができる
他の人にコードの内容を簡単に使えることができる
クラス
オブジェクト思考の書き出し
その後ろのクラス名は、一文字目を大文字で入力する
class クラス名{
//ここに中身
}
プロパティ、メソッド
クラスに関連付けたデータをプロパティ
クラスに関連付けた関数をメソッド
class Monster{
// プロパティ
public $name;
public $hp;
public $attack;
// メソッド
public function attack(){
echo $this->name;
}
}
コンストラクタ
クラスからオブジェクトが生成される時に自動的に生成されるメソッド
class Monster{
public $name;
public $hp;
public $attack;
// コンストラクタ
public function __construct($name,$hp,$attack){
$this->name = $name;
$this->hp = $hp;
$this->attack = $attack;
}
public function attack(){
echo $this->name;
}
}
