割烹エディターの開発メモ1

小説家になろうの活動報告を彩るためのエディター【割烹エディター】を開発した時のメモです。

主にJavascript関係の実装や備忘録を記録していきます。

Javascriptとは

ウェブページにて複雑な機能をできるようにするプログラミング言語。これを使うことでHTMLやCSSを操作したりできる。ウェブページをリッチにすることができて、ウェブページに動きを付けることができる。

2015年に大きく仕様が変わり書き方が変わった。

ES5とES6のその前後で変更点が多く、なるべくES6に沿った書き方が推奨されている。

ES5とES6の違いをまとめてみた(メモ) - Qiita

'use strict'; #ES6のJavasciptで実行する宣言

古いJavascriptでも動くので、この宣言を入れておくと新しいモードで実行される。新しくJavascriptを書く場合は予期せぬ動きを避けるため、この宣言を入れるほうが良い。

できること

・変数を宣言してユーザーの動きに応じて中身を変えることができる。
・ウェブページでユーザーが行った動作を検知して、それに応じたイベントを設定することができる。
・ようするにユーザーの動きに応じた画面構築ができる。

基本的な使い方

・書き方1（直書き）

<script>

//ここにJavascriptを記述

</script>

HTMLの中にscriptタグを作ってその中に記述する。

・書き方2(外付け)

<script src="script.js" defer></script>

＃deferはHTMLパース完了後に実行されるようにするためのもの
#他にasyncと指定することもでき、非同期にダウンロード、実行される。
#デフォルトでは到達時点で実行されるので、なるべくどちらか指定するほうがよい。

srcで外部のファイルから呼び出す。

※基本的に外付けで書くのがよい。HTMLは構造を表すもの、CSSは装飾を定義するものという役割があるので、それぞれ侵略しないようにするのがマナー。

・変数/定数

let x = 1; 変数を定義　変更可能
const a =1; 定数を定義　変更不可

ES5ではvarだったがES6では変数と定数に分けられた。変数スコープもできたのでvarは使用しない方がいい。

できる限りconstで宣言するのがよいとのこと。

・関数

functionで関数を作ることができる

function myFunction() {
 処理;
}

myFunction();#呼び出し

function myFunction2(x) {
 処理;
 return x*2;
}

console.log(myFunction2(1));#値を受け渡し可能

#匿名関数　名前のない関数 
function() {
 alert('hello');
}
#イベントの中で走らすためによく使われる。
const myButton = document.querySelector('button');

myButton.onclick = function() {
 alert('hello');
}

・演算子

四則演算

+
-
*
/
+=
-=
*=
/=

・比較演算

===
!==
<
>
<=
>=

===に注意。==ではない（これは厳密ではない比較で非推奨）

・文字操作

#宣言
'' #シングルコーテーション
"" #ダブルクォーテーション
`` #バッククォート　テンプレート文字が使えるので変数が入る場合はオススメ

\　#エスケープ
+　連結
value.toString(); #数値なんかの文字列への変換
string.length; #tring.length; #文字列の長さ
string[0]; #特定の文字の切り出し
string.indexOf('find'); #文字検索 ない場合は-1
string.slice(0,3); #切り出し
string.toLowerCase();　#小文字化
string.toUpperCase(); #大文字化
string.replace('moz','van'); #置換（１回だけ） 全部適用させる場合は正規表現

・配列

let arry = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];

[]でくくると配列に。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができる。

arry[0]; #配列へのアクセス
random[2][2]; #多次元配列へのアクセス
arry.length; #配列長

#配列の簡単作成
let myData = '札幌,仙台,東京,名古屋,大阪,博多';
let myArray = myData.split(',');
let myNewString = myArray.join(','); #もとに戻す

#配列の追加
myArray.push('横浜');

#配列の削除
myArray.pop();#最後が削除

・DOM操作

・条件分岐

if (条件式1) {
 条件式1が true の場合;
} else if (条件式2) {
  条件式1が false 条件式2が true の場合;
} else {
 それ以外の場合;
}
#elseif, elseはなくてもいい

#論理演算子
&& #and
|| # or

#3項演算子 if elseを簡単化したもの
( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する

・ループ処理

#forループ
for (let i = 1 ; i < 10 ; i++) {
 処理;
 }

#whileループ
while (終了条件) {
 実行するコード;
}

do {
 実行するコード;
} while (終了条件)

#ループを抜ける
break;

#次のループに行く
continue;

参考

JavaScript - ウェブ開発を学ぶ | MDN