Javascriptのfunction()でちょっと実験

javascriptのfunction()とreturn値について、ちょっと実験。()をつけたりつけなかったりで、return値がどうなるのか実験しました。

そもそものなぜ実験したのか

こんなコードを発見しました。関数定義のコードの最後に();がついてますが、必要性がいまいちわかりませんでした。

var getCode = (function(){
 var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード

 return function () {
  return secureCode;
 };
})();

最後の「()」がなぜ必要なのか?と言うことで、関数の最後に()をつけるとreturn値がどう変化するのか実験しました。

実験に使ったコード

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>function test</title>
 </head>
 <body>
  <script>
  console.log("function test");
  var getCode = (function(){
   var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード
   return function () {
   return secureCode;
   };
  }); // ()無しで実験用コードを記載

  // シークレットコードを返す
  console.log("0:", getCode);
  console.log("1:", getCode());
  console.log("2:", getCode()());
  //console.log("3:", getCode()()()); error
  </script>
 </body>
 </html>

出力結果

ブラウザの開発者コンソールの出力結果です。
0:は、getcode変数の中味を出力。コメント、改行位置も含めて、変数に代入した文字列がそのまま出力されてます。
1:getcode()として出力。()をつけました。関数内(外部関数内)で定義した関数(内部関数の定義)がそのまま出力されています。ここでは外部関数のreturn値が返ってきてます。
2:getcode()()として出力。()()をつけました。期待するreturn値になってます。return値で返ってきた関数のその又return値になってます。ここでは内部関数のreturn値が返ってきています。

function test
0: ƒ (){
 var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード
 return function () {
 return secureCode;
 };
}
1: ƒ () {
 return secureCode;
 }
2: 0]Eal(eh&2

ようするに、()を書くと、returnに書かれた内容を返すと言うことです。当たり前ですね。
()をつけるとreturnに書かれた内容が返される、
()()とするとreturnに書かれた内容の(関数)のrerurn値が返されます。
ちなみに()()()とするとエラーになりました。すなわち、関数じゃないものに()をつけるとエラーになります。

 

 

『 © 』このマークどうやって出すの?

『 © 』このマークって機種依存文字のようです。キーボード打っても、字が出てこない。でもホームページの一番下に

Copyright © 2017 私の名前 All Rights Reserved.

なんて入れたいよね。と言うことで、とりあえず、どこかのサイトさんから「 © 」部分をコピーして貼り付けました。

ちなみに、HTML側の記述で「 &copy; 」と書くと、ブラウザ側で「 © 」と表示されるようになるということなので、&copy;覚えときます。

Web制作効率化

1.はじめに

とある、HomePageを最近作っているのですが、gulp使い始めました。
gulpについては以下のページがわかりやすいかな。

https://www.wan55.co.jp/column/detail/id=287

2.gulpインストール必要なファイル

以下のソフトをインストールしてください。ちなみに私の環境はwindows10とwindows7です。普段はwindows7で作業することが多いです。

インストールコマンドはnpmコマンドを使います。コマンドターミナル(DOS窓)から以下のように打ちます。以下のコマンドをターミナルに入力します。

npm install -g gulp

npm install

「※Macはroot権限での実行が必要になるのでsudo npm install -g gulp // sudo npm installと入力してください。」だそうです。

3.必要ファイルの設置

ホームページを作っているトップフォルダ(通常だとindex.htmlを置いてるフォルダ)に以下のgulp設定ファイルたちを作成します。(上記サイトから引用)

  • gulpfile.js … タスク(処理)を定義したファイル
  • package.json … タスクに必要なパッケージが記載されたファイル(npm initで作成可)
  • config.rb … compassの設定ファイル
  • .gitignore … git管理対象外ファイル(Gitを使用する場合)

を設置していきます。ちなみに私はcofig.rbと.gitgnoreは作ってません。なくてもgulp使えてます。

4.gulpの起動方法

以下のようなバッチファイルを作って、作業前にダブルクリックしてます。作業フォルダがDドライブのD:\web/Tama フォルダ配下にあるのでそこまで移動した後にgulpコマンド実行して、一旦待つ感じのスクリプトです。終了させるときは、起動時に開いだDOS窓上で、^+C(コントロールキーと”C”の同時押し)で終了させてください。

rem 作成日20170921
rem xxWebページ タスクランナー起動スクリプト
D:                <--この辺は環境に合わせて変えてね
cd \Web\Tama      <--この辺は環境に合わせて変えてね
gulp
pause

こんな感じで

CSSでグラデーションを実装

背景色をグラデーションさせたい時に使うCSSの記述例です。

body {
background: linear-gradient(#05FBFF, #1E00FF);
}

body {
background: linear-gradient(-135deg, #E4A972, #9941D8);
}

body {
background: radial-gradient(#F2B9A1, #EA6264);
}

body {
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
url(images/bg-cherrybrossam.jpg);
background-size: cover;
}

グラデーション生成サイト shade
CSS生成サイト CSS Gradient Animator

出展:クリエイターボックス