JavaScript における文字コードの初歩 - 30歳からのプログラミング
この記事では、 JavaScript で文字コードを扱う際に知っておくべき概念である Code Point や Code Unit、サロゲートペア、といったものについて説明していく。 また、具体的にそれらの概念を使ってどのようにコードを書いていくのかについても扱う。 この記事に出てくるコードの動作確認は以下の環境で行った。 Deno 1.26.0 TypeScript 4.8.3 Code Point （符号位置） プログラムで文字を表現する方法は複数あるが、 JavaScript では Unicode という方法を採用している。 Unicode ではあらゆる文字に対して一意の値を割り振ることを目的としており、この値のことを Code Point （符号位置）という。 Code Point は 16 進数の非負整数で、文章中で表記するときは接頭辞としてU+をつける。 例えばAという文字の
Service Worker のライフサイクルとスコープを理解する - 30歳からのプログラミング
Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していないと、意図した通りに動かせず、古い Service worker が動作し続けてしまうなどの不具合を起こしてしまう恐れがある。 そのためこの記事では、Service Worker はどのようなライフサイクルを辿るのかを見ていく。 また、Service Worker の挙動には「スコープ」という概念も影響してくるため、スコープについても説明する。 プッシュ通知やオフライン対応などの、Service Worker を使うとどんなことが出来るようになるのか、といったことについては扱わない。それらの機能の基盤である
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
webpack のコード分割の初歩 - 30歳からのプログラミング
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
package.json やロックファイルによるパッケージの依存関係の管理 - 30歳からのプログラミング
この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 特に npm はバージョンによって動作が大きく異なるので、注意する。 package-lock.json によるバージョンの固定 package.jsonだけではインストールするパッケージのバージョンを固定できず、package-lock.json（Yarn の場合はyarn.lock）によってバージョンを固定する。 多くの人が知っている話ではあるが、重要な機能なので改めて触れておく。 package.jsonのdependenciesやdevDependen
『WEB+DB PRESS Vol.107』の「実践CircleCI」を読んだ - 30歳からのプログラミング
職場にあったので何となく目を通してみたら、思ったより初歩から説明してあったのでちゃんと読むことにした。 gihyo.jp CircleCI、というかCIについてはほとんど何も知らないレベルだったが、ちゃんと入っていけた。 最後のほうは流し読みだから大した知識は身についていないが、取っ掛かりを持てたという意味で、意義はあった。 以前の記事に書いたように自分のサイトを構築し直してCircleCIでビルドやデプロイを行えるようにしたのだが、そのキッカケもこの特集を読んだことだった。 すごく難しい印象があったけど、「複雑なことをやろうとしなければ結構いけるかもしれない」と思えた。実際、いけた。 numb86-tech.hatenablog.com すごく便利だし、強いプログラマたちに少し近づけた気がして楽しかった。 敷居が高そうな技術でも、興味があったりいずれ習得する必要があると思っているのなら、
Prettier に再入門する - 30歳からのプログラミング
2017年に登場し、あっという間にJavaScriptコードフォーマッタのスタンダードになったPrettier。 github.com 非常に簡単に導入できるのだが、それゆえに、よく分かっていなくても使えてしまう。 導入時に設定ファイルをコピペするだけでどうにかなってしまうし、一度導入してしまえば、触ることはあまりない。 それではいかんということで、復習を兼ねて、導入方法や設定方法を調べた。 まずはPrettier単独での使い方を書き、次にESLintと組み合わせて使う方法を書く。 環境は以下。 node 10.9.0 npm 6.2.0 eslint 5.5.0 prettier 1.14.2 eslint-config-prettier 3.0.1 eslint-plugin-prettier 2.6.2 Prettier を単独で使う まずはインストール。 npm i -D pret
ESLint に再入門する - 30歳からのプログラミング
JavaScriptを書く上で必須のツールであるESLintだが、自分はあまりちゃんと理解していない。 最初に設定してしまえばその後はあまり手を加えないし、加えるときも都度調べて対症療法的に対応しているから、基礎は分かっていない。 取り敢えずairbnbをextendesしておけば間違いない、くらいの理解。 だがESLintはコードを整理して綺麗にしていくための必須かつ強力なツールだし、新しい環境を作るときにいちいち躓くのも面倒なので、調べることにした。 Lintとは何か、何が素晴らしいか、みたいなことは書かない。個々のルールについても書かない。 ESLint自体の使い方、のような内容を書いていく。 環境は以下。 node 10.9.0 npm 6.2.0 eslint 5.5.0 特に断りが無い限りsrc/に対象のJSファイルが入っている。 そうすると$ npx eslint src/で
『プログラミングの基礎』を読んだ - 30歳からのプログラミング
ゴールデンウィークを使って読み進めて、ようやく読み終わった。 浅井健一『プログラミングの基礎』サイエンス社 タイトル通り、プログラミングの基礎を学んでいく。言語はOCaml。 リストや木構造などの簡単なデータ構造やアルゴリズムについても学んでいく。 Gitを使って内容をまとめながら読んだ。 赤黒木の挿入の説明がよく分からなかったのと、最後のヒープについては飽きてしまったので、やってない。 それ以外は一通りやった。 読もうと思ったキッカケとなったのは、この記事。 19: 読んでよかった技術書 – kdxu – Medium 憧れているプログラマが「プログラミングの作法の9割はこの本から学んだ」と言っていたので、興味を持った。 OCamlというのもいいなと思った。 プログラミングが上手くなるためには関数型言語をやるといいとどこかで読んだし、今は型の強い言語が人気だし。 JavaScriptに型
ウェブエンジニアがサーバーを管理していくための初歩 - 30歳からのプログラミング
インフラについて調べていたので、その備忘録。 調べていく上で重視したのは、概念や概要を知ること。細かい知識はあとでいくらでも調べることが出来るが、土台となるものがなければ調べることすら出来ない。 「公式ガイドやハウツー記事に従って設定したけど、俺は今、一体何をしているんだ？」という状態から抜け出したかった。 具体的なコマンドよりも、そもそも何をしているのか、そしてそれは何のために行っているのかを、把握できるようになりたかった。 そもそもサーバーってなんだ 一口にサーバーといっても、多義的。 まずこれを区別していないのが、混乱の元だった。 初学者は「サーバー」と言っている時に具体的に何を指しているのか、意識したほうがいい。 まず最初に存在するのが、ハードウェアとしてのサーバー。 これはただのコンピュータであり、中身が入っていなければただの箱である。 VPSやクラウドなどで、本当に物理的にコン
入社からの半年間でコードレビューで指摘されたことのまとめ - 30歳からのプログラミング
実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我ながらうんざりする。 せっかく優秀な同僚ばかりなのだからもっと高度なことを学びたいが、こういう初歩的なことが出来ないのが俺の現状なのだから、仕方ない。 そもそもPullRequestを送ったこともなかったわけだし。入社初日は、一人でPullRequestの出し方を練習していた。 それを考えればまあ、こんなものだろうか。 当たり前のことをちゃんと当たり前に出来るようになって、早く、次のステージに進みたい。 PullRequest(PR) PRのタイトルは分かりやすいものに。必要に応じてチケットの番号なども入れる。 コミットやPRは出来るだけ粒度を細かくす
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
