Noteビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。JavaScriptこんにちは。Scriptが使われています。私はまったく携わっていないので、実はよく知りません。Script自体も使ったことありませんでした。社内でよく使われているものを知らないのはもったいないです。プライベートでも使い道がたくさんありそうです。そんなわけで勉強してみることにしました。普通に始めるのも面白くありません。Flowを導入しながら、始めることにしました。Scriptのコードをチェックする方法を紹介します。設定方法まとめ関連リンクFlowとはFacebookのオープンソースで、JavaScriptの静的型チェックができるツールです。Facebookのオープンソースはライセンスが話題になっていましたが、めでたく(?)MITライセンスになりました。*1型注釈や型定義を書くことでチェックをしていくことになるため、TypeScriptと比較されることが多いです。Typesという機能があり、コードコメント上に型を記述することができます。そのため、JavaScriptへの変換をしなくても、そのままで実行可能です。ScriptはJavaScriptをベースにしていますが、完全なJavaScriptであるかは明記されていません。Scriptで動くとは限りません。Scriptで利用する場合は、TypeScriptではなく、Flowを使うのであれば不要なトラブルを避けることができます。チャットワークAPIのクライアントライブラリを利用した例まずは利用例を紹介します。使ってみた」という記事があります。この記事に登場するサンプルコードをチェックしてみましょう。(サンプルの実行方法は後で説明します)上記の記事に登場する「チャットワークにメッセージを送信するコード」をFlowでチェックしてみます。チェックするのは以下のコードです。xx});}まず、Flowを利用するための修正をします。@flowの部分だけです。コードチェックをすると以下の結果になります。2.xxとxxxという変数は定義されていないため、エラーになりました。コードを実行せずとも、問題を見つけることができました。型注釈も一切つけていません。修正して数値を渡すようにしてみます。xx});}チェックを実行してみます。errors変わらず2件エラーがでています。xxとxxxを定義したので、エラーの内容が変わっています。incompatible」となっています。tokenに互換性のない型の値が渡されているということですが、xxxはnumberでstringが期待されているところにnumberが渡されているのでエラーになっています。2つ目も同様にbodyにnumberが渡されているのが原因でエラーになっています。実行する前に問題を見つけることができました。型注釈も一切つけていません。(2回目)エラーがない場合エラーを修正してみましょう。xx});}xxxとxxがstringになるようにしました。errors!このコードを実際に動かしてみてもチャットワークには投稿されないでしょう。静的チェックの限界です。人間が書いているので間違えてしまうことがあります。メソッドに渡すオブジェクトのプロパティ名を間違えているとどうなるでしょうか。xx});}tokenでなければいけないところがtokkenになってます。私は仕事ではあまり特権は欲しくないです。それはさておき実行してみましょう。index.js:4「tokenがみつからないよー」となります。実行する前に問題を見つけることができました。型注釈も一切つけていません。紹介したサンプルを実行してみたい場合ちょっと試したい人のためにサンプルプロジェクト(GitHub)を用意しています。flowで実行できます。Scriptの型定義ファイルは追加していません。ScriptとチャットワークAPIの型定義ファイルを利用する場合の設定方法を紹介します。Yarnの詳細は省きますが、Yarnをお使いの場合は以下のコマンドで設定ができます。flowを実行するだけで静的型チェックをおこなうことができます。静的型チェックに問題がなければ、書いたコードをコピー&ペーストやnode-google-apps-scriptを利用してアップロードを行い利用できます。Scriptで利用できるチャットワークAPIライブラリの型定義が含まれています。Scriptの開発環境をお探しの場合はぜひ試してみてください。Script用の型定義ファイルはまだすべて定義されていないようなので、ご注意ください。まとめFlowを使うと、既存のコードにコメントを追加するだけで型チェックができます。利用するライブラリの型定義があれば、自分の書いたコードに型を明示しなくてもある程度チェックできます。実行する前に実行時のエラーを防ぐことができるようになるので、効率的にプログラミングができます。ScriptがどこまでブラウザのJavaScriptと同じ動きをするかわかりません。Babelを通したり、TypeScriptのコンパイル後のコードが正しく動くかわかりません。TypesはBabelを通す必要がないので安心です。今回長くなったため省きましたが、Flowを使うことでエディタでのコード補完も強化されます。Scriptの型定義ファイルはこの記事を書いている時点ではすべてを網羅できていませんが、日本人が作成しているので、気軽にプルリクエストしてみてはどうでしょうか。www.npmjs.comhttp://c-note.chatwork.com/post/69590585422/chatworkapi-gas-libraryc-note.chatwork.com*1:この記事を書いている時点ではウェブサイトに記載されたライセンスはまだ修正されていませんでしたが、GitHubのmasterブランチはMITになってました。*2:コメントで記述するのは少し冗長です。12:11Tweet関連記事2021-09-28【GASで業務効率化】GoogleドライブにPDFファイルが追加されたらChatworkへ通知するこんにちは、Chatworkのさかぐち(cw-sakaguchi)です。「Goog...2021-05-07【GASで業務効率化】Chatworkでピアボーナスのメッセージを送るこんにちは、Chatworkのさかぐちです。Script」...2021-01-22【GASで業務効率化】指定した日にChatworkへメッセージを投稿するこんにちは、Chatworkのさかぐちです。@Chatwork_devメンバーid:cw-oritaid:okuzawatsid:d-hayashiid:shibe23id:cw-jeromechaid:cw-araiid:tinpayid:cw-sakamotoid:rabe1028id:cw-suetakeid:lmdexprid:cw-shinyaid:cw-takaseid:cw-niinumaid:j5ik2oid:tan-yukiid:yamakenji24id:yoshiyoshifujiiid:cw-ayumitakahashiid:cw-furuyaid:kaz3284id:cw-ozakiid:cw-nishikawaid:daiksyid:tasuku43id:louvre2489id:sykt13id:yamatomo73id:cw-kasugaid:cw-mottyid:cw-nishiguchiid:s12btid:cw-sayamaid:cw-moriyaid:cw-makotoikedaid:cw-yoheihayashiid:wakakumaid:cw-sakaguchiid:cw-matsubaid:ymgnid:shige0501id:nottegraid:shinharadid:eielid:cw-michihiroid:crossroad0201id:cw-miyashitaid:agoetcid:at-akaid:cw-chibaid:tenslerid:cw-akatsuid:cw-kajiwaraid:cw-otakeid:TomokoNishinaid:cw-tanakaid:cw-hayashiid:cw-marikoid:cw-shinmenid:cw-masakiid:cw-hayama最新記事モバイルアプリ開発チーム、カンバンはじめました。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。