この記事は以下のページに移転しました。 blog.morishin.me

@tkanayama_です。「SQLアンチパターン *1」 という本を読みました。「ポケモンを題材に因果推論を実践してみる」のように、仮想的なストーリ上で実際に使ってみた感を出すことにより、自分の記憶に定着させることを狙います。 前提として、何をアンチパターンとするかは状況（ベンダーフリーである必要があるかどうか、どの程度の頻度で更新されるか・・・など）によって大きく異なるので、下記で紹介するアンチパターンは実は状況によっては問題にならないケースもあるかと思います。この投稿はあくまで「SQLアンチパターン」に忠実に従うことが目的です。 www.oreilly.co.jp 追記 登場人物 ストーリー フシギダネへの対応 ヤミカラスへの対応 ディグダへの対応 誤登録でポケモントレーナーになってしまったユーザーの削除 最後に 謝辞 追記 このブログを公開後、「外部キー制約はレコードロック周りのト

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。 これは必見だわ!! TypeScriptの型についての問題集 想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい （自分はeasyの問題でも分からんのあった。頑張ろ😅）https://t.co/tkEFe7VrBQ — Kawamata Ryo (@KawamataRyo) September 3, 2020 type-challengesとは type-challenges/type-challenges: Collection of TypeScript type challenges with online judge VueUseやVueDemiの開発者である @antfu7さ

こんばんは。今回はPromise.allを使ってみます。MongoDBも使います。 developer.mozilla.org 記載の通り、配列に入ったPromiseを全部解決するまで待つという動きが出来るようになります。 Promise.allを使わないやりかた import {MongoClient, MongoClientOptions} from "mongodb"; const uri:string = "mongodb://127.0.0.1:27017" const options:MongoClientOptions = {useUnifiedTopology:true,useNewUrlParser:true} const client = new MongoClient(uri,options); const dbName = "__test__"; const col

こんばんは、葛の葉です。 今回は疲れているので省エネです。 起こったこと PuppeteerでE2Eテストをやっててヘッドレスだとテストが通らないのに、ヘッドレスをやめるとテストが通るという現象がおきました。そしてそれはタイトルの文字が正しく表示されるかどうかをテストするものでした。 ヘッドレスとそうでないのの違いがよくわからず、しばらく詰んでおりました。 原因は 原因はPuppeteerの言語を固定していなかったからでした👀ブラウザに設定された言語によって英語と日本語とが変わる仕様にしていたので、正とする日本語のタイトル文が表示されてなくてパスしていなかったわけですね。 ヘッドレスモードをオフにすると、不思議なことに日本語で固定されてました。osに依存したりするのかな？ こうした 言語を日本語で固定しました。 import { launch } from "puppeteer"; (a

こんばんは、葛の葉です。 今回はURLからjsを起動してみます。悪用厳禁ってやつですね。 こんなイメージ hogehogeというパラメータに渡したデータをhtml上に表示するようなWebサーバーを作ります。今回もnodeの基礎的なライブラリであるhttpを使います。また、htmlパラメータを出力するために、urlモジュールのparseも使用します。 nodejs.org nodejs.org import http from 'http'; import { parse } from 'url' const server = http.createServer(); server.on('request', (req:http.IncomingMessage, res:http.ServerResponse) => { const hogehoge = parse(req.url || "

こんばんは葛の葉です mongodbのフィールドにある数字を取り出そうと正規表現を使ったのですが、全くヒットせず、正規表現の書き方が間違ってるのかなんなのかがわからず、暫く格闘を続けるというアホみたいなことをしていました。 MongoDBの公式について Provides regular expression capabilities for pattern matching strings in queries. MongoDB uses Perl compatible regular expressions (i.e. “PCRE” ) version 8.42 with UTF-8 support. docs.mongodb.com やりたかったこと { name: 'kuzunoha', status: 200 }, { name: 'pontaro', status: 230 },

こんばんは、葛の葉です。 Vue.jsの本を読んでちょっと勉強中です。結構楽しいですね。個人開発のWebアプリケーションを作ろうと思っているのですが、Vueでこさえることが出来たらなぁと思ってます。 ちょっとしたFizzBuzzのゲームを作る。 ランダムで出力される3つの数字の合計がFizzBuzzで言うところの何に当たるかを当てるゲームをつくります。1時間で完成。 github.com 算出プロパティ Vueを勉強していてちょっと聞き慣れない言葉だと思ったのが算出プロパティというものです。 ## script.js 8 - 12 lines computed: { result: function () { return this.questions.one + this.questions.two + this.questions.three; } }, computedというVueの

こんばんは、葛の葉です。 今回はCookieとSessionとSessionIDを使ったログイン情報の保持を実施します。 前述 普段我々が使用しているWebページでは、ログインを必要とするページが多いかと思います。ログインに一回成功するとその成功したログイン状態というステータスになり、ちょっとした時間は改めてログインをする必要がありません。しかし、Httpはステートレスであり、状態を保持するということが出来ません。そのため、どこかにその情報を保存しておくのですが、今回はそのうち、SessionIDを使った方法を記載してみます。 今回のソースコード github.com Cookieとは WebサーバーがWebブラウザにデータを送り、ブラウザがその値を保持します。それをCookieといいます。CookieはWebブラウザの機能の一部であり、Cookieを使えないWebブラウザもあることでしょ

こんばんは、葛の葉です。 今回はBasic認証をやってみます。 Basic認証とは Basic認証とはHttpに搭載されている認証方法の一つになります。Httpヘッダーに認証のためのユーザー情報とパスワード情報をBase64にて暗号化して送付します。その値をサーバーが受け取って認証をすることが出来ます。 サーバーは対象となるページのヘッダーにWWW-Authenticateをつけることで、Basic認証にすることができます。クライアントは該当するページにアクセスした時、サーバーは401のステータスコードで返します。認証が成功すれば成功したページをステータスコード200で返します。401のステータスを受け取った時、クライアントは認証用の入力フォームを出力し、ユーザー名とパスワードをユーザーに入力させます。入力フォームを出力する機能はブラウザの機能です（ブラウザによっては出来ないものもあるとい

こんばんは葛の葉です。 今回はExpressで任意のhttpステータスコードを送信する機能を書きます。 github.com import e from 'express'; import {Request, Response} from 'express'; const app = e(); app.get('/', (req:Request, res:Response)=>{ // 200 status res.status(200).send("hoge"); }); app.get('/bad', (req:Request, res:Response)=>{ // 400 status res.status(400).send("huga"); }); app.listen(9000, ()=>{ console.log('Listen 9000') }) expressのルーティ

こんばんは葛の葉です。 いつものアホ面でGithubを眺めてたら見慣れないのがあった。GitHubアクションというものらしい。そういえば邪魔くさいポップが出ていたっけ。ちょっと触ってみることにした。 help.github.com GitHub Actions では、エンドツーエンドの継続的インテグレーション (CI) と継続的デプロイメント (CD) 機能をリポジトリに直接ビルドすることができます。 GitHub Actionsは、GitHubに組み込まれている継続的インテグレーションサービスを駆動します。 詳細については、「継続的インテグレーションについて」を参照してください。 とまぁ、GitHubリポジトリへのPushやMargeをトリガーにDockerなどを実行できるワークフローというものを作成することで、CICDができるという代物みたい。CICDっていまの仕事で構築しているのだけ

こんばんは、葛の葉です。 今回はMySQLを使ってトランザクションを勉強しようと思います。 トランザクションとは データベースはデータを保存しています。プログラマーやプログラムを使うユーザーはデータベースに対して、データを閲覧、追加、変更、削除を行いますが、そういったデータ操作についての処理を一つに纏めることをトランザクションと呼びます。トランザクションは最終的にその処理をデータベースに反映させる（コミットする）か、それらの処理を拒否する（ロールバックする）のどちらかを実施します。 トランザクションにおいては、纏まった処理を実施している最中に、他のユーザー（他のトランザクション）がデータベースにアクセスした際に、どういうデータの見え方をする必要があるかが問題となるケースがあります。 例えば、本屋さんのECサイトがあったとして、本の在庫数を管理するデータベースを持ってるとします。 ID 題名

こんばんは葛の葉です。 さて、とあるOSSを使っていたところ、ちょっと重いバグが出ていて、しかも開発者がそれを再現できないというものがありました。 そこで時間を掛けて調査したところ、そのバグを再現できる環境を作成することが出来ました。早速、開発者の人に知らせました。その際にとても役に立ったのがDockerとGithubでした。なぜなら、Dockerを使ってバグ発生用の環境構築し、Githubを使うことでコマンドなどの再現方法を記載して、ソースコードそのものを簡単に提供することができたからです。 Dockerで環境構築する。 Dockerについて詳しく説明はしませんが、DockerfileやDockerComposeをうまく使うことでバグを再現する環境を構築することが出来ます。今回はレプリケーション構成のときに発生するという環境に依存するバグでした。本来なら面倒なレプリケーションの構築もDo

auです。 17Liveで公認ゲームライバーとして、ゲーム配信をやり初めて2ヶ月が経ちました。 最初は、何となく恥ずかしかったり、配信しても人が来なくてすぐに辞めてしまうのだろうなと思っている自分がいました。 ↓自分の17アカウント 17.live しかし、ブログと一緒で毎日やっていると自然に日課になって、22:00近くになると「そろそろ配信するか」という風になりました。それに、最近では配信するたびにフォロワーが増えていっているように感じます。 そんな中見つけた、視聴者を獲得する方法を3つ書いていこうと思います。と言っても、前のGoogle砲を狙う記事で書いた内容みたいに、「なんだそんなことか」と思うこともあるかもしれません。それでも、意識してやることはとても重要なので、これから視聴者を獲得したい人は読む価値があるものだと思います。 Google砲の記事 program-shoshinsy

お久しぶりです。passです。 前回の記事は非常に多くの方に見て頂けて色々な意見を見ることができ、楽しかったです。 私passは根っからのゲーム好きで、ここ数年でSplatoonに6000時間以上fortniteに4000時間以上費やすほど最近はシューティングゲームにハマっていました。 そこで最近読んだ『ワールドトリガー』というジャンプ漫画がシューティングゲームのような戦闘が多くて凄く面白く、漫画を読んだ後にアニメ版も全て見るほど食い入って見てしまいました。 そこで、今回の記事は私共の運営する「passed games」でも紹介しているゲーム攻略にワールドトリガー的観点から焦点を当てていきたいと思います。 『ワールドトリガー』とは2013年から週刊少年ジャンプで連載している SF 漫画です。 『数の有利を活かした多角的な攻撃』 これは、2つの火器から放たれる火線が交差（Cross）するとこ

こんばんは葛の葉です。 最近はPuppeteerとテストコードを使用しE2Eテストを書いています。今回はそのことについて記載してきたいと思います。 今回のソースコードはこちら github.com E2Eテストとは E2EテストとはEnd to End Testのことで、WebブラウザなどのUIを介してユーザーが実際に操作するような動きをテスト項目とし、それを自動で評価させるような仕組みを指します。例えばログイン画面などで認証情報を正しく入力した場合の画面遷移がきちんと成功しているか否か、あるいは失敗した場合は認証が失敗している旨のメッセージが表示されているか、といった部分をテストします。 E2Eテストの良いところは既存の機能を保証してくれるところになります。新しい機能を追加すると、その機能が影響して既存の機能が動かなくなることがあります。また、ライブラリや実行環境が変更、更新となった場合

こんばんは、葛の葉です。 さて、TypeScriptで条件によってモジュールをインポートする、あるいはインポートしないようにしたい場合があるかと思います。 if(true){ import {hoge, moge} from "./ex"; } // error TS1232: An import declaration can only be used in a namespace or module. An import declaration can only be used in a namespace or module.とエラーを出されます。VSCodeでもエラーが出力されます。 An import declaration can only be used in a namespace or module. 書いてあるとおり、名前空間かモジュール内じゃないとimport出来ない

こんにちは、葛の葉です。 JavaScriptにおける非同期処理とtry catch文についてみてみましょう。一般的に、try文内で発生したErrorはcatch文に移動します。 try { throw new Error('Test Error'); console.log('hogehoge'); } catch (error) { console.log('piyopiyo'); } // piyopiyo そのエラーを検知したとき、catch文にジャンプします。ご多分の通り、throwを使うことでエラーを発生することが出来ます。すなわち、try文内において、throw文以下の命令は絶対に呼び出されることはありません。VSCodeにおいても3行目であるconsole.log('hogehoge')は到達できないと表示されます。 到達できないコードの検出 では以下のような非同期処理にお

葛の葉です。 マークダウンでしばしば色のついたコード書きを見るかなぁって思います。 import {hogehoge} from "./hogehoge" console.log(JSON.stringify(hogehoge)); let hugahuga; for ( let piyo of piyos ){ hugahuga += piyo; }; これはシンタックスハイライトといって、マークダウンについている機能のようです。はてなでもMarkdown形式なら使うことができます。結構いろんな言語に対応しています。 help.hatenablog.com 書き方は以下のように最初のバッククオート３つに対応する言語を書き込むだけです。 シンタックスハイライトの書き方