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

NTT データ数理システムでリサーチャーをしている大槻 (通称、けんちょん) です。今回は計算量オーダーの求め方について書きます。 0. はじめに 世の中の様々なシステムやソフトウェアはアルゴリズムによって支えられています。Qiita Contribution ランキング作成のために用いるソートアルゴリズムのような単純なものから、カーナビに使われている Dijkstra 法、流行中のディープラーニングに用いられている確率的勾配降下法など、様々な場面でアルゴリズムが活躍しています。アルゴリズムとはどんなものかについて具体的に知りたい方には以下の記事が参考になると思います: アルゴリズムとは何か ～ 文系理系問わず楽しめる精選 6 問 ～ アルゴリズムを学ぶと $O(n^2)$ や $O(n\log{n})$ や $O(2^n)$ といった計算量オーダーの概念が登場します。こうした記法を見ると

とある日... 👨‍💻エンジニア 「おはようございます〜！」 🙍‍♂️上司 「おはよう！」 👨‍💻エンジニア 「今日も開発するぞ〜！...ん？」 👨‍🦳偉い人 「👨‍💻さんにエンジニア採用お手伝いいただくことになりました！来週からです！」 👨‍💻エンジニア 「...（間違いメールかな？)...上司さん〜これって間違いメールですかね？」 🙍‍♂️上司 「間違いじゃないで。来週からエンジニア採用手伝ってな。」 👨‍💻エンジニア 「...。（急に決まってて草）」 急に「来週からエンジニア採用業務手伝ってね！」と上司から言われた、全てのエンジニアが路頭に迷わないために。 これは何？ 普段採用のことなんて1bitも考えていないエンジニアに向けた、エンジニアのエンジニアによるエンジニアのための採用業務チュートリアル的なものをまとめておきます。 「採用業務で迷惑をかけないよう

NTT データ数理システムでリサーチャーをしている大槻 (通称、けんちょん) です。 今回はソートについて記します。 0. はじめに データ構造とアルゴリズムを学ぶと一番最初に「線形探索」や「ソート」が出て来ます。これらのテーマは応用情報技術者試験などでも頻出のテーマであり、アルゴリズムの Hello World とも呼ぶべきものです。 特にソートは、 計算量の改善 ($O(n^2)$ から $O(n\log{n})$ へ) 分割統治法 ヒープ、バケットなどのデータ構造 乱択アルゴリズムの思想 といった様々なアルゴリズム技法を学ぶことができるため、大学の授業でも、アルゴリズム関連の入門書籍でも、何種類ものソートアルゴリズムが詳細に解説される傾向にあります。本記事でも、様々なソートアルゴリズムを一通り解説してみました。 しかしながら様々な種類のソートを勉強するのもよいが、「ソートの使い方」や

みなさまへのお願いごと 間違いなどの指摘は、編集リクエストでお願いします。 コメントの記載はページが長いこともあり、お控えください。 TOEIC900でも英語が話せない日本人へ ITエンジニアの私がなぜ令和の今、中国語を学ぶのか？ 名詞/イディオム gotcha はまりポイント。注意すべきこと。引っ掛け。 Got you のくだけた表現。捕まえた、誰かをトラップに引っ掛ける、という意味から。 注) 一般的には、Got itやYup、I seeのような、同意の返事でよく使われる。 類) caveat, pitfall There are many gotchas in this application. sought-after (スキル、人材、機能、アプリが) 人気の、需要がある、求められてる、引っ張りだこ Python is a sought-after language. c-suit

はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための

みなさんターミナルは使ってますか？ Terminal.app？ iTerm2？ Hyper？ それとも他の何か？ それではフォントは何を使っていますか？ Menlo？ Consolas？ Ricty？ 今日はそんなお話です。 対象とする読者 ターミナルやエディタでカコイイ等幅フォントが使いたい人。 既存のフォントを FontForge + Python で色々いじって遊びたい人。 プログラミング用フォント SF Mono Square ずっと Ricty を使っていたのですが、色々こだわる余り自分でフォント作ってしまいました。作ったものをそのまま配布するのはライセンス上できませんが、Homebrew で誰でも導入できるようにしています。 brew tap delphinus/sfmono-square brew install sfmono-square # /usr/local/opt/

シェルスクリプト(bash)のif文を書く時、あれなんだっけと忘れることがよくあるので簡単にまとめてみました。 参考 大切なことはこちらに書いてあります if 文と test コマンド 前提知識 if文では条件式に指定されたコマンドの終了ステータスを判定し分岐をしている。終了ステータスが0の場合に真となり、そうでない場合には偽となる if []と書いた場合、if testと書いたことと同じ扱い（[]はtestコマンドの略式） [ "A" = "A" ]というように[]の間にスペースがないとエラーとなる。例えば["A" = "A"]とか書くとエラー。[がコマンドだと思うと理解しやすい 条件式で<,>,<=,>=は使えない。代わりに-lt(<),-gt(>),-le(<=),-ge(>=)というのが使える。それぞれ-lt(less than),-gt(greater than),-le(les

概要 - Overview この辞書を Google日本語入力・ATOK・Microsoft IME などに導入することで、 GitHub, Slack, Qiita のようにコロン : をトリガーとして IME でも絵文字を入力することができるようになります。 「GitHub, Slack, Qiita 以外のアプリケーションでも GitHub, Slack, Qiita のように絵文字を入力したい」 という要望に応えるための IME 追加辞書です。 ちなみに GitHub や Qiita は英語で絵文字を探す必要がありますが、この辞書を利用することで GitHub や Qiita でも Slack のように日本語で絵文字を入力することができるようになります。 GitHub に MIT License で公開しており、現在は 8264 ペアの絵文字とその読みが収録されています。 👇辞書

@types/react の型定義を雰囲気で使っている皆さん、こんにちは。React コンポーネントを書くときはどの型を使い、どう書くべきか？という疑問を Twitter でお見かけし、雰囲気で使っていた私も気になったので @types/react の中身を覗いてみました。 master に入り、いよいよリリース間近な Hooks。本稿は FC(旧SFC) の話が前提です。VScode で型付けをしようとすると、似たような型が山ほど出てきて、どれを使うのが適切なのか・違いが何なのか…パッと見分かりませんね。 ReactNode ReactChild ReactElement StatelessComponent FunctionComponent JSX.Element SFC FC という訳で、こんな Props を持っているコンポーネントの各種書き方を比較、白黒ハッキリさせていきたいと

Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例

はじめに DockerでWordPressサイトを開発してみようがとてもいいスライドでした。 せっかくならこの内容を「操作できる」だけでなく、「理解できる」ようにしたいと思い、スライドの中身をちゃんと調べたのが、このエントリです。 具体的には、各コマンドやDockerfileのソースの調査履歴になります。 各インフラの知識やLinuxコマンドを学ぶことになるため、人によっては一挙に覚えることが増えて混乱するかもしれません。 とはいえ裏を返せば、サーバ周りの知識が一気に身につく感じがしました。 ちなみに筆者のレベルは、Docker覚えたて。下のような内容をこの前知りました。それでもDocker使えるんだから楽しい。 はじめてのDocker for Mac 前提 $ docker --versionが使えるところまでを前提とします。 よって、スライド15枚目までは省略。 WordPressを

【はじめに】自己紹介とご挨拶 こんにちは、@CPAKOといいます。 普段は公認会計士として監査法人というところで働いておりますが、ひょんなことからプログラミングを学んでいる趣味趣味エンジニアです。 今回がQiita初投稿となりますが、自分が実際に勉強をしていて、「これが無料なの？」と思った教材やハンズオンの一覧をまとめていきたいと思います。 基本的に興味が爆散した結果、デザインからフロント、サーバーサイド、インフラ、DB全部手を付けているので、取り留めが無いことをお許しください。 また、秘伝のたれのように継ぎ足し継ぎ足しで書いていこうと思いますので、是非、「これもあるよ！！！」とか、「これ忘れんじゃねえ！！！」などありましたら御指摘頂けると幸いです。 コマンドライン（Linux操作）編 まずは、コマンドライン（Linux操作）です。 急にコマンドラインかよと思うかもしれませんが、残念ながら

◆なるべく切れない回線とはなんですか？ 「落ちないシステムなんてない」 「切れない回線なんてない」 エンジニアの方なら理解してくれると思います。 しかし、理解はしつつも回線断を体験したことがある人はあまりいないのではないでしょうか。 じつはその「あまり」中にあなたが含まれないのは、わりと運が良いだけなのかもしれません。 今日もたくさんの回線が切れています。今もどこかで切れています。月額5000円のベストエフォート回線でも、月額1000万円の10G専有回線でも、切れるときはいつでも切れます。明日もたくさん切れるでしょう。明後日も。来年も。１０年後も。古来電信回線から今後5Gになっても、人類が通信をし続ける限りは切れ続けます。その時に切れるのは、もしかするとあなたに関係があるネットワークかもしれませんし、運良くそんな事態には遭遇しないのかもしれませんし、気づかないうちに復旧しているかもしれませ

JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)JavaScriptdebug初心者初心者向けデバッグ方法 更新 2019/5/20 console.trace()、console.time()、 console.timeEnd()、console.clear()を追記しました。 この記事について JavaScript大好きっ子とよももです！ JavaScriptの上手なconsole.log()の使用方法を調べていたらいろんな使い方があること、console.log()の他にも色々なデバッグ方法があることを知りました。 自分の勉強も兼ねてまとめてみることにしました。 賢いconsole.log()の使い方 例えば... 下記のような３つのオブジェクトがあるとします。

この記事はAkatsuki Advent Calendar 2016の7日目の記事です。 こんにちは、 @shimpeiws です。 アカツキのライブエクスペリエンス事業部で、Webエンジニアをしています。 今日は最近開発しているプロダクト、Wowful(現在β公開中)のアーキテクチャについて書きます。 ※ 今回の記事は以前発表した 2つのスライドの増補改訂版のポジションです。 サーバサイドレンダリング、してますか? BFFにかける期待 Wowfulのサービス面の特徴と技術的な要求 Wowfulはサービスとして以下のような特徴を持っており、 これらの要求を解決できる技術・アーキテクチャの選定を行う必要がありました。 まずはWeb主導で展開する BtoCのサービス 利用ユーザはスマートフォンが多数になる予想 検索からの流入を主な導線として想定 トラフィックが多いページのユーザインタラクション

来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザーの方は、当然 React Hooks の情報を常に追っており正式版がリリースされたらすぐにでも自分のコードで使いはじめる準備ができていることと思います。しかし、この記事をご覧の方々の中には React を使っているにも関わらず「React Hooks のこ

先日、同僚と「世の中のエンジニアはターミナルにどんなalias設定をしているんだろう？」という談義になったので、GitHub上の1000リポジトリのコードから調査してみました。 2019/04/10 コメントを元に微修正しました。コメントくださった方々、ありがとうございます。 2019/04/11 こんなのも書いてみました。 よく使われているvimrcの設定ランキング 2019/04/15 プラグイン版も書きました。よく使われているvimのプラグイン top20 aliasとは wikipediaより UNIXなどにおいてコマンドを別名で登録したもの。別名を登録するコマンド名。 長いコマンドやいつも利用するオプションを毎回入力するのは手間ですよね？ ターミナルの設定ファイルにaliasを記述することで、別名として定義することが可能というわけです。 調査方法 GitHub APIを利用 do

TL;DR VSCode拡張機能おすすめ記事がバズる度に「確かに便利なんだけど 自分が求めているのと違うんだよね〜」となる人向けに いっそのこと自分で拡張機能つくろうぜ👀 というのがこの記事の趣旨。 そしてVSCodeの拡張機能は思っている以上に簡単に作れるってことを全人類に知って欲しい！！ （拡張機能開発を活発化してIDE最強の座を揺るぎないものにするのが目ry Jetbrainsは高いよ 重いよ） また、JS初心者のいい題材にもなると思う！？ 例題としてステータスバーにSlack通知ボタンを配置して、即座にコード（任意のメッセージ）を送信できる拡張機能を挙げる。 開発環境構築 VSCodeが提供しているAPIを使うことでわりかし簡単にいじれる。また、面倒な開発環境も数コマンドで整ってしまう。 （Node.js環境構築済み前提 まだな人はMacならHomebrewからのnodenv経由

社内でKubernetesハンズオンをやってみたのでおすそ分け。 参加者6人からバンバン出てくる質問に答えながらやって、所要時間4時間ほどでした。 SpeakerDeckにも資料を上げています。 https://speakerdeck.com/ktam1219/yaruze-kuberneteshanzuon (2019/07/11追記) 続編書きました！ -> 今度はあんまりゴツくない！？「わりとゴツいKubernetesハンズオン」そのあとに ハンズオンの目標 Kubernetesとお友達になる イメージを掴む 触ってみる(ローカル・EKS・ちょっとGKE) 構築・運用ができるような気分になる 巷にあふれるKubernetesの記事・スライドが理解できるようになる EKSがメインになっているのは、会社の業務でAWSを使うことが多いからです。 純粋にKubernetesを勉強したいだけな