こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。

NuxtのHTML templateはpugを使わないメリットもある

タイトルの通りです。pugは誰でも綺麗にコードがかけるため素晴らしいのですが、エディターの保管が素のHTMLに比べて弱い
という傾向があります。僕のしようしているIntelliJでもその傾向があります。（ちゃんと設定すれば問題ないのかもしれませんが...）

その点HTMLの補完は正確です。この記事が参考になれば幸いです。

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

スタートアップに入り1年以上が経ちました。日々目まぐるしく環境が変化していく中でやってしまった失敗。
どんな失敗に遭遇し、どう対応したかを簡単にまとめてみました！

ぜひ、参考になれば幸いです！
(もし、需要がありそうな項目があれば深掘りして再投稿してみます)

【フロント・サーバーサイド】

ページのレスポンス速度向上

当初とにかく指摘されたのはサイトのレスポンス速度でした。
そこで、レスポンス速度向上に取り組み、
結果的にPCのトップページの評価が40点台→MAX96点にまで向上させることができました。
ちなみにモバイルは70点付近です(笑)
測定ツールはPageSpeed Insights(ページの読み込み時間の測定・改善策の提案をしてくれるサイト)です。

【PCでは96点】

行った対策は以下です。

• N+1対策
• キャッシュの導入(一旦memocacheで対応)
• 画像の最適化
  • pcとspの画像使い分け(jpmobile)
  • 画像の圧縮
• JavaScriptとCSSにasync / defer
• クエリの修正(テーブルやカラムの追加)
  • ページを開いた際に大量のデータを計算するなどの処理はレスポンスを遅くします！！

【インフラ系】

ElasticBeanstalkのインスタンスタイプはElasticBeanstalkから変更する

ElasticBeanstalkで環境を作成している場合、EC2からインスタンスタイプの変更しないようにしましょう。
依存関係などを崩してしまうため、うまく行きません。(僕はこれでサーバーを半日落しました(泣))
僕はこの時、環境の再構築をすることでサーバーの復活を果たすことができました。

Elastic Beanstalk > ダッシュボード > アクション > 環境の再構築

エラーページは設定しておく

こちらはサーバーを落としてしまった際、またはメンテナンスの際に503画面が表示されてしまうとユーザーの不信感につながりかねません。404や500はrails側で設定できますが503はサーバーが落ちてしまっているのでインフラの方で設定して置かなければなりません。

CloudFrontのCustom Error Responseを利用して、S3上にあるSorryページを表示する

スロークエリの設定

クエリの重さは、目に見えているページだけでなくサーバーにも大きな負担をかけてしまいます。
その結果、バックグラウンドでも影響が出てしまうことがあります。(メールが大量に届くor届かなくなる、またはjobなど)常にチェックできるように設定しておきましょう！

Amazon RDS for MySQLでスロークエリーログを出力させる手順

ヘルスが変化した際の通知

様々な要因がありますが、ヘルスがSevereになって気づいたら数時間サーバーが止まってしまっていた。なんてことにならないようにヘルス変化は常に通知しておきましょう。Elastic Beanstalkで環境を構築している際は

Elastic Beanstalk > 設定 >　通知 > 通知したい先のアドレス設定 > 適用

で設定できます！

【その他】

ドキュメント管理で効率的に時間を活用する

僕の独自の共有に時間がかかるランキングは

1位 開発フローの把握
2位 システムの環境構築
3位 ユーザーからのお問い合わせ対応

特に上位2つは出入りの激しい(笑)スタートアップの開発リソースを減らしてしまう深刻な問題だと思います。
一番対応の簡単な方法としてドキュメント管理に力を入れています。
もし、こんな質問がきたらこのマニュアルを渡すのようなパターンができていればいいドキュメント管理ができているなと思うようになりました。
(ドキュメントはGithubのwikiにまとめています)

Githubのタグを使い、新加入のエンジニアのキャッチアップ迅速に

ドキュメント管理関連でもう一つ。
途中から参加したエンジニアさんはシステムの把握に時間がかかると思います。
システムの把握に時間をかけすぎてしまうのはもったいないのですが、かけなさすぎると思いがけないバグを生んでしまいます。これがデータ保存系・更新系だと対応が大変です。。

そこで僕がよく使うのはGithubのアサインとタグ付けです。
心がけていることは

①自分が担当するissue・pullrequestには必ずself assignする
②ある程度シリーズ化したorしそうなissue・pullrequestにはタグづけをする

この2つを徹底すると以下のことがおきます。
→タグ一つ検索するだけで誰がどのタスクを担当し。どんなコードを書いたかがわかる
→上記がわかるとトラブルやバグ仕様の把握をしたいときに誰とコミュニケーションをとればいいかがすぐわかる

この流れが出来上がると、間に常勤のエンジニアが入ってコミュニケーションの橋渡しをせずに済み、コミュニケーションコストが大幅に下がります！

【イメージ】
rails本家のコードを使わせていただきました。本当はこんな開発者おりません。

【タグでソート】

【アサイン者でソート】

おまけ

副業案件お待ちしております。得意分野はRuby on Railsです！
職務経歴書

windowオブジェクト

これは使ったというより前よりちょっと理解した程度ですが。
全てのオブジェクトの上層に位置するもの。

locationオブジェクト

以下のように記述する事でlocationオブジェクトからパラメータを取得できます。
あまり良い実装ではないと思いますが、取得したパラメータを使って表示内容を書き換える際に利用しました。

location.search

documentオブジェクト

JSを使ってHTMLや値を取得する時にこのコードが動くか？
それをconsoleで試すと開発速度が3倍ほどになった気がします。(体感)

historyオブジェクト

これを直接使ったわけではないですが、
history.backを参考にRailsの設定を調べることができました。

最後に

他にもscreenオブジェクト、navigatorオブジェクト、self、frames[]
なんかの使ったことのないオブジェクトがあるので学んでいこうと思います。

ビューヘルパーって慣れない内は難しいよね

結構コロンがいるのかとか、どこに括弧をつけるとかなかなか分かりにくい。
簡単にJSのテストをする時に、viewファイルに以下のタグを書くこともあると思いますが、できればビューヘルパーを使いたいですよね。

sample.html.erb

<script>
</script>

実際のコード

以下のように書くと同じ事になります。

sample.html.erb

<%= javascript_tag do %>
<% end %>

ちなみにクラスはこうやって付けられます、
でも多分(class: "hoge")とかでも大丈夫だしこっちの方がスマート。
記事書いている今試せないのでちょっとあやふやです。

sample.html.erb

<%= javascript_tag(:class => :hoge) do %>
<% end %>

最後に

まあテストだけならビューヘルパー使わなくてもいいじゃないかという話かもしれませんが、
気分的に気になる人はこの書き方を使ってみては？

問題

• Scpapy は JavaScript で生成されたコンテンツにアクセスできないため、例えば、確認のために表示されるアラートウィンドウの「OK」をクリックして先に進む、などができないことがある。

根本的な解決策

• JavaScriptを制御できるSeleniumなどを併用する。
  • （参考記事）StackOverflow
    • ScrapyとSeleniumを併用するサンプルコードもある

簡単な解決策（条件付き）

• 場合によっては もっと簡単に解決できる。
• 以下のform送信ボタンのように、onclick 処理でJavaScriptのイベントが発動している場合には、scrapyの機能で回避できる。

<input type="submit" onclick="return confirm('確定していいですか？')" name="submit" value="確定" class="button">

• クラスオブジェクト scrapy.FormRequest.from_response のパラメータ dont_click を True に指定することで、送信ボタンのクリックを省略して form を送信できる。これを利用すれば、onclick によって発動するイベントを回避して form が送信される。

    def submit_form(self, response):
        yield scrapy.FormRequest.from_response(
            response,
            formcss = 'table#table1 > tr:nth-child(1) > td.value > form',
            formdata = dict( decision = '1' ),
            dont_click = True
        )

〜おしまい〜

TL;DR

• Vue-Router のBeforeRouteLeave等ナビゲーションガードが二回発火する場合がある。
• 遷移先のコンポーネントに何らかのリダイレクトがあるときに発生する。
• toを調べることで回避可能。

同じ問題を扱ったissue
=> https://github.com/vuejs/vue-router/issues/2102

本件は仕様として扱われるようなので、今後しばらく対応される見込みはなさそう。

再現環境

• Chrome バージョン: 75.0.3770.142
• Nuxt 2.6
• vue-router 3.0

リポジトリと検証動画

https://github.com/IKKO-Ohta/invoke_brl_twice

トップページ - ページ１ - ページ2という構成で、

• ページ２のバックボタンを押すと、window.confirm()を表示する。「OK」を押すとページ１に遷移する。
• ページ１では、ページ2からの遷移をキャッチするとトップページに飛ばす

想定としては、例えば商品販売サイトにおいて、ページ２が注文完了画面で、ページ１が決済確認ページ、くらいのとき。
しかしこのとき、ページ２のBeforeRouteLeave が2度発火する。window.confirm()のOKを1度押しても再度ダイアログが表示される。

どうして起こるか？

予想

2 => 1, 1 => top のような遷移をしそうな気がする。

実際

実際のページ２のbeforeRouteLeaveはこのように挙動する。

beforeRouteLeaveが 2=>1 と 2 => top の2回分呼ばれる。引数のfrom.nameとto.nameの中身を調べると確かにそうなっている。1=>top へのリダイレクトがこの2回目の遷移を誘発させる。このとき1=>topの遷移でもない！ あくまで from="2", to="top"のbeforeRouteLeaveが走る！

解決策

ページ2のbeforeRouteLeaveのtoを検査し、一回目の遷移についてガードしないようにすれば良い。

before

  beforeRouteLeave(to, from, next) {
    window.confirm("このページを離れますか？") ? next() : next(false);
  }

after

  beforeRouteLeave(to, from, next) {
    if (to.name === "first") {
      next();
      return;
    }

    window.confirm("このページを離れますか？") ? next() : next(false);
  }

なお、afterは可読性の低いコードなので（一見「戻る」のときにはガードしない、というコードに見える）公式issueなどを引用して適宜コメントに追記することを推奨する。

動機

良い紳士向けMMDが出ているかもしれない。
チェックしなくてはならない。

成果物

youtube_puppet(github)
※slackに関する処理にtoken情報が記載されていたため、そのjsファイルだけはpushしていない状態です。
上記をbat経由で呼び出しています。
トリガーとしてタスクスケジューラーを使用しています。
（将来的にはタスクスケジューラーは止めて別のにする予定です。）

最終的な成果物の出力イメージは以下画像

概要

簡単に成果物の概要を説明をします。
まず、実現したいこととしては「本日に投稿された紳士向けMMD動画を取得し、それをslack上に特定の時間に流したい」ということです。

・紳士向けMMD動画を取得する方法を考えます。
これはいわゆるスレイピング技術で解決できるでしょう。
クローラーとも呼ばれます。
以下参考
ウェブスレイピング（wiki）

紳士向けMMD動画を取得することに関しては上記で完了しました。

・slackに投稿する方法を考えます
slackに投稿することに関しては以下を参考にすると良いでしょう。
postMessage
slackAPIを使いたいが、どこでtokenを発行するのか分からない人は下記リンクを参照してください。
https://api.slack.com/apps

・特定の時間に起動させる方法を考えます
手段は色々ありますが、
最も簡単な方法だと簡易なbatを書き、それをタスクスケジューラーで呼び出すことだと思います。
以下参考
Windowsでbatファイルを自動実行したい時（タスクスケジューラの設定）

新しいのが好きな方であればfirebaseとか使っちゃえばいいと思います。
流行ってますし。

以下もうちょっと詳しく解説。

URLの取得

上記画像のように何を検索するか、対象期間はいつにするかを設定し、その際のURLを使えば望みの物が拾えると思います。
今回は「紳士向け MMD」と検索し、フィルターを使い「今日」に絞りました。

puppeteerの出番です。

puppeteerを使い、スレイピングしていきましょう。
そのためにまずF12を押してhtmlを見ていきましょう。
※各自で確認お願いします。

結果だけ言うと欲しいものとしては
document.getElementsByClassName('text-wrapper')
こんな感じで一覧が取れそうでした。
そこからさらに必要な情報を抜き取っていけば望みのものが出来そうです。
具体的にはtext-wrapper配下にある
#meta > #title-wrapper > .title-and-badge > a
のhrefがあれば十分です。
なのでpuppeteerを使ってそれを取得しましょう。

puppeteerの使い方は下記が参考になると思います。
puppeteerでの要素の取得方法

puppeteerの基礎から知りたい方は書籍を買うといいでしょう。
私は下記の書籍のみ購入し、後はネットで調べました。
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング Kindle版

一度書店で立ち読みしてから購入を検討されると良いと思います。

slackAPIを使って投稿

実際のソースを貼るとtokenとか丸見えだったんです。
tokenだけ別ファイルにするとかしてpushしようと思ったんですがめんどくさくなったので
コードを貼り付けます。

const request_promise = require("request-promise");
const SLACK_TOKEN = 'とーくん';
const CHANNEL_ID = 'ちゃんねるID';
const USER_NAME = 'ぼっとのなまえ';

exports.send_message = items => {
  const messages = items.map(item => {
    return item.href;
  });

  messages.forEach(message => {
    (async () => {
      console.log(
        await request_promise({
          uri : 'https://slack.com/api/chat.postMessage',
          method : "POST",
          headers : {
              'content-type' : 'application/x-www-form-urlencoded',
              'charset' : 'utf-8'
          },
          form : {
            token: SLACK_TOKEN,
            channel: CHANNEL_ID ,
            username: USER_NAME ,
            text: message
          },
          json : true
        })
      )
    })()
  });
}

slackのメッセージ投稿については下記が参考になると思います。
NodejsでSlackにメッセージ投稿(2019年1月版)

最終的な成果

一番上の参考画像の通り、slackにURLが投稿されて、動画の一覧が出てきました。

あとがき

今回の成果物ですが、main.jsに記載されている1か所を変えれば恐らく好きな動画をスレイピング出来る物になってると思います。
12行目のawait page.goto('');のURLの部分です。
良ければ変更して使ってください。
使ってくださいと言っている割にcloneしてその部分を変更するだけで使えるものになってないのは申し訳ないなと思います。
cloneもしたくないけど紳士向けMMD動画の新着が見たい方はtwitterでDMください。
何とかするかもしれません。

結構簡単に作れたのでpuppeteer面白いなぁという感想です。
コードは結構拾ってきた部分が多いので記述的にこれで良いのか不安な部分があったりします。
変な部分があれば良かったら指摘してください。

以上です。
最後まで読んでいただいた方ありがとうございました。

概要

こんにちは、都内でフロントエンドエンジニアをしているかめぽんです。最近、Next.jsのバージョンアップにて対応したことで一層話題になっているAMPですが、僕自身AMPのことをそこまで注目していなくてたまたま調べてみたら割とおもしろうそうだったので、インプットした内容をまとめてみました。サンプルコードなども載せていますので、AMPの基礎的な情報の参考にしていただければと思います。

本題

AMPとは、メリット

AMPとはAccelerated Mobile Pagesの略で、GoogleとTwitterが発足したモバイルページを高速に表示させるためのプロジェクト、またはAMP HTMLというフレームワークのことを指します。

AMP自体は以下の構成要素で成り立っています。

• AMP HTML
• Custom Styling(CSS)
• AMP js
• AMP Cache(CDN)

静的なHTML, CSS, jsは普通のwebと同じですがAMP HTMLはAMP独自の仕様が定められており、その仕様どおりに沿ってモバイルサイトを作成することで表示速度を高速にすることができます。
加えて、AMPで作られたサイトはクローラに取り込まれた後AMP Cacheと呼ばれるCDNに保存されます。つまり、従来のWebと異なるのは、実際にURL先にリソースを取りに行くのではなくCDN先にリソースを読みに行くため通常アクセスよりも速く表示できることが特徴です。

AMPの基本的なスタンスとしては「読み込みに時間がかかるようなことはさせない」ので高速化を進めていく代わりに、現段階でjsを非同期でしか読み込むことができないという制約があり、インタラクティブで動的なサイトまたはそのようなアプリはまだ不向きなようです。

実践

ここからは実際のソースコードでやっていきたいと思います。

How to use AMP

HTML宣言

最初にHTML宣言ですが以下のように記載します。雷マークがampを意味します。<html amp lang="ja">でも意味は同じです。

<!doctype html>
<html ⚡="" lang="ja">

ampはutf-8のみ対応そしてviewportの設定が必須なので記載します。

<link rel="canonical" href="index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

application/ld+jsonの設定

ampの設定の中でも大事なのが、LD+jsonです。こちらは、本サイトのamp構造を正しく伝えるための情報になります。Goolgeがschema.orgとLD+jsonで記述することを推奨しています。

<script type="application/ld+json">
{
  "@context": "",
  "@type": "Article",
  "headline": "Welcom to AMP SAMPLE",
  "image": [
    "sample.jpeg"
  ],
  "datePublished": "2019-07-28T08:00:00+08:00"
}
</script>

スタイルの読み込み

ampはインラインスタイルしか読めないので、cssファイルを用意するのではなくamp-boilerplateとして登録しておきます。

<style amp-boilerplate>a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>

javascriptの読み込み

ampでは、jsは非同期で読み込むことを推奨しているので、async属性をつけましょう。

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async src="./script.js"></script>

あとはいつも通りテンプレートを書けば最低限の対応は大丈夫です。LD+jsonに関してはもっと書くべきですがここでは割愛します。以下、ここまでのサンプルを貼っておきます。

<!doctype html>
<html ⚡="" lang="ja">
  <head>
    <meta charset="utf-8">
    <title>AMP SAMPLE</title>
    <link rel="canonical" href="index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Article",
      "headline": "Welcom tao AMP SAMPLE",
      "image": [
        ""
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom="">a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>
    <style>html{font-family:ヒラギノ明朝 ProN W6,HiraMinProN-W6,HG明朝E,ＭＳ Ｐ明朝,MS PMincho,MS 明朝,serif}.wrap{position:relative;width:auto;text-align:center;margin-top:80px}.title{position:relative;font-size:36px;color:#402c2c;font-family:Cambria,Georgia,serif;font-style:normal;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;font-weight:500;line-height:39.6px;letter-spacing:2px}.title::after{position:relative;content:"";display:block;bottom:0;width:50px;height:3px;top:18px;background:#402c2c;margin-left:auto;margin-right:auto}.sub-title{position:relative;font-size:32px;color:#402c2c;font-family:HG明朝E,ＭＳ Ｐ明朝,MS PMincho,MS 明朝,serif;font-style:normal;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;font-weight:500;line-height:36.6px;letter-spacing:2.5px;margin-top:80px}.flex-wrap{width:970px;height:auto;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:60px}.box{width:300px;height:300px;margin-top:40px;-o-object-fit:cover;object-fit:cover;border:none;background:0 0;overflow:hidden;background-position:50%;background-size:cover;background-repeat:no-repeat;transition:all .2s ease;background-image:url(img/sample.jpg)}.box:hover{filter:drop-shadow(3px 3px 4px #909090f0);transform:translate(-1px,-1px)}@media screen and (max-width:768px){.flex-wrap{width:100%}.box{width:33vw;height:33vw;margin:5px}}</style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <div id="app">
        <div class="wrap">
            <h1 class="title">Portfolio</h1>
            <p class="sub-title">Creative</p>
        </div>
        <div class="flex-wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
  </body>
</html>

また、今回作ったページとGithubのリンクも貼っておきます。ぜひ、参考にしていただけたらと思います。

サンプルページ
Github

最後にページが出来上がったらGoogleが提供しているツールでAMPページとして有効かどうかチェックしてくれますので、コードでも良いですしURLを貼り付けて調べることができます。

Google Search Console

まとめ

• AMPとはモバイルのページを高速に表示させる技術
• AMPに対応はAMP用のhtmlが必要
• AMPはAMP独特の制約がある

静的なデータでAMP対応のサイトができました。AMP対応により、サイトがかなり高速に表示されるのはかなりのアドバンテージになると思います。特に、メディアやCMS、ニュースサイトやECサイトなどサイトの速さが命のページにとってはかなり強みになると思います。逆に、javascriptの取り扱いに制約を感じることがあるのでWebアプリケーションとしてAMPの導入はもう少し様子見かなという印象です。Webアプリに関してだとPWAという選択肢もあるので、サービスの特徴によって活用していきたい所存ではあります。また、フロントエンド領域に置いてキャッシュの取り扱いやCDNの知識が必須になってきているので、その部分のキャッチアップもしていきたいと思いました。

参考

https://search.google.com/test/amp?hl=ja
https://amp.dev/ja/

NeovimでJSDocを使う

JSやGASでコードを書いていく時に、コメントはどのように書いているだろうか。
手軽に分かりやすく、コードを共有した人が確認しやすいものはないかと調べた結果、JSDocというものを知った。
jsdoc.vimを参考にインストールを行った。

環境

• macOS Mojave ver.10.14.5
• Neovim
• vim-plug（vimプラグインマネージャー）

インストールの仕方と使い方

~/.config/nvim/init.vim

" jsdoc
Plug 'heavenshell/vim-jsdoc'
nnoremap j :JsDoc <Enter>

上記を~/.config/nvim/init.vimに記入した。

nnoremap j :JsDoc

の部分は、マッピングをさせている。
通常は:JsDoc+<Enter>で実行されるので、これをjに置き換えた。

これでビジュアルモード時にobjectやfunction上でjを押すだけでJSDocが作成される。

以下はJSDocに関しての簡単なまとめである。詳しくは参考文献のリンクを参照にしてほしい。

コメントの構文に関して

コメントは適切であるかを確かめる必要がある。

/** 
 * JSDocコメントはスラッシュと2つのアスタリスクから始めます。 
 * インラインタグは {@code this} のように波括弧で囲みます。 
 * @desc ブロックタグは必ず行の先頭から開始します。 
 */

Google JavaScript スタイルガイド - 日本語訳より

JSDocのインデント

ブロックタグ内での改行が必要な場合はスペース４つ分のインデントが必要。

/** 
 * 長いparam/returnアノテーションの説明文の折り返し方を示します。 
 * @param {string} foo これは1行でおさめるには長すぎるパラメータの 
 *     説明文です。 
 * @return {number} この戻り値の説明文は長すぎて、とても1行の中には 
 *     入りきりません。 
 */
project.MyClass.prototype.method = function(foo) { 
  return 5; 
};

Google JavaScript スタイルガイド - 日本語訳より

ファイルへのコメント

@authorで作成者に関する情報を添付する。

/**
* @fileoverview ファイルの説明を行う。
* 依存関係についての情報
* @author aaa@bbb.com
*/

classへのコメント

/** 
 * Humanクラス 
 * @param {number} height ヒトの身長
 * @param {number} weight ヒトの体重
 * @constructor 
 */
class Human{
  constructor(height, weight){
  this.height = height;
  this.weight = weight;
  }
}

メソッド・関数へのコメント

/** 
 * 日付を処理し、休みの日かどうかでtrueかfaleを返します。 
 * @param {date} date 日付
 * @return {boolean}  
 */
function isSunday(date){
  //...
}

参考文献

Google JavaScript スタイルガイド - 日本語訳
Jsdoc cheatsheet

undifinedをStringオブジェクトの引数に入れたら文字列undifinedに変換され、意図しない処理が入ってしまってびっくりしたので、投稿。
JavaScript初心者なので、間違い指摘はコメントください。

結論としては、「undifinedかどうか判断してから文字列変換しよう」です。
　undifinedかどうか判断は、typeof a === "undefined"で比較などで対応しよう。
　(undefinedは、typeof演算子をかけると文字列"undefined"に変換されるため)

実際、どのようにundifinedが文字列に変換されるか見てみましょう。

let a;
console.log(a + ":" + typeof a); // undefined:undefined

let b = String(a);
console.log(b + ":" + typeof b); // 'undefined:string'

let c = a.toString(); // Uncaught TypeError: Cannot read property 'toString' of undefined
// console.log(c + ":" + typeof c); 

let d = a + "";
console.log(d + ":" + typeof d); // 'undefined:string'

let e = a.valueOf(); // Uncaught TypeError: Cannot read property 'valueOf' of undefined
// console.log(e + ":" + typeof e); 

toStringやvalueOfは例外が生じます。
Stringやobj+""は文字列"undefined"に変換されます。

私の場合、Stringオブジェクトで変換していたため例外が生じず、気づくのが遅れてしまいました。

ただし、Stringオブジェクトは、「toStringでプリミティブ値が返されなければvalueOfを呼び、その値を文字列に変換する」というプロセスとなっているため、文字列変換において安定して使えるようです。
toStringやvalueOf、obj+""では、必ず文字列変換されるという保証がないとのことです。
詳しくは、下記のリンク先を読もう。(現在、勉強中・・・)

obj+""≠obj.toString()≠String(obj)っていう話 - Qiita より

toStringはJavaのように文字列の連結に暗黙的に使用されるメソッドではない。
obj+""はまずobj.valueOf()を呼び、obj.toString()を呼ばないことがある（がしかし、実は一つだけ例外がある）。
String(obj)は間違いなく obj.toString() を呼ぶ。

valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵

オブジェクトを文字列に変換するならtoStringで、数値ならvalueOfという傾向がある。（valueOfの場合正確には基本型に変換すると表現するのが正しい）
toStringのみでオブジェクトを変換するときはvalueOfに一切触れずに行う。逆にvalueOfのみで変換するときは、文字列のときはtoStringを通じて変換する。ただし、toStringが使えないようならそのままvalueOfで返す。

はじめに

おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsについて見けいけたらいいなと書いています。
Vue.jsに関しては少し触ったことがある程度なので、今後の為にと勉強させていただきますので
もし間違いとかありましたらご教授、アドバイスなんかいただけたら幸いでございます。
では早速参ります。

Vue.jsとは？

公式サイト

Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。

chromeの拡張機能のvuejs-devtoolsを入れて置くと便利。

環境構築

今回はCDNを使わずvue-cliを使います。

nodeがインストールされているか確認する

$node -v
v11.2.0

もし、コマンドを叩いてもversionが表示されなかったらnode.jsをインストールしてください。
以下も確認して置いてください。

$npm -v
6.9.0

vue.jsのインストール

上記のことを確認したら、いよいよvue.jsをインストールしていきます。

$ npm install -g vue-cli

成功すれば以下を確認してください。

$vue -V
3.1.1

確認できれば次のコマンドを実行してください。

$ vue init webpack test-vue

※test-vueの部分はプロジェクト名&ディレクトリ名になります。
いろいろ聞かれますが、全部EnterでもOKです。
実行が終わったら下記を実行してください。

$ cd test-vue
$ npm run dev

localhost:8080にブラウザからアクセスしてみてください。Vueアプリケーションの土台ができており、
下記の画面が表示されるはずです。

これで環境構築は終了です。
お疲れ様でした。

基本構文

いろんなファイルが出来ててキョどりますが大丈夫です。
基本的に難しい設定をしなければ、だいたいsrcディレクトリの中のVueファイルだけをいじるだけです。

v-showディレクティブ

まず最初に要素を表示するかどうかを決める条件付きレンダリングです。

HelloWold.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
<!--////////////////追加/////////////////-->
    <h2 v-show="showText">表示項目</h2>
<!--/////////////////////////////////-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
//----------------------追加----------------------
      showText: false
//-----------------------------------------------
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

v-showディレクティブはタグの中にいれて書きます。上のコード内ではイコールでshowTextという変数をみてます。この変数の名前は任意ですが、これがfalseなら非表示、trueなら表示となります。

イベントハンドリング

ボタンをクリックしたら表示、非表示が切り替わる仕組みを作ります。
早速コードを見てみましょう。

HelloWold.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
<!--////////////////追加/////////////////-->
    <button v-on:click="toggle">toggle</button>
<!--/////////////////////////////////-->
    <h2 v-show="showText">表示項目</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      showText: false
    }
  }//追加
  ,methods: { 
    toggle: function () {
      this.showText = !this.showText
    }
  }
   //-----------------------------------------------
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

v-onディレクティブ

buttonタグにv-on:clickというものがついてます。v-onでイベント発火時の JavaScript の実行が可能になります。clickしたら呼ばれる関数名をtoggleにしてます。これはmethodsオブジェクトの中で定義されています。
v-on:は@とも書ける

methodsオブジェクト

methodsオブジェクトの中に実行したい関数をガシガシ定義していきます。これをv-on:clickで読んだり、他の関数から叩いたりします。

thisについて

data内で定義した値はthis.showTextのようにthisを使って参照していきます。

v-modelディレクティブ

v-modelはVue.jsを使ってフォームを構築する際によく使う機能です。
v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスです。
例としてフォームに入力した文字数をカウントする仕組みを作ります。

HelloWould.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
<!--////////////////追加/////////////////-->
    <input type="text" name="text" v-model="count">
    <h3>現在の文字数：{{ charaCount }}文字</h3>
<!--/////////////////////////////////-->

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      //追加
      count: ''
    }
  }
  ,//追加
  computed: {
    charaCount: function() {
        return this.count.length;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

ここで重要なのは、「computed」です。
computedという機能を使えば、dataで保持している値に変更がある度に、それを利用した値をリアルタイムに生成できます。

ついでにもう一つ。
computedに似ているのですが、「watch」という機能を紹介します。
watchは、dataで保有している値に１対１で対応して、その値が変更されたときに動作するメソッドのようなものです。
Vue公式ガイドではwatchよりもcomputedを推してます。

以上が双方向データバインディング(v-model)の基本的な使い方で、webアプリを作成するときには非常によく使う手法ですので、必ずマスターしてください。

v-forディレクティブ

v-forディレクティブを利用して、配列の要素を繰り返し表示させてみます。

HelloWold.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
<!--////////////////追加/////////////////-->
    <table>
          <thead>
              <tr>
                  <th>タイトル</th>
                  <th>著者</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="book in books" v-bind:key="book.id">
                  <td>{{ book.title }}</td>
                  <td>{{ book.author }}</td>
              </tr>
          </tbody>
      </table>
<!--/////////////////////////////////-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      //追加
      books: [
          { id: 1, title: '坊っちゃん', author: '夏目漱石' },
          { id: 2, title: '人間失格', author: '太宰治' },
          { id: 3, title: 'ノルウェイの森', author: '村上春樹' }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

booksプロパティとしての配列からbookという変数名に置き換えたオブジェクトを取得しています。v-forディレクティブは一般的に下記のような記述をします。

v-for="変数名 in 配列やオブジェクト"

また、v-forディレクティブを利用する場合、v-bindディレクティブで一意の（ユニークな）keyプロパティを設定する必要があります。
最低、今までのことが理解できればVue.jsの基本構文は大丈夫だと思います。
あとの描き方なんかは公式サイト参照でお願いします。

コンポーネント

初めて触る人に対して、一番理解に苦しむと思いますが、(作者は苦労しました。)
Vue.jsに限らず、Reactなどのjavascriptフレームワークでは必須の考え方なので理解しておきましょう。
マップアプリを作りながら解説していきます。
その前に、以下のコマンドを入力してください。

npm install --save materialize-css@1.0.0-rc.1

次に「main.js」に以下を記述し、vue-routerの設定をコメントアウトで潰してください。

js;main.js

import Vue from 'vue'
import App from './App'
//import router from './router'
<!--//////////////追加///////////////////////-->
import 'materialize-css'
import 'materialize-css/dist/css/materialize.min.css'
<!--/////////////////////////////////////-->
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //router,
  components: { App },
  template: '<App/>'
})

その次に、「index.html」に以下を記述しGoogleMapApiを読み込んでください。

これで準備が整いました。
では、「components/Map.vue」をつくります。
作れたら、App.vue（親コンポーネント）に以下のコードを記述してください。

App.vue

<template>
  <div id="app">
    <nav class="blue navbar">
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center"><i class="material-icons left" >ヘッダーだよん！！</i></a>
      </div>
    </nav>

    <!-- Mapをレンダリング -->
    <Map v-bind:center="center"></Map>
  </div>
</template>

<script>
// Mapを読込
import Map from './components/Map.vue';

export default {
  name: 'app',
  components: {
    Map
  },

  data () {
    return {
     // 地図のセンター位置(東京駅)
     //{ lat: 緯度, lng: 経度 }
     center: { lat: 35.681298, lng: 139.7640529 }
    }
  },
}
</script>

<style>

</style>

ここで重要なのは

import Map from './components/Map.vue';

と

components: {
    Map
}

です。以下で子コンポーネント(Map)を読み込んでいます。
そして<Map v-bind:center="center"></Map>でレンダリングしています。

※v-bind, :value
親 -> 子にデータを受け渡す際、親側で記述します。親からデータを渡すための窓口のイメージです。

v-bind:プロパティ名もしくは:プロパティ名という書き方をします。プロパティ名は、後述する子要素のpropsの変数名のことです。

次に「components/Map.vue」です。（子コンポネート）

Map.vue

<template>
  <div class="main-area">
    <div class="main-area-inner">
      <div id="map" ref="map"></div>
    </div>
  </div>
</template>

<script>
  export default {

    // 親のコンポーネントからpropsでdataを受け取る
    props: ['center'],

    data () {
      return {
        // Map Objectを保存する
        map: null,
        // Markerオブジェクトを配列で保存する
        markers: [],
      }
    },

    mounted () {
      // Mapの初期処理を実行する
      const map = this.$refs.map;
      this.map = new window.google.maps.Map(map, {
        center: this.center,
        zoom: 17
      });

      // マーカーを画面上に置く
      this.markers = [];
      const marker = new window.google.maps.Marker({
        position: {
          lat: this.center.lat,
          lng: this.center.lng
        },
        map: this.map,
        animation: google.maps.Animation.DROP
      });
     }

  }

</script>

<style>

</style>

ここで重要なのはprops
propsは、親 -> 子にデータを受け渡す際、子側で記述します。子がデータを受け取るための窓口のイメージです。

非同期通信と$emit

まず、今回非同期通信はaxiosを使います。

インストール

$npm install --save axios

main.jsにてaxiosを取り込みます。これですべてのコンポーネントにおいて「this.$axios」でaxiosが利用できるようになります。

main.js

import Vue from 'vue'
import App from './App'
//import router from './router'

import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css'

import axios from 'axios' //追加

Vue.config.productionTip = false

Vue.prototype.$axios = axios //追加

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //router,
  components: { App },
  template: '<App/>'
})

※任意のコンポーネントの中にてaxiosをインポートすることも可能です。その場合は「this.$axios」ではなく「axios」となります。

さて先ほど作ったマップアプリを使いながらaxios、$emitの解説をしていきましょう。
※今回、楽天トラベルAPIを使います。

前回、行ったように「components/Card.vue」を作成し、コンポーネントを読みこんでください。

vue;Card.vue

<template>
  <div class="card">
      <div class="row">
        <div class="col s3 image">
          <img v-bind:src="this.rankings.hotelImageUrl" class="responsive-img" />
        </div>
        <div class="col s9 content">
            <i class="left">ランキング：<font color="red">{{ this.rankings.rank }}</font></i>
            <i class="left">ホテル名：{{ this.rankings.hotelName }}</i>
            <i class="left">都道府県：{{ this.rankings.middleClassName }}</i>
        </div>
      </div>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        rankings: ""
      }
    },
    mounted () {
      // 楽天APIからデータを取得する
      this.searchPlans();
    },
    methods: {
      // 楽天APIに接続して、データを取得する
      searchPlans () {
        this.$axios.get(" 楽天APIからのURL ",{
        }).then((resp) => {
          this.rankings = resp.data.Rankings[0].Ranking.hotels[0].hotel

          this.$emit("ranking", resp.data.Rankings[0].Ranking);
        }).catch(err => {
          console.log(err);
        });
      }
    }
  }
</script>
　
<style scoped>

</style>

App.vue

<template>
  <Card v-on:ranking="getRanking"></Card>
</template>

<script>
data () {
    return {

      rankings: [],

    }
  },
  methods: {
    getRanking(ranking) {
      this.rankings = ranking;
    },
  }
}
</script>

<style>

</style>

ここで重要となってくるのがaxios(非同期通信)の書き方とthis.$emitの使い方です。
まずaxiosの書き方は

//GET
axios.get('URL', {
  params: {
    キー: 値
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

//※これでも可
axios.get('/URL?キー: 値')
  .then(function (response) {
console.log(response);
})
.catch(function (error) {
  console.log(error);
});

//POST
axios.post('URL', {
  キー: 値,
  キー: 値
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

です。

続いてthis.$emitの説明をします。
簡単にいうと、子 -> 親にデータを受け渡しするときに使います。
例えば、子コンポネートの変数hogeの値を親コンポーネントに渡したい時は

子コンポート

this.$emit("イベント名", hoge);

として、親コンポートで

親コンポーネント

<Template>
  <子コンポーネント v-on:イベント名:"関数"></子コンポーネント>
</Template>
<script>
data () {
  return {
    hoge: ""
  }
},
methods: {
  関数名 (hoge) {
    this.hoge = hoge;
  },

}
</script>

このように使うと子コンポーネントの値が親で使えます。

まとめ

最後にややこしいけどめっちゃ重要なことをまとめておきます。
Vueの親子コンポーネント間でデータをやりとりするときの鉄則は Events Up, Props Down　です。
すなわち、

• 親 -> 子へデータを受け渡す際にはv-bindとpropsを使う(props down)
• 子 -> 親へデータを受け渡す際には$emitとv-onを使う(events up)

最後に

長くなりましたが今回はこの辺で、最後まで読んでいただきありがとうございました。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。

次回はVue-routerの使い方についてです。
今後はVuex,Nuxt.jsについて触れていきたいと思います。

概要

amChartsのDate Based Dataを使用しグラフを作成します。
こちらのグラフは起動時に全体を表示し、”最終日からある割合”の日付をズームして表示します。（かっこいい）
Demo source

この”最終日からある割合”を”直近の1週間”に変更していきたいとおもいます。（上のDemo sourceのgifでは直近の8日にプロットされた値が表示されてますね）

作成する前提

amChartsがCDNで読み込めている　
参考文献amcharts 4 Demos を使ってグラフを作成(amChartsの導入方法が記載されています）
使用するグラフの種類：Date Based Data
使用するモデル:Railsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。において作成した体重管理アプリをモデルに作成します。コントローラーファイルなどの記述はこちらを参考にしてください。

編集するファイル

・ビューファイル

ビューファイル(Demo source)

まずは、Demo sourceがどういう構造になっているか見てみましょう。

demo.erb

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "date": "2012-07-27",
  "value": 13
}, {
  "date": "2012-07-28",
  "value": 11
}, {
  "date": "2012-07-29",
  "value": 15
}, {
//~省略~
  "date": "2013-01-30",
  "value": 81
}];

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.strokeWidth = 2;
series.minBulletDistance = 15;

// Drop-shaped tooltips
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.pointerOrientation = "vertical";
series.tooltip.label.minWidth = 40;
series.tooltip.label.minHeight = 40;
series.tooltip.label.textAlign = "middle";
series.tooltip.label.textValign = "middle";

// Make bullets grow on hover
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");

var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();

// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;

chart.events.on("ready", function () {
  dateAxis.zoom({start:0.79, end:1});
});

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

なんだか難しそうで、なにを書いているかパッとみたただけではわかりませんね。
ただ、データが記載されているところはわかるのではないでしょうか？

demo.erb

<script>
// Add data
chart.data = [{
  "date": "2012-07-27",
  "value": 13
}, {
  "date": "2012-07-28",
  "value": 11
}, {
  "date": "2012-07-29",
  "value": 15
}, {
//~省略~
  "date": "2013-01-30",
  "value": 81
}];
</script>

↑ここです。
この部分を体重管理アプリのモデルに合わせていきます。

ビューファイル(本アプリ)

まずは、コントローラーから変数をもってきて算出までします。

index.erb

<script>
//JSON形式で値を渡す
const weights = <%== JSON.dump(@weights) %>;
const dates = <%== JSON.dump(@dates) %>;
//表示期間を計算
var firstDate = new Date(dates[0])　//一番最初
var lastDate = new Date(dates.slice(-1)[0])　//一番最後
var termDate= (lastDate - firstDate)/ 1000 / 60 / 60 / 24 + 1　//表示する期間
</script>

細かいところはRailsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。を参照してください。（本記事をそのままコピペしても動きません）
さて、Demo sourceのchart.dataの値を下記のように変えてください。

index.erb

<script>
// Add data
  chart.data = [];
  for (var j =0; j< weights.length; j++){
    for (var i = 0; i < termDate; i++) {
      var newDate = new Date(firstDate)
      newDate.setDate(newDate.getDate() + i); //初日からi日分たす
      if ((new Date(dates[j])) - (newDate)==0){
        weight =weights[j]
        chart.data.push({
            date: newDate,
            weight: weight
        });
      }
    }
  }
</script>

valueはRailsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。のときと同様にweightに変更してます。weightの変更箇所はその他にもあるのですべて置換してあげてください。

初期表示(ズーム後)を直近の1週間表示にする

本記事の本題です。
まずはDemo sourceからズームっぽい記述を探してみましょう。後方から９行目付近をみてください。

demo.erb

<script>
chart.events.on("ready", function () {
  dateAxis.zoom({start:0.79, end:1});
});
</script>

{start:0.79, end:1}の数値を試しに{start:0, end:1}かえてみてください。
変えるときは、【小ネタ】amChartsのDemo sourceをVScodeなどのエディタにコピペせず、ブラウザ上でプロパティを変更し表示を確認する方法を使うと便利です。

zoomされず、全体が表示されました。
ということは、startの数値を変更すれば直近の1週間が表示できそうです。

全体の日数はtermDateという変数で取得できてるので、
1週間は全体の日数のどれくらいの割合か出してみます。
例：termDateが70日の場合
式: 7/termDate=0.1
0.1という数値をstartに入れては駄目です。なぜならstartは0に近いほど、小さい値（日付）を取得します。
なので0.1を入れると0.1≦x≦1の範囲になり（endが1の場合)、一番古い日付から1週間後から最新の日付を範囲としてしまいます。
では、どうするかというと1から引いてあげれば良いです。

｛start:1-7/termDate, end:1}としてあげます。

こうすることで0.9≦x≦1となり、直近の1週間の割合がだせます。
最後にビューファイルの全体を記載します。

index.erb

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/kelly.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
const weights = <%== JSON.dump(@weights) %>;
const dates = <%== JSON.dump(@dates) %>;

var firstDate = new Date(dates[0])
var lastDate = new Date(dates.slice(-1)[0])
var termDate= (lastDate - firstDate)/ 1000 / 60 / 60 / 24 + 1

// Add data
  chart.data = [];
  for (var j =0; j< weights.length; j++){
    for (var i = 0; i < termDate; i++) {
      var newDate = new Date(firstDate)
      newDate.setDate(newDate.getDate() + i); //初日からi日分たす
      if ((new Date(dates[j])) - (newDate)==0){
        weight =weights[j]
        chart.data.push({
            date: newDate,
            weight: weight
        });
      }
    }
  }

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "weight";
series.dataFields.dateX = "date";
series.tooltipText = "{weight}"
series.strokeWidth = 2;
series.minBulletDistance = 15;

// Drop-shaped tooltips
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.pointerOrientation = "vertical";
series.tooltip.label.minWidth = 40;
series.tooltip.label.minHeight = 40;
series.tooltip.label.textAlign = "middle";
series.tooltip.label.textValign = "middle";

// Make bullets grow on hover
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");

var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();

// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;

chart.events.on("ready", function () {
  dateAxis.zoom({start:1-7/termDate, end:1});
});

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

完成!!

Jul22~Jul28の直近の1週間が表示されてますね。

参考文献

Railsにて不連続な間隔(日付など)で投稿された値をamChartsを使って折れ線グラフを作成する。

最後に

この記事を書いた目的

・自分なりに工夫した点をアウトプットして、理解を深める。
・あわよくば有識者にフィードバックをもらいたい。
・私と同じ初学者からも奇譚のない意見をもらいたい。（自分だったらどうこうする的な）

筆者について

TECH::EXPERTにて4月27日より52期夜間・休日コースでruby/railsを学習している未経験エンジニアです。
ご不備等ありましたら、ご指摘ください。ちなみに本記事が初投稿になります。
言わずもがなかもしれませんが、趣味はボディメイク・筋トレでございます。
余談ですが、120kg⇨66kgまで減量して大会出場した経験があり
ダイエットについての質問はなんでも答えられるかと思います

ひとこと

最後までご覧いただきまして、ありがとうございました。
もし気に入っていただけたら、イイね・ストック・フォローご自由に！

概要

Cropper.jsを用いてRailsでトリミング機能付き画像アップロード機能を実装してみます。

ソースコードは以下に置いてます。
https://github.com/Tak-Iwamoto/jquery-cropper-rails

環境

Rails 5.2.2
Bootstrap 4.3.1
active storage
mini_magick 4.9.4

active storage

active_storageを利用するために以下のコマンドを実行してください。
rails active_storage:install
rails db:migrate

Cropper.jsの読み込み

https://github.com/fengyuanchen/cropperjs
上のgithubからcropper.min.jsとcropper.min.cssを取得し、Railsの中に配置しましょう。サードパーティライブラリはvendorディレクトリの中に入れることが推奨されており、vendorの中にassets/javascriptsとassets/stylesheetsディレクトリを作成し、それぞれcropper.min.jsとcropper.min.cssを配置します。
https://github.com/fengyuanchen/jquery-cropper
また、JQueryを用いるために上のgithubからjquery-cropper.min.jsを取得し、同様にRailsの中に配置します。最後にapplication.jsとapplication.scssに以下のように編集します。
application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require cropper.min.js
//= require jquery-cropper.min.js
//= require activestorage
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap-sprockets

application.scss
*= require_tree .
*= require cropper.min.css
*= require_self
*/

これでCropper.jsが使えるようになりました。

modelとcontrollerを作成

デモのためのuserモデル、コントローラーを作成します。

user.rb

class User < ApplicationRecord
  attr_accessor :x, :y, :width, :height
  has_one_attached :image
end

users_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    @user.save
    session[:crop_x] = user_params[:x]
    session[:crop_y] = user_params[:y]
    session[:crop_width] = user_params[:width]
    session[:crop_height] = user_params[:height]

    redirect_to user_path @user
  end

  def show
    @user = User.find(params[:id])
  end

  private
    def user_params
      params.require(:user).permit(:image, :x, :y, :width, :height)
    end
end

Cropper.jsでトリミングした結果のパラメータをsessionで保持し、のちに画像を表示するときに用いていますが、このやり方は筋が悪い気がしています... active_storageで加工した画像を保存する方法が分からなかったため、この方法で行っていますが、おそらく他にいい方法があると思います。

画像アップロードフォーム

トリミング画像をアップロードするためのフォームを作成します。

new.html.erb

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="preview" style='overflow:hidden'>
          <div id="beforeUpload">
            <%= icon("fas fa-4x fw","file-image")%>
          </div>
          <img src="" id="croppedImage">
      </div>
      <%= form_with model: @user, url: users_path do |f| %>
        <%= f.file_field :image%>
        <%= f.hidden_field :x, id:"dataX"%>
        <%= f.hidden_field :y, id:"dataY"%>
        <%= f.hidden_field :width, id:"dataWidth"%>
        <%= f.hidden_field :height, id:"dataHeight"%>

        <%= f.submit "button", id:"btnUpload", class: 'btn btn-success'%>
      <% end %>
      <div class="modal fade" id="cropModal" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div class="img-container">
                <img src="" id="imageModal" alt="picture">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="btn-save" data-dismiss="modal">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="preview" style='overflow:hidden'>でトリミング後の画像を表示するフィールドを作成しています。。この時、style='overflow:hidden'を指定しないと上手く表示されない場合があります。
トリミング後の画像は<img src="" id="croppedImage">で表示します。

form_with でフォームを作成し、トリミングした結果のパラメータはf.hidden_fieldでcontrollerに渡して、以下のshow.html.erbで画像を表示する際に用います。

<div class="modal fade" id="cropModal" role="dialog">以下ではトリミング操作を行うためのmodalをbootstrapによって表示させています。

トリミングした画像を表示するために以下のhtmlを作成します。
show.html.erb
<%= image_tag @user.image.variant(crop: "#{session[:crop_width]}x#{session[:crop_height]}+#{session[:crop_x]}+#{session[:crop_y]}") %>

では、トリミング処理を行うために以下のjavascriptファイルを作成します。

crop_image.js

$(function () {
  let $image = $('#imageModal'),
    $img_field = $('#user_image'),
    $croppedImage = $('#croppedImage'),
    $cropModal = $('#cropModal'),
    $beforeUpload = $('#beforeUpload'),
    $button = $('#btn-save'),
    $dataX = $('#dataX'),
    $dataY = $('#dataY'),
    $dataWidth = $('#dataWidth'),
    $dataHeight = $('#dataHeight');

  let options = {
    dragmode: 'crop',
    aspectRatio: 1/1,
    restore: false,
    guides: false,
    center: false,
    highlight: true,
    cropBoxMovable: true,
    cropBoxResizable: true,
    modal: true,
    crop: (e) => {
      $dataX.val(Math.round(e.detail.x));
      $dataY.val(Math.round(e.detail.y));
      $dataWidth.val(Math.round(e.detail.width));
      $dataHeight.val(Math.round(e.detail.height));
    }
  };

  // when file upload
  $img_field.change((e) => {
    $image.cropper('destroy').removeAttr('src');
    file = e.target.files[0];
    reader = new FileReader();
    if (file.type.indexOf('image') < 0) {
      window.alert("画像を選択してください");
      return ;
    }
    reader.onload = ((e) => {
      $image.attr('src',"");
      $image.attr('src', e.target.result);
      $cropModal.modal('show');
      $cropModal.on('shown.bs.modal', () => {
        $image.cropper(options);
      });
    });
    reader.readAsDataURL(file);
  })
  // onclick save button
  $button.click(() => {
    imgCropping();
  });

  // modalを閉じたとき、cropper要素を初期化
  $cropModal.on('hidden.bs.modal',function() {
    $image.cropper('destroy').removeAttr('src');
    let $cropperContainer = $('.cropper-container');
    $cropperContainer.remove();
  });

  function imgCropping() {
    if (!croppable) {
      alert('トリミングする画像が用意されていません')
      return false;
    }
    $beforeUpload.hide();
    let croppedData = $image.cropper('getCroppedCanvas').toDataURL();
    $croppedImage.attr('src', croppedData);
    $cropModal.modal('hide');
  }
});

$img_fieldでidがuser_imageのDOMを指定していますが、html側にはそのようなidはありません。Railsはform_withでfile_fieldを作成すると、自動的に<img id="モデル名_フィールド名">のタグが作成されるため、注意が必要です。自分もこれが原因でハマってしまいました...

optionsではどのように画像をトリミングするか設定しています。
$img_field.change以下で画像がアップロードされた時にトリミングが開始されるように記述しています。
modalが表示された際、$image.cropper(options)で先ほど設定したoptionsでcropperインスタンスを作成し、トリミングを行います。また、最初に$image.cropper('destroy')でcropperインスタンスを初期化していることに注意してください。この処理を行わないと、前にトリミングした画像が残ったままとなり画像が複数表示されたりといった不具合が起こります。

また、cropperインスタンスが作成された時点で、<div class="cropper-container cropper-bg"></div>のDOMが作成されます。modalを閉じた時点でこのDOMを削除しておかないと前回トリミングした画像が残ったままになっていることがあります。そのため$cropModal.on('hidden.bs.modal'以下で削除する操作を行っています。

以上です。

const class

エラーの出たJavaScript

const A = class {
  constructor(_a) {
    this.a = _a;
  }
}

const B = class extends A {
  constructor(_b) {
    super(_b);
  }
}

(() => {
  var b = new B("test");
  console.log(b);
})();

とあるJavaScriptを試したところ「TypeError: Class constructor cannot be invoked without 'new'」が出た。

エラーの原因は何？

普通のclass

エラーの出ないJavaScript

class A {
  constructor(_a) {
    this.a = _a;
  }
}

class B extends A {
  constructor(_b) {
    super(_b);
  }
}

(() => {
  var b = new B("test");
  console.log(b);
})();

普通によく見るclassならエラーが出ない。

判明した原因とは

原因

const B = class extends A {}()

後ろの無名関数の即時関数とくっついてnew A()し損ねたと判定された。

constの後ろに「;」をつけてやれば解決。

提案

const classを使わないようにしよう。
知らないだけかもだがあまり見ないと思う

「;」を省略しないようにしよう。
ブックマークレットが動かなくなるし今回のようなこともある。

自戒と反省を込めて

概要

amChartsでグラフを作成した際に、初期値やzoomの比率などのプロパティを変更して
自分のイメージにあうか検討した際に便利な機能を見つけたので共有します。

Open in...

の・・・・
これ！！

最後に

この記事を書いた目的

・自分なりに工夫した点をアウトプットして、理解を深める。
・あわよくば有識者にフィードバックをもらいたい。
・私と同じ初学者からも奇譚のない意見をもらいたい。（自分だったらどうこうする的な）

筆者について

TECH::EXPERTにて4月27日より52期夜間・休日コースでruby/railsを学習している未経験エンジニアです。
ご不備等ありましたら、ご指摘ください。ちなみに本記事が初投稿になります。
言わずもがなかもしれませんが、趣味はボディメイク・筋トレでございます。
余談ですが、120kg⇨66kgまで減量して大会出場した経験があり
ダイエットについての質問はなんでも答えられるかと思います

ひとこと

最後までご覧いただきまして、ありがとうございました。
もし気に入っていただけたら、イイね・ストック・フォローご自由に！

概要

TECH::EXPERTのカリキュラムでオリジナルのミニアプリを作成する機会があり、
同期で学習中の方がamChartsを使っていてかっこいいなぁ〜と思い、自分なりに調べてみました。
いくつか工夫したところがあったので共有します。
体重管理アプリのようなものを想定してます。
体重を計る日とそうでない日がマチマチにある場合のグラフを作成します。
例：
7月1日 70kg
7月2日 71kg
7月4日 73kg
7月7日 68kg
7月8日 69kg
7月9日 67kg
=>7月3日と7月６日の記録がない

作成する前提

amChartsがCDNで読み込めている　
参考文献amcharts 4 Demos を使ってグラフを作成(amChartsの導入方法が記載されています）
使用するグラフの種類：Line Chart with Scroll and Zoom

diaryモデルにweightカラムがある
diaries_controler.rbにindexアクションが用意されてある

編集するファイル

・コントローラーファイル
・ビューファイル

コントローラーファイル

diaries_controller.rb

class DiariesController < ApplicationController
  def index
    @diaries=Diary.all.order('created_at ASC')
    @weights=@diaries.map(&:weight)
    @dates=@diaries.map{|diary| diary.created_at.strftime('%Y/%m/%d') }
  end
end

今回は、weigthカラムの値ビューファイルに渡します。
配列で渡したいので上記のようにmapメソッドを使いました。
eachでは下記のように記載します。

diaries_controller.rb

##eachの場合
@weights=[]
@diaries.each do |diary|
 @weigth << diary.weight
end

"&:"の記法は処理が1つの場合しか使えないので、@datesはデフォルトの記法です。

ビューファイル

index.erb

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/kelly.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

//JSON形式で値を渡す
const weights = <%== JSON.dump(@weights) %>;
const dates = <%== JSON.dump(@dates) %>;
//表示期間を計算
var firstDate = new Date(dates[0])
var lastDate = new Date(dates.slice(-1)[0])
var termDate= (lastDate - firstDate)/ 1000 / 60 / 60 / 24 + 1

// Add data
chart.data = generateChartData();

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "weight";
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.minBulletDistance = 10;
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.fillOpacity = 0.5;
series.tooltip.label.padding(12,12,12,12)

// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);

// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

//不連続な間隔(日付)で投稿された値を表示する
function generateChartData() {
  var chartData = [];
  for (var j =0; j< weights.length; j++){
    for (var i = 0; i < termDate; i++) {
      var newDate = new Date(firstDate)
      newDate.setDate(newDate.getDate() + i); //初日からi日分たす
      if ((new Date(dates[j])) - (newDate)==0){
        weight =weights[j]
        chartData.push({
            date: newDate,
            weight: weight
        });
      }
    }
  }
  return chartData;
}

}); // end am4core.ready()
</script>
<div id="chartdiv"></div>

基本はDemo sourceをコピペしてください。

styleがビューファイルにありますが、本記事の趣旨とズレるのでそのままビューファイルに記載してます。
また、Demo sourceの"visits"は"weight"としてます。（単数形です..Demo sourceはなぜ複数形にしてるんだろう...?)
下記コピペ部分とは違うところの説明です。

1.コントローラーの変数をJavascriptで使えるようにする

index.erb

<script>
//JSON形式で値を渡す
const weights = <%== JSON.dump(@weights) %>;
const dates = <%== JSON.dump(@dates) %>;
</script>

JSONでコントローラーの値をわたします。
こちらはrailsのcontrollerからjavascriptに対して変数を渡すを参考にさせていただきました。

２.表示する期間を算出する

index.erb

<script>
//表示期間を計算
var firstDate = new Date(dates[0])　//一番最初
var lastDate = new Date(dates.slice(-1)[0])　//一番最後
var termDate= (lastDate - firstDate)/ 1000 / 60 / 60 / 24 + 1　//表示する期間
</script>

コントローラー側で配列にしたとき、

diaries_controller.rb

@diaries=Diary.all.order('created_at ASC')

としてるので、昇順（日付が古い順)になってます。なので、容易に一番最初を最後を取得できますね。
termDateは期間を計算しました。日付の場合そのまま引き算をできないので、/ 1000 / 60 / 60 / 24としてます。
+1は、たとえば　3日から5日までの期間を出すために"5-3=2"では1日たりないので+1としてます。

3.不連続な間隔(日付)で投稿された値を表示する
Demo sourceだと下記のように表現されているところです。

Demo.erb

<script>
function generateChartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 1000);
    var visits = 1200;
    for (var i = 0; i < 500; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
    return chartData;
}
</script>

簡易的に説明するならば、初期値1200であとは、ランダムで数値をあれやこれやとかえて、
i=1から500まで表現してます。
これはこれで学習するところがあっておもしろかったです。
本記事ではコントローラーから取得した値を下記のようにしてます。

index.erb

<script>
//不連続な間隔(日付)で投稿された値を表示する
function generateChartData() {
  var chartData = [];
  for (var j =0; j< weights.length; j++){
    for (var i = 0; i < termDate; i++) {
      var newDate = new Date(firstDate)
      newDate.setDate(newDate.getDate() + i); //初日からi日分たす
      if ((new Date(dates[j])) - (newDate)==0){
        weight =weights[j]
        chartData.push({
            date: newDate,
            weight: weight
        });
      }
    }
  }
  return chartData;
}
</script>

[1]変数をinteger型の変数を２つ用意してます（i,j)
[2]jはweights.lengthの数まで繰り返します。つまり体重のレコードの数までですね。
[3]iをｊにネストしてます。こちらはtermDateの数だけ繰り返します。つまり、”２.表示する期間を算出する”で計算してあげた期間分繰り返します。
[4]表示するのは、あくまで、体重のレコードが存在する日付のみなので、jの日付（体重記録がある日付）とiの日付(newDate)の差が0のときのみ、日付と体重をハッシュの形にし、chartDataに入れてあげます。

完成!!

gifでは"Jul 11"と"Jul 12"に記録がありません。

参考文献

amcharts 4 Demos を使ってグラフを作成
railsのcontrollerからjavascriptに対して変数を渡す

最後に

この記事を書いた目的

・自分なりに工夫した点をアウトプットして、理解を深める。
・あわよくば有識者にフィードバックをもらいたい。
・私と同じ初学者からも奇譚のない意見をもらいたい。（自分だったらどうこうする的な）

筆者について

TECH::EXPERTにて4月27日より52期夜間・休日コースでruby/railsを学習している未経験エンジニアです。
ご不備等ありましたら、ご指摘ください。ちなみに本記事が初投稿になります。
言わずもがなかもしれませんが、趣味はボディメイク・筋トレでございます。
余談ですが、120kg⇨66kgまで減量して大会出場した経験があり
ダイエットについての質問はなんでも答えられるかと思います

ひとこと

最後までご覧いただきまして、ありがとうございました。
もし気に入っていただけたら、イイね・ストック・フォローご自由に！

JSの配列やobjectは参照渡し。
stirngやintegerは値渡し。

PHPは通常、値渡し。
&をつけて&$hogeとすると参照渡し。

JSが参照渡しになることを知らなくて、なんでだー、Vueのせいかとかいろいろやった挙げ句、バグの原因がこれだったので、あーとなった。

参考
JavaScript の配列やオブジェクトは参照渡しになる…バグを生む落とし穴
http://neos21.hatenablog.com/entry/2018/05/20/080000

JSで文字列（数値、アルファベット混在を）並び替える方法のメモです。

配列ならソートは簡単にできそうですが、文字列だと一発でできなくて、こうやるとできます。
もっとスマートな方法がありそうですが、見つかりませんでした。

let string = "1ab234";

string.split('').sort(function (a, b) {
    if (a > b) {
        return 1;
    }

    if (a < b) {
        return -1;
    }

    return 0;
}).join(',').replace(/,/g, '');

console.log(string) => "1234ab"

参考サイト
goma
JS：配列の正しいソート方法

v-forで回している選択肢に、動的に色をつけたいときに簡単に書く。

v-for="(hoge, key) in hoges"
:class="{'hoge-color': key === current_key}"

<script>

    data() {
        return {
            current_key: 0, // 初期表示のとき
        }
    }

'hoge-color': key === current_keyここのロジックをメソッド化してもいいけど、めんどいのでこう書いた。

Vueで次のエラーを解消するための一つの方法。
ノートのメモなので動かしてないので、違ってたらすみません。

Vueで複数選択可のチェックボックスを実装するときのエラーです。

結論を言うと、dataにあらかじめ定義してないよというエラーみたい。
dataにあらかじめ定義してなくてもよい場合と、定義してないといけない場合があるみたい。

can not set reatcive property on undefined, null, or primitive.value

<label
    v-for="(hoge, key) in hoges"
    :key = "key"
    :for = "key"
>
<input
    type="checkbox"
    v-model="hoges.hoge_id"
    :value="hoge.id"
    id="index"
>
{{ hoge.names }}

<script>

data: ~ 中略
// 定義しておく
    hoges: {
        hoge_id: []
    }

筆者が昨日2019/7/21(日)～7/27(土)に気になったQiitaの記事のまとめのまとめを作成しました。日々のまとめ記事のWeekly版です。

皆様が興味のある言語や思いもよらぬハック方法をこの中から見つけられたら幸いです。

Java

• Tips
  • Javaでデータベースの検索結果をグルーピングしながらZipファイルを作成するには
  • 令和時代にJava言語の採用を考える〜無難なSDKの選び方
  • Spring + Hibernate + MySQL なアプリをレプリケーション対応させた話
  • 【Java】Spring BootアプリケーションをAzure App Serviceにデプロイする
  • JFreeChart-バブルチャート-UIで特定データを強調する
  • JFreeChart-複数値チャート-UIで特定データを強調する
  • RestTemplate による HTTP 通信の際に発生する様々なエラー (例外) を処理する
• Spring
  • Java、SpringのRESTControllerで画像を表示したい！
• Spring Boot
  • Spring boot開発～開発環境編～
  • Swagger.yamlからSpring-bootのコード生成したら15分でAPIできた
  • @SpringBootTestでCommandLineRunnerが走らないようにする
• Performance
  • Javaパフォーマンス 3章 Javaパフォーマンスのツールボックス
  • Javaパフォーマンス 4章 JIT コンパイラのしくみ
  • Javaパフォーマンス 5章 ガベージコレクションの基礎
• データ分析
  • 【クラスタリング入門第1回】データ分類の基本 k平均法をJavaで実装してみよう～座標の概念について～

Python

• Beginner
  • Python3の標準入力について
  • Python3標準入力まとめ
  • (Python3)個人的にまとめておきたかったリスト関連の小技
  • Pythonの入門のための本のおすすめ5選と無料で学べるサイトをまとめてみた
• Tips
  • おじさん、Pythonでスクリプトを作成したい
  • Pythonに組み込み関数「メガンテ」を追加する
  • anaconda環境を壊さないようにpipを使う
  • CSV形式をJSON形式に変換するPythonプログラム
  • QRコード作成 pythonライブラリ python-qrcode を読む
  • .NET (on Windows)からpythonを呼び出す
  • Pythonの各種ライブラリ一覧
  • python-cgiで超シンプルな画面遷移を書く
  • Pythonでyaml形式の設定ファイルを読み込んでloggingを使ってみた
  • 言語処理100本ノックをNLP屋がやってみる: 第5章 40～45
  • Pythonで媒介変数表示された平面曲線の曲率を求める
  • python3で切り下げ，切り上げ，四捨五入，だけのためにライブラリをimportしたくない
  • 48日目。pandasで10万×１万のCSVをマージしたら簡単・早くて驚きました！
  • python で近似球を作ってみる
  • tensorflowで画像処理
  • Pythonで表示したウィンドウにﾃｷｽﾄ、ｲﾝﾌﾟｯﾄﾎﾞｯｸｽ、ﾎﾞﾀﾝを挿入する
  • PythonでAWS S3のフォルダ配下の最新ファイルを取得 & 履歴管理する方法
  • pipelineとgridsearchcvを使って前処理から予測値出力の流れをシンプルに実装
  • 画像認識で自作データのサイズ加工
  • [n番煎じ] 言語処理100本ノック 2015 第3章 with Python
  • Python 3のmultiprocessingでプロセス間で大量のデータを受け渡しつつnumpyで処理する
  • 言語処理100本ノック第2章を解いてみた
  • python ビッグデータを取り扱ったときのメモ
  • from csv to json with Python
  • Evernoteのサードパーティ用アクセストークンをOAuth認証で取得する
  • pythonを使ったデータ探索と回帰【kaggle, EDA,randomforest】
  • Qiitaコーパスを作る会 2️⃣前処理をする
  • LINEbotのログインURLを出してみる
• OpenCV
  • OpenCV＋Kerasで手書き数字認識を試してみる その5 手書き数字認識
• ルールベース
  • Pythonで動作するルールベースエンジンについて調べた
• Django
  • 【備忘録】Djangoのインストール及び起動方法
• Tools
  • Yahoo!ショッピングでお目当の商品があったら通知するPythonコード
  • twitterアカウント乗っ取りツールをpythonで作りました
  • (Twitter)Pythonでリプライにいいねして返信するbotを作る（怪しい日本語ジェネレーターbot）
• Apps
  • Pythonとfoliumと作物統計データを使って北海道の市町村別に大根の生産量マップを作成する
  • Pythonしか書きたくない人が、AWS上にWEBアプリを作ってみました。
  • 素人でも短時間で作れるWebアプリ入門[画像内英文を和訳するWebアプリ]
  • PythonフレームワークDjango + Wagtail でCMSを構築する
  • アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件について（DB内に登録されている名言の一覧表示）
  • 【Python】超初心者でもできた Instabot のつくりかた【自動いいね】

Ruby

• Tips
  • RubyでAPIを簡単に取得する(クライアント側)
  • SassとCompassをVM環境(CentOS7)に入れてみた
• RSpec
  • RSpecとりあえずこれを覚えておけば書ける！！
• Tools
  • Githubでファイルを開く、該当行のPullRequestを開くRubyスクリプトを作った

Rails

• Beginner
  • RailsチュートリアルのためにDockerの環境構築 for Mac…「Yay, you’re on Rails!」の画面が表示されるまで
  • 【初学者向け】Railsアプリケーションにカスタムフォントを追加する方法
  • ＜Windows＞Ruby on Rails チュートリアルでのつまづきポイントまとめ
  • Railsを支えるRESTについて
  • WindowsでRuby on Railsの環境構築してみる
  • Rails + Selenium + DockerでSystemSpecの環境構築
  • Windows10環境にRubyとRailsをインストールしてみた
  • Ruby on Rails開発環境を便利にしよう
  • 【初心者向け】bundler、Gemfile、Gemfile.lockの関係性について図でまとめてみた
• Tips
  • Ruby on Rails でレビュー機能を実装する
  • Rails環境にUikitのデザインを適用する方法
  • 初心者でもできる！Cloud RunでRailsアプリをデプロイ【Rails/GCP】
  • Rails6 のちょい足しな新機能を試す57（Arel is_distinct_from編）
  • Rails6 のちょい足しな新機能を試す58（ActiveRecord::Errors#of_kind?編）
  • 既存のRuby on RailsプロジェクトにJenkins と Docker で CIを導入する
  • Railsで複数DB接続する
  • 【Rails 部分テンプレート(render partial)を用いたviewを別コントローラから呼び出す(render template)】
  • Railsの日本語化、ヘルパーメソッドで呼べるようにする。
  • 本番環境に合わせたアセットパイプライン
  • Railsでダミーのユーザーデータをたくさん用意する方法
• RSpec
  • rails rspec 非同期通信のためのテストコード[備忘録]
• Apps
  • アイデア共有サービスを作った話

C

Android

• Tips
  • Androidプロジェクトに関数型プログラミングライブラリのArrowを組み込んでみる（Optionクラス編）
  • PWAのSprach Screen対応メモ
  • Android端末の信号強度を監視してみた
  • ADBの個人的なまとめ
  • AndroidでテンキーのようなViewを作る
  • Espresso Test Recorderの導入
• DataBinding
  • 独自Viewに双方向DataBinding
  • DataBindingを使ってみる
• Camera API
  • Android の Camera2 API を使って マニュアルモードで撮影する

Swift

• Tips
  • iOSアプリでSwifterを使ってTwitterログインする
  • チュートリアルから一歩踏み出したSwiftUIのCustom Viewの作り方ーその2（PreferenceKey編）
  • [swift] DateFormatterのインスタンス生成は遅い
  • SwiftUIでViewのレイアウトを調整するStackについて調べて見ました
  • Status Bar優良記事まとめ[Swift]
  • iOSにデータベースを組み込んでみる。最新GRDBの使い方を解説
  • 【Swift】AutoLayoutのPriorityを使ってアニメーション風のView制御をする
  • Asset Catalogを使って色の管理　Swift
  • 【iOS】iOS開発初心者の個人的に参考になったswift記事まとめ
  • ブラウザで名前が定義されている140色をSwiftで定義する

Kotlin

• Tips
  • kotlin × Spring Bootでapplication.ymlから設定値を取得する
  • Androidアプリ(Kotlin)で、FirebaseAuthenticationを利用したログイン方法
  • KotlinとAndroidStudioで遊んでみる

Flutter

• Tips
  • 【Flutter】Expanded vs Flexible

Fulx

• Beginner
  • MVVM・MVP・Fluxの基礎知識

JavaScript

• Tips
  • Webviewでブラウジングっぽいことを実現する
  • JavaScriptで全角文字を半角文字に変換
  • lightgallery.js : 軽量、マルチデバイス対応、高機能画像ギャラリー 作成【導入編】
  • 【JavaScript修行】初めてのライブラリ:Moment.jsを使う環境を整えたい
  • 【JavaScript】初めてのAnimationライブラリ導入(TweenMax)
  • JavaScriptでBase64エンコード・デコード（UTF-8も）
  • [JavaScript] plotly.jsで時刻を表示する線の出し方を考えてみた件
• ESLint
  • ESLint v6.1.0
• Turn.js
  • Turn.jsを用いて雑誌や本のようなページを作成してみよう！
• Quark
  • Quarkを使ったデスクトップアプリでHello World

React

• Beginner
  • Reactのべからず集
  • 【初心者】React&Redux入門を理解するための超入門/環境構築編
• Tips
  • React Transition Group でCSSアニメーション
  • Reactアプリから Django Rest API を叩いてみる
  • Redux Starter KitでHooksとReduxを使いこなそう
• Apps
  • Reactとタブレットでバーコード使ったシェアハウス物々交換システム作った話【個人開発】

Node.js

• Tips
  • EC2のNodeサーバーと連携するReactクライアントをS3にデプロイ
  • Node.jsでLINE BOTの画像送信を試す
  • Discord.js でボットを作る ～下準備編～
  • node.jsで簡易データベースとしてExcelファイルを使う
  • Node.jsでprivateメソッドをテスト方法を検討
  • Firebase Cloud Functionsを使ってGmail送信機能を作る
  • 私のnode開発スタイル
• Tools
  • GrafanaでQiitaのView数を眺める
  • LaravelでSQSからメッセージをデキューしたいだけの場合のプラクティス

Vue.js

• Beginner
  • VueでSPAの基礎を作ってみた
  • Vue.jsで外部APIを叩く[初心者のVue.js]
  • vue.jsを初めて触ってみたので、環境構築の整理
  • [Vue.js] SFCs(Single File Componets)事始め
• Tips
  • SentryとVueの組み合わせでイベントログを収集
  • VueやNuxtでcodemirrorを使うときにはvue-codemirrorが便利
  • Vuex-ORMとvuex-persistedstateの連携で半永続的データベースに！
  • Vue.js + Vue.Draggable + CypressでDrag & Dropするテストを書く
  • Vue.jsで作ったアプリをHerokuにデプロイ
  • Vue.jsでカレンダーコンポーネント作ってみた
  • Vue.js＋Firebaseプロジェクト作成(Hosting、Authentication、Firestore、Storage、Functions)
  • Vue + Quasarで環境を設定する
• Apps
  • vue-cli + vuetify + vue-routerで映画お気に入りサイトの作成[画面作成編]

Vuex

Nuxt.js

• Beginner
  • Nuxtの環境準備
  • Nuxt.js+TypeScript+Vutify(2.0)+Jestの環境設定
• Tips
  • Nuxt.jsで同じ見た目だけど見出し要素のレベルだけ変えたいときのコンポーネント
  • Vuetify 2.0の注目機能とNuxt.jsでの試し方
  • Vagrant + VirtualBox + CentOS 7 に Nuxt.js を入れてみる
• Apps
  • Nuxt.jsでブログをつくって静的サイトでNetlifyに公開しよう(Githubのテンプレートあり)

Nest.js

Angular

• Beginner
  • Angular基礎
• Tips
  • Angular＋Nest.jsのモノリスプロジェクトを、Lernaを使いプロジェクト内でクライアント／サーバーのコード分割をしてみる

jQuery

• Beginner
  • jQuery書く前の下準備

TypeScript

• Beginner
  • TypeScript × Clova開発ハンズオン！Clova Meetup vol3でやったことのメモ！
  • TypeScriptを気軽かつ簡単にお試しできる環境を整える
  • Firebase Hosting+React+TypeScriptの開発環境を作成しよう
• Tips
  • Electron + React + TypeScript で簡易 Hot Reloading する
  • Typescriptでブラウザ用ライブラリを作成する時に困ったこと
  • Vuex型推論・最終章 - vuex-guardian -
  • Laravel プロジェクトに Jestを入れて Typescript のテストを作成するデモ（カスタム日付書式変換機能の実装）
• Tools
  • SPAでQRコードを生成する。
• Apps
  • 【個人開発/OSS】カンバンアプリを作ってみた

ReactNative

Laravel

• Beginner
  • 【Mac】Laravelの環境構築手順書(メモ)](https://qiita.com/YutakaYamasaki/items/96ab3f20a71d6c825b5d)
  • Vagrant + VirtualBox でLaravel環境構築メモ
  • 【Laravel/Vue.js勉強会#10】スライドのまとめと所感
• Tips
  • 【Laravel】InnoDBで二番目以降のキーにAuto Incrementをマイグレーションで設定する
  • 手軽なLaravelテストコード (3種類のモック手法)
  • Laravelのお困りごと解決リスト
  • Laravel 5.8 認証通知メールの多言語化
  • Laravelで AWS の LB を通した環境でエンドユーザのIPを取得したい
  • IntelliJ+Laravel+Vuejs+Docker+Mysqlの環境構築
  • Laravelでいいね機能
  • LaravelのControllerで生成・加工したデータをVue.jsのテンプレートファイルで利用する方法
  • Laravelでエクセルを生成してS3に送信する方法

C

• Tips
  • DateTime項目を含むJSONシリアライズ

PHP

• Beginner
  • PHPの型一覧　変数の型とタイプヒンティングできる型は別
• Tips
  • PHPで画像添付メール送信
• Tools
  • Twitterプロフィール画像が自動更新される「うたた寝bot」をつくる
  • PHPStormのメジャーアップデートPhpStorm 2019.2が来た
  • YYPHP#94「PHP勉強してて、つまづいたこと、はまったこと教えて」「自作フレームワーク開発、どこから手をつけたらいい？ 」「テスト環境と本番環境のDBの整合性、どうやって合わせている？」「仮想DOM系のフレームワークを触っている人がいたら話きたい」「組み込み系とウェブ系の開発スタイルの違いを聞きたい」

CakePHP

• Tips
  • CakePHP3フレームワークを使用し、REST APIを作成する
  • CakePHPでファイルをDBに保存する

Rust

• Beginner
  • Rust入門ガイド (sapporo.rs)

Go言語

• Beginner
  • GO言語　めちゃくちゃ初歩的なところで躓いた点をまとめてみる。
  • 最新のGoのインストール
  • Goの開発環境構築
  • 3分で準備するGo言語 ローカル環境
• Tips
  • goのhot reloadingにはreflexが便利だった
  • Firebase StorageをGolangから利用する
  • Go言語でエクセルデータから情報を読み取る
  • 【#Go言語】管理者権限を持たないWindows環境に「Go」と「Visual Studio Code(vscode)」をインストールする
  • podman + grpc + unity, ちょっとgolangでメッセージpublishもどき
  • Visual Studio Code Remote を使って快適にGoの環境構築

R言語

• Tips
  • Rで周波数スペクトルの統計量を算出する
  • R ユーザーへの pandas 実践ガイド
  • 【R言語】もうggplot2の操作も怖くない!esquisseパッケージの効力が絶大だった件

Scala

• Beginner
  • Scala入門備忘録_matchやforなどの汎用構文を避けた方が良いという話
  • Scalaプログラマが圏論を学ぶためのオススメ文献 - 3選

Unity

• Tips
  • コルーチンを全てUniTaskに置き換える
  • 【Unity】Observerパターンでクラス間の通知の仕組みを構築する
  • Lerpで作るアニメーション(easing)を解析する
  • 【Unity】範囲外のオブジェクトを端っこで表示させ続けるミニマップ
  • UnityでAndroid App Bundle(AAB)対応してリリースするまでの道のり
  • Unityで3Dモデルを駆け回る。(インポートされた3Dモデルへの当たり判定付与、一人称視点、視点移動、向いてる方向に進む)
  • AndroidStudioを用いないUnityでのAndroidX対応
  • UnityのAndroid実機ビルドでつまづいた話
• Unity ECS
  • 【Unity】ECSを始めるには

A-Frame

• Beginner
  • HTML13行あればWebVRアプリが作れる！　A-Frame連載(1)

PowerApp

• Tips
  • #PowerApps のJSON関数を使ったFlowへのパラメータ渡し

Line

HTML

• Tips
  • 【Web開発】ブラウザさえあれば使える無料オンラインエディター紹介・比較 2019

CSS

• Bulma
  • CSSフレームワーク「Bulma」の Tips集

Sass

• Tips
  • Sass を Nuxt.js で使ってみよう（2019.07版）

SQL

MySQL

• Beginner
  • 【MySQL】 インデックスを使って初心者を卒業したい
  • MySQL 8.xをインストールしてmysql2のgemをインストールするまで
  • Laravel Docker設定後の環境構築・MySQL Workbench使用でコマンドに慣れる
• Tips
  • MySQL 8.0.17のClone Pluginを試す
  • MySQLでBulk Update（一括更新）する方法
  • MySQL Workbench8.0で既存のDBからER図する作成方法(2019/07)

PostgreSQL

• Beginner
  • Amazon Linux 2 にPostgreSQL 11 をインストールする

Oracle

• Beginner
  • Oracle Database 11g XE インストール (今更ながら)
• Tips
  • Oracle Database:リモート・クローンで文字コード異なるPDBを混在させてみてみた

MongoDB

SQL Server

• Tips
  • SQLServerのデータをCSVに出力するバッチファイルを作ろう
  • SQLCMDコマンドの実行結果をログファイルに出力しよう

ビッグデータ

Visual Studio Code

• Beginner
  • Visual Studio 設定メモ
  • Visual Studio CodeをWindowsにインストールしたら、最低限やっておきたい設定8個
  • VSCodeを入れたら最初にすること
  • 駆け出しフロントエンドエンジニアがVisual Studio Codeにインストールすべき拡張機能
• Tips
  • Visual Studio Codeに超絶便利な Remote Development を入れる

IntelliJ IDEA

• Tips
  • IntelliJ IDEA 2019.2の新機能プロファイラーを試してみた

AI

• Tips
  • 音声認識AIに言葉を覚えさせよう!!　(COTOHA音声認識)
  • COTOHA音声認識を中の人が仕組みからサンプルまで軽く解説

IoC

• Tips
  • 【#DevOps】Google社が開発した Terraformer というツールを使って既存のAWS環境の「Infrastructure as Code(IaC)」化を行う

Git

• Tips
  • GitHubのリポジトリをGoogle Driveにcloneする方法メモ
  • Git 2つのリモートリポジトリを同期する
  • git log をよしなに整形してコミットツリーを可視化する
  • GitLab Pagesで独自ドメインのSSLサイトを公開する（Let's Encrypt + 証明書自動更新）
  • GitHub Pagesでブログを作る

AWS

• Beginner
  • JavascriptのFetch APIを使ってJSONを取得する。
  • ゼロから始める！AWSアカウント作成からTerraformでEC2インスタンスを立てるまでハンズオン
• Tips
  • RDSメンテナンス情報をSlackへ通知する
  • AWS認証を社内のActive Direcoryと連携
• EC2
  • AWSのEC2インスタンス内(本番環境)の整え方(自動デプロイ後の方法)
  • [AWS] InstanceConnect と SessionManager の比較
  • awsのEC2でWebサーバーを作成しBasic認証を設定する際の注意
  • EC2をタグに基づいて、特定の時間に自動で起動/停止する
  • Amazon EC2 のスポットインスタンスを AWS Cloud9 から使用する
  • 手動で立ち上げる EC2 に ECS をつなぐ方法
  • AWS EC2インスタンスへのSSH接続の仕方
• AWS Lambda
  • URL短縮サービスを API Gateway + Lambda で
  • AWS Lambda と APIgateway でサーバーレスなフォームアクションを作成
  • AWS SAM (Ruby) でLambda関数を非同期に呼び出す方法
  • 【AWS】Lambda×CloudWatch EventsでRDSの自動停止
  • AWS LambdaでEC2の起動停止を実行する
• AWS Athena
  • AWS Athenaを使ってCloudTrailのログを自分で設定した項目について解析したメモ
• AWS CDK
  • AWS CDKなら、たった1行で高可用なVPCを構築できる
• Aurora
  • [AWS]Aurora Serverless for PostgreSQLが休止状態から起動するまでの時間を調べた
• Network
  • AWS ネットワーク構築
• ABAP
  • 【失敗談】AWSでABAP環境を構築する〜詳細手順編
  • 【失敗談】AWSでABAP環境を構築する〜やりたかった事編
• AWS Systems Manager
  • [AWS] SessonManagerでSSH可能に。だったらSSHだけに制限したい。
  • AWSパラメータストアでSSH鍵管理
• AWS Application Discovery Service
  • 【初心者】AWS Application Discovery Service を使ってみる
• Amazon Managed Blockchain
  • Amazon Managed BlockchainでHyperledger Fabricのブロックチェーンネットワークをさくっと構築するAWS CloudFormationのテンプレートを作ってみた(解説編)
  • AWS Managed Blockchainの歩き方 #2 環境構築〜Peerの冗長化編
• AWS SageMaker
  • AWS　SageMakerとGCP。機械学習のマネージメントサービス比較
• AmazonLinux2
  • AmazonLinux2 + ALB + nginx + keycloak で環境構築する
• AWS Chatbot
  • AWS Chatbotで簡単にSlack通知!!&通知例いろいろ
  • AWS Chatbot(beta版)を使ってみた
• AWS CodeStar
  • Introduction to AWS CodeStar 和訳してみた
• AWS IoT
  • AWS IoTボタンを買ってslackにポストしてみた

Azure

• Tips
  • Azureに仮想マシンを構築してSSHやリモートデスクトップで操作できるようにする
  • Azure で HA な NFS サーバーをサクッと構築する
  • [Azure][PowerShell] サブネットに紐付いている IP アドレスを取得する
  • Azure Pipelinesの「Pipeline caching (preview)」をMavenで試す
  • G Suite と Azure AD を統合して、 G Suite にシングル サインオン (SSO) する環境を一から構成する
• アーキテクチャ
  • Azureアーキテクチャガイドまとめ ~はじめに~
  • Azureアーキテクチャガイドまとめ ~N層~
• Azure AD B2C
  • 基礎から分かる Azure AD B2C
• Azure DevOps
  • Azure DevOps Pipelines(パイプライン)の超概要
• Azure Heat Map
  • Azure Heat Map の使い方

Oracle Cloud

• Beginner
  • Oracle Functionsセットアップ
• Tips
  • [Oracle Cloud] Apache Tomcat から ATP に接続する on CentOS

IBM Clod

• Tips
  • IBM Cloud Kubernetes Serviceでプライベート・ネットワークにアプリを公開する
  • IBM Cloud の 仮想サーバーに 追加ストレージ（ポータルブル・ストレージ）をマウントする
• AutoAI
  • AutoAIでお手軽機械学習(その1) 準備編

Active Directory

インフラ

• 監視
  • 入門 監視 を読んで、改めて"監視"について考えて図解してみた

ブロックチェーン

• Apps
  • 【初心者向け】BlockchainをGolangで実装する

Ethereum

• OpenZeppelin
  • OpenZeppelin SDK (旧ZeppelinOS) を使って、コードを1行も書かずに3分でERC721を発行する
• ERC-721
  • ERC-721におけるsetApprovalForAllを理解する

セキュリティ

• SSL
  • SSL証明書ができるまで

機械学習

• Beginner
  • 正準相関分析（Canonical Correlation Analysis: CCA）
• Tips
  • BigQuery + jupyterで機械学習を行う(その1: データセットの作成)
  • BigQuery + jupyterで機械学習を行う(その2: 前処理、EDA、特徴量生成)
  • ABEJA Platformで新しいローカル学習(train-local)を試してみる
  • 機械学習におけるSelective Labelsの対策論文を読んでサンプルデータで検証してみました
  • ランキング学習： RankNetからLambdaRank、そしてLambdaMARTへ

Network

RPA

CI

Docker

• Beginner
  • Docker runでportオプション（-p 8080:8080）や-dオプションする意味〜初心者向けにコマンドの解説〜
  • 初めてのDocker for Mac
  • [Docker]ローカル開発用Postgres
  • 苦手なDockerを使ってLaravel開発環境構築を構築（MailHog使いたい）
• Tips
  • Chromebook(ARM64)にLinux + Docker + PHPStormな開発環境を構築する
  • JavaFXをDockerで実行するには
  • AmazonLinux2のdockerイメージにpythonをインストールしてAWS ECRにアップする方法
  • SwaggerをDockerで動かしてみる(環境構築)
  • Dockerを使ってGAEにNuxt.jsをデプロイしたい
  • Dockerコンテナ初回起動時にLaravelの環境をセットアップする方法を求めて
  • Dockerで使っているコンテナを作り直す方法
  • GHDLとVunitでVHDLのテスト環境を構築する[Docker版]
  • docker expose プラグイン便利そうなので試す

Heroku

• Tips
  • 【Heroku】カスタムドメインを設定する

VirtualBox

• Beginner
  • 今更だがAmazonLinux2のboxをVirtualBoxで自作してみた (Windows10)

kubernetes

• Beginner
  • 【k8s】Kubernetesやってみた【minikube】
• Tips
  • Kubernetes - Ingressを使ってサービスを公開する

OpenID

• Tips
  • OpenID ConnectのJWTとJWKを手軽につくりたい

OAuth2.0

• Tips
  • Owinを使ったOAuth2.0お勉強メモ#4 - 認可コードフロー

Elasticsearch

• Beginner
  • Elasticsearch とは… そして Kibana で検索を実践!

Linux

• Tips
  • rsyncで世代管理バックアップ(--link-destオプションを使用)
  • WinSCPを使用してLinuxサーバーとWindowsPC間でバッチで自動的にファイルをやり取りする
  • LinuxでArtifactory OSSをインストール（PostgreSQLをDB使用）

Cent OS

Windows

• Tips
  • Windowsネットワークドライブのパスをフルパスに変換する

Google API

Google Apps Script

• Tips
  • スプレッドシートの情報をGASでSlack通知
  • GASを使って課題提出メールのチェック
  • Google翻訳APIを無料で作る方法
  • 【LINE BOT】機械学習？AI？ そんなもん使わずにいい感じに返信してくれるBOTを作るぜ！
  • 【GAS】本の表紙を撮影するだけのお手軽読書ログ

Google Cloud Platform

Google Colaboratory

Google Drive

Firebase

• Beginner
  • Firebaseプロジェクト作成方法

Server Side

CSS

BootStrap

WordPress

Develop

• Beginner
  • 「フロントエンドvsバックエンド　あなたが向いているのはどっち？」を和訳した
  • 2019年版 最先端のフロントエンド開発者になるために学ぶべきこと
  • コードレビュー前に直して欲しい日本語コメントの問題点８つ
• Tips
  • 偉大なプログラマ(+人間)になるための101のTIPS
  • 無料で使える！効率化！マーケティング＆業務＆アプリ開発で使える便利ツールまとめ
  • GoogleDrive上でMarkdownを書いて共有したい
  • 「スマホでもHTMLソースを見たい！！」というあなた、ブックマークレットを使おう
  • Google スライドで登壇用スライドを作る際のテクニック
  • 【個人メモ】開発でよく使うWebサービスまとめ
• Tools
  • 43種ものデータ変形がブラウザだけでできる『transform』が便利そう
  • 業務でよく使うChrome拡張機能BEST5
  • 業務でよく使うツールBEST5
  • Typora - Markdown最強エディタ
• Apps
  • 本版のQiitaみたいなサービスを立ち上げた
  • たった5分で自分だけのFitbit Clock Faceを作る
  • Amazon Fire TV Stickアプリ開発環境セットアップ（Fire App Builder）

PowerShell

• Tips
  • PowerShellのDelay-Bindingについて

Vim

• Tips
  • vimで存在する・存在しない行に特定のコマンドを実行する（:v, :g）
  • なぜ私はVimを使うことになったのか〜開発用エディターとしてのVimの有用性に関するご報告〜

awk

LaTex

Redmine

UML

• PlantUML
  • PlantUMLでマインドマップがかけるようになっていた件

Raspberry

• Beginner
  • 【番外編】レッツラズパイ！〜"ディスプレイなしで"RaspberryPiにOSをインストールしよう編〜
• Tips
  • Raspberry PiでPythonファイルを自動起動させる
  • QEMU4.0.0 + Raspbian Buster による RaspberryPi のエミュレーション環境構築
  • Raspberry Pi Zero WにインストールしたRaspbian BusterにUSB経由でSSH接続する
  • Raspberry Piで日本語入力をする
  • QEMU4.0.0 + Raspbian Buster による RaspberryPi のエミュレーション環境構築(超シンプル手順バージョン)
  • PC使ったRaspberry Pi開発手順
  • Raspberry PiをHeadlessでセットアップする
  • ラズパイからADと連携したRADIUS認証が必要な無線LANに接続する (WPA2-EAP)
  • [Raspberry Piメモ] SSHでログインするまで
• Apps
  • 第１０回　Raspberry Pi で監視カメラを作ろう！　～動画編～
  • ラズパイに初めて触る人が、Slackから自宅のエアコンを制御する
  • Raspberry PI + Node.js + Nuxt.jsで30秒の間に光っているボタンが何回押せるかを競うゲームをDIYした
  • ラズパイにScreenlyとremote.itで遠隔デジタルサイネージ

RPA

• Beginner
  • RPAは誰でも簡単に作れるという罠

IoT

• Apps
  • 爆速開発IoT遠隔センサーロガー: obnizからGoogle Spreadsheetにセンサー値を定期的に保存（環境構築不要！汎用性高）
  • LINEへの通知をワイヤレスボタンで実行する

Alexa

• Beginner
  • これからAlexaスキルを作る方へ、しくみをざっくりと噛み砕いてみた

Line

• Tips
  • LINE Pay APIを手軽に試してみた

SharePoint

• Tips
  • SharePoint REST APIでフィールドを作成する際の自分メモ

VBA

• Tips
  • Mac環境でExcelマクロを自動実行したい件
  • VBAを愛するあなたへ『Google Maps APIで位置情報と航空写真を取得する方法』

ShellScript

• Tips
  • 【Linux】ファイルで指定した対象を一括でバックアップする

Nim

• Tips
  • NimのCLIツール作成用ライブラリcligenがとても便利

Emacs

• Tips
  • Windows環境のEmacsへPygmentsパーサーを導入

WPF

UI

Ansible

Arduino

• Apps
  • 郵便ポストをIoT化　Ver.2
  • Arduinoと格安の小型ドローンを接続する

Julia

• Tips
  • 他言語からJulia言語を呼び出すヒント(中編：共有ライブラリ呼び出すよ)
  • 他言語からJulia言語を呼び出すヒント(後編:Pythonから呼び出してみるよ)
  • Interact.jl で作ったアプリを Desktop アプリ or Web アプリにしてみよう
  • Julia で時計を作ろう
• Apps
  • Interact.jl を用いて Julia で使う対話機能を持つ可視化ソフトを作ろう

Coral

• Tips
  • Google Edge TPU画像分類器

ionic

• Tips
  • firebase FCM と ionic4 で Web Push を実装してみる

QRCode

• Tips
  • QRコードを簡単に作成する方法（googleを利用します）

OCR

• Tips
  • OutsystemsのGoogle Cloud Vision OCRを使ってみた

資格

• Azure
  • Azure認定資格 AZ-203を取得しました
• AWS認定ソリューションアーキテクト
  • 【英語重要】64.5時間でAWS認定ソリューションアーキテクト - プロフェッショナルを取得する方法
  • AWS ソリューションアーキテクト アソシエイト 勉強方法まとめ
• Associate Cloud Engineer
  • 非エンジニアがGoogle Cloud認定資格「Associate Cloud Engineer」に合格した話

転職

• 面接
  • 面接で聞かれたこと(未経験からエンジニアを目指す方へ)
  • 「面接で聞かれたこと(未経験からエンジニアを目指す方へ)」回答例

更新情報

• Kotlin

  • Kotlin入門
    • 第1章 はじめてのKotlinアプリケーション
    • 第2章 Kotlinの文法

• Android

  • Library
    • 「Before After animation」というアニメーションライブラリを使ってみました。

• Java

  • Java 10
    • 【Java】Java 10で拡張された型推論について注意すべきこと

• IDE

  • IntelliJ IDEA
    • 【開発環境】ローカル環境への統合開発環境(IDE): IntelliJ IDEAのインストール手順
    • 【開発環境】統合開発環境(IDE) IntelliJ IDEAの日本語化とカスタマイズ
    • 【開発環境】【IntelliJ IDEA】LiveEditを使ってHTML/CSSを動的に反映させる。