はじめに 前回自作でTCPIP+HTTPを実装して動作を確認することができました。 しかしご覧頂いた方はおわかりのように、通信はHTTP=平文でやり取りされておりパスワードなど機密情報が用意に見れてしまう状態です。 普段我々がブラウザに安心してパスワードを入力しているのは通信がTLSで暗号化されているからです。ではそのTLSの仕組みはどうなっているのでしょう？ 恥ずかしい限りですが僕はわかりません。😇😇😇 ということで以下を読みながらTLSプロトコルを自作してみてその仕組みを学ぶことにします。 マスタリングTCP/IP情報セキュリティ編 RFC5246 プロフェッショナルSSL/TLS 今回の実装方針です。 TLS1.2プロトコルを自作する 暗号化などの処理はcryptパッケージの関数を適時利用する tcp接続にはconnectを使う 鍵交換はまずRSAで作成する TLS_RSA_W

RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar

はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ

【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りましたRubyRails正規表現TypeScriptReact はじめに はじめまして！ 個人開発者のハガユウキと申します。 突然ですが、皆さん正規表現はお好きですか？ 私は好きです。「複数の文字列を一つのパターンで表現できる」部分にすごく面白味を感じています。 もっといろんな方に正規表現を知っていただきたい、好きになってほしいと思っています。 しかし、現状では2つの課題があると感じています。 正規表現の勉強自体がそもそも面白くない。 正規表現を勉強しても、しばらく使わないと忘れる。 この2つの課題を突破できるサービスは、現状存在しません。 そのため、楽しみながら正規表現を学べるサービスがあれば良いなと思いました。 作りました。 ▼スライド型正規表現学習ゲーム【Reg

VTeacher所属のSatomiです。 ※ 本家Miroさんからコメントをいただいたので掲載します！ ミロジャパン高山です。本記事ではMiroについてご紹介頂き誠にありがとうございます。大変参考になります。もし本記事の趣旨にあっていればですが、以下の２つのテンプレートを日本語対応をしましたので、よろしければ、リンクを付与頂けますと嬉しいです。 スクラムボード：https://miro.com/ja/online-scrum-agile-tool/ マインドマップ：https://miro.com/ja/mind-map/ 或る日突然、「100万円のプロモーション予算がついたから急いで作って」と頼まれました。 ※ちなみにプロモーション予算（100万円）に人件費は含まれないそうです。 そして、偉い人から下の画像が送られてきました。 （「4月1日に夢を語る」という PR TIMES の企画だそ

なぜシェルスクリプトで高度なデータ管理にSQLiteを使うべきなのか？ ～ UNIX/POSIXコマンドの欠点をSQLで解決するShellScriptUNIXSQLitePOSIXQiitadelika 「利用者は数十億人！？ SQLiteはどこが凄いデータベース管理システムなのか調べてみた」の続きです。 はじめに 複雑な構造のデータを扱うのであればシェルスクリプトや Unix (POSIX) コマンドでデータ管理を行うのは避けるべきだと思います。解決不可能な問題が多いからです。しかしそれでも何かしらの理由でやろうと考える（やらなければいけない）のであれば SQLite を使うのをおすすめします。シェルスクリプトや Unix コマンドは行単位の単純なテキストデータをシーケンシャルにデータ処理するのが前提となっており、改行や空白が含まれるデータや複雑な構造のデータ扱うのは苦手です。またシェル

本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド

かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:mizdra の今の npm-scripts を書く時の手癖を書き連ねてみる。 基本形 { "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development", "lint": "eslint .", "test": "jest" } } 一番シンプルな npm-scripts を書く時のパターン。以下の 4 つの script を登録している。 buil

サマリとある通販サイトにて「 メールアドレス・パスワードを保存する」機能がありますが、サイトにクロスサイトスクリプティング(XSS)脆弱性がサイトにあると生のパスワードが漏洩する実装となっています。本稿では、この実装方式を紹介し、なぜ駄目なのか、どうすべきなのかを紹介します。 記事の最後にはセミナーのお知らせを掲載しています。 はじめに家人がテレビを見ていて欲しい商品があるというので、あまり気は進まなかったのですが、その商品を検索で探して購入することにしました。「気が進まない」というのは、利用実績のないサイトはセキュリティが不安だからという理由ですが、この不安は的中してしまいました。 最初の「えっ?」はパスワード登録のところでして、パスワードを再入力する箇所で「確認のためもう一度、コピーせず直接入力してください」とあるのですよ。私は乱数で長く複雑なパスワードを入力しかけていたのですが、コピ

はじめに 2年半前の私は、IT系の会社に勤めている30代後半の平凡なサラリーマンでした。 その時点では、社外での発表経験なし、社外での勉強会の参加経験なし、技術記事の投稿経験なしでした。 そんな私が発信活動を始めたことで人生が変わりました。 今は凄く楽しいエンジニアライフになり、以下のような事が起きました。 複数のITエンジニア向けコミュニティに所属して楽しく交流 「Serverless LT初心者向け」というコミュニティを立ち上げて運営 Developers Summit 2020 KANSAI でベストスピーカー賞1位を受賞 ITエンジニア向けの月刊誌「Software Design」で連載記事を執筆 すべては発信活動を始めた事がきっかけでした。 発信活動を始めると素敵な事がいっぱいあると知ってもらう事で、発信活動を始めるきっかけになれば幸いです。 (長いので要点を知りたい人は太字のみ

本番のサイトを眺めていて、「あーここのHTMLこうしたら、もっと速くなるのになー」って思う時ありますよね。 僕はあります。でも、検証するだけのために、プロダクトのコードを直接いじるのは大げさ。 そんな時に、wgetとmirrorというコマンドを使ってページをダウンロードして「ほんの少し」HTMLを変更しています。 紹介します（追記にLocal Overridesという「そのものズバリな」Chromeの機能も紹介してます）。 最近あった話です。特にCore Web Vitalsとか速度改善について。 トラベルブックのとあるページのスコアが落ちていて、Chrome DevToolsで観察してみると、どうもYouTubeの埋め込が足を引っ張っている。 表示領域外にも関わらずiframeの中身がロードされています。 これは直したい（本来なら本番へ上げる前に気づく仕組みを作りたいのですが、一旦置いて

モノタロウのCRMグループでバックエンドエンジニアをしている新盛です。 モノタロウのCRMグループでは、主に顧客管理を中心に、フルスクラッチの基幹システムを運用しつつ、部分的にパッケージソフトや最新の技術を導入することで、増加する売上を支える事ができるシステムを目指して、システムのモダナイズに挑戦しています。 note.com モダナイズを進めると新技術を用いたシステムを取り扱う機会が必ず訪れます。従来の業務に支障なく、新しい技術を取り入れるためには様々な工夫が必要になります。 今回は引継ぎという場面で定常業務への影響をなるべく抑えて環境構築の容易化と開発者体験の両立を実現するためにDockerコンテナが活用できた話をします。 背景 課題 開発環境をDockerでコンテナ化するメリット Dockerコンテナを用いた環境構成 Dockerコンテナのシステム要件 DockerコンテナからDoc

こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…！ GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成（API Gateway + Lambda + DynamoDB + α）のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま

はじめに Dockerを用いた開発では、適切にキャッシュを用いることで高速にビルド・開発できます。そのための知見は様々な記事で共有されており、ありがたい限りです。 しかし、「Dockerのキャッシュ」と言っても開発時とCI・CDでは行うことが違います。 この記事ではDockerを用いた開発における、各段階のキャッシュ機能を確認したいと思います。 主に「Dockerのキャッシュ」というと以下の4つに分類できると思いますので、それぞれについて解説していきます。 Dockerのレイヤーキャッシュを活かす a. COPY・ADDの順番 b. dockerignoreの設定 c. マルチステージビルド buildkitによるキャッシュ a. --mount=type=cache CI・CDにおいてのキャッシュ a. 前回のビルドキャッシュを持ち越して使う リモートキャッシュ a. 開発者が初めてビル

はじめに 10 年前の今日、2012/02/03 に Just Quick Search という iOS アプリをリリースした。 個人で開発を行い、100% すべての要素を自分で考え作り上げてきた。 今日はこのアプリに関する 10 年間の思い出と技術的な部分についてをアツく語りたいと思う。 アプリ紹介 Just Quick Search は検索補助アプリである。 このアプリを使うと普段 iPhone で行っている 検索 というアクションをほんの少しだけ 速く 実行できるようになる。 以下がキーワード iphone を検索している時の挙動だ。 ip と入力したところで候補に出てきた iphone をタップし、キーボード右下の search をタップすると Safari が立ち上がり Google での検索結果が表示されるというものである。 メインの機能はこれだけだ。 一見ただ検索をしているだ

JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。

はじめに こんにちは。WEBエンジニアのmasakichiです。 OSSを始めたいと思いながらも「なにから始めたらいいかわからない…」と悩んでいませんか？ そんなOSS未経験者にGood First Issueというリポジトリをお勧めしたく記事にしました。 この記事で書いてあること この記事には以下の2つが書いてあります。 Good First Issueについて Good First Issueからコントリビュートするまでの流れ（経験談） Good First Issueとは OSSにコントリビュートしたことのない開発者でもすぐに始められる人気プロジェクトをピックアップしたキュレーションサイトです。 プロジェクトのリンク先はgithubリポジトリで管理されています。 リポジトリはこちら キュレーションサイトはこちら Good First Issueでは下記の基準を満たしたプロジェクトがピ

「仕事日記を書くといいですよ」という話をする機会があったので、日々の仕事をスムーズにするシンプルな「日記駆動仕事術」について書いてみました。 日記書くといいですよ prismatix事業部の塩谷(@kwappa)です。 他部署の人と1on1する機会があり、その中で「日記書くといいですよ」という話をしました。 そういえば以前からことあるごとに「日記書きましょう」と言い続けていたのですが、ちゃんとコンテンツにしたことはなかったような気がします。 せっかくの機会なので、日記駆動の仕事術とその意義について書いてみます。 日記駆動仕事術 これはぼくの1月の日記（架空）です。Notionを使って、1か月に1ページ使うようにしています。やり方はシンプルなので、手に馴染んだツールで置き換えることも簡単だと思います。 タイムラインとしては、1/31(月)の業務を開始したところ、だと思ってください。 TODO

やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド