7/48

21日目　割烹芸人の勉強

今回は勉強回です。開発内容が自分の持っている知識だけでなんとかできるなら必要ないですが、自分の持ってない知識がある場合は習得不可避です。

割烹エディターは主にJavascriptとDjango(Python)で実装していきます。

装飾する部分はJavascript、ログイン・検索・テンプレ登録など裏側の処理はDjangoを利用します。とりあえず最低限の機能としてログインなしで装飾をできるところまではJavascriptのみでいきます。

大体基礎機能が整ったらDjangoに組み込んでログイン機能を実装していきます。

ということで今回はJavascriptについてのお勉強です。

■Javascriptとは

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

1995年に誕生してから多くのバージョンアップを経てフロントエンドには欠かせない存在となった。（少なくとも初期はお遊び程度、厄介者として扱われていた）

2015年に大きく仕様が変わり書き方が変わったり、JavascriptのフレームワークであるReact.js, Vue.jsが広まったり、Node.js、サーバーレスアプリの流行などしてその存在感を高めてきた。もうJSなしではいられないWeb開発環境になりつつある。

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

なお、もともとはLiveScriptだったが、その当時はやっていたJavaの名声にあやかろうとJavascriptと名付けられた（Javaとは全く違うもの）

■Javascriptでできること

・変数を宣言してユーザーの動きに応じて中身を変えることができる。

・ウェブページでユーザーが行った動作を検知して、それに応じたイベントを設定することができる。

・ようするにユーザーの動きに応じた画面構築ができる。

変化しないページを作るならJavascriptは不要だが、ユーザーの入力に応じた動作を反映させるためには必須。特にエディターを作るならJavascriptの知識は必要。

■基本的な使い方

・書き方1（直書き）

HTMLに直接書く

//ここにJavascriptを記述

</script>

こんな感じにscriptタグを挟み込む。

・書き方2(外付け)

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

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

※基本的に外付けで書くのがよい。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

https://developer.mozilla.org/ja/docs/Learn/JavaScript

ということで修行回でした。次から実装していきます。

プログラミングにつかれたので気分転換にゆるイラストはじめました。

（年末連載のために、お絵描きをしばらく練習します）

21日目 割烹芸人の勉強

21日目　割烹芸人の勉強