はじめに 履歴書、書いてますか？＞挨拶 僕もいま任期付きなもんで履歴書を書いては送る日々なわけですが、履歴書ってなんであんなに書きづらいんでしょうね？ で、これまでは履歴書をLaTeXで書いて管理してたのですが、ちょっとスタイルを修正するのもすごく面倒だし、そもそもデータとスタイルの分離がよろしくないのがストレスでした。そんな時にこの【退職】履歴書をGit管理したかってん【しました】という記事を見て、僕も履歴書をもう少し扱いやすいフォーマットから作るスクリプトを書きました。ソースはGitHubに置いてあります。 (2020年7月19日追記) 2020年7月17日付で、日本規格協会グループは、JIS Z 8303『帳票の設計基準』に掲載されていた「履歴書」の様式例を削除しました。2020年7月19日現在は「お知らせ」に記載されていますが、パーマネントリンクが無いようなので、そのうち消えるかも

ダメなライブラリ。 redux reduxはstate管理の素晴らしいライブラリだ。 世界で一番愛用され、情報量も多く、大規模システムに向いている。 しかし、react nativeを採用するのはほとんどがスタートアップだ。 学習コストが高い＋プロトタイプ制作が苦手なreduxはスタートアップにははっきり適さない。 reduxの代わりにcontext Api/MobXを使おう。Expo＋contextApi or MobX+web版のfirebaseがスタートアップでの最適解だと思う。 react-native-cli cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが２倍

概要 fastlaneコマンドを叩いたときにAppleIDの2段階認証につまづいて試行錯誤したメモ。 何が起こったのか ちょっと放置していたiOSアプリのProvisioningProfile更新の時期がやってきた。 とりあえずAppleDeveloperにログインして状況を確認。 なにやら2段階認証が必要になったとのことで、設定をする。 さて、証明書はfastlaneで作り直せばいいから楽勝〜とか思っていたら、2019年3月頃？にAppleIDのログイン時に2段階認証が必要になっていて、 fastlane match を叩いたらこんなエラーが。。。 [!] Apple provided the following error info: Two-factor authentication must be turned on for your Apple ID. After you tur

はじめに エンジニアにとって、仕様書などの技術的な文章を書くこと（テクニカルライティングとも言います）は避けて通れません。ただ20年来多くのエンジニアの方々と同僚として接してきて思うことは、エンジニアの方の中には「文章を書く」ということに苦手意識がある方が一定数いるということです。 でもこの「テクニカルライティング」のスキルは、才能というよりは一種の「技能」だと思うんです。ある一定の原理原則を理解して実践を繰り返すことで、必ず一定レベルで習得できるものだと著者は信じています。 もしこのテクニカルライティングの原理原則をまだ体系的に学習したことがない、または過去学習したが改めて再学習したいという方に、お勧めのコンテンツを見つけたのでご紹介します。 https://developers.google.com/tech-writing Every engineer is also a write

こんにちはメルペイ社な@vvakameです。 TypeScript 3.9がアナウンスされました。 What's new in TypeScript in 3.9 Breaking Changes in 3.9 TypeScript 3.9 Iteration Plan TypeScript Roadmap: January - June 2020 Roadmapはこちら。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ Promise.all 関係の型推論を改善 Improvements in Inference and Promise.all 3.7で Promise.all 周りの改善を入れたけどリグレッションが発生してた undefined などが絡んだときの型推論がおかしくなってたのを修正 awaited という演算子の導入をしませんでした What About t

アップデート版の記事を以下に用意しています。 2020年師走における Next.js をベースとしたフロントエンドの環境構築 さて、今年に入って既に２ヶ月が経ちました。ということは３月に突入しているってことで、それは僕が東京で働き初めて２年が過ぎ去り、SPA なフロントエンドの環境をプロジェクトとして初めて構築して１年あまりということです。そして、冬も過ぎ去り春が来ようかというようなこの時期に、小さくはあるけれど新たな挑戦として Next.js を使うことになりました。 こんな記事を読んでいる方なら分かるとは思いますが、Next.js とは JavaScript のライブラリである React のフレームワーク です。Next.js といえば、同くフレームワークである Gatsby になんとなく押され気味なイメージを感じていましたが、v9 以降のアップデートがよい感じで、さらにごく最近の

こんにちは。YAMAP でフロントエンドエンジニアをしている @SotaSuzuki と申します。 この記事は YAMAP エンジニア Advent Calendar 2019 の 9日目の記事となります。 拙い文章で恐縮ですが何卒よろしくお願いいたします。 tl;dr Styled System の Theming は Emotion の Theming と比べて 3倍便利 Theme UI の Theming はさらにその 2倍高機能 Styled System の Style Prop API と TypeScript の併せ技で 3倍高速なマークアップ Theme UI はいいぞ Styled System とは 本題の Theme UI に入る前に、Theme UI のベースとなるライブラリ Styled System について簡単に説明します。 Styled System は

本記事はこの記事の日本語訳です。翻訳許可をいただいております。 以下翻訳： もし Cocoa 開発やソフトウェアビジネスのブートストラップについての最新の記事を常にキャッチアップしたいなら、ぜひ Twitter で私をフォローするかメールリストを購読してください。 開発者として、パフォーマンスの良さは我々のユーザにワクワクと嬉しさを与えるのに評価しきれないほど貴重なものです。iOS ユーザの目は非常に高く、そのためもしあなたのアプリが動作がモサモサしたり、すぐにメモリプレッシャーでクラッシュしたりすると、彼らはあなたのアプリを削除するか、最悪悪いレビューまで残してしまうでしょう。 私はアップルに 6 年間を在籍し、その歳月を Cocoa フレームワークやファーストパーティーのアプリに費やしてきましいた。私が手掛けたものには Spotlight、iCloud、app extensions、そ

ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン

はじめに 本内容はApp Notarizationについての公式のドキュメントを読んで理解した内容を日本語でまとめたものです。 公式ドキュメントの内容を全て網羅している訳ではないので公式ドキュメントの方も参照することをお勧めします。 Appleが提唱するNotarizationとは AppPreviewではない ユーザにアプリに悪意のあるコンテンツが含まれていないことを知らせる仕組み Notaizationが得られればnotary serviceによりチケットが発行され、オンラインで共有される GeteKeeperはインストーラの実行時にチケットの有無を確認し、存在を確認できた場合、Appleにより公証されていることをダイアログでユーザに通知する Notarization を受けないとどうなるの？ 公式サイトの注意事項によると下記のように書いてある Beginning in macOS 1

<%# @condition が未設定の場合は、 partial の内容全体をレンダリングしない %> <% return unless @condition %> <div> 早期リターンしなかったときの記述内容 </div> ただ、 partial の途中で早期リターンしたいこともあるかと思います。その際に以下のように記述しても、早期リターン前の記述内容は最終的に出力されません。 <div> 早期リターン前の記述内容 </div> <%# @condition が未設定の場合は、 partial の内容全体をレンダリングしない %> <% return unless @condition %> <div> 早期リターンしなかったときの記述内容 </div>

画面の表示速度を意識してCSSを書こう WEBページの表示速度を高速に保つことでサイトの直帰率を防げたりSEO上の観点でも有利に働くことはよく知られている事実かと思います。 2018年2月に更新されたGoogleのダニエル・アンによる研究結果ではスマホページにおいてloadingタイムが1秒から5秒に増えると直帰率は90%増加するそうです。 > [think with Google](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/) 表示速度を早める方法はサーバーサイド側での改善など多くの手法がありますが、CSSセレクタを最適化することでWebページの表示速度に貢献できることを知っていますか？ 『CSSセレクタの最適

Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。

GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かすSeleniumselenium-webdriver 最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは？」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。 今回は node で。 name: xbrowser on: [push] jobs: e2e-ie: runs-on: windows-latest steps: - uses: actions/checkout@v1 - uses: warrenbuckley/Setup-Nuget@

以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

コンポーネント指向での開発も割と枯れてきて、昨年から海外ではいわゆるデザインパターンに名前がついて紹介されることが多くなってきました。 この記事ではその内の一つ、Compound Componentsを紹介いたします。 またタイトルに「Reactの」とついてますが、実装例がReactなだけでコンポーネント指向であれば他のUIライブラリでも考え方は流用可能です。 完成した実装はここに置きました。 https://codesandbox.io/s/104lvmynj4 参考 Ryan Florence - Compound Components Advanced React Component Patterns Compound Componentsとは はじめに Compound という言葉ですが直訳だと動詞で 混ぜ合わせる という意味です。実際の実装は混ぜ合わせるというよりは「組み合わせる

Flexboxとは Flexbox = Flexible Box Layout Module CSS3から導入されたレイアウトモジュール これを使うことfloatをサヨナラできます。 用語 詳しくはW3Cのflexページへ 使い方 flexレイアウトを適用したい要素の親要素にflexを指定します。

概要 Dockerfileを書くためのベストプラクティスを読んで、ベストプラクティスなDockerfileを作った/作りたい人が対象です。 そのDockerfileで大丈夫かを3分でチェックできるツールをつくりました。Hadolintのような、単なるDockerfileのLinterではなく、ビルドしたイメージの中身まで細かく分析します。 通常のLinterでは原理的に不可能な、ベースイメージに存在している危険性も含めて調べることができます。 ←GitHubのStarもらえると嬉しいです。 Dockleの内部で使われているツールはTrivy, Vulsなどと同じなので、そのあたりを踏まえて、動作原理を別記事にまとめました。 人を震えさせるツール｢Dockle｣の仕組みを解説 なお、DockerHubで人気のコンテナに対して試した結果をサイトにして公開しています。操作方法もふくめて、別記事に

カスタムビューを xib で定義しつつ、それを IBDesignable できる形で他の xib/Storyboard にロードして配置したい、という場合、この記事のようにやればできます。 Create an IBDesignable UIView subclass with code from an XIB file in Xcode 1. カスタムビューを xib で作って、"File's Owner" のクラスにクラス名を指定する。 2. カスタムビューのクラス（File's Owner に指定したクラス）を実装する。 nib からビューをロードして addSubview() するのだが、このとき、コードからの初期化用イニシャライザ init(frame: CGRect) と nib からの初期化用イニシャライザどちらからも行うようにする。 import UIKit @IBDesig