Clik here to view.
JavaScript Standard Styleのススメ
みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？ インデントに使用する文字はスペース？それともタブ？ JavaScript Standard Styleは、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。1 JavaScript Standard Styleのルール JavaScript Standard...
View ArticleESLintとPrettierをどう扱うべきかの考察（2018年12月版）
はじめに Prettier が ver.1.15 で Vue.js に対応したことにより、Vue.js で開発していた私は ESLint とPrettier の併用である懸念が起きうることを知ることになりました。 あまり情報が広まっていないようなので、これから使おうと思っている開発者に向けてまとめてみました。 ESLintとPrettier まず、ESLint と Prettier...
View ArticleCoffeeScriptからJavaScriptに移行する
今年歴史あるRailsプロジェクトのCoffeeScriptをJavaScriptにひたすら直す作業をしてたので、CoffeeScriptを使っていたがJavaScriptに移したくなった際の流れをまとました。 大まかな流れ CoffeeScriptに前処理をして変換後のJavaScriptが極力キレイになるようにする decaffeinate コマンドで変換処理を行う...
View ArticleClik here to view.
JavaScriptの概念たち (前編)
この記事は JavaScript Advent Calendar 2018 4日目の記事です。 昨日は@sasurai_usagi3さんで「CoffeeScriptからJavaScriptに移行する」でした。栄枯盛衰を感じます。「CoffeeScript」でググろうとしたらGoogleさんが「CoffeeScript オワコン」とサジェストしてきて悲しい気持ちになりました。...
View ArticleWebpackによるDynamic Import（実践編）
以前にWebpackでDynamic importを行ってみるという記事を書きましたが、実際に使ってみるとなると、文法以外に考える点がちょくちょく出てきました。 import()自体の書き方...
View ArticleHexoテーマ作成のためのデータ構造概説
この記事は JavaScript Advent Calendar の9日目です。 昨日は @stken2050 さんの30分でわかるJavaScriptプログラマのためのモナド入門でした。 最近とあるサイトをHexoで構築し直したので、オリジナルテーマを作成する際によく参照するデータ構造などを自分用メモとして公開しようと思います。...
View Article演算子の実行順
JavaScript Advent Calendar 2018の10日目の記事です。 なんか今朝カレンダー見たら、空いてるじゃん！ラッk... 短めですが、結構悩んだので。 $(function () { var e; $(".show-hide").eq(0).show(), e = 1, setInterval(function () { var t; t = e - 1, 0 > t...
View ArticleJavaScript: f( array ) よりも f( [...array] ) がいいとき?
単純なことなんですが、最近うっかり踏みそうになったプチ地雷からのクイズ?です。 突然ですが 何が表示されるでしょうか? const array2Gen = xs => function*(){ yield* xs; }(); const a = [0,1,2]; const g =array2Gen( a ); for(let i of a.keys() ){ a[i] =...
View ArticleClik here to view.
JavascriptでIoTをやる方法
この記事はJavaScript Advent Calendar 2018の12日目です @n0bisuke さんと合わせて２日連続でjavascriptのIoTに関するAdventCalendarになりました。 ・・・と言っても、話が続いてるというわけでは無いです 前半戦なので、全体感ということで、JavascriptでIoTをやろうとしたときに どんなやり方があるよという話をしたいと思います。...
View ArticleClik here to view.
WebUSBを使ってブラウザのJavaScriptからArduinoを制御してみよう！
WebUSBの動向を最近追えてなかったので久々に触ってみます。 そして思ったより簡単に出来ました。 こんなの作ってみました。 WebブラウザのカラーピッカーをグリグリやるとLEDの色が変わります。 WebUSB "ブラウザの"JavaScriptからUSBデバイスへ"直接"アクセスできる技術です。 Chromeだとnavigator.usbが使えます。...
View Articleスプレッド演算子と分割代入
この記事はJavaScript Advent Calendar 2018 14日目の記事です。 何かと役立ちそうなスプレッド演算子と分割代入についてです。 ブラウザで使用する際はBabelにかけた方が良いと思います。 スプレッド演算子 スプレッド演算子は配列やオブジェクトなどをその場に展開します。 let array = [1, 2, 3]; func(...array); // =>...
View ArticleClik here to view.
「人間はJavaScriptにいずれ負ける」ことを実感するツールを作った
はじめに この記事は、JavaScript Advent Calendar 2018の18日目の記事です。 クソアプリ2 Advent Calendar 2018でも同じような内容の記事を書いています （こちらは、よりクソな内容の記事となっています） クソアプリ2 Advent Calendar 2018 ゲームを作りました これはJavaScriptの速さを身をもって体験ができるアプリです。...
View ArticleES2019で追加される(かもな)最新機能ピックアップ
2015年に ES2015 がリリースされてから、個人的に EcmaScript の毎年の新機能のリリースがとても楽しみになりました。 そして来年には ES2019 のリリースが控えています。 そこでこの記事では、執筆時点で ECMAScript proposals で Stage 3 の段階にあるものの中で個人的に興味があるものをいくつかピックアップします。 ( ES2019...
View Article関数型プログラミングの世界からやってきた Pipeline Operator
Pipeline Operator まずはこちらを https://github.com/tc39/proposal-pipeline-operator Elixirとかで見かける |> です。 現在はStage 1 Draftで、babelでもう導入可能です。...
View ArticleJavaScriptの書き方をアップデート
なぜこの記事を書いたか 2018年からAngularを用いたSPAを開発するプロジェクトに参画しているが、 そこで他の開発者が書いたJavaScript(TypeScript)が自分の知らない記法で書かれていたので 自分のJavaScriptイメージをアップデート(最新の仕様を理解)する必要があると感じたからである。 Default parameters...
View ArticleBabel 7 の主な変更点まとめ
2019/06/21 追記 記事内容を Babel 7.4.0 に対応したものに更新しました。 主に追記した箇所は以下に関してです。 @babel/polyfill が非推奨になった（Babel 7.4.0 から） @babel/preset-envのuseBuiltInsを利用して、core-js@3から必要な polyfill のみを import できるようになった（Babel 7.4.0...
View ArticleClik here to view.
特定のユーザーのQiita新規投稿を定時でチャットに流す
部内で Qiita に記事投稿したら教えてね、とのお願いがありました。 メールやチャットでの連絡だと忘れがちなので定期的にチャット(Teams)に POST してくれる JavaScript を書いてみます。 利用するサービス群は以下です： Qiita API Microsoft Teams Incoming Webhook Firebase Cloud Functions cron-job.org...
View ArticleClik here to view.
円と円の当たり判定を使った簡単なシューティング
はじめに 今回は簡単なゲーム作りを通して円と円の当たり判定を学んでいきましょう。 前提 if,for,変数などが分かる 数学的な話は苦手なのでググってください。 作るゲームはこんな感じです。 使う画像 数学的な話(少し) 円1： 半径 ｒ1 , 中心 C1(Cx1,Cy1) 円2： 半径 ｒ2 , 中心 C2(Cx2,Cy2) 使う公式 (Cx1-Cx2)^2 + (Cy1-Cy2)^2 ≦...
View Article