マイグレーションコード自作して File-Based Routing に自動移行！！ ~250 ページの歴史的経緯を添えて~

JavaScript(TypeScript）で書かれたプログラムを、Go言語で書き直しました。 その動機や、書き換えた結果などを書こうと思います。 また、今回Go言語が初めてだったので、Go言語とはどういったものかや、Go言語をやってみた感想なども合わせて書こうと思います。 動機 メンテナンスしづらい 移植したプログラムは、JavaScript（TypeScript）で書かれた、データ処理関連のプログラムで、サーバーで動かしていました。 JavaScriptはポピューラーな言語ですが、フロントエンドをやらない人にはあまり馴染みがないようで、扱える人が限られていて何かあった時の対応が不安でした。 どのプログラム言語にも似たような文法があり、ちょこっと修正するくらいなら、一通り文法書に目を通せば何とかなりそうな気もするのですが、PromiseなどのJavaScriptの非同期プログラミング文法

はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ

note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat

PHP8.2 / PHP8.1 / PHP8.0 / PHP7.4 2020/11/26に リリースされました 。 2020/08/04にPHP8.0がフィーチャーフリーズしました。 言語機能に関わるような機能の追加・変更が締め切られたということです。 今後はデバッグを繰り返しながら完成度を高めていき、2020/11/26にPHP8.0がリリースされる予定です。 というわけでPHP8.0で対応することが決まったRFCを見てみましょう。 RFC JIT 賛成50反対2で受理。 PHP8の目玉、JITです。 PHPをネイティブコードにコンパイルし、さらにコンパイルした結果を次のリクエストに使い回すことができます。 速度はOpcacheがオンの状態から平均的に1.3-1.5倍程度、さらにCPUバウンドな処理なら3倍以上という劇的な高速化が見込めます。 Opcache無しからだと、1分かかっていた

仕事で Netlify にデプロイしたSPAの読み込みが遅いので原因を調査してほしい、という依頼を受けてウェブパフォーマンス調査を行った。顧客から許可をもらって、この記事ではNetlifyに対してどういう調査をしたのかを書く。 結論だけをまず書くと、NetlifyのCDNのファイル配信パフォーマンスは日本国内からだと非常に悪い。パフォーマンスを改善させるためには、Netlifyに直接アクセスさせるのではなく、前段に他のCDNやキャッシュサーバを挟んだりするほうがいいだろう。 調査の前提 日本国内からのみの調査 サイトには静的なファイルをデプロイしているのみ 該当するNetlifyにデプロイしたSPAをブラウザで試しに開いてみると、確かに初回の読み込みのパフォーマンスがめちゃくちゃ悪い。 Chrome Devtoolsを開いてネットワークタブでどういうふうにリソースの読み込みを行っているのか

Windows 10 バージョン2004 ビルド19041(通称、May 2020 Update)では、WSL(Windows Subsystems for Linux)がバージョンアップしました。WSL2+Docker Desktop for WindowsでAWSサーバレス開発環境を改善してみようと思います。 データアナリティクス事業本部の藤川です。2020年5月下旬に、Windows 10 バージョン2004 ビルド19041(通称、May 2020 Update)が正式にリリースされました。Windows版Dockerユーザにとっては待望のWindows Updateになりました。 最近、Macで開発する方が増えていると思います。クラウド/WebサービスはLinuxで運用するケースが多く、UNIX由来のOSであるLinuxやmacOSとの親和性が高いこともあり、これらOSが開発環境

「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、

Vue.js 2.3.0から実装された 「.sync 修飾子」がVue.jsを書いていると陥るよくある困りごとを解決したので紹介します！ サンプルコードはこちら↓ https://github.com/harhogefoo/vue-sync-modifier-sample 対象読者 Vue.js 経験者 子コンポーネントに複数のプロパティをバインドさせたい人（Object型も含む） これから大量の入力フォームを子コンポーネントに分割して実装していくんだぜ...な人 よくある困りごと 例えば、新規作成(new)、 編集(edit)それぞれのページの共通のフォームのコンポーネントを実装する場合、 そのコンポーネントにフォームの情報を持つObject型のプロパティを渡したくなりますよね。 Vueでは、プロパティを渡した先でプロパティの情報を更新しようとすると、 以下のようなwarningログが出

この記事について NuxtとFirebaseを使って、これまでいくつかサービス開発をしていますが、認証/認可の実装はどのサービスでも毎回同じようなコードを書いている気がします。 サービスとしてのコア部分ではないですが、センシティブな部分なのでしっかりと調べながら実装すると結構大変ですよね（毎回時間がかかってしまいます）。 ここ最近のサービスはNuxt +Firebaseで開発することが多く、認証 / 認可のコードベースのTipsが貯まってきたので公開したら需要あったりするのかな？ サンプルになりそうなプロジェクト見当たらないし、コアな部分ではないのであまり楽しくないし...。 雛形のプロジェクトとして需要あれば公開します👍 — フジワラユウタ | SlideLive▶️ (@Fujiyama_Yuta) June 7, 2020 自分だけではなく、いろんな人が同じような課題感を感じている

……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？　……水割り？　わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？　……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0

リモートワークを長期的に続けるには、何かと工夫が必要だなと感じていて、ずっと筋トレ不足を解消したいと考えていました。昨日、懸垂バーを買ったらネジが一本しか入ってなくて、全く使えない鉄屑を前にネジが一式送られてくるのをまだかと待ちわびているlinyowsです。みなさん元気にお過ごしですか？ 今日は、「GitHub Actionsで「ロリポップ！」「ヘテムル」をもっと便利に使おう」の記事の続編？にあたる、ブログやサイトを作る上で欠かせないWordPressを、低コストに爆速にする方法をご紹介します。少し、難易度は上がるかもしれません。 WordPressは、利用方法の一つとしてレンタルサーバーに設置して使います。レンタルサーバーは、サーバーリソースを利用者と共有することで安価になるのですが、リソースを共有している以上、パフォーマンスに優れているわけではありません。Googleは、マルチデバイス

SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では

初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例

2019年8月にリリースされた Git 2.23 から，Experimental（実験的機能）として新コマンド git switch と git restore が使える．今までずっと使ってきた git checkout は機能が多すぎたため，機能を分割し git checkout の代替としてリリースされた．個人的にリリースされてから，できる限り git switch と git restore を使うようにしてるけど，まだ無意識に git checkout を使ってしまうこともある．最近 git switch を教える機会があったため，ブログにまとめておく． github.blog なお，以下の検証は Git 2.26.0 を使った． $ git --version git version 2.26.0 1. git switch を使う git switch を使って「ブランチ操作」