どうもフロントエンドエンジニアのoreoです。今回は、Promiseについて再整理します。 １ 同期処理と非同期処理 ブラウザにおいて、JavaScriptは主にメインスレッド上で実行されます。処理はコールスタックに積まれ、後入れ先だし(LIFO)で、実行されています。同期処理では、一つの処理が完了するまでは、次の処理に移行しません。 一方、非同期処理は、処理がコールスタックから一時的に切り離され、コールバックキュー(※)に処理が格納されます。コールスタックに処理が積まれている状態では、コールバックキューに格納された処理は待ちの状態になります。コールスタックの処理が空になれば、コールバックキューに格納されている処理が、イベントループによって、先入れ先出し(FIFO)でコールスタックに積まれ処理されます。 ※コールバックキューについて コールバックキューにはマクロタスク、マイクロタスクの2種

2022年9月1日現在、このブログはmarkdownファイルからHugoを使って静的サイトを生成し、GitHub Pagesで公開しています。元々GitHub Pagesにページをデプロイするには、生成済みページを入れた専用のブランチ(一般にgh-pages)を用意するか、生成済みページを入れたディレクトリを用意するか、という二択で、いずれにせよページを生成してから生成されたページをGitHubにpushする必要がありました。前者の場合gh-pagesブランチはmainないしmasterブランチとは一切関係の無いコミット履歴となり、ぱっと見よく分からないですし、後者の場合gitのcommit logにサイト生成のコミットが入ってしまいきれいではありませんし、CIでbuild/pushをしている場合ローカルに毎回pullする必要も発生します。当サイトでもgh-pagesブランチに生成済みペー

最近ではWebサイトを構築する際にWordPressなどのCMS（コンテンツ管理システム）を利用することが多いが、今日でも静的なHTMLファイルを使ったサイト構築には多くのメリットがある。今回は、こうしたHTMLファイルベースのサイト構築を支援するHTMLファイル生成ツール「Hugo」を紹介する。 静的ファイルでサイトを作るための支援ツール「Hugo」 コンテンツの作成や編集の容易さから、昨今ではWebサイトを構築する際にCMSを利用する例が多い。ただ、CMSを使用するにはCMS自体のインストールや設定、データベースの準備などが必要であるため、更新頻度の低いサイトやページ数の少ないサイトでは静的なHTMLファイルを使って構築したほうがコストが低くなる場合がある。 とはいえ、HTMLファイルをいちいち手動で作成するのは楽ではない。そのため、HTMLファイルを半自動生成するようなツールが数多く

Software Design and Architecture is pretty much its own field of study within the realm of computing, like DevOps or UX Design. Here's a map describing the breadth of software design and architecture, from clean code to microkernels. Translated by readers to: Japanese (日本語) You ever think about what it took for some of the world's most skilled developers to learn how to build systems within compan

{ // main "main": { "prefix": "_main", "body": [ "from sys import setrecursionlimit, stdin", "from collections import defaultdict, deque, Counter", "from itertools import permutations, combinations, product", "from functools import lru_cache", "from bisect import bisect_left, bisect_right", "from heapq import heappush, heappop", "from copy import copy, deepcopy", "from decimal import Decimal", "#

はじめに Java言語で学ぶデザインパターン入門を読んでみたのですが、そのまま読んだだけだと内容が頭に入ってこなかったので、学習のコツだったり、勉強してまとめた結果だったりを記事にしてみました。 学習のコツ GoFの23のデザインパターンを，Javaで活用するための一覧表　（パターンごとの要約コメント付き） ↑こちらのサイトをかなり参考にさせていただきました。 特に重宝したのがレベル別の4分類。 「どこから手をつけたら良いのか分からない。」「こんなパターン本当に使うの？」と思っていた自分にとっては、学習の優先順位がついたおかげでかなり捗るようになりました。 学習の優先順位×パターンの目的を表にしたものがこちらです。 プログラミングのセンスがあれば，言われなくても自然に使うもの パターンの名前自体が有名で，あちこちで使われているもの 独力で思いつくのは困難だが，一度ちゃんと学べば，驚くほどプ

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

Goの軽量Webアプリケーションフレームワーク(Echo, Gin)のディレクトリ構成 Golangの軽量Webアプリケーションフレームワークである、EchoやGinを使うとRuby on Railsのようにディレクトリ構成が特に決まっていないため、どのようにすれば効率的に開発できるのか悩みます。 しかし、最近いくつかGinやEchoを使ってAPIサーバを作成し、なんとなくディレクトリ構成が決まってきたので、共有します。 以下のリポジトリは後述する自動リポジトリ生成コマンドで生成されるプロジェクトの雛形です。 これについて説明をしていきます。 まずディレクトリを木構造で表示すると以下のようになります。 ├── README.md ├── config │   ├── config.go │   └── environments │   ├── development.yml │   └──

Google Cloud Japan のメンバーが書く Advent Calendar 2022 です。今回は例年と違い、通常版と、今から始める方向け版の２種類の Advent Calendar を実施いたします！ 各部門の人達が是非紹介したい機能、いままで培ってきたノウハウ、知っておくと便利な Tips などを公開予定です。 記事は毎日更新されていきますが、公開予定記事のトピックのみ最初に公開いたします！ぜひ毎日チェックしていただけると嬉しいです。 この Advent Calendar は Google Cloud 製品などに関連するコミュニティが記載したテクニカル記事集です。掲載された意見はすべて著者個人のものであり、必ずしも Google のものを反映するものではありません。 通常版 12/1 DORA 2022 度版 State of DevOps Report 12/2 カスタム

はじめに この記事はNuco Advent Calendar 2022の5日目の記事です 対象読者 Pythonが注目されている理由のひとつは機械学習プロジェクトの主要な開発言語であるからといってもよいでしょう。多くの企業の業務システムのAIの開発言語はPythonです。そんなPythonの学習を始めてある程度文法の理解が進んできて、機械学習に触れてみたい方を対象にしています。 Pythonの基本文法を理解している 機械学習を始めてみたい チュートリアル概要 Pythonは長年機械学習で使用されているので、ライブラリも豊富にあります。本記事では機械学習用ライブラリのscikit-learn(サイキット・ラーン)を使用して教師あり学習を行い住宅価格を予測してみます。 何ができるようになるか 機械学習で使われる基本的な用語を理解し、学習の全体像をつかめるようになります。 機械学習の目的 機械学

最初に結論 結論からいうと、できた物はhttps://github.com/Diwamoto/yource/blob/main/docker/docker-compose.ymlにあげてます。 dockerはhttps://github.com/Diwamoto/vagrant-lampの環境で動かしています。 docker on macが遅いみたいなのでこちらをおすすめ。 僕は新しくmacを買ってからdocker on macは利用していないので速度の比較はしてません笑 何をやったかを知りたい人は以下をみてください。 やりたかったこと golangフロントエンドフレームワーク（今回はvue）の勉強をしたかったので２時間くらいでdockerの環境を作りました。 イメージはこんな感じで 上記イメージ図から、作るべきdockerのコンテナは ・ データベース(mysql5.7) ・ バックエン

この記事は個人開発Advent Calendar 2022 ３日目の記事です。 こんにちは。はじめまして。れとるときゃりー(@retoruto_carry)と申します。 もう2022年も終わりますね。 ここ数年、ブログ記事を書いていませんでした。 2022年に作ったものを振り返ろうと思ったのですが、２年半ほど前に、いままで作ったものを振り返る記事を書いた後、紹介してないものがたくさん溜まっていました。 それらを含めて、ここ２年半で作ったものをサクッと紹介しようと思います。 2020年〜 TwiCall サービスURL 関連記事 解説スライド 制作時期 2020年4月~5月(２ヶ月） 使用技術 Nuxt.js, Fireabse, skyway, tailwind 解説 ツイッターで１対１の通話を募集するサービスです。 ちなみに、当時はClubhouseやツイッタースペースなどはありませんで

概要 webサービスを公開するにあたって必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。 レンダリングの流れ ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送ります。その後サーバはクライアントに対してレスポンスします。以降のレスポンスとして受け取るHTML,CSS,Javascriptをどう処理して画面に表示するのかをレンダリングと定義して、その処理の流れについてみていきます。(この工程はcritical rendering pathと呼ばれています) ブラウザがWebページをレンダリングする仕

この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W

はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな

日付（Date型）と時刻（TIME型）の結合 Date型 + Time型 = TIMESTAMP型 SELECT column_date + column_time FROM table; SELECT * FROM table WHERE column_date + column_time <= '2019/03/01 10:00:00'; Where句で使うと日付を跨いだ範囲指定にも対応できるのが嬉しいです。取得するレコード数が多い場合、Where句で使用するとパフォーマンスが激遅になるので注意です！ 日時を加算、減算をする interval (TIMESTAMP, DATE, TIME) + interval ‘N xxxxxx’ SELECT column_time + interval '30 minutes' FROM table; TIMESTAMP型、DATE型、TIME型

Visual Studio Code（以下、vscode）の設定には、「ユーザー設定」と「ワークスペース設定」の2種類が存在している ユーザー設定は、その人個人の設定を設けることができ、 ワークスペース設定は、ワークスペース毎の設定を設けることができる ワークスペース設定の利用ケースとしては、プロジェクトに参加した人全員に同じ設定を施したい場合で有効です また、優先度が存在しており、「ユーザー設定」より「ワークスペース設定」の方が優先される ここでは、ワークスペース設定のやり方のみを記載します wsl(ubuntu)の利用を想定し、プロジェクトをワークスペースで展開している状態とします 設定ファイルの作成