o(コード書こ)深い思考の末に、私はエンジニアらしく何かプログラムを書くことを決心しました。休日ぐらい適当にだらだらコード書くのも乙だよね、って思っていたんですがさすがに何かを作るからには目標を決めないといけない訳です。それに目標を決めないと10分で飽きることも目に見えていたので、何かしらざっくりと決めようとは思いました。達成したかが明確に分かる作業の方がモチベーションが上がりますよね、きっと。そんなこんなで今回取り組んだのは以下です!目標Slackのリアクション(イイネスタンプとか)を取得して表示するプログラムを作る条件Node.js上でつくってみるネイティブなアプリケーションとして作ってみる短期間で作るできるだけがんばる急にSlackが出てきましたが、一応理由があります。単純に業務で使っているっていうのと、リアクションがあったときにいちいち該当のレスを見ないといけないのが不便だなーと前々から思っていたからです。SNSの世代なのでリアクションの有無って結構気になるのです。それにSlackのAPIなら公式に丁寧な説明が書いてありますしポコポコ叩けばいけると思ってました。|--{各モジュール}||--package.json||--.babelrcハマったポイントというわけでいざ作ろうとしたのですが、そう上手くいかないのが世の厳しさ。ハマりまくったわけですが、その中でも特にハマったポイントを抜粋していこうと思います。Vue.jsがうまく動かないVue.jsのビルド方式を理解していなかったため起きたハマりポイントです。Wordぐらいのことをやろうとしたんですが余裕で動きませんでした。ちなみにファイルは以下の感じ■HTML/index.html(エントリーポイントのhtml。</body></html>■JS/main.js(メインで読み込まれるjsファイル。{};</script>今回はほとんど活用してないくせにVue.jsの単一ファイルコンポーネントを利用して作ろうとしたのですが、そのときに使用した<template>タグが原因でした。Vue.jsにはビルド方式に「完全ビルド」と「ランタイム限定ビルド」の二つがあり、<template>タグを使うときは完全ビルドにせい、とのこと。jp.vuejs.orgランタイム限定ビルドの方が軽いためデフォルトではランタイム限定ビルドになっているようです。"<app-main></app-main>"});asyncまわりがうまく動かないこれは結構悩みました。ビルドは通るのにasync周りでコンソールエラーが起きてて動かないという状況。分かる方からするとasyncというあたりで気付かれるかもしれませんが、知識が大変浅い自分にとっては割とよくわかりませんでした。そんなこんなで色々調査していくと出てくる出てくる、babel、poliyfillなどという不可解な単語。分からないものへの拒否感。検索すればするほど出てくる違う解決法。止まったままのプログラム。何となく理解したような気になりました。要約すると以下のような感じ(?)babelはブラウザやバージョンごとの互換性を保つために利用するトランスパイラ(=構文を変換してくれるコンパイラ)新しい書き方を古い書き方に変換して誰でも読めるようにしてくれる(アロー関数からfunctionへの書き換えとかのイメージですかね)ただ構文だけでなく、新しいメソッド、オブジェクトなどが追加されることもあるのでそれらを補完することが必要なこともあるその補完はpolyfillを利用して行うbabelがトランスパイラの名前でpolyfillが概念や手法の名称ですね。結論から言うと今回asyncなどの非同期処理を行うのに機能の補完が足りなかったようです。babelにはpolyfillも行う機能がありますのでそれをよろしく使ってあげればよさげな感じ。ちなみにbabelでpolyfillするやり方で以前まで使われていた手法が、最近になって非推奨になりました。今までは、「@babael/polyfill」というモジュールをインストールする方法でしたが、Babel7.4.0からはcore-jsのバージョンを指定する方式が推奨されています。そもそも@babael/polyfillがcore-jsとregenerator-runtimeをセットで提供していたものでしたが、それらを直接読み込むようにする、ということですね。実際のファイルは以下の感じ。"<app-main></app-main>"});そもそもAPIの処理が動かないまたもや非同期周り。Promiseを使ってAPIたたくところがうまく動きませんでした。ここに関してはスーパー初歩的なミスなので、非同期もまともに処理できない坊やは置いてくぜ、という方は読み飛ばしてください。問題のソースが以下の通り。■JS/AppMain.vue(前述した同ファイルのコードから色々実装してあります。};</script>■JS/SlackInfoMethod.js(apiを叩く処理の実装です。};</script>きちんと説明します。画面上で「取得する」ボタンを押下すると問題の行の処理が走ります。「this.SlackDataList」が表示するデータの元となる変数で、そこにslackから取得したデータを詰める、という処理です。ところが忘れてはいけないのが、slackのAPIを叩きデータを取得するGetReactionRawData()がPromiseを返すということ。該当行が処理されて「this.slcakDataList」に入る値はただのPromiseオブジェクトということですね。非同期なので即時に値を返すことができないためこの機構になりましたが、結果値が取得できてないという何ともアレなミス。いうことで、ちゃんとresolveされた値が入るように修正しました。};</script>イケてるかはともかく動いたのでめでたしめでたし。おわりにというわけで何とか完成(?)しました。(エラー時の表示とか実装してないけど)結果的にハマりポイントとしては、Vue.jsのビルド方式のミスtemplateを使うときは「完全ビルド」を選択する!asyncが読み込まれないミスバージョンや環境による、構文、標準実装の差異はbabel、polyfillできるライブラリを活用する!Promiseの使い方のミスちゃんと勉強するPromiseによる非同期処理では、結果を同期的に取得するように意識する!といった感じで解決しました。割愛させていただきます。(前述したpackege.json通りのコマンドを打てば簡単に起動します。)こうして自分の書いたコードをのせるのは正直恥ずかしいですね。自分で改めて見てもダメなところが結構あるなと思うので、きっと実際はもっとやばいんだと思います。色んな方のアドバイスを頂きたいところです。言い訳をしてみましたが、やってみた感想としてはやっぱり自分で作って実際に動くものが完成すると楽しい!ですね。モチベーションも上がります。休日をどう使うかなんてその人の自由ですし、自分も思いつきでやってみただけですが、こういう活動もエンジニアとしての成長という意味では大事かも、と思います。話はそれますが、以前上長に言われた「何十年も仕事をするのなら楽しい方が絶対いい!」というのが割と自分には深く刺さる言葉でして、自分はそれを心がけて仕事をしようとしています。めちゃくちゃに当たり前なことではあるんですが、「辛い」「楽しくない」って思いながら仕事をするのって地獄のようですよね。想像するだけでも嫌です。いって仕事の「楽しい!」はタダでは降ってきません。世の中の事柄全てがそうだと思いますが、「できるから楽しい」が本質なんだと思います。したらやるべき事は一つで、「できるようになる」ことなんですよね。「できるようになる」ために行動しなければいけない、でもそれを強制されたりプレッシャーになって嫌になっては意味がない、そのちょうどいい塩梅のところが「思いつきでやりたいときにやる」だと個人的には思います。その「やりたい」を逃さないことが大事かなーと最近感じています。幸運にも「やりたい」「やってみようかな」が降ってきた方はぜひ色々な活動をしてみてはいかがでしょうか。11:45Slackのリアクションを知りたくて、NW.jsとかVue.jsとかを色々連携しようと欲張ったら、非同期処理でハマった話。シームレスに統合されて素晴らしい件こんにちは、アーキテクトの小林です。アーキテクトの堀内です。プロダクト開発チームの開発者ブログです。クラウドECプラットフォーム「メルカート」、ビジュアルマーケティングツール「visumo」などを開発しています。技術勉強会#2~』(2020年1月15日)C#でフロントWebアプリが動く、Blazorを試してみた【TypeScript】TS初心者の、TS初心者による、TS初心者のためのTS入門LT(ライトニングトーク)、始めてみたんですよ。(1)はてなブログをはじめよう!ecbeingさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。