ITエンジニアは電子印鑑の夢を見るか?

はじめに

法人設立時の印鑑届出義務について、話題になっています。

“デジタル法案”骨抜きに? 印鑑業界が反発:ニュースモーニングサテライト:テレビ東京

その是非はさておき、印鑑が必要であることが想起される銀行であっても、(ネット専業銀行でなくとも)口座開設に印鑑が不要であることは既に珍しくはありません。

印鑑レス口座について | 三菱UFJ銀行

口座開設時に印鑑が不要、開設後も印鑑なしでお取引可能です。

「無印鑑口座利用のお客さま向け特約」および「窓口でキャッシュカード認証により取引を行うお客さま向け特約」の制定│りそな銀行

本特約は当社で預金口座の取引印鑑の届出なく各種取引を行うお客さまとの取引に適用されます。

店頭での口座開設のお手続き | 新生銀行

印鑑をお届けいただく場合は印鑑をご持参ください。

新生銀行ではご印鑑のほか、お客さまのサイン(署名)をお届けいただくことができます。

アナログなイメージの強い銀行ですら印鑑レスが進んでいるわけですが、印鑑文化から最も縁遠いであろう(?)ITエンジニアの職場での印鑑事情はどうなっているのか、twitter上でアンケートを取ってみました。

目次

アンケート方法

以下のツイートで2日間集計しました。

  • 総務・人事が絡むような庶務手続きを除外するために対象を「開発・保守運用に直接関わる手続き」に限定する注意書きをしました。

  • SIerとWeb系企業で違いが出るかも興味があったので、その点も質問に加えました。なお、SIer、Web系企業の定義は特に示していません。投票いただいた方の自身の職場(常駐先)に対する判断に委ねています。

集計結果

257票もの回答をいただきました。ご協力ありがとうございました。

上記のツイートの投票結果表示だけではわかりづらいので、整理したのが以下になります。

ITエンジニア全体

必要、不要でおおよそ半々に割れました。

思ったよりも必要な割合が高いんだな、という印象を私は持ちましたが、いかがでしょうか?

f:id:shonansurvivors:20190315051913p:plain

SIerおよびWeb系企業

面白かったのが、企業タイプ別の結果です。

f:id:shonansurvivors:20190315052047p:plain

f:id:shonansurvivors:20190315052106p:plain

SIerは70%で必要となり、逆にWeb系企業で必要なのは28%に留まる、と大きな違いが出ました。

どんな手続きで印鑑が必要か

これに関しては回答が得られなかったのですが、経済産業省が作成している「システム管理基準 追補版(財務報告に係るIT統制ガイダンス)」を見ると、最後の方に

システムの変更および保守管理については、変更管理手続に従っている(標準化され、記録され、承認され、文書化されている)

という承認プロセス基準の一例に対し、

25件のうち1件、承認漏れがあったが、責任者の押印漏れであり、実際には、承認されているとの説明を受けた。25件の追加テストの結果、押印漏れはなく、単なる押印漏れのミスであると判断した

といった、文書化と押印を前提とした評価結果の事例がありました。

こういった場面で、印鑑が使われているのだと思われます。

最後に

ということで、ITエンジニアの職場といえど印鑑は根強く生き残っているようです。

開発や保守で「承認」という行為が欠かせない場面はあるかと思うので、そこがうまく印鑑レス、ペーパーレスの仕組みになれば良いですね。

アンドロイドは電気羊の夢を見るか?

アンドロイドは電気羊の夢を見るか?

ブレードランナー 2049(初回生産限定) [Blu-ray]

ブレードランナー 2049(初回生産限定) [Blu-ray]

プログラミングを学び、Web系エンジニアへの転職が決まるまで

はじめに

今年2019年1月からWeb系エンジニアへの転職活動を行っていましたが、このたびWeb系の自社開発企業(自社のWebサービス等を外注せず社員で内製開発・運営している企業)から内定をいただき、入社を決めました。

目次

転職の動機とその活動記録

2018年5月〜11月:転職をまだ考えていなかった時期

現職は非IT系企業にてプログラミングを一切行わない仕事をしているのですが、担当するWebサービスや社内システムの改善が様々な事情・制約で思うようには進まない中、現状を少しでも変える為、また自己研鑽の目的で、昨年2018年5月から独学でプログラミング(Python)の勉強を開始しました。

そして半年後の2018年11月、個人開発でWebサービスを完成させたことを機にそれまでのプログラミング勉強法をブログにまとめ*1、初めて作ったtwitterアカウントで告知をしたところ、はてなブックマークのホットエントリー入りするなどしました。

プログラミングでのモノ作りそのものに加えて、その成果や学びをブログやtwitterで発信することの楽しさに目覚めた私は、GitHubやQiitaのアカウントも取得し、アウトプットを継続していきました。

また、connpassに登録されている勉強会やもくもく会にも参加し、Web系エンジニアの方々との交流も開始しました。

2018年12月:転職を意識し出した時期

こうした活動を通じて、趣味や自己啓発ではなく本業としてWeb系エンジニアの世界に飛び込んでいきたいという思いが高まり、12月中旬ごろから転職の為の情報収集を開始しました。

なお、決して若くは無い年齢で家族を抱えながら実務未経験の職に転向するわけですので、上記の「好きが高じて」といった動機だけではなく、他にも現職への様々な思いや自身の将来への考えもある中での転職なのですが、それらも書くとあまりに長くなるので、ここでは割愛します。

2019年1月:転職活動開始

Wantedlyにプロフィールとポートフォリオを掲載の上、1月中旬からWeb系の自社開発企業に絞って面談を申し込みました(企業側から面談のお誘いを受けることもありました)。

また、twitter上でも転職活動開始を宣言。これがきっかけで面談に繋がった企業も僅かながらありました。

1月下旬には実際に企業との面談を開始しました。

2019年2月:各社との面談〜選考面接〜内定

2月は各社との面談、選考面接を順次行いました。

中には技術面接を行う企業もありました(技術面接と銘打っていなくても、技術的な理解度を確認する質問が出る面接もありました)。

最終面接を経て、2月の下旬ごろから内定が出始めました。

2019年3月:オファー面談〜退職に向けた社内調整〜入社承諾

内定を通知いただいた企業とは再度面談(オファー面談)を行いました。

処遇に関しては内定通知書に記載されているので、実務未経験であった私の場合はそこはあまり話題にはせず、内定通知書には書かれていない、Web系エンジニアとしてスキルを伸ばせそうな環境であるかどうかを重視して改めて確認しました。

  • 当面はコードを書くことに専念させてもらえるか(現職でプロジェクトマネジメント経験があることから、その方面の仕事に最初からアサインされたりするようなことがないか)

  • コードレビュー、テスト、CI/CD、Docker活用の取り組み状況

それまでの面談や面接でも同種の質問はしてきたのですが、採否がかかっている面接の場よりも、内定を貰った後のオファー面談の場の方がやはり遠慮なく質問しやすいので、そこで自分が気になる点は納得行くまで確認させてもらいました。

面談後は、現職の上司と退職に向けた調整を行い、退職日も定まった段階で転職先企業へ入社承諾の連絡をしました。

これから

2019年3月末を現職の最終出社日とし、4月は有給を消化、5月から転職先の企業へ入社する予定です。

現職は10年近く働いたこともあり、社内や取引先に知り合いも多く、特に親しい人・お世話になった人には最終出社日までにできる限り会って、これまでのお礼も含め話をしておきたいと思っています(現在進行中)。

4月の過ごし方はまだ計画中です。

最後に

昨年2018年5月の連休中、私は漠然と「プログラミングを学んで簡単なアプリ程度を作れるようになりたい」と思いながら、書店で初心者向けの本を手に取っていましたが、まさかその1年後にプログラミングを仕事にする職に就くことになるとまでは想像していませんでした。

日々の行動を変えることが、自分の考えも変え、(ちょっと大げさな言い方ですが)人生も変えてしまうのだと実感しました。

いずれにせよ、まだWeb系エンジニアとしてのキャリアのスタート地点に立ったばかりですので、これからも変わらずインプット・アウトプットを継続していきたいと思います。

今回の転職活動を応援して下さった方々、本当にありがとうございました!

ちなみに

実務未経験からのWeb系エンジニア転職において、やっておいて良かったこと、面接でよくある質問など、これから転職を目指す方へ向けたノウハウ的な内容は改めてまとめたいと思います。

独学プログラマー Python言語の基本から仕事のやり方まで

独学プログラマー Python言語の基本から仕事のやり方まで

*1:働きながらプログラミングをゼロから学んで半年でWebサービスを作るまでの記録

PyPIへのPythonパッケージ登録方法を解説|ダウンロード数の調べ方も

はじめに

先日、ちょっとした機能のPythonパッケージを作成して、PyPIへの登録やWeb API化などを行いました。

shonansurvivors.hatenablog.com

PyPIへパッケージを登録したのは今回が初めてで、当初はその方法を全く知らなかったため、以下のPythonもくもく会を利用して半日がかりでトライ&エラーにて完了させました。

mokupy.connpass.com

その際のメモをもとに、登録方法をQiitaに投稿しました。

PyPIへのPythonパッケージ登録方法

Qiitaに投稿した記事では、以下の流れに沿って、PyPIへパッケージを登録する方法を解説しています。

  1. テスト環境・本番環境のPyPIのアカウント登録
  2. wheel, twineのインストール
  3. setup.pyの作成
  4. python setup.py bdist_wheelの実行
  5. (任意).gitignoreの編集
  6. (任意)テスト環境のPyPIへのパッケージ登録とpip install
  7. 本番環境のPyPIへのパッケージ登録とpip install

詳細は以下の記事を見てください。

qiita.com

PyPIへ登録したパッケージのダウンロード数を調べるには

PyPIへ登録した自分のパッケージがどれだけ利用されているか(ダウンロードされたか)は気になりますよね。

これに関しては、PePyで調べることができます。

pepy.tech

私の自作パッケージは、一時期Qiitaのデイリートレンド入りしていたということもありますが、1週間で900回もダウンロードされていました。

最後に

自作のパッケージをPyPIに登録すると、

  • 今後そのパッケージを自分自身が別のプロジェクトで使う際にpip installで導入できるので非常に便利

ですし、

  • 他の人にも使ってもらえる、またどれだけ使ってもらえたかを可視化できてやり甲斐にもなる

というメリットがあることを今回実感しました。

今後もPythonで何かの機能を作る際は、パッケージ化してPyPIへ登録することも意識していきたいと思います!

Python版悟空語ジェネレーター「gokulang」を作った振り返り

はじめに

先日、きんみさん(@_kinmi)の悟空語ジェネレーターに触発され、Pythonモジュール版であるgokulangとそのWeb API版を作成して公開したので、その振り返りです。

qiita.com

目次

反響

ありがたいことにtwitter上でもたくさんの方に紹介していただきました。

そのおかげもあって、Qiitaでデイリートレンド入りし、120以上もいいねを獲得しました。

何がウケたか

モジュール化してPyPIに登録したり、Web API化したりと自分としては初の試みを行なっており、作者本人は勉強の意味で実はマジメに取り組んでいたりするのですが、Qiita記事タイトルの方は遊びました。

ここで滑らず、反応があったのは嬉しかったですねー。

悟空語に変換しても'Ruby'は'るびー'のままだし、'PHP'は'ぴーえぇちぴー'で'ぺぇそん'ほどのインパクトは無いし、Pythonやってて本当に良かった。

ペーぴーえぇ(PyPI)

'PyPI'は、'ペーぴーえぇ'になります。

Python関連は、'Py'が付くことが多いから、悟空語と相性が良いです。

テストについて

きんみさん(@_kinmi)の悟空語ジェネレーターでは、とある固有名詞の悟空語変換がなかなか思うようにいかず、苦労されています。

その為、gokulangではテストを書いて、デグレートに備えました。

これもテストの勉強になりました。

# ...

class GokuLangTest(unittest.TestCase):
    def setUp(self):
        self.G = GokuLang()

# ...

 def test_dekami(self):
        q = 'ぱいぱいでか美'
        a = 'ぺぇぺぇでか美'
        self.assertEqual(a, self.G.translate(q))

#...

最後に

gokulangの作成に取り掛かる前は、完全二番煎じなのが少し気掛かりではありましたが、皆さん好意的に受け止めて下さって良かったです。

何より、Pythonモジュール化、Web API、テストと自分にとっては良い勉強になりました。

Qiitaでいいねして下さった方々、twitterで紹介して下さった方々、そして今回のきっかけを作って下さったきんみさん(@_kinmi)、ありがとうございました!

PHP/Laravelの学び方をYYPHP(わいわいPHP)で聞く

はじめに

PHPの情報交換や仲間作りをする集い、YYPHP(わいわいPHP)に参加してきました。

yyphp.connpass.com

会場

写真を撮り忘れたので当日の様子では無いのですが、会場はこんな感じのスペースです。

会場の写真

参加のきっかけ

私はここ10ヶ月ほどはずっとPythonとDjangoを独学でやってきました。

それが何故PHPかというと、今年に入ってからのWebエンジニアへの転職活動をする中で出会った企業には、PHPやLaravelで開発している企業が数多くあり、入社後にはそのスキルが求められる為、PHPのコミュニティにも参加しておきたいと思ったからです。

このYYPHPは、主催者側にQiitaでContribution4位の@suinさん がいらっしゃることもあり、前々からその存在が気になっており、参加申し込みをしました。

qiita.com

会の流れ

ゆるく雑談をしながらスタートし、各自自己紹介としてPHP歴と今日聞きたい・話したいテーマを挙げます。

全員の自己紹介が終わったら、挙げられたテーマに関して、順次参加者で話し合う、といった流れです。

参加人数は10人ほどと少人数であることと、主催者の一人である@nouphetさんのファシリテーションが素晴らしく、終始活発かつ和やかに意見交換ができました。

また、個人的には、同じく主催者側の@reoringさんがやたらと@nouphetを鋭くイジる?掛け合いが面白くツボでしたw (お二人の仲の良さが窺えましたw)

勉強会メモ

私からのテーマは

  • これまでPython/Djangoの経験はあるが、これからPHP/Laravelのスキルを習得するにあたって、どんな学び方が良いか知りたい

というものです。

これに対して様々なアドバイスをいただきました。

1. Webアプリから入らず、まずはPHPの課題を解いてみる

課題とは、例えば以下のようなものです。

  • 九九の表を出力する
    • 九九ができたら20x20をやってみる
    • 桁がずれるので合わせる
  • 多次元配列を1次元配列に変換する関数を書く(再帰処理で)
  • カレンダーを出力する
  • 多次元配列から要素を一撃で取り出す関数を実装する

インフラエンジニアである@nouphetさんがPHPを学ぶにあたって取り組んだことが以下のQiita記事に詳しくまとめられており、これに沿って説明いただきました。

qiita.com

2. 自分の知っている言語の使い慣れたコードをPHPでも書いてみて両者を並べてPHPの特徴を理解する

PHPerである@suinさんがScalaを学んだ際に実践したことを基にしたアドバイスです。

私の場合だと、Pythonでコードを書いて、それをPHPでも書いてみる、ということになりますね。

3. Laravel学習のおすすめコンテンツや勉強法

3.1 Udemy動画

Fullstack Web Development With Laravel and Vue.js - Udemy

参加者のkawasaki-tさんのおすすめです。

Udemyの日本語のLaravelチュートリアル動画は、扱っているLaravelバージョンが5.1と古いらしく、英語の動画がおすすめとのことでした。

定価12,000円ですがセール時にはきっと1,200円くらいになると思うので、その時に購入したいと思います。

3.2 LALACASTS

laracasts.com

こちらもLaravel学習では有名な動画チュートリアルサイトだそうです。

3.3 過去にDjangoで作ったWebアプリをLaravelで作り直してみる

こちらは参加者のbun0325さんのアドバイス。

Laravelを学ぶ目的で何かを作ろうとする時に、どんなアプリにするか考えることに時間がかかってしまいがちなので、過去に別フレームワークで作ったWebアプリをLaravelで作り直すことにすれば、設計や実装にすぐに着手できる、というものです。

3.4 技術書「絶対に挫折させないアプリ開発 はじめてのLaravel」

@nouphetさんからのおすすめ。

booth.pm

同じWebアプリを素のPHPと、Laravelそれぞれで作る内容となっているそうで、PHPの基礎とLaravelの中身の理解ができそうです。

4. PythonできるならPHPもできる!

ラストは参加者のたべたつさん(@ttabtt3)からの力強いアドバイス!(会場一同は爆笑)

確かにPHPもPythonと同じく動的型付け言語ですので、あれこれ考えずにまずはやってみるのが大事かもしれません。

最後に

YYPHP(わいわいPHP)の名前にふさわしく、初参加でも本当にわいわいと楽しめ、かつ多くの気付きと刺激を得られる素晴らしい勉強会でした。

参加して本当に良かったです。

いただいた貴重なアドバイスをもとにPHPの学習を継続したいと思います。

主催された株式会社クラフトマンソフトウェアの皆さま、参加者の皆さま、ありがとうございました。

【Python/Django】日本語文章の品詞を調べるLINE Botを爆速で作りました

はじめに

日本語文章の品詞を調べるLINE Botを作りました。

目次

使うには

以下のQRコードを読み取るか、https://line.me/R/ti/p/%40ttw4707aをクリックしてください。

QRコード

作ったきっかけ

先日参加したWEBエンジニア勉強会#11で、なおとさん(@naoto_7713)が、

Word Cloudでツイートを可視化してみた

の登壇の中で、

  • Twitter API
  • Pythonの形態素解析のモジュール
  • Word Cloud

を組み合わせることで、特定のtweet群を1枚のイメージに可視化するデモを実演されていたのですが、

お話を聞く限り、APIの申請入力内容や形態素解析を使うためのコードはコピペをうまく活用して済ませたそうで、

まずは最短距離で「動くモノ」を実現してしまう

というのはモチベーションを維持しながらのものづくりを行う点でも大事な観点だと感じていたところでした。

形態素解析のモジュールは過去に触ったことがあったのと、APIといえばLINE Messaging APIを同じく使ったことがあるので、これを組み合わせることにしました。

制作時間

平日の出社前に早起きして取りかかり、3時間ほどで完成しました。

バックエンドはDjangoです。

今回のような単純な機能であればDjangoよりはFlaskの方が適しているのだと思いますが、Flaskはまだ触ったことがないので、手慣れたDjangoを選択しました。

ソースコード

GitHubに上げています。

作り方の解説記事も今度書きたいな、思ってます。

github.com

最後に

モノを短時間で作って公開して、すぐに反応があるのは、とても楽しいですね。

今後もアイディアがあれば、こうしたひとりハッカソン的なものづくりをやっていきたいなと思います。

WEBエンジニア勉強会 #11に参加しました

はじめに

2019/2/1(金)に開催された、WEBエンジニア勉強会 #11に初参加してきました。

web-engineer-meetup.connpass.com

会場

会場は渋谷にある株式会社ミクシィさんの本社です。

WEBエンジニア勉強会 会場

勉強会の進め方と参加者間の交流について

当日の参加者は60〜70名ほど。

最大4人まで座れるテーブル席でピザとお酒などのドリンクをいただきながら、登壇される方のお話を聞くスタイルです。

勉強会後の懇親会は希望者のみ別途移動して渋谷駅前のお店で開催されたようです。

より多くの方と交流したい方は懇親会に参加されると良いのではと思います。

私は勉強会が始まるまでの時間と休憩時間に同じテーブルの方と色々とお話しさせていただきました。

勉強会メモ

写真共有アプリ「みてね」に見る簡潔な良UI/UX

@ngmt83さん

「みてね」を推す理由/Reason for recommending "Mitene" - Speaker Deck

mitene.us

  • 写真共有アプリは数多あるが、多機能な写真共有アプリは祖父母世代にとっては操作が難解
  • サービスとして「なんでも提供できる」は「何も提供していない」のと(ある意味)同じ
  • 自由度を定義・制限することで、使いやすさを向上できる
  • このアプリの場合、ITリテラシーの高い子育て世代がアップロードなどの複雑な操作を担い、祖父母世代は写真を見るだけ、でも良い
    • 【感想】ユーザーを点では無く線で捉えることでサービスとして完結しているかどうかを評価できる、という視点を得ることができました
  • ユーザーの最大の関心はアプリの機能やサービスの内容ではなく、こども(孫)がかわいらしく写った写真
    • 「みてね」はそこに集中してもらえるような作り

WEBエンジニアが知っておきたい決済の仕組み

@ykaganoさん

WEBエンジニアが知っておきたい決済の仕組み - Speaker Deck

  • ECサイトで、買い物カートに商品を入れてくれるユーザーは全体の10%ぐらいで、決済してくれるユーザーは当然さらに少ない
  • より多くの決済方法を用意することで売り上げを伸ばせる
    • ただし、サービスや客層に応じた決済方法を用意する必要がある
    • クレジットカードを持たない若年層向けには携帯電話のキャリア決済など
  • クレジットカード決済における消費者、加盟店、アクワイアラ、イシュアの関係性やオーソリに関するお話
    • 【感想】クレジットカードに紐付けたQRコード決済も、同じ仕組みの上に成り立っているのだろうなと勝手に理解しました
    • 【疑問】与信審査が無く高校生でも持てるデビットカードのオーソリは、銀行口座残高をリアルタイムに確認に行くのかな?

心理的安全性の「持ちつ持たれつ」

ユアマイスター株式会社CTO 星 長亮さん(@inase17000)

心理的安全性の 「持ちつ持たれつ」 - Speaker Deck

  • 心理的安全性を高めるためには(抜粋)
    • 理解を示す
      • 同意できる点、できない点素直に伝える
    • 共に意思決定する姿勢を示す
      • 意思決定の根拠を示す
    • 【感想】傾聴は大事ですが、迎合することが心理的安全性を高めるわけではなくて、同意できない点や根拠を素直に伝えることもまた必要なのですね。そのあたりを曖昧にしてしまうことは、相手に対する無関心であり心理的安全性を低めることに繋がる、と私は理解しました。

gRPC入門

みずりゅさん(@MzRyuka)

  • gRPCはGoogleが開発したRemote Procedure Callのプロトコル
  • 様々なプログラミング言語でサポートされており、異なる言語間で通信できる
  • REST APIのようにcurlで気軽に叩くことはできないらしい
  • 【感想】調べたところ、Pythonではgrpcio-toolsというライブラリで使用することもできる様子

なぜ僕はプログラミングが苦手なのか

VTRyoさん(@3s_hv)

なぜ僕はプログラミングが苦手なのか / Why am I not good at programming - Speaker Deck

  • プログラミング初心者はエラー文を読めていないことがままある
    • 本当に全く読んで無いケース
      • 自分が追加・修正したコードをエラー原因もわからないまま、また別の追加・修正をしてエラーから抜け出せない
    • エラー文を読んではいるが読み解けていないケース
      • 経験不足のため、各エラーに適切に対処できない
  • 自分にセンスが無いと感じ自信を喪失した際にマネージャーに相談したところ、周囲の協力も得ながら修正できたのであればそれはちゃんと貢献できているのではないか、とのコメント
    • 難しく考えすぎて、自らハードルを上げてしまっていたことに気づく
  • 良い習慣を積み重ねることで、センスは身に付く
  • 【感想】とても勇気付けられる内容であると同時に、相談先のマネージャーさんのコメントがとてもセーフティ!(心理的安全性が高い、の意)

Word CloudでTweetを可視化してみた

なおとさん(@naoto_7713)

Word Cloudでツイートを可視化してみた

  • Twitter APIと形態素解析のライブラリとWord Cloudを組み合わせることで、特定のtweet群を1枚のイメージに可視化
  • 【感想】お話を聞く限り、APIの申請や形態素解析を使うためのコードはコピペで済ませたそう。まずは最短距離で「動くモノ」を実現してしまう、というのはモチベーションを維持しながらのものづくりを行う点でも大事な観点だと感じた。
  • 以下はWEBエンジニア勉強会#11に関するtweetを登壇中に可視化したもの

Word CloudでWEBエンジニア勉強会#11のtweetを可視化

MDX-DECKとCode Surferでスライドを作ろう

たくもんさん(@inouetakumon)

takumon.com

  • スライド作成ツールはパワポ、MacであればKeynoteなどがあるが、MDX-DECKはマークダウン記法で書ける
  • Reactコンポーネントでリッチな見た目にもできる
  • Code Surferはmdx-deckのプラグインでソースコードをリッチに表示してくれる
  • 【感想】スライドといえば会社ではパワポ、個人ではKeynoteでしか作ったことが無いので、MDX-DECK含む様々なスライド作成ツールに触れてみたい

フロントエンドコーディングにおけるPageSpeed Insights対策

Kouさん(@kkoudev)

フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights- - Speaker Deck

  • PageSpeed Insightsは、サイトアクセスのパフォーマンスを測定し改善点を提案してくれるGoogleのサービス
  • 【感想】私は、自分の作ったサービスのパフォーマンスを調べるのに https://testmysite.withgoogle.com/を使っていましたが、PageSpeed Insightsの方がわかりやすいですね。どちらもGoogleのサービスですが、なぜ似たような目的のサービスが2つ存在するのだろう?
  • よく指摘されやすいパフォーマンス上の問題点はレンダリングブロック、画像読み込み
  • レンダリングブロックについて
    • headタグ内に指定したJavaScriptやCSSの読み込み中は、HTMLの読み込みを実行できない
    • JSやCSSを非同期で読み込むことで改善可能
    • JSやCSSファイルをそれぞれ1つにまとめることでも読み込み時間を短縮できる
      • ブラウザがひとつのドメインに対して一度に並列接続できる数は決まっているため
    • なお、CSSの非同期読み込みすると画面崩れが一瞬発生してしまう
      • FOUC(Flash Of Unsyyled Content)とも呼ばれる
      • ファーストビューの描画に必要なstyleをHTMLにインライン記述することで対策(Critical Path CSSの指定)
      • criticalというNPMモジュールでインライン要素を自動生成
  • 画像読み込みについて
    • 画像解像度ごとに読み込む画像を指定できるsrcset属性を利用し、画像サイズを最適化
      • CSSではimage-set関数を使う
    • 画像の遅延読み込みの利用
  • その他サーバーサイドの配信時の改善点としてcss, js, 画像のgzip圧縮
  • 【感想】Webサイトのパフォーマンス向上に関して非常に参考になる内容でした。Webサイト全般に利用できる汎用的なテクニックだと思うので、ひとつずつ実際に試して覚えていきたい。

最後に

上記の通りテーマは多岐に渡り、非常に多くの気づきを得られる勉強会でした。

主催されたOSCA(@engineer_osca)さん、設営に携わられた方々、会場を提供されたミクシィさん、登壇者の方々、ありがとうございました!