株式会社ラクス でエンジニア リングマ ネージャをしている 間澤 です。 私達の組織では、ここ数年で管理職間やリーダー間でマネジメントやリーダーシップについてちょっとした勉強会をしています。 エンジニアは日頃そのテーマの学習の機会に触れるきっかけが少ないのかな、と感じていたのが始めたきっかけです。 開発をしていると技術のインプットだけでも大変ですよね。 そこで、私達が勉強会で本を読み合わせたうえで、議論や意見交換してみて良かったなと思う10冊をご紹介します。 先に言ってしまいますと殆どが技術本ではないです。エンジニアではない方にも有益だと思います。 単に本を読んだだけではあまり効果がないので、それを実際にやってみると人生がより良く変わっていきます。 仕事の中で、 「それ、本に書いてあったことができてるね。」 を言い合えることがポイントです。 1. 組織論：失敗の本質 2. リーダーシップ：マキアヴェッリ語録 3.問題解決：問題解決 4.論理思考力：ロジカル・プレゼンテーション 5.行動様式（自己啓発）：人を動かす 6.心理学：嫌われる勇気 7.組織経営ポリシー：プロフェッショナルマネージャー 8.マネジメント：マネジメント（ドラッカー） 9.経営組織論：組織行動のマネジメント 10.プロダクトマネジメント：Inspired 1. 組織論：失敗の本質 一昔も二昔も前から著名なビジネス本です。 主に第二章を中心に旧日本型組織の陥りやすい弱点を理解します。 「目的が曖昧」であることが失敗を招きます。 「よかれ」や「雰囲気」で進めていくと簡単にあまり良くない状況に陥ります。 論理に基づいてタスクを進めているかが重要になります。 キーワード 戦略上の失敗：曖昧さ あいまいな戦略目的、短期思考、主観的で 帰納 的な戦略策定、アンバランスな技術体系 組織上の失敗：柔軟さの欠如 人的ネットワーク偏重、属人的な組織、学習の軽視、プロセスや動機を重視した評価 2. リーダーシップ： マキアヴェッリ 語録 勘違いされている方もいるかもしれませんが、強権な暴君の話ではありません。 過去の君主たちの実績が書かれた、必要な統率力の考え方とは何か、が書かれています。 戦える組織を作る。 軍隊（エンジニア）と法律（ルール）を整える。 良い法律とよい軍隊を持っていれば国は安定する。 このふたつこそが、国を保つための根幹である。 キーワード 必要な資質 変化への対応力、よからぬ者になりうる技、悪評から逃れるすべ、ケチであること、慈悲深さと冷酷さ、外見上は資質があるふりをする、気前の良さ 戦える組織をつくる 自分の軍を持つ、決断はひとりでする、有能な側近あるところに有能な君主あり、有能な側近に常に助言を求める、常に 武装 する 3.問題解決：問題解決 正しく問題を解決するプロセスを学びます。この本はすべてが重要なのですべてきちんと吸収したいです。 問題解決プロセス 現状把握(where)→課題抽出/特定(why)→あるべき姿(what)→対策立案(how)→モニタリング（KPI設定） 現状把握は非常に重要でここが誤っていたり、浅いと後続の各項目が矛盾したり、唐突だったりグダグダになります。 開発でいうと要求分析にあたるようなものなので全体の半分近くの力をここに注ぐのが望ましいです。 特に数値情報は説得力があり最後のKPIにも描きやすいです。 4.論理思考力：ロジカル・プレゼンテーション 前述の『問題解決』と同じ著者の方です。 ビジネスパーソン が価値の高い仕事を遂行していく上で必須となる能力が書かれています。 論理思考力：話をつなぐスキル 仮説検証力：疑問に答えるステップ 会議設計力：議論をまとめるスキル 資料作成力：紙に落とすステップ 5.行動様式（ 自己啓発 ）：人を動かす 言わずもがなの古典の名著。 目次に示された行動に対して自己診断の◯×をつけて、みんなで評価し合うと楽しいです。 もし、できていない項目があれば、それができている人を見つけて真似するだけで良くなっていきます。 6.心理学：嫌われる勇気 タイトルがキャッチーですが、嫌われるわけではないです。 正しく「共同体へ貢献」する考え方とは何かを理解できる本です。 他人を変えるための心理学ではなく、自分が変わるための心理学です。 自分を認めてあげると気持ちが楽になります。 キーワード 解決策は課題の分離 対人関係のゴールは「共同体感覚」 叱っても褒めてもいけない 「勇気づけ」と「感謝」 自己受容/他者信頼/他者貢献 7.組織経営ポリシー：プロフェッショナルマネージャー 高い視点の持ち方、視点をどこに置くべきか（経営の秘訣）、マネジメントとリーダーシップの違いなどが書かれています。 あなたのリーダーシップはどのようにして獲得できるか？高められるか？知りたい方は答えが書いてあります。 本を読む時は、初めから終わりへと読む ビジネスの経営はそれとは逆だ 終わりから始めて、そこへ到達するためにできる限りのことをする 　-　自分は何をやりたいのかをしっかり見定め、それをやり始めよ。 すみません、10冊といいながらこのテーマについてはもう1冊紹介させてください。 HIGH OUTPUT MANAGEMENT マネージャーのアウトプットとは、 　　　 「自分の組織のアウトプット＋自分の影響力が及ぶ隣接組織のアウトプット」 マネージャーは「テコ作用」を活用すべき。 マネージャーというテコをチームに入れることで、チームのパワーを何倍にもする点をなる。 マネージャーはテコを探し、作る。 8.マネジメント：マネジメント（ ドラッカー ） こちらも誰もが知る名著。ただし、読むのは少し難しいです。 別冊にはなりますが、『実践する ドラッカー 【思考編】』と『実践する ドラッカー 【行動編】』だけでも 良質なピックアップがされていて読みやすいです。 主な論点は、貢献、強み、集中、時間管理、意思決定、目標管理、計画、です。 一番のおすすめは「強み」です。 『なすべきは自らが持っていないものではなく、 　自らが持っているものを使って成果を上げることである。』 強みとは、個々人が持っている資質を磨いたものである。 自分を最高に生かす方法は、できること、強み、に集中することである。 そして、強みを生かす３ステップ 　1.明らかになった強みに集中する事 　2.その強みをさらに伸ばす事 　3.無知の元凶ともいうべき知的な傲慢（もうこれで十分という気持ち）を正す事 9.経営組織論：組織行動のマネジメント こちらの本は重厚です。何回かに分けて、みんなで読んでいきました。 経営組織論に初めて触れる方は、なぜ経営理念があるのか、既にある人事制度や目標管理は論理に基づいている、組織文化を大事にする理由、などがわかります。 例えば、復数の管理職でこの本を読んだ際に、管理職の特性により以下の組織特性がありました。 グループシンク 安全志向重視が強い。→それが過度にならないようにどうするか注意が必要。 楽観的すぎる。→特定の人頼りになっていて管理も任せすぎた。 組織は、一時的に信頼が損なわれても説明でき、納得すれば関係を継続できる特徴があるので、早めの気づきからの説明と修正が重要になります。 また、 コンフリクト についても一概に悪いものと思い込んでいる点がありました。 ですが、調和的で平穏で協力的な集団は停滞しがちで変化や改革の必要性に対して無関心かつ鈍感になりやすいというものになります。 対策は、集団のリーダーに対して、集団を活性化し、 自己批判 的、創造的にするのに必要な最小限のコンフリクトを常に維持するよう促すのが大事と書かれていました。 10. プロダクトマネジメント ：Inspired 最後に、急にエンジニアリングに戻ります。 製品やサービスに必要な役割と責務が書かれています。 プロダクトマネージャーの役割 製品の市場性を評価することと、開発すべき製品を定義することである。正しいもの（製品）は何かを定義する。（What） ユーザーエクス ペリエ ンスデザイナーの役割 製品が対象とするユーザー像（ペルソナ）を深く理解した上で、ユーザーのニーズに合うように要求仕様とデザインの調和を図ろうとする。 プロジェクトマネジメントの役割 製品が定義されれば、製品開発チームがプロジェクトを引き継ぎ、製品の開発に取りかかる。プロジェクトのスケジュールや工程・進捗の管理。正しくもの（製品）を作る。（How） エンジニアリングの役割 製品開発やソフトウェア開発（者）ともいうが、彼らは実際に製品を開発する人たちである。 サイト（システム）運用の役割 ウェブサイトを運用するチームは、ウェブ上のサービスを常時稼働させる任務を負っている。 プロダクト マーケティング の役割 製品を世界中に知らしめること、製品を対外的に発表すること、販売チャネルで製品を売り込むためのツールを提供すること、主要な マーケティング 活動を指揮することである。 以上、どの書籍も大変身になるものばかりでした。大事なのは読むだけではなく「やってみること」だと思います。 最後に、宣伝を失礼します。 株式会社ラクス では、このように人やプロセスを大事にして、正しく製品やサービスを作っております。 ご興味がありましたら是非お声がけください。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは、株式会社 ラク スで楽楽勤怠の開発を行なっている goldminer です。 「楽楽勤怠」は昨年にリリースしたばかりの クラウド 型の勤怠管理システムです。 ラク スのサービスは BtoB のサービスが多く、勤怠管理システムも基本的にはバックオフィス業務をサポートするためのシステムです。 バックオフィス業務であれば（サービスの停止を伴う）メンテナンス時間を営業時間外となることが多い深夜時間帯にすれば影響が出にくいのですが、勤怠管理システムには打刻機能があり、これは次のような性質を持っています。 打刻には（いつ打刻したのかという）客観性が必要だが、打刻できずに従業員の自己申告に基づいて後から入力したものは客観性が低い 従業員の勤務時間帯は多様であり、深夜時間帯に行われる打刻も一定数ある このことから、楽楽勤怠では無停止リリースの重要性が高いです。直近のバージョンアップでたまたま無停止リリースを実施できる条件を満たしているものがありましたので、実際に無停止リリースのための開発を行ってみました。 今回の目的 無停止リリースの手順 無停止リリースに向けたアプリケーションの開発 DB変更パッチの作成 COLUMN の追加に関する注意点 TABLE の追加に関する注意点 アプリケーションの実装 COLUMN の追加に関する注意点 TABLE の追加に関する注意点 テスト 次回バージョンアップでの課題 DB変更パッチの作成 アプリケーションの実装 まとめ 今後の予定 今回の目的 無停止リリースについては弊社のかみせんプロジェクトでも検証しています。 同じ ラク ス エンジニアブログに 記事 があるので参考になさってください。 上記の記事では次の3つの要件があげられています。 セッション管理 アプリケーション構成 DB運用 この内、「セッション管理」「アプリケーション構成」は前に担当していたサービスでも対応済だったこともあり ナチュラ ルに対応しています。 つまり、DB変更がないリリースについてはすでに無停止リリースを達成しています。 今回は「DB運用」の検証で且つ 完全無停止 を目的としており、リリース中の更新リク エス トを制限しません。 「DB変更リリースを完全無停止で行う」ために何が必要であり、開発にどのような影響がでるのかを検証してみました。 無停止リリースの手順 DB変更リリースをサービスを停止して行う場合の手順は次のとおりです。 APサーバー1と2を停止する APサーバー1と2のアプリケーションを更新する DB変更パッチを適用する APサーバー1と2を再開する 無停止リリースの手順は次のとおりです。 DB変更パッチを適用する APサーバー1への振り分けを停止する APサーバー1のアプリケーションを更新する APサーバー1への振り分けを再開する APサーバー2への振り分けを停止する APサーバー2のアプリケーションを更新する APサーバー2への振り分けを再開する 手順の 2 から 7 まではDB変更がない場合の無停止リリースとまったく同じ手順です。 この手順の場合、アプリケーションとDBの組み合わせには次の3つがあります。 古いバージョンのアプリケーションと古いバージョンのDB 古いバージョンのアプリケーションと新しいバージョンのDB 新しいバージョンのアプリケーションと新しいバージョンのDB 1番目と3番目は当たり前のことですので、2番目の「古いバージョンのアプリケーションと新しいバージョンのDBで正常に動作する」ことが特徴的な要件です *1 。 無停止リリースに向けたアプリケーションの開発 DB変更パッチの作成 先に結論を言ってしまうと、DB変更パッチが以下だけの場合に限り完全無停止で行うことができます。 COLUMN の追加（ ALTER TABLE ADD COLUMN ） TABLE の作成（ CREATE TABLE ） 単純にデータ種別が増えて追加する場合に限る、既存の TABLE を分割するような場合は不可 大抵のORマッパーは追加された TABLE と COLUMN は無視しますので、特に何もしなくても 「古いバージョンのアプリケーションと新しいバージョンのDBで正常に動作する」を達成することができます。 それ以外の UPDATE や INSERT ～ SELECT などは、レコード数が多いと負荷が高くなったり容量が急に増えたりする可能性がありますので、運用しながらの実行はするべきではないと考えます。 COLUMN の追加に関する注意点 追加した COLUMN に初期値は設定せず、null のままにします OK 例 ALTER TABLE table_a ADD COLUMN col1 boolean ; NG 例 ALTER TABLE table_a ADD COLUMN col1 boolean ; UPDATE table_a SET col1 = true ; ALTER TABLE table_a ALTER COLUMN col1 SET NOT NULL ; NG 例は UPDATE を実行している点がよろしくありません。 UPDATE ではなく DEFAULT を使って初期値を設定するのも同様です。 今回は検証していませんが、全体設定のようなデータを保持する UPDATE ONLY な TABLE であれば レコード数が少なく、影響が把握しやすいので UPDATE も可能と考えています。 追加した COLUMN の INDEX は作成しません UPDATE と同じく、レコード数が多いと負荷が高くなったり容量が急に増えたりする可能性がありますので、運用しながらの作成はするべきではないと考えます。 やはりレコード数が少なければ作成しても問題ないですが、レコード数が少ないのであればそもそも INDEX を作る必要性が低いので、作成するという選択肢はないと考えています。 TABLE の追加に関する注意点 今回の検証では特に注意する点はありませんでした。 初期レコードを INSERT するかどうかについては次のように考えています。 基本は INSERT しない サンプルレコードや UPDATE ONLY な TABLE のレコードであれば、レコード数が少なく影響が把握しやすいので INSERT も可能 今回の検証では INSERT していません。 INDEX の作成はレコードがない、または数が少ないので問題はないと考えています。 プライマリーキーやユニークキー制約により自動的に作成される INDEX も同様です。 アプリケーションの実装 COLUMN の追加に関する注意点 上述したように追加した直後の COLUMN は null になっています。 これに対応する必要があります。 次のような実装でDBから取得した値が null だった場合に初期値に置換します。 Entity entity = /* DBから取得する処理 */ ; if (entity.col1 == null ) { entity.col1 = true ; } この置換処理は 、DataAccessObject(DAO) または Repository のどちらかで実行することになるでしょう。 そうすることで、それ以外の箇所では値が null である可能性を除外して実装することができます。 追加した COLUMN を抽出時の条件に使用する場合は 、null である可能性を考慮します。 Entity findByCol1() { // ↓「col1 IS NULL」を条件に付与している. String sql = "SELECT * FROM table_a WHERE col1 = true OR col1 IS NULL" ; } 追加した COLUMN でソートする場合、NULLS FIRST / NULLS LAST を指定する必要があります。 今回は検証した中にこのケースがなかったため実際にはやっていません。 TABLE の追加に関する注意点 今回の検証では初期レコードを INSERT しておらず、TABLE の中身が空なのは正常な状態のため特に注意する点はありませんでした。 テスト 無停止リリースに固有のものとして次のテストを行いました。 Apache JMeter を使って常時アクセスがある状況を作り、その中でDB変更パッチを実行するテスト 以下の観点で確認 DB変更パッチが正常終了するか Apache JMeter によるアクセスがすべて正常応答するか（エラー応答がないか、 応答時間 が正常な範囲内かどうか） 「古いバージョンのアプリケーションと新しいバージョンのDB」の組み合わせで機能テスト テスト結果はいずれも問題ありませんでした。 1 のテストは ミドルウェア やインフラ構成に大きな変更がない限りは、初回のみの実施でよく、毎バージョンアップで実施する必要はないと考えています。 次回バージョンアップでの課題 ここまでの内容で無停止リリースを実施することができます。 しかし、いくつかの課題を先送りにしており、次回以降のバージョンアップで対応する必要があります。 この対応はサービスを停止して行います。 DB変更パッチの作成 追加した COLUMN は null になっていますので、改めて初期値に更新します *2 。 緊急性は高くありませんが、今後の開発でノイズにならないために早めに対応しておくべきだと考えています。 UPDATE table_a SET col1 = true WHERE col1 IS NULL ; ALTER TABLE table_a ALTER COLUMN col1 SET NOT NULL ; INDEX の作成を見送っていた場合は INDEX も作成します。 アプリケーションの実装 null である可能性を考慮した実装がありますが、null がありえなくなりますので 本来あるべき実装にします。 Entity entity = /* DBから取得する処理 */ ; // 後処理は必要なし. Entity findByCol1() { String sql = "SELECT * FROM table_a WHERE col1 = true" ; } まとめ 今回の検証結果を踏まえての結論は次の通りです。 「DB変更リリースを完全無停止で行う」こと自体は条件が整えば可能 しかし、 工数 や 心理的 負担の増加を考えるとペイしない 次のような作業が必要になり、 工数 が増加します。 ★無停止リリースの手順を作成する 追加した COLUMN が null だった場合を考慮した実装を行う ★常時アクセスがある状況でのリリースのテストを行う 「古いバージョンのアプリケーションと新しいバージョンのDB」の組み合わせで機能テストを行う 追加した COLUMN の null を初期値に更新するDB変更パッチを作成する@次回バージョンアップ 追加した COLUMN が null だった場合を考慮した実装を本来あるべき実装に変更する@次回バージョンアップ 上記で★を付けたものは初回のみの実施でよく、毎バージョンアップで実施する必要はないと考えているものです。 ★が付いていないものが毎バージョンアップで 工数 が増加する原因になるもので、 工数 としてはざっくり1、2人日程度です。 工数 は飛び抜けて大きなものではありませんが、次回バージョンアップでの対応が発生することによる 心理的 負担の増加が嫌だなと、感じました。 効果の方はと言いますと、そもそもDB変更パッチが COLUMN と TABLE の追加のみの場合に限られるという問題があります。 さらに今後の予定に書いているように分散システム化することで打刻の無停止が達成できると、効果は「リリース担当エンジニアが深夜作業をしなくてよい」だけになってしまいます。 ビジネスサイドでの無停止リリースの要求が強くなるか開発の負担を減らすことができないと再チャレンジは難しいという所感です。 今後の予定 ビジネスサイドから無停止リリースの要求が出てきた際に応えられるようにと考えて実施した今回の検証ですが、毎バージョンアップで頑張ってDB変更パッチの作成と実装を行わなければならないのは継続性に難があると感じました。 今後の計画に無停止リリースは織り込まず、突発的に無停止リリースの必要が生じた場合に今回の知見を活かせればよいと考えています。 可用性の向上の観点ではシステム全体の完全無停止にはこだわらず、一度仕組みを作ってしまえば以降は再利用するだけでよくなる次のような方針で進めるべきだと考えています。 分散システムにして重要な機能は常時稼働できるようにする 勤怠管理システムでは打刻機能が該当 更新リク エス トのみ制限して参照リク エス トは行えるようにする 停止はするが停止時間が極力短くなるようにする *1 : DB変更パッチの適用とアプリケーションの更新の順序を入れ替えれば「新しいバージョンのアプリケーションと古いバージョンのDB」の組み合わせになります。 詳細は割愛しますが、この組み合わせで正常に動作させることは難易度が高く現実的ではありません。 例外的にDB変更が「 DROP COULMN」のみの場合は容易に達成できますが、「 DROP COULMN」に緊急性がある場合は少なく無停止リリースで行うメリットはないと思われます。 *2 : 新しいバージョンのアプリケーションで INSERT, UPDATE したレコードでは null ではありません。

今回は API について解説します。エンジニア／ プログラマ の方はよく聞く単語だと思いますが、 私自身、他の人にうまく説明できるかと考えた時にあまり自信がなかったのでまとめてみることにしました。 APIとは APIを使うメリット 開発コストの削減 開発の効率化 セキュリティの向上 APIの種類 実践 作ったもの 使用するAPI ぐるなびAPI LINE Messaging API 構成 作成手順 ぐるなびAPI登録 LINEBOT登録 Node.jsなどの環境構築 実装 おわりに API とは API は「 Application Programming Interface 」の略で、ざっくりいうとあるプログラムから別のソフトウェアを操作するための仕組みのことです。 企業などがアプリケーションの一部の機能を外部に向けて公開することで、第 三者 は開発したアプリで機能を利用することができます。 API を使うメリット 開発コストの削減 基本的にWeb API は API 自体の仕様が変更になる以外に、バグ修正等の運用コストも必要ありません。また、Web API は無料で公開されているものが多いので、開発時間の削減も可能です。 開発の効率化 アプリケーション開発で、ある機能を実装したいとなった時、一部の機能は他社が API として公開している場合があります。 例として、駅情報が必要になった時には既に駅情報を取得できる API が存在していますので、1から機能を実装する必要はありません。 1から作成する場合は、路線データ、地図データ、料金データ、アップデートなどを考慮する必要がありますが、 API を利用することでこれらの考慮が不要となり、効率よく開発を進めることができます。 セキュリティの向上 ログイン機能実装時には、 Facebook や Twitter 、 Google の API を活用することで該当アカウントを利用したログインができます。 大手企業の高いセキュリティ機能を利用することでセキュリティ面の担保ができます。 API の種類 ごく一部ですが、例として以下のようなものがあります。 ・ Twitter ：アカウントと利用者や、ツイート、ダイレクトメッセージといった Twitter データの利用ができる ・ Amazon ：商品情報、在庫情報、注文情報などを呼び出すことができる ・ Google ：画像の分析やテキストの読み取り、手書き文字の読み取り、人や建造物の特定など、画像認識に関するさまざまな機能が使える ・LINE： BOT を作成して、応答メッセージの送受信を行ったりすることができる ・Slack：チャンネルや DM からのメッセージなど、イベントを送信したり、Slack チャンネルとユーザーグループを作成、変更したりできる 実践 作ったもの API を使って飲食店検索 BOT を作成しました。 仕様としては、位置情報を送った際に日本酒のある近くの居酒屋を検索しています。 使用する API ぐるなび API ぐるなび に掲載されている飲食店の基本情報を取得することができますので、飲食店を検索するようなアプリ作成時に使用するといいです。 LINE Messaging API Messaging API を使うことで BOT を作成することができます。ユーザーの反応によって何かしらの処理を行うことができますので、例えばオウム返しなどといったユーザーの送ったメッセージと同じメッセージを返す BOT が簡単に作れたりします。 構成 作成手順 ぐるなび API 登録 まず、アクセスキーを発行するために以下のサイトでアカウントを作成します。 ぐるなび Web Service - トップページ どのような API があるかは以下のサイトで確認できます。 ぐるなび Web Service - トップページ 次に受け取るデータの確認を行うのですが、 ぐるなび API はテストツールが用意されているため簡単にどのようなデータが返ってくるか確認することができます。 方法は、以下のサイトで使用する API 名とパラメータを指定して「クエリを送信ボタン」を押下するだけです。 ぐるなび Web Service - トップページ 今回はヒット件数を制限するhit_per_pageと、フリーワード検索を行うfreewordを指定しています。 画像の下部に JSON 形式でデータが返ってきていることが分かりますね。こちらからどのようなデータが返ってきているか確認します。 アプリに組み込むときは、URLをコピペすればとりあえずは動きます。あとは、必要に応じて検索パラメータを変更するように実装すればOKです。 LINEBOT登録 以下からLINE Developersにログインします。それからプロバイダーを作成して、Messaging API を選択してのチャネルを作成します。 ※LINE Developersへの登録にはLINE個人アカウントが必要になります。 LINE Developers Node.jsなどの環境構築 こちらについて今回は割愛させていただきます。 実装 今回実装したコードは以下となります。 'use strict'; const fetch = require('node-fetch'); const express = require('express'); const line = require('@line/bot-sdk'); var request = require('request'); const PORT = process.env.PORT || 3000; const config = { channelSecret: 'チャネルシークレット', channelAccessToken: 'チャネルアクセストークン' }; const app = express(); app.set('port', (process.env.PORT || 3000)); app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない) app.post('/webhook', line.middleware(config), (req, res) => { //console.log(req.body.events); //ここのif分はdeveloper consoleの"接続確認"用なので削除して問題ないです。 if(req.body.events[0].replyToken === '00000000000000000000000000000000' && req.body.events[1].replyToken === 'ffffffffffffffffffffffffffffffff'){ res.send('Hello LINE BOT!(POST)'); console.log('疎通確認用'); return; } Promise .all(req.body.events.map(handleEvent),) .then((result) => res.json(result)); }); const client = new line.Client(config); async function handleEvent(event) { if (event.type !== 'message') { return Promise.resolve(null); } //位置情報が送られた場合 if(event.message.type == 'location') { //検索に必要なパラメータを定義 var query = { "keyid":"アクセスキー", "latitude": event.message.latitude, "longitude": event.message.longitude, "range": 3, "freeword": "日本酒", "hit_per_page": 10, }; //リクエストに必要なオプションを設定 var options = { url: "https://api.gnavi.co.jp/RestSearchAPI/v3/", qs: query, json: true }; } //ぐるなびAPIを叩く request.get(options, function(error, response, body){ if (!error && response.statusCode == 200 || body.rest == undefined) { if('error' in body){ console.log("検索エラー" + JSON.stringify(body)); return client.replyMessage(event.replyToken, { type: 'text', text: '検索結果が0件、または検索エラーです。' //実際に返信の言葉を入れる箇所 }); } } var random = Math.floor(Math.random() * (body.rest.length)); var message = { "type": "flex", "altText": "this is a flex message", "contents": { //中身記載 } }; return client.replyMessage(event.replyToken, message); }); } app.listen(PORT); console.log(`Server running at ${PORT}`); 上記のコードでポイントとなるところのみ解説します。 const config = { channelSecret: 'チャネルシークレット', channelAccessToken: 'チャネルアクセストークン' }; configにはLINE Developersで作成したチャネルの 秘密鍵 とアクセス トーク ンを設定しておきます。 //位置情報が送られた場合 if(event.message.type == 'location') { var query = { "keyid":"アクセスキー", "latitude": event.message.latitude, "longitude": event.message.longitude, "range": 3, "freeword": "日本酒", "hit_per_page": 10, }; Webhookイベントオブジェクトに送信されたメッセージが含まれており、messageプロパティに格納されています。 今回は位置情報が送られた際に処理を行いたいので、event.message.typeがlocationの時に処理します。 ちなみに位置情報が送られた際のメッセージオブジェクトは以下のようになります。 ・ID：メッセージID ・type：location ・title：タイトル ・address：住所 ・latitude：緯度 ・longitude：経度 また、queryには ぐるなび API を叩く際のリク エス トパラメータを設定しています。今回は以下となります。 ・keyId：アクセスキー ・latitude：緯度 ・longitude：経度 ・range：検索範囲 ・freeword：フリーワード検索 ・hit_per_page：検索件数 これで送った位置から半径1km以内の、日本酒のある飲食店を検索することができます。 request.get(options, function(error, response, body){ (中略) var message = { "type": "flex", "altText": "this is a flex message", "contents": { // Flex Message Simulatorで取得したJSONデータ } }; return client.replyMessage(event.replyToken, message); }); 初めはテキストで検索結果を返すようにしていたのですが、少し見た目を良くしたいと思いMessaging API の Flex Messageで返すようにしました。 そのためにtypeを flex としています。 また Flex Message Simulatorを使うことでメッセージを送信しなくてもレイアウトを確認することができます。 Flex Message Simulator 表示される JSON データをコピペして必要に応じて修正し、contentsに設定します。今回は以下のレスポンスデータを使用して表示しています。 ・rest.name：店名 ・rest.url_mobile：携帯サイトURL ・rest.image_url.shop_image1：店の画像 ・rest.address：住所 ・rest.opentime：営業時間 ※店によっては画像が空だったりするので注意が必要です。 おわりに 今回 API を使って飲食店検索 BOT を作ってみましたが、 ぐるなび API はテストツールでレスポンスを確認できるので使いやすさを感じました。 また、LINE Messaging API は送受信が簡単で、レイアウトは Flex Message Simulatorを使うことでわりとすぐ実装ができました。 記事作成時にいろいろな種類の API を見ていましたが使ってみたいものがありましたので、どのように利用するかを考え、また実践してみたいです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

皆様お初にお目にかかります。楽楽勤怠開発課のy_konnoと申します。2020年7月に入社したあまりフレッシュではない新入りです。 入社してからMQに関して取り扱う機会が多いのですが、 ラク スでMQというとRabbitMQがスタンダードになりつつあります。つい先日（1月22日）、RabbitMQ 3.8.11がリリースされ、なんともタイミングが良いので触れてみようと思います。 ちなみに3.8.9が2020年9月28日のリリースなので、約4ヶ月ぶりのバージョンアップになります。今回は文献のあまり多くないうえにアップデートのあったQuorum Queueについて触れてみます。 Quorum Queue以前のクラスタリング 1.ノード再起動時のミラーメッセージ消失 2.同期によるブロッキング Quorum Queueの特徴 Quorum Queueの概要 Quorum Queueがデータをレプリケーションする仕組み Quorum Queueでのノード障害発生時 Quorum Queueを使う Quorum Queueの制限・注意点 利用できない機能の存在 常にDurableなQueueとして扱われる ディスクI/O ノードの数 レイテンシ おわりに Quorum Queue以前の クラスタリング RabbitMQで クラスタ 構成を組む場合、ExchangeやBindingなどは各ノードへよしなに分散化してくれますが、Queueについては明示的に設定をしなければなにもしてくれません。Queueについての設定をしないまま クラスタ を組んで運用を始めてしまい、マスターノードが死んだ場合、そのままメッセージがロスするという恐ろしい事態が発生します。 バージョン3.8以前ではMirrored QueueがQueueの分散化について用意された唯一の選択肢でした。 Mirrored Queue Mirrored QueueはマスターのQueueでクライアントからのコマンド（Write、ACKなど）を処理し、 ミラーリング されたQueueに対してデータを レプリケーション していきます。もし、マスターが何らかの原因で落ちた場合は、ミラーのいずれかがマスターとしてプロモーションすることでサービスを維持します。 このようにMirrored Queueは クラスタ 内の各ノードにQueueを ミラーリング することで高可用性をもたらす機構ですが、データの一貫性については問題がある設計になっており、状況次第ではデータロスが生じる可能性が高まる危険があります。 1.ノード再起動時のミラーメッセージ消失 Mirrored Queueの1つ目の大きな問題は、あるノードが再起動した場合ミラーにあったデータ内容はすべて消去されるという挙動です。何らかの問題が生じたノードが再起動すると、ミラーにはデータが一切ないため、マスターノードからデータをすべて同期し直す必要があります。 これだけ見ると大して深刻な問題が起きそうにも見えませんが、このマスターからの同期がさらなる問題を引き起こします。 2.同期による ブロッキング 第2の問題はミラーへのデータ同期が ブロッキング で行われる点です。同期中は当該Queueへのメッセージ送受信がすべてブロックされるため、動機が完了するまでそのQueueは一切使えなくなります。 一般にRabbitMQが健全な運用状態であれば、Queueにメッセージが溜まった瞬間にConsumeされることがほとんどです。このため、Queueの状態はごく少数のメッセージが存在するか、もしくは空の状態になっていることがほとんどのはずです。しかし、何らかの問題でConsume側の処理停滞し、Queueに大量のメッセージが滞留した状態で同期による ブロッキング が発生すると、長時間に渡って該当のQueueが利用 不能 になってしまいます。ひどい場合には同期に膨大な時間とノードのリソースを消費した挙げ句に再度ノードがダウンするようなケースもありえます。こうなってしまうと、ミラーの同期を諦めるという選択をせざるを得なくなります。もしミラーの同期をしない場合は、再起動後から蓄積された新規のメッセージについては レプリケーション がされるものの、既存のメッセージについては同期しないため、データロスが発生する可能性が高まります。 MQで扱うメッセージが損失してしまうことが望ましくないシステムでは上記の事象は大きな問題となるでしょう。また、仮にメッセージ損失が許容できるシステムであったとしても、同期による ブロッキング が長時間に及んだ場合は全く影響を受けないわけではありません。 Quorum Queueの特徴 Quorum Queueの概要 Quorum QueueはRabbitMQ 3.8.0から搭載された新機能で、 Raft Consensus Algorithm を利用した高可用性・一貫性を実現するQueueです。特にデータの安全性・一貫性を重視されています。 Quorum Queue Quorum Queueのノードは1つのリーダーと複数のフォロワーから構成されます。このうち、クライアントと実際に対話を行うのはリーダーだけです。フォロワーは 冗長化 のためだけに存在し、万一リーダーが利用 不能 になった場合にはフォロワーの中から新たなリーダーが選出され、サービス全体のダウンを防ぎます。 Quorum Queueがデータを レプリケーション する仕組み Quorum Queueではログ レプリケーション という仕組みで各フォロワーにデータを連携しています。リーダーはクライアントからのコマンドを受け取ると、リーダーノード内のログに一時的にそのコマンドをコミットし、各フォロワーへログを レプリケーション します。この時点では クラスタ 全体として更新は確定していません。フォロワーはログの レプリケーション がなされると、自己のログにコミットを行い、リーダーへ返答を返します。リーダーはフォロワーからの返答の数をカウントし、フォロワーの 過半数 のコミットを以てリーダーもコミットし、 クラスタ 全体での値が一貫して更新されます。 Quorum Queueでのノード障害発生時 Mirrored Queueとは異なり、Quorum Queueではフォロワーノードが再起動しても保持しているデータを破棄しません。データはフォロワーノード上のディスクに書き込まれており、リーダーノードとの差分を レプリケーション でキャッチアップするだけです。 また、 レプリケーション 自体も非同期で行われます。このためMirrored Queueで発生しうるQueueが ブロッキング されてしまう事象ももはや発生しません。 さらに、新規にノードを クラスタ に追加した場合にも非同期で粛々と レプリケーション されるので、Mirrored Queueで発生していた問題は生じません。強いて言えば レプリケーション するデータ量が多い場合にはネットワークI/Oがやや増加する問題があることぐらいでしょうか。 Quorum Queueを使う 能書きが長々としてしまいましたが、実際にQuorum Queueを利用するのは非常に簡単です。クライアントにおいてQueue宣言時にパラメータを追加するだけで作成ができます。 以下は Java Clientでの宣言方法です。 Channel.queueDeclare() の arguments （第5引数）に x-queue-type=quorum を指定して宣言すればQuorum Queueとして作成されます。 Map<String, Object> extraQueueArgs = new HashMap<>(); extraQueueArgs.put( "x-queue-type" , "quorum" ); channel.queueDeclare( "test_queue" , true , false , false , extraQueueArgs); 簡単ですね。 なお、Quorum Queueを作成すると、Management Plugin上では以下の様に表示されます。 Management Console Type が Quorum になっていることが確認できますね。 また、メッセージの送受信については通常通りでよく、特別な処理は必要ありません。つまり、 Channel.basicPublish() や Channel.basicConsume() の内容は通常のQueueやMirrored Queueと何ら変わりません。 Quorum Queueの制限・注意点 ここまでQuorum Queueの利点ばかり述べてきましたが、残念なことにいくつかの欠点が存在します。 利用できない機能の存在 Mirrored Queueに比べて、Quorum Queueはサポートされている機能に制限があります。 以下はその一例です。 DurableではないQueue Exclusive Queue Queueのサイズ制限 drop-head と reject-publish (3.8.10から)のみサポート 公式サイト上では drop-head のみとの記載になっていますが、記述が古いです メッセージごとの永続化 メッセージの TTL メッセージ優先度 グローバル QoS 全く使えないものもあれば、一部のみサポートがされているものがあったりとバラバラな状態ですね。ただ、3.8.10でQueueのサイズ制限に reject-publish が追加されたり、Consumerの優先度がサポートされるようになったりと、今後は徐々にサポートが拡充されていくのかもしれません。 あまりケースとしては考えにくいですが、すでに構築済みのQueueをQuorum Queueに移行したい場合には、利用している機能がすべてサポートされているかは要確認です。最悪の場合は機能不足で移行できない可能性もありえるでしょう。 常にDurableなQueueとして扱われる 先述の通り、DurableではないQueueはQuorum Queueにおいてサポートされていません（そしておそらく今後もサポートされない可能性が高い）つまりQueueは常に永続化がされます。またメッセージもすべて永続化が強制的にされてしまいます。 メッセージの性質が損失を許容できないようなものであれば何ら問題ありませんが、メッセージの安全性よりもパフォーマンスに重きを置きたいような ユースケース には適していません。このあたりは新しい機能だからといって盲目的に採用するのではなく、採用するシステムに適した選択を心がけたいですね。 ディスクI/O Quorum Queueはメッセージを強制的に永続化する、すなわちディスクに書き込むため、ディスクI/Oについて注意をする必要があります。インフラ要件的にはなるべく SSD を採用することが求められます。 インフラ要件以外にも注意すべき点があります。それはExchangeでFANOUTを利用すべきでないということです。 FANOUTはすべてのQueueに対してメッセージを配送するExchangeです。Quorum QueueにおいてはQueueの数が増加するとそれだけディスクに書き込むメッセージ数が増加してしまうため、MQ全体に大量のQueueが存在するような場合には膨大なディスク書き込みを発生させることになります。 このため、Quorum QueueにおいてはFANOUTの利用は避けるべきでしょう。 ノードの数 Quorum QueueはRaft Consensus Algorithmを利用しているため、 クラスタ ーを構成するノード数に留意する必要があります。これを守らないとQuorum Queueの恩恵を受けられず、可用性・一貫性が損なわれる可能性があります。 とりあえず抑えておくべきは以下の2つです ノード数全体が奇数であること 最低ノード数は3 特に注意が必要なのはノード数が2以下の場合はノードが1台も落ちることが許されなくなる点です。また、偶数にしてしまうと、ネットワーク パーティション への耐性が失われる可能性があります。 また、7個以上のノードでQuorum Queueを構成すると性能が低下（レイテンシが増加）するとされています。これを考えると実用的なノード数が3か5ということになります。 レイテンシ Quorum Queueでは常にディスク書き込みが発生することと、Raft Consensus Algorithmのログ レプリケーション の仕組みの関係上、従来のQueueに比べるとレイテンシが高まる可能性があります。 ただ、Quorum Queueの主目的がデータの安全性としているので、パフォーマンスが若干犠牲になるのは致し方ないところではあります。 おわりに 以上、Quorum Queueの紹介でした。 Quorum Queueは日本語はおろか、英語でも文献が少ないこともあって、まだまだ広まっていない印象を受けます。Quorum Queueを利用すること自体はコード上では非常に簡単にできてしまいますが、性質についてはしっかりと理解した上で採用するかどうかを見極める必要があると思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちわ、インフラエンジニアをしている rakus-tatsu-kashi です。 今回は代理投稿です。同じ部署のインフラエンジニアが見つけてくれたテクニックをまとめてくれてました！ この場を借りて、改めてお礼させていただきます！ ありがとうございます！！！ また、インフラエンジニアをやっていると、泥臭くなりやすい設定作業もあります。それを、 それを当たり前だと思いこまず、解決しようとするマインド 実際に解決する手段を見つけて、実現する実行力 が素晴らしい、また凄いなー、と思いました！！負けてはいられん...。 ということで、下記、本編です！！ はじめに 今回は皆さんおなじみ、ZabbixのLLD(ローレベルディスカバリ)についてです。 ちょっと便利だなって思ったものがあるのでご紹介したいと思います。 ではさっそくですが、ご紹介する内容は以下2つです。 1．LLDに任意の監視を入れたい！ 2．LLDのトリガの深刻度を変えたい！ また、実施した環境はこちらになります。 利用するのは、以下の2つです。 いずれも Version 4.0.12 です。 ZabbixServer ZabbixAgent 1．LLDに任意の監視を入れたい！ さっそく「1．LLDに任意の監視を入れたい！」からお話ししたいと思います。 皆さんご存じのとおりZabbixLLDはとても便利です。 サーバ(機器)によってデ バイス が何個ほどあるかを考慮せず、 データを取得できるようになったり、 トリガを設定できるようになったり、 をすることができます。 とっても便利です。 ただ、 意外と痒いところに手が届かない。 デフォルトで用意されているアイテムが多くない などはあります。 うちでいうと RAID 監視を作成するときに困りました。 環境によってコントローラの数やvdiskの数が異なるのに…。それぞれ用に結局作らなくちゃいけないの…？ この面倒を、LLDの拡張というので解消を試みました。 任意のアイテムキーを json 形式で出力するようにして、そのアイテムキーをディスカバリで指定するとLLDを使えるようになります。 たとえば RAID のvdiskが複数個存在していて、そのvdiskごとにzabbixのアイテムをLLDで作りたい場合は、以下のような スクリプト を書きます #!/bin/bash LIST=`VDISKIDを取得するコマンド` if [ "${LIST}" = "" ] ;then echo "ZBX_NOTSUPPORTED" exit 1 fi echo "{" echo " \"data\":[" FIRST=1 for VER in ${LIST} do if [ ${FIRST} -eq 1 ] ; then echo "" FIRST=0 else echo "," fi echo -e -n "\t\t{ \"{#VDISKID}\":\"${VER}\" }" done echo "" echo " ]" echo "}" すると出力結果はこんな感じ { " data ": [ { " {#VDISKID} ":" 0 " } , { " {#VDISKID} ":" 2 " } ] } ここまで準備できたら、ZabbixAgentに以下の設定を読み込ませます。 UserParameter=vfs.vdisk.discovery,/etc/zabbix/vfs_vdisk_discovery.sh 次に、ZabbixServerでは、 「 vfs .adisk.discovery」をディスカバリルールのキーに指定 「storage.vdisk[{#VDISKID}]をアイテムのプロトタイプのキーに指定 すると！ 任意の個数のVDISKがキーとして読み込める！！！ という仕組みです。 実施してみると意外と簡単なので試してみてください。 2．LLDのトリガの深刻度を変えたい！ つづいて「2．LLDのトリガの深刻度を変えたい！」について とっても便利なLLD、運用していく中で、監視の内容を変更したいと思うことが出来ました。 通常であればテンプレートのトリガの深刻度を修正して…と対応するのですが、LLDのトリガプロトタイプの深刻度を修正しても反映されない！ 困りました。 大量にディスカバリで作成されたサーバたち、それらを一つずつ修正しろと…？ 現実的ではない…と途方にくれました。 途方に暮れてしばらく空を眺めているうちにひらめきました。 LLDのトリガプロトタイプの深刻度は変更しても反映されない…が、LLDのトリガプロトタイプの条件式の変更は反映される。 ならば 深刻度を修正したうえで、条件式を修正して、また条件式を戻せば…？ はやる気持ちを抑えて実験…！ 無事深刻度が修正できました！ ｷﾀ━━(☆∀☆)━━!!! どうやらトリガの無効などもうまく反映されない模様、同じやり方で試してみるのもいいかもしれませんね。 最後に 今回は、ZabbixのLLDについてのTips？を記載させていただきました。 Zabbixはせっかく機能が多いため、こういったTipsを身に身に付けていって、有効活用していきたいですね！！ 以上！

こんにちは、masakaです。 前の会社でPWAについて少し調べていたのですが、特に発表することもなかったので 今回はその内容をブログにしてみました。 ざっくりとした説明と、簡単な実装をやってみたいと思います。 PWAとは PWAの代表的な機能 Webとネイティブアプリ、それぞれの特徴とPWAが求めるもの PWAを支える三つの柱 結局のところ、PWAとは PWAの対応状況 デスクトップ環境もPWAの対象に [実践編] PWA化への第一歩 PWA化のために必要なこと - [Web App Manifest]と[Service Worker] manifest Service Worker Webサイトからインストール出来るようにする - A2HS サンプルアプリとWebサーバの準備 A2HSを実装する オフラインでも実行できるようにする おわりに PWAとは ネイティブアプリみたいなWebアプリ PWAは「 progressive web apps」のことを指します。2015年に発表され、話題に上がってきました。 PWAに対応した代表的なサイトとして、 Twitter や国内だとSUUMOなどがよく例に挙げられます。 PWAというワードで検索すると、「ネイティブアプリみたいな」Webアプリである、という抽象的な内容が散見されます。 この表現は間違っていないです が、何をもって「ネイティブアプリみたい」というのか、いまいちはっきりしません。 もう少し詳しく理解してみることにします。 PWAの代表的な機能 機能的な面で調べると、PWAで出来ることとして代表的なものには以下があります。 ホーム画面への追加：アプリの様にインストールし、ホーム画面から起動できる オフライン起動：ネットワークに接続していなくても使用できる バックグラウンド同期：オフライン時に操作した内容を、ネットワーク接続されたタイミングでバックグラウンド送信する プッシュ通知：アプリからの通知 これらの機能が実装されることがPWAなのでしょうか？ Webとネイティブアプリ、それぞれの特徴とPWAが求めるもの Google によるPWAの説明 には、ネイティブアプリとWeb アプリの特徴を次のように書いてあります。 ネイティブアプリの特徴 - 機能性・信頼性に優れる ホーム画面、タスクバーなどに存在しネットワークに影響されず使用できる 機能が豊富 Web アプリの特徴 - 到達性に優れる 単一コードベース デ バイス を問わず、誰でもどこでもアクセスできる その上で、PWAはWebアプリに双方の長所を持たせることを目指しているようで、以下のような記載がされています。 PWAはあくまでWeb アプリである モダンな API で構築されている デ バイス やブラウザを問わない到達性 PWAを支える三つの柱 加えてネイティブアプリのように感じさせるための三つの柱についても書かれています。 1.Capable (機能) Webは様々なことが出来るように機能拡張し、成長し続ける これらを取り入れることによりネイティブアプリでしか出来なかったことがWeb で可能になっていく 2.Reliable (信頼) ネットワークに影響されずに使用できる ネットワーク接続が出来ない、あるいは低速なネットワークでも使用できる 3.Installable (インストール可能) ブラウザの中で動くのではなく独立したアプリとして動く 1.はともかく、2.と 3.は具体的ですね。 ちなみに、以前は Google の デベロッパーページ では、 Reliable Fast Engaging という特徴を書いていたようなのですが、少し変わっているようです。 結局のところ、PWAとは これまでの内容で、つまるところPWAとは ネイティブアプリ的なユーザー体験を得られるWebアプリ であり、 ネットワーク状態に影響されず、 独立したアプリのように起動でき、 新しいWebAPIを採用し、機能的にネイティブアプリに大きく劣らないようにする といった要素を満たしておくと、結果的にそうなるという感じでしょうか。 PWAに求められる、より具体的な内容はPWAの チェックリスト を見ると分かります。 よりよいユーザー体験を提供しましょう的な内容が多い印象です。 PWAの対応状況 PWAはあくまでWebアプリなので、ブラウザによって 対応状況 が変わってきてしまいます。 What Web Can Do Today というサイトでは、アクセスされたブラウザでどの機能が使えるか表示してくれます。 Google が推進しているだけあって、 Android Chrome は早くからPWA対応 iOS Safari は一部の機能未対応 セキュリティ的な思惑もあり、すぐに対応は難しそう iOS でもプッシュ通知くらいは使えてほしいですが、iOS14でもまだ未対応です・・。 デスクトップ環境もPWAの対象に PWAは元々モバイル環境をターゲットにしていたようですが、 Chrome とEdgeはデスクトップ環境でもPWAに対応しています。 Chrome は version67 でPWAについての記載があります。 モバイルでPWA対応していたものは、特にデスクトップ用にコードを変更する必要はなく、そのままデスクトップPWAとして使えます。 PCでもPWAを利用できる状況になってきています。 [実践編] PWA化への第一歩 ここからは実践編です。今回は手始めに、PWAっぽくするために インストール可能にする オフラインで使用できる をやってみます。 デスクトップPWAとしての使用をターゲットにします。 PWA化のために必要なこと - [Web App Manifest]と[Service Worker] PWA化において欠かせない要素は、 Web App Manifest Service Worker の二つがあります。 manifest manifestファイルはウェブアプリについての情報や、挙動についての設定が記したファイルです。 ダウンロードし、アプリとして動かすために必要な情報が記載され、中身は JSON です。 ユーザーが取得できるよう、Web上に配置します。 Service Worker Service Workerはブラウザのメイン スクリプト 処理とは別に、バックグラウンドとして実行される スクリプト です。 PWAの肝となる部分かと思います。 ServiceWorkerはWebアプリ（ブラウザ）とネットワークの間で動作します。 必要に応じてキャッシュからデータを取得するか、ネットワークへリク エス トするかを制御できます。 sw オフライン時や、通信環境が悪い状況での実行に密接に影響しそうな機能ですね。 Webサイトからインストール出来るようにする - A2HS アプリとしてホーム画面などに追加する機能を 「A2HS」 と呼びます。(Add-to-Home-Screen の略) 早速、これをやってみましょう。 サンプルアプリとWebサーバの準備 まず、何かWebアプリが必要です。 htmlと JavaScript でごく簡単なクリック連打ゲームを作成しました。 これで試してみましょう。 GitHub にもあります。 クリック連打ゲームのソース index.html <!DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > button mashing </ title > < link rel = "stylesheet" type = "text/css" href = "app.css" /> </ head > < body > < div class = "wrapper" > < div > 目標クリック連打数： < span class = "js-target-count" > 10 </ span ></ div > < div class = "timer" > < span class = "js-timer-label" > 経過時間： </ span > < span class = "js-spend-time" ></ span > </ div > < div class = "click-btn-wrapper" > < button class = "js-click-target btn-click-target" > < span > Click! </ span >< br /> < span class = "js-counter" ></ span >< br /> </ button > </ div > < div > < button class = "js-reset btn-reset" > リセット </ button > </ div > < div class = "change-count-wrapper" > クリック数を変更する < ul > < li > < button class = "js-change-count btn-change-count" data -count= "10" > クリック数：10回 </ button > </ li > < li > < button class = "js-change-count btn-change-count" data -count= "20" > クリック数：20回 </ button > </ li > < li > < button class = "js-change-count btn-change-count" data -count= "30" > クリック数：30回 </ button > </ li > </ ul > </ div > </ div > < script src = "app.js" ></ script > </ body > </ html > app. css .wrapper { padding : 10px ; max-width : 400px ; margin : 0 auto ; text-align : center ; font-size : 14px ; } .click-btn-wrapper { margin : 10px auto ; } .btn-click-target { display : inline-block ; text-decoration : none ; color : #668ad8 ; background-color : #fff ; width : 80px ; height : 80px ; border-radius : 50 %; border : solid 2px #668ad8 ; text-align : center ; overflow : hidden ; font-weight : bold ; transition : 0.4s ; } .btn-click-target : hover { background : #b3e1ff ; } .change-count-wrapper { max-width : 240px ; margin : 20px auto 0px auto ; } .btn-change-count { position : relative ; display : inline-block ; font-weight : bold ; padding : 0.25em 0.5em ; text-decoration : none ; color : #00bcd4 ; background : #dbebf8 ; border : none ; transition : 0.4s ; } .btn-change-count : hover { background : #00bcd4 ; color : white ; } .header-change-count { border-bottom : solid 3px black ; } ul , ol { padding : 0 ; text-align : center ; margin : 3px 0px ; } ul li { position : relative ; list-style-type : none !important ; padding : 0.3em 0.3em 0.3em 0.3em ; margin-bottom : 1px ; vertical-align : middle ; } .btn-reset { position : relative ; display : inline-block ; font-weight : bold ; padding : 0.25em 0.5em ; text-decoration : none ; color : #00BCD4 ; background : #ECECEC ; border : none ; border-radius : 0 ; transition : . 4s ; } .btn-reset : hover { background : #636363 ; } app.js let clickCount = 0; let playing = false ; let targetCount = 10; let spendTime = 0; let timerId = 0; const clickTarget = document .querySelector( ".js-click-target" ); const resetBtn = document .querySelector( ".js-reset" ); const counterText = document .querySelector( ".js-counter" ); const targetCountText = document .querySelector( ".js-target-count" ); const spendTimeText = document .querySelector( ".js-spend-time" ); const timerLabelText = document .querySelector( ".js-timer-label" ); const countChanger = document .getElementsByClassName( "js-change-count" ); Array .prototype.forEach.call(countChanger, (btn) => { btn.addEventListener( "click" , (e) => { targetCount = btn.getAttribute( "data-count" ); targetCountText.innerHTML = targetCount; } ); } ); const start = () => { clickCount = 0; time = 0; playing = true ; timerLabelText.innerHTML = "経過時間：" ; counterText.innerText = clickCount; spendTimeText.innerHTML = time / 1000; timerId = setInterval(() => { time += 10; spendTimeText.innerHTML = (time / 1000).toFixed(2); } , 10); } ; const complete = () => { playing = false ; timerLabelText.innerHTML = "連打終了！　記録：" ; clearInterval(timerId); clickTarget.disabled = true ; setTimeout(() => (clickTarget.disabled = false ), 2000); } ; const reset = () => { playing = false ; clickCount = 0; counterText.innerText = clickCount; spendTimeText.innerHTML = 0; timerLabelText.innerHTML = "経過時間：" ; clickTarget.disabled = false ; clearInterval(timerId); } ; // 初回クリックでスタート clickTarget.addEventListener( "click" , () => { if (playing) return ; start(); playing = true ; } ); // クリック時のカウントアップ clickTarget.addEventListener( "click" , () => { if (!playing) return ; counterText.innerText = ++clickCount; if (clickCount >= targetCount) { complete(); } } ); // リセットボタン resetBtn.addEventListener( "click" , () => reset()); これらhtml, css , jsファイルを配置したらローカルでwebサーバを起動してアクセスできるようにします。 (ここではnode.jsの http-server を使いますが、なんでも構いません) npm install -g http-server ファイルを配置した場所で http-server -p 8001 これで http://localhost:8001/index.html `にアクセスできるようにします。 ※ちなみに、 GitHub Pagesを使うと HTTPS でアクセスできるので楽です。 A2HSを実装する やることはそう多くはありません。以下を実行すれば、インストールが可能になります。 1.manifest(Web App Manifest)を作成する htmlのヘッダにmanifest. json へのlinkを記述する 2.ServiceWorkerを登録し、fetchイベントをハンドリングさせる この他に HTTPS 経由で提供される必要があるようですが、 localhost の場合はHTTPでもOK です。 1.manifestの作成 まずmanifestを作成していきます。 中身は JSON ですが、拡張子は .webmanifest にするべきなようです。が、 .json でも動きます。 ここでは manifest.webmanifest として作成します。 manifest.webmanifest { " name ": " Button mashing ", " short_name ": " Bm ", " description ": " クリック連打 ", " icons ": [ { " src ": " ./icons/icon-192.png ", " sizes ": " 192x192 ", " type ": " image/png " } , { " src ": " ./icons/icon-512.png ", " sizes ": " 512x512 ", " type ": " image/png " } ] , " start_url ": " ./index.html ", " display ": " standalone ", " background_color ": " #FFFFFF ", " theme_color ": " #FFFFFF " } ざっと項目の説明です。 name: アプリの名称。 icons: ホーム画面やデスクトップに表示するアイコン。192 192と512 512があると良いらしいです。（とりあえず適当に作るか拾う） start_url: インストールして実行するファイルのパス。 display: 表示方法。アプリっぽく動かすには、 standalone か fullscreen を指定。fullscreenだとステータスバーなどのUIも表示されない。 パス系はmanifestファイルの場所からの 相対パス です。 作成したら、index.htmlにこのmanifestへのリンクを記載します。 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>button mashing</title> <link rel="stylesheet" type="text/css" href="app.css" /> + <link rel="manifest" href="manifest.webmanifest" /> </script> </head> 2.Service Workerの登録 SeriveWorkerの実態は JavaScript です。 sw.js にSeriveWorkerの本体を記載し、それをアプリ内から登録します。 sw.js self .addEventListener( 'fetch' , (e) => {} ) インストールに必要なのは、このfetchイベントをハンドリングさせるだけです。コールバックは空で構いません。 (ServiceWorker内では、selfに ServiceWorkerGlobalScope がbindされています。) これをアプリケーション内で登録します。 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>button mashing</title> <link rel="stylesheet" type="text/css" href="app.css" /> <link rel="manifest" href="manifest.webmanifest" /> + <!-- ServiceWorker --> + <script> + if ("serviceWorker" in navigator) { + window.addEventListener("load", function () { + navigator.serviceWorker.register("./sw.js").then( + function (registration) { + // Registration was successful + console.log( + "ServiceWorker registration successful with scope: ", + registration.scope + ); + }, + function (err) { + // registration failed :( + console.log("ServiceWorker registration failed: ", err); + } + ); + }); + } + </script> </head> ここまで変更したら、 localhost:8001/index.html にアクセスします。 アドレスバーの右端に、 + のアイコンが追加されました。 PWAのインストールボタン・・・わかりづらい クリックしてインストールしてみます。デスクトップにアイコンが追加され、起動してみると・・ デスクトップから起動したアプリ 起動できました。これでデスクトップに追加することができるようになりました。 オフラインでも実行できるようにする アプリとして起動できるようにはなりましたが、このままではオフラインでは使用できません。 コンテンツをオフラインで使用できるようにするため、キャッシュ処理をService Workerに書かなければならないのですが、 workbox を使うと簡単に試せます。 sw.jsにworkboxを利用したファイルのキャッシュ処理を書いてみましょう。 sw.jsに以下を追加します。 importScripts( 'https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js' ); workbox.precaching.precacheAndRoute( [ '/index.html' , '/app.css' , '/app.js' ] ); pre-cacheを使用しています。（インストール時にキャッシュされる機能） 本来はファイルにリビジョンを指定して、バージョン管理を行うことも必要ですが今回は割愛します。 キャッシュ処理を追加したところで、再度アプリをインストールし直してみます。（アンインストールはアプリ右上のメニューからできます） http-serverを停止したり、オフライン状態でもインストールしたゲームを起動できるようになっています。 どういう仕組みになっているのか軽く確認してみましょう。 開発者ツールを見るとキャッシュされたファイルはService Workerから取得していることがわかります cache storageに保存されています これで、オフライン実行が有効になります。 PWA化への第一歩を踏み出せました。 おわりに PWAとは何かの把握と実装の第一歩をやってみました。 機会があったらプッシュ通知あたりもやってみたいと思います。 PWA自体は対応するサイトも増えてきているようですが、普及に関しては iOS の対応が未だ不透明である点がネックですね。 とはいえ iOS も徐々に対応機能を増やしてきてはいるので、今後も発展が見込めそうな技術かと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに 皆さん初めましてseahoseTです。 今回は Linux 上で文字列を処理することに便利な awk について紹介していきたいと思います。 目次 はじめに awkとは ここがすごいよ！awkのアレコレ！ awkの基本的な仕様 awkのコマンド パターン 正規表現 BEGIN,END 評価式 アクション awkの組み込み変数 awkのオプション awkの注意点 問題編：行の指定 解決編：行の指定 問題編：複数のパターンを使用する 解決編：複数のパターンを使用する 問題編：NRとFNR 解決編：NRとFNR 問題編：awkでシェル変数を使用する 解決編：awkでシェル変数を使用する awkの実践 おわりに awk とは AWK （オーク）は、 プログラミング言語 の一つ。 テキストファイル、特に空白類（スペースの他、タブなど）やカンマなどで区切られたデータファイルの処理を念頭に置いた仕様となっているが、 一般的なプログラミングに用いることも可能である。 UNIX 上で開発された。( Wikipedia より) awk とは Linux や Unix ( Mac )で使用できるファイルの集計など文字列を扱う場合に便利な プログラミング言語 。 同様に文字列を処理できる sed などが非常に特殊な文法をしていた事に対して、 C言語 ライクで人が分かりやすいような文法をしている。 awk は プログラミング言語 であるが、 Linux のコマンドのように扱うことができる 。 目次へ ここがすごいよ！ awk のアレコレ！ 殆どの Linux や Unix ( Mac )上で標準で使用することができ、コマンドの使い回しができるなど互換性が高い 「 gawk 」をインストールするなどひと手間必要だが Windows でも問題なく使用することができる プログラミング言語 であるが、 コンパイル は不要 簡単 目次へ awk の基本的な仕様 awk の基本的な構文は下記のようになる。 # コマンドを直接入力する場合 awk ' コマンド ' [ 入力ファイルのパス ] # コマンドをファイルから入力する場合 awk -f コマンドファイルのパス [ 入力ファイルのパス ] また、入力ファイルを複数指定することも可能。 # 入力ファイルを複数設定したい場合 awk ' コマンド ' [ 入力ファイルのパス 1 ] [ 入力ファイルのパス 2 ] ..... 「入力ファイル」を設定せずに「パイプ」や「リダイレクト」での受け渡しも可能。 # 入力を「パイプ」で行う場合の例 echo | awk ' コマンド ' awk では 各行ごと に指定した列に対して処理を行う。 この時 awk では行の事を 「レコード」 、列のことを 「フィールド」 と呼ぶ。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 上記の例のような「date.txt」が存在する場合にフィールド1(列1)を表示したい場合には、 # 「date.txt」のフィールド1(列1)を表示 awk ' {print $1} ' date.txt と記述することで各レコード(行)のフィールド1(列1)を表示し、下記のような結果を得ることができる。 # 結果 1 4 また、「$0」を使用することで全てのレコード(行)、フィールド(列)を参照することが可能。 # 「date.txt」の全レコード(行)、フィールド(列)を表示 awk ' {print $0} ' date.txt # 結果 1 2 3 4 5 6 目次へ awk のコマンド awkの基本的な仕様 で awk の'コマンド'と記述している部分は本来「パターン」と「アクション」の二つから成る。「アクション」の部分は具体的にどのような処理を行うのかを内容を記述する。「パターン」の部分ではどのような場合にアクションを行うかの条件を決定している。また、 awkの基本的な仕様 で行った通り「パターン」の部分に何も記述しない場合でも問題なく動作する。 # 'コマンド'を「パターン」部分と「アクション」部分に分けた場合 awk ' パターン { アクション } ' [ 入力ファイルのパス ] パターンの種類 正規表現 BEGIN END 評価式 正規表現 記述した 正規表現 のパターンにマッチした行にアクション部分の処理を施す。 # 書き方 awk ' /正規表現/ { アクション } ' [ 入力ファイルのパス ] このように 正規表現 の左右にスラッシュを入れて記述する。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # 「date.txt」ファイル中の「4」で「終わる」フィールド(列)を含むレコード(行)がある場合 # そのフィールド(行)のフィールド2(列2)を表示する awk ' /4$/ { print $2 } ' date.txt # 結果 5 BEGIN,END awk では「BEGIN」、「END」を使用することで「メイン」を含めた三つのブロック構造を作ることが出来る。「BEGIN」と「END」は前処理、後処理の関係になっており、「BEGIN」では入力ファイルを 読み込む前 に処理が行われ、「END」では入力ファイルを 読み込み終わった後 の処理を記述する。 宣言した変数は「BEGIN」、「メイン」、「END」のブロックをまたいで使用することが可能。一般的には「BEGIN」で宣言を行う。 # 書き方 # 例1 awk ' BEGIN { 入力ファイルを読み込む前のアクション } { メイン処理 } ' [ 入力ファイルのパス ] # 例2 awk ' { メイン処理 } END { 入力ファイルを読み込んだ後のアクション } ' [ 入力ファイルのパス ] # 例3 awk ' BEGIN { 入力ファイルを読み込む前のアクション } { メイン処理 } END { 入力ファイルを読み込んだ後のアクション } ' [ 入力ファイルのパス ] 「BEGIN」、「END」は省略可能であるため「メイン」の処理のみを記述した際でも問題なく動作する。 評価式 評価式の評価にマッチした行にアクション部分の処理を施す。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # 「date.txt」ファイル中の「フィールド3(列3)」が「6」であるレコード(行)が存在する場合 # そのレコード(行)のフィールド3(列3)を表示する awk ' $3 == "6" { print $3 } ' date.txt # 結果 6 この結果だけ見ると前述した 正規表現 で良いように思えるが後述する組み込み変数や「-v」オプションと組み合わせた際に真価を発揮する。 アクション 「アクション」内で複数の処理を行う場合は セミ コロン（;）で区切る。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # 「アクション」内で複数の処理を行う例 awk ' {print $0; print $1} ' date.txt # 結果 1 2 3 4 5 6 1 4 同じような処理を連続で行う場合にはカンマ（,）での記述も可能。 # 「$0」と「$1」を表示 awk ' {print $0, $1} ' date.txt # 結果 1 2 3 4 5 6 1 4 変数を使用する場合は Linux コマンドと違い「$」をつけない。 # 変数の仕様 awk ' {age = 2021; print age} ' date.txt # 結果 2021 目次へ awk の組み込み変数 予め awk に準備されている変数。「パターン」、「アクション」両方で使える。シェルの場合と違い組み込み変数を使用する際には「$」をつける必要がない点に注意。 変数名 効果 デフォルト(未設定の場合) ARGC コマンドライン 引数の個数 ARGV コマンドライン 引数（配列に格納） ENVIRON シェルの 環境変数 を参照 FILENAME 現在処理しているファイルの名前 FNR 現在処理しているファイルのレコード数(行数) NR 現在処理しているレコード含む処理した総レコードの数(行数) ※入力ファイルが複数の時注意 RS 読み込み時のレコード(行)の区切り文字 改行 ORS 出力時のレコード(行)の区切り文字 改行 FS 読み込み時のフィールド(列)の区切り文字 ※「-F」オプションでも変更可能 空白 OFS 出力時のレコード(行)の区切り文字 空白 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # 「date.txt」の改行を,に変更して表示 awk ' ORS = "," {print $0} ' date.txt # 結果 1 2 3 , 4 5 6 目次へ awk のオプション awk のオプションは一般的な Linux コマンドと同様に使うことができる。 オプション名 効果 デフォルト(未設定の場合) -f コマンドファイル名 awk コマンドが書かれたファイルを指定する -F 区切り文字 区切り文字を指定する 空白 -v 変数名=値 変数を定義する # オプションの記述例 awk -オプション ' コマンド ' [ 入力ファイルのパス ] 目次へ awk の注意点 この項では筆者が awk を使用した際に躓いた事に対する注意点を挙げていく。 問題編：行の指定 awk を実行する時、「パターン」で行数を指定しない場合、デフォルトでは全ての行を対象に取る。 解決編：行の指定 # 「date.txt」のレコード1(行1)のフィールド2(列2)を表示 awk ' NR == 1{print $2} ' date.txt パターンの部分に「NR == 表示したい行数」を設定することで指定した特定の行数のみの結果を得ることができる。パターンには4種類の項目があることは コマンド で記載しているが、原理としては評価式として現在の行数を評価しているといった形になる。 問題編：複数のパターンを使用する 「パターン」は複数を組み合わせることができる。 解決編：複数のパターンを使用する 「&&」や「||」を使うと、複数のパターンを組み合わせることがでる。また、「()」を使用することで数式のようにパターンの優先度を変更できる。 # 複数個パターンを使用したawkの例 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # レコード1(行1)以降でかつフィールド2(列2)が2ではない物を表示 awk ' NR>1 && ! ( $2 ~ 2 ){ print $0} ' date.txt ※「~」はマッチ演算子で「 = 」とほとんど同じ効果を持つ。「 = 」に置き換えた場合でも動作する。 # 結果 4 5 6 問題編：NRとFNR 入力ファイルが複数個の場合のレコード数(行数)が加算されてしまう。 解決編：NRとFNR 組み込み変数「NR」を使用してある特定のレコード(行)にのみ変更を加えたい。そんな時に、「入力ファイル」が複数個存在する場合注意が必要だ。例えば下記のような二つの入力ファイルがあったとしよう、 # 一つ目の入力ファイル 例 ) date1.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # 二つ目の入力ファイル 例 ) date2.txt 　列 1 列 2 列 3 行　 7 　 8 　 9 行　 10 　 11 　 12 二つの入力ファイルそれぞれのレコード2(行2)を表示したいので「NR == 2」として awk のコマンドを設定する。 # レコード2(行2)を表示したいコマンド awk ' NR == 2 {print $0} ' date1.txt date2.txt # 結果 4 5 6 「NR == 2」ではこのように「入力ファイル1」のレコード2(行2)だけしか表示することができていない。では、「FNR == 2」を使用してみるとどうだろう、 # レコード2(行2)を表示したいコマンド awk ' FNR == 2 {print $0} ' date1.txt date2.txt # 結果 4 5 6 10 11 12 期待した通りの結果、「date1.txt」と「date2.txt」のレコード2(行2)がそれぞれ表示していることが分かる。では次に「NR == 3」を行ってみる。 # レコード2(行2)を表示したいコマンド awk ' NR == 3 {print $0} ' date1.txt date2.txt # 結果 7 8 9 入力ファイル2のレコード1(行1)が表示されている。これはどこからレコード(行)のカウントが始まっているかの違いである。「NR」の場合は入力ファイル1の総レコードの2を処理した後入力ファイル2のレコード1(行1)を現在の行数に 加算 する。つまり入力ファイル2のレコード1(行1)は2+1で「NR = 3」にあたるということになる。 対して「FNR」は入力ファイル1の総レコードの2を処理した後行数のカウントを リセット する。つまり、レコード数(行数)は現在処理している入力ファイルのレコード数(行数)を参照することになる。 # 「NR」の処理イメージ(直列) 　 列 1 列 2 列 3 行 1 　 1 　 2 　 3 行 2 　 4 　 5 　 6 行 3 　 7 　 8 　 9 行 4 　 10 　 11 　 12 # 「FNR」のイメージ(並列) 　 列 1 列 2 列 3 行 1 　 1 　 2 　 3 行 2 　 4 　 5 　 6 　 列 1 列 2 列 3 行 1 　 7 　 8 　 9 行 2 　 10 　 11 　 12 問題編： awk でシェル変数を使用する awk 内ではデフォルトの状態でシェル変数を使用することはできない。 解決編： awk でシェル変数を使用する 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # シェル変数 var = 100 上記のように「date.txt」とシェル変数「var」が設定されている場合に「date.txt」のフィールド2(列2)と「var」の合計を awk を用い表示したいとする時、 # 「date.txt」のフィールド2(列2)とシェル変数「var」の合計を表示 awk ' {print $2 + var} ' date.txt と記述してもシェル変数である「var」を正しく認識できないため、正しい結果を得ることはできない。 awk は Linux のコマンドのように扱うことができるが、あくまで プログラミング言語 の一種であるため同様に扱うことができないのである。そこで解決策として「-v」オプションを使用する。 「-v」オプション オプション名 効果 -v 変数名=値 変数を定義する オプション の項で紹介している物と同様である。「-v」オプションでは任意の変数名に値を設定することで任意の変数を組み込み変数のように「パターン」や「アクション」で使用できるようにする効果がある。正確に言うと プログラミング言語 awk に対して 値を受け渡す オプションとなっている。値を設定する際、 シェル変数を受け渡すことも可能 なのでデフォルトではシェル変数を使用することが出来ないといった問題を解決することができる。 # 上記の例をもとにした「-v」オプション設定例 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # シェル変数 var = 100 # 「date.txt」のフィールド2(列2)とシェル変数「var」の合計を表示 awk -v awkVar = $var ' {print $2 + awkVar} ' date.txt # 結果 102 105 「-v」オプションを複数設定することで複数の変数を設定することもできる。 # 上記の例をもとにした「-v」オプション設定例 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # シェル変数 var = 100 var2 = 200 # 「date.txt」のフィールド2(列2)とシェル変数「var」、シェル変数「var2」の合計を表示 awk -v awkVar1 = $var -v awkVar2 = $var2 ' {print $2 + awkVar1 + awkVar2} ' date.txt # 結果 302 305 注意して欲しいのは設定した変数をコマンド内で使用する場合 組み込み変数 と同様に、「$」をつけずに、設定した変数名のみを記述することだ。シェルでの一般的な変数呼び出しとは勝手が違うので気を付ける必要がある。 ・・・しかし、実は「-v」オプションを使わなくても awk に値を受け渡すことは可能である。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # シェル変数 var = 100 # 「-v」オプションを使用せずに変数「awkVar3」を設定 awk ' {print $2 + awkVar3} ' awkVar3 = $var date.txt # 結果 102 105 これだけ見ると同様の動作をしているように見えるが次の例を見て欲しい。 # 「-v」オプションを使い「message」を設定 echo | awk -v message = " Test massage " ' BEGIN{print massage} {print massaeg} END{print massage} ' # BEGIN：結果 Test massage # メイン：結果 Test massage # END：結果 Test massage # 「-v」オプションを使わずに「message」を設定 echo | awk ' BEGIN{print massage} {print massaeg} END{print massage} ' message = " Test massage " # BEGIN：結果 # メイン：結果 Test massage # END：結果 Test massage おわかりいただけただろうか。「-v」オプションを使用せずに変数を設定した場合「パターン」の「BEGIN」ブロックにおいて変数が参照できていないのである。この違いにより「-v」オプションを使用することの方が安全であると言える。 また、処理を繰り返しを行う回数は「入力ファイル」のレコード数(行数)であるということに注意。 例 ) date.txt 　列 1 列 2 列 3 行　 1 　 2 　 3 行　 4 　 5 　 6 # シェル変数 var = 100 # awkVar4の表示 awk -v awkVar4 = $var ' {print awkVar4} ' date.txt # 結果 100 100 # 「date.txt」の総レコード数(行数)である2回分の表示処理が繰り返し行われている。 他にも「-v」オプションを使わずに awk 内でシェル変数を使用する方法があるので紹介しておく。 # シェル変数 var = 100 # 変数名を「'」(シングルクォーテーション)で囲む echo | awk ' {pritn ' ${var} ' } ' # 結果 100 awk は「'」(シングルクォート)に囲まれたところを解析しようとするので、シェル変数の部分は「'」(シングルクォート)から外せばシェル変数として扱ってくれる。 目次へ awk の実践 「stress」コマンドを用いてCPUに負荷をかけそのログの統計情報を算出してみた。ログは長いので折り畳み先に記載する。 5分間の「vmstat」のログ 1 2021 / 01 / 18 09:56:00 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 2 2021 / 01 / 18 09:56:00 r b swpd free buff cache si so bi bo in cs us sy id wa st 3 2021 / 01 / 18 09:56:00 2 0 0 1152892 2284 471684 0 0 0 1 7 10 0 0 100 0 0 4 2021 / 01 / 18 09:56:01 0 0 0 1152752 2284 471680 0 0 0 0 152 333 0 0 100 0 0 5 2021 / 01 / 18 09:56:02 0 0 0 1152752 2284 471680 0 0 0 0 122 272 0 0 100 0 0 6 2021 / 01 / 18 09:56:03 0 0 0 1152752 2284 471680 0 0 0 432 166 345 0 0 100 0 0 7 2021 / 01 / 18 09:56:04 0 0 0 1152752 2284 471680 0 0 0 0 139 292 0 0 100 0 0 8 2021 / 01 / 18 09:56:05 4 0 0 1147864 2284 474028 0 0 0 0 827 263 73 2 25 0 0 9 2021 / 01 / 18 09:56:06 1 0 0 1147864 2284 474028 0 0 0 0 873 242 80 1 19 0 0 10 2021 / 01 / 18 09:56:07 1 0 0 1147864 2284 474028 0 0 0 0 867 241 80 0 20 0 0 11 2021 / 01 / 18 09:56:08 5 0 0 1147864 2284 474028 0 0 0 0 871 242 80 0 20 0 0 12 2021 / 01 / 18 09:56:09 0 0 0 1147864 2284 474028 0 0 0 0 865 241 81 0 19 0 0 13 2021 / 01 / 18 09:56:10 1 0 0 1147864 2284 474028 0 0 0 0 861 253 78 0 22 0 0 14 2021 / 01 / 18 09:56:11 1 0 0 1147864 2284 474028 0 0 0 0 874 241 80 1 19 0 0 15 2021 / 01 / 18 09:56:12 1 0 0 1147864 2284 474028 0 0 0 4 859 230 79 1 20 0 0 16 2021 / 01 / 18 09:56:13 1 0 0 1147864 2284 474028 0 0 0 0 873 250 81 0 19 0 0 17 2021 / 01 / 18 09:56:14 0 0 0 1147832 2284 474028 0 0 0 0 860 239 80 0 20 0 0 18 2021 / 01 / 18 09:56:15 1 0 0 1147832 2284 474028 0 0 0 0 871 255 79 0 21 0 0 19 2021 / 01 / 18 09:56:16 0 0 0 1147832 2284 474028 0 0 0 0 860 232 80 1 19 0 0 20 2021 / 01 / 18 09:56:17 2 0 0 1147832 2284 474028 0 0 0 0 868 239 80 0 20 0 0 21 2021 / 01 / 18 09:56:18 1 0 0 1147832 2284 474028 0 0 0 0 881 255 81 0 19 0 0 22 2021 / 01 / 18 09:56:19 0 0 0 1147832 2284 474028 0 0 0 0 852 236 79 0 21 0 0 23 2021 / 01 / 18 09:56:20 1 0 0 1147832 2284 474028 0 0 0 0 873 248 81 0 19 0 0 24 2021 / 01 / 18 09:56:21 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 25 2021 / 01 / 18 09:56:21 r b swpd free buff cache si so bi bo in cs us sy id wa st 26 2021 / 01 / 18 09:56:21 1 0 0 1147832 2284 474028 0 0 0 0 875 267 79 1 20 0 0 27 2021 / 01 / 18 09:56:22 2 0 0 1147832 2284 474028 0 0 0 0 860 235 78 1 21 0 0 28 2021 / 01 / 18 09:56:23 3 0 0 1147832 2284 474028 0 0 0 0 868 247 80 0 20 0 0 29 2021 / 01 / 18 09:56:24 1 0 0 1147832 2284 474028 0 0 0 0 871 221 81 0 19 0 0 30 2021 / 01 / 18 09:56:25 1 0 0 1147832 2284 474028 0 0 0 0 883 241 81 0 19 0 0 31 2021 / 01 / 18 09:56:26 0 0 0 1147832 2284 474028 0 0 0 0 861 249 78 1 21 0 0 32 2021 / 01 / 18 09:56:27 0 0 0 1147832 2284 474028 0 0 0 0 892 261 81 0 19 0 0 33 2021 / 01 / 18 09:56:28 0 0 0 1147832 2284 474028 0 0 0 0 869 250 79 0 21 0 0 34 2021 / 01 / 18 09:56:29 1 0 0 1147832 2284 474028 0 0 0 0 891 254 80 0 20 0 0 35 2021 / 01 / 18 09:56:30 1 0 0 1147832 2284 474028 0 0 0 0 879 250 79 2 19 0 0 36 2021 / 01 / 18 09:56:31 2 0 0 1147832 2284 474028 0 0 0 0 879 234 80 0 20 0 0 37 2021 / 01 / 18 09:56:32 0 0 0 1147832 2284 474028 0 0 0 0 887 248 81 0 19 0 0 38 2021 / 01 / 18 09:56:33 2 0 0 1147832 2284 474028 0 0 0 2 874 275 78 0 22 0 0 39 2021 / 01 / 18 09:56:34 1 0 0 1147832 2284 474028 0 0 0 0 887 261 81 0 19 0 0 40 2021 / 01 / 18 09:56:35 1 0 0 1147832 2284 474028 0 0 0 0 872 261 80 0 20 0 0 41 2021 / 01 / 18 09:56:36 4 0 0 1147832 2284 474028 0 0 0 0 891 258 80 1 19 0 0 42 2021 / 01 / 18 09:56:37 0 0 0 1147832 2284 474032 0 0 0 0 865 237 79 0 21 0 0 43 2021 / 01 / 18 09:56:38 1 0 0 1147832 2284 474032 0 0 0 0 885 260 80 0 20 0 0 44 2021 / 01 / 18 09:56:39 0 0 0 1147832 2284 474032 0 0 0 0 868 238 80 0 20 0 0 45 2021 / 01 / 18 09:56:40 1 0 0 1147832 2284 474032 0 0 0 0 883 264 78 2 20 0 0 46 2021 / 01 / 18 09:56:41 1 0 0 1147832 2284 474032 0 0 0 0 878 237 81 0 19 0 0 47 2021 / 01 / 18 09:56:42 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 48 2021 / 01 / 18 09:56:42 r b swpd free buff cache si so bi bo in cs us sy id wa st 49 2021 / 01 / 18 09:56:42 2 0 0 1147832 2284 474032 0 0 0 0 871 235 80 0 20 0 0 50 2021 / 01 / 18 09:56:43 1 0 0 1147832 2284 474032 0 0 0 8 880 223 81 0 19 0 0 51 2021 / 01 / 18 09:56:44 1 0 0 1147832 2284 474032 0 0 0 0 872 258 80 0 20 0 0 52 2021 / 01 / 18 09:56:45 2 0 0 1147832 2284 474032 0 0 0 0 856 231 78 0 22 0 0 53 2021 / 01 / 18 09:56:46 1 0 0 1147832 2284 474032 0 0 0 0 888 252 80 1 19 0 0 54 2021 / 01 / 18 09:56:47 1 0 0 1147832 2284 474032 0 0 0 0 872 242 80 0 20 0 0 55 2021 / 01 / 18 09:56:48 1 0 0 1147832 2284 474032 0 0 0 0 896 253 81 0 19 0 0 56 2021 / 01 / 18 09:56:49 0 0 0 1147832 2284 474032 0 0 0 0 874 240 81 0 19 0 0 57 2021 / 01 / 18 09:56:50 0 0 0 1147832 2284 474032 0 0 0 0 872 261 79 0 21 0 0 58 2021 / 01 / 18 09:56:51 1 0 0 1147832 2284 474032 0 0 0 0 875 229 80 1 19 0 0 59 2021 / 01 / 18 09:56:52 0 0 0 1147832 2284 474032 0 0 0 0 854 239 78 0 22 0 0 60 2021 / 01 / 18 09:56:53 1 0 0 1147832 2284 474032 0 0 0 0 869 223 81 0 19 0 0 61 2021 / 01 / 18 09:56:54 1 0 0 1147832 2284 474032 0 0 0 0 861 243 80 0 20 0 0 62 2021 / 01 / 18 09:56:55 1 0 0 1147832 2284 474032 0 0 0 0 870 227 80 0 20 0 0 63 2021 / 01 / 18 09:56:56 0 0 0 1147832 2284 474032 0 0 0 0 887 256 80 1 19 0 0 64 2021 / 01 / 18 09:56:57 1 0 0 1147832 2284 474032 0 0 0 9 856 228 79 0 21 0 0 65 2021 / 01 / 18 09:56:58 1 0 0 1147832 2284 474032 0 0 0 0 865 238 80 0 20 0 0 66 2021 / 01 / 18 09:56:59 1 0 0 1147832 2284 474032 0 0 0 0 872 219 80 0 20 0 0 67 2021 / 01 / 18 09:57:00 1 0 0 1147832 2284 474032 0 0 0 0 898 273 81 0 19 0 0 68 2021 / 01 / 18 09:57:01 0 0 0 1147832 2284 474032 0 0 0 0 868 243 79 2 19 0 0 69 2021 / 01 / 18 09:57:02 1 0 0 1147832 2284 474032 0 0 0 0 872 244 80 0 20 0 0 70 2021 / 01 / 18 09:57:03 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 71 2021 / 01 / 18 09:57:03 r b swpd free buff cache si so bi bo in cs us sy id wa st 72 2021 / 01 / 18 09:57:03 1 0 0 1147832 2284 474032 0 0 0 13 878 249 79 1 20 0 0 73 2021 / 01 / 18 09:57:04 3 0 0 1147832 2284 474032 0 0 0 0 861 232 79 0 21 0 0 74 2021 / 01 / 18 09:57:05 3 0 0 1147832 2284 474032 0 0 0 0 883 234 80 0 20 0 0 75 2021 / 01 / 18 09:57:06 5 0 0 1147832 2284 474032 0 0 0 0 880 238 79 1 20 0 0 76 2021 / 01 / 18 09:57:07 1 0 0 1147832 2284 474032 0 0 0 0 881 227 81 0 19 0 0 77 2021 / 01 / 18 09:57:08 0 0 0 1147832 2284 474032 0 0 0 0 868 235 80 0 20 0 0 78 2021 / 01 / 18 09:57:09 0 0 0 1147832 2284 474032 0 0 0 0 873 257 79 0 21 0 0 79 2021 / 01 / 18 09:57:10 0 0 0 1147832 2284 474032 0 0 0 0 901 273 81 0 19 0 0 80 2021 / 01 / 18 09:57:11 2 0 0 1147832 2284 474032 0 0 0 0 878 244 78 1 21 0 0 81 2021 / 01 / 18 09:57:12 1 0 0 1147832 2284 474032 0 0 0 0 882 242 81 0 19 0 0 82 2021 / 01 / 18 09:57:13 1 0 0 1147832 2284 474036 0 0 0 0 861 234 80 0 20 0 0 83 2021 / 01 / 18 09:57:14 1 0 0 1147832 2284 474036 0 0 0 8 876 209 81 0 19 0 0 84 2021 / 01 / 18 09:57:15 0 0 0 1147832 2284 474036 0 0 0 0 854 228 78 0 22 0 0 85 2021 / 01 / 18 09:57:16 1 0 0 1147832 2284 474036 0 0 0 0 886 265 80 1 19 0 0 86 2021 / 01 / 18 09:57:17 1 0 0 1147832 2284 474036 0 0 0 0 883 260 80 0 20 0 0 87 2021 / 01 / 18 09:57:18 1 0 0 1147832 2284 474036 0 0 0 0 878 241 80 0 20 0 0 88 2021 / 01 / 18 09:57:19 2 0 0 1147832 2284 474036 0 0 0 0 893 245 80 1 19 0 0 89 2021 / 01 / 18 09:57:20 0 0 0 1147832 2284 474036 0 0 0 0 870 235 79 1 20 0 0 90 2021 / 01 / 18 09:57:21 1 0 0 1147832 2284 474036 0 0 0 0 870 238 79 1 20 0 0 91 2021 / 01 / 18 09:57:22 1 0 0 1147832 2284 474036 0 0 0 0 878 244 81 0 19 0 0 92 2021 / 01 / 18 09:57:23 1 0 0 1147832 2284 474036 0 0 0 0 851 241 78 0 22 0 0 93 2021 / 01 / 18 09:57:24 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 94 2021 / 01 / 18 09:57:24 r b swpd free buff cache si so bi bo in cs us sy id wa st 95 2021 / 01 / 18 09:57:24 3 0 0 1147832 2284 474036 0 0 0 0 879 222 81 0 19 0 0 96 2021 / 01 / 18 09:57:25 1 0 0 1147832 2284 474036 0 0 0 0 879 244 80 0 20 0 0 97 2021 / 01 / 18 09:57:26 1 0 0 1147832 2284 474036 0 0 0 0 893 269 80 1 19 0 0 98 2021 / 01 / 18 09:57:27 0 0 0 1147832 2284 474036 0 0 0 0 882 276 79 0 21 0 0 99 2021 / 01 / 18 09:57:28 1 0 0 1147832 2284 474036 0 0 0 0 887 266 80 0 20 0 0 100 2021 / 01 / 18 09:57:29 1 0 0 1147832 2284 474036 0 0 0 0 878 250 80 0 20 0 0 101 2021 / 01 / 18 09:57:30 3 0 0 1147832 2284 474036 0 0 0 0 896 264 80 0 20 0 0 102 2021 / 01 / 18 09:57:31 2 0 0 1147832 2284 474036 0 0 0 0 886 239 80 1 19 0 0 103 2021 / 01 / 18 09:57:32 0 0 0 1147832 2284 474036 0 0 0 0 855 239 79 0 21 0 0 104 2021 / 01 / 18 09:57:33 1 0 0 1147832 2284 474036 0 0 0 67 914 280 82 0 18 0 0 105 2021 / 01 / 18 09:57:34 2 0 0 1147832 2284 474036 0 0 0 0 875 282 78 0 22 0 0 106 2021 / 01 / 18 09:57:35 1 0 0 1147832 2284 474036 0 0 0 0 891 258 81 0 19 0 0 107 2021 / 01 / 18 09:57:36 1 0 0 1147832 2284 474036 0 0 0 0 882 273 79 1 20 0 0 108 2021 / 01 / 18 09:57:37 1 0 0 1147832 2284 474036 0 0 0 0 883 256 80 0 20 0 0 109 2021 / 01 / 18 09:57:38 0 0 0 1147832 2284 474036 0 0 0 0 891 261 80 1 19 0 0 110 2021 / 01 / 18 09:57:39 3 0 0 1147832 2284 474036 0 0 0 0 881 273 78 1 21 0 0 111 2021 / 01 / 18 09:57:40 6 0 0 1147832 2284 474036 0 0 0 0 877 237 80 0 20 0 0 112 2021 / 01 / 18 09:57:41 1 0 0 1147832 2284 474036 0 0 0 0 883 249 79 1 20 0 0 113 2021 / 01 / 18 09:57:42 1 0 0 1147832 2284 474036 0 0 0 0 875 247 81 0 19 0 0 114 2021 / 01 / 18 09:57:43 0 0 0 1147832 2284 474036 0 0 0 0 886 254 81 0 19 0 0 115 2021 / 01 / 18 09:57:44 0 0 0 1147832 2284 474036 0 0 0 0 860 234 79 0 21 0 0 116 2021 / 01 / 18 09:57:45 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 117 2021 / 01 / 18 09:57:45 r b swpd free buff cache si so bi bo in cs us sy id wa st 118 2021 / 01 / 18 09:57:45 2 0 0 1147832 2284 474036 0 0 0 4 893 255 81 0 19 0 0 119 2021 / 01 / 18 09:57:46 2 0 0 1147832 2284 474036 0 0 0 0 881 302 77 1 22 0 0 120 2021 / 01 / 18 09:57:47 1 0 0 1147832 2284 474036 0 0 0 0 893 249 81 0 19 0 0 121 2021 / 01 / 18 09:57:48 1 0 0 1147832 2284 474036 0 0 0 0 866 257 80 0 20 0 0 122 2021 / 01 / 18 09:57:49 1 0 0 1147832 2284 474040 0 0 0 0 875 252 81 0 19 0 0 123 2021 / 01 / 18 09:57:50 0 0 0 1147832 2284 474040 0 0 0 0 870 247 80 0 20 0 0 124 2021 / 01 / 18 09:57:51 1 0 0 1147832 2284 474040 0 0 0 0 861 243 78 2 20 0 0 125 2021 / 01 / 18 09:57:52 0 0 0 1147832 2284 474040 0 0 0 0 861 243 80 0 20 0 0 126 2021 / 01 / 18 09:57:53 3 0 0 1147832 2284 474040 0 0 0 0 865 226 80 0 20 0 0 127 2021 / 01 / 18 09:57:54 1 0 0 1147832 2284 474040 0 0 0 0 871 221 81 0 19 0 0 128 2021 / 01 / 18 09:57:55 0 0 0 1147832 2284 474040 0 0 0 0 868 232 80 0 20 0 0 129 2021 / 01 / 18 09:57:56 1 0 0 1147832 2284 474040 0 0 0 0 879 243 79 1 20 0 0 130 2021 / 01 / 18 09:57:57 0 0 0 1147832 2284 474040 0 0 0 0 857 239 79 1 20 0 0 131 2021 / 01 / 18 09:57:58 1 0 0 1147832 2284 474040 0 0 0 0 876 264 80 0 20 0 0 132 2021 / 01 / 18 09:57:59 4 0 0 1147832 2284 474040 0 0 0 0 897 279 80 0 20 0 0 133 2021 / 01 / 18 09:58:00 3 0 0 1147832 2284 474040 0 0 0 0 875 249 80 0 20 0 0 134 2021 / 01 / 18 09:58:01 1 0 0 1147832 2284 474040 0 0 0 0 904 299 80 1 19 0 0 135 2021 / 01 / 18 09:58:02 2 0 0 1147832 2284 474040 0 0 0 0 867 260 79 0 21 0 0 136 2021 / 01 / 18 09:58:03 1 0 0 1147832 2284 474040 0 0 0 9 870 242 80 0 20 0 0 137 2021 / 01 / 18 09:58:04 1 0 0 1147832 2284 474040 0 0 0 0 863 245 80 0 20 0 0 138 2021 / 01 / 18 09:58:05 2 0 0 1147832 2284 474040 0 0 0 0 881 245 81 0 19 0 0 139 2021 / 01 / 18 09:58:06 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 140 2021 / 01 / 18 09:58:06 r b swpd free buff cache si so bi bo in cs us sy id wa st 141 2021 / 01 / 18 09:58:06 1 0 0 1147832 2284 474040 0 0 0 0 862 232 80 0 20 0 0 142 2021 / 01 / 18 09:58:07 1 0 0 1147832 2284 474040 0 0 0 0 870 269 78 1 21 0 0 143 2021 / 01 / 18 09:58:08 0 0 0 1147832 2284 474040 0 0 0 0 869 231 81 0 19 0 0 144 2021 / 01 / 18 09:58:09 1 0 0 1147832 2284 474040 0 0 0 0 862 230 80 0 20 0 0 145 2021 / 01 / 18 09:58:10 1 0 0 1147832 2284 474040 0 0 0 0 884 250 80 0 20 0 0 146 2021 / 01 / 18 09:58:11 1 0 0 1147832 2284 474040 0 0 0 0 861 239 80 0 20 0 0 147 2021 / 01 / 18 09:58:12 1 0 0 1147832 2284 474040 0 0 0 0 866 243 80 1 19 0 0 148 2021 / 01 / 18 09:58:13 1 0 0 1147832 2284 474040 0 0 0 0 859 228 80 1 19 0 0 149 2021 / 01 / 18 09:58:14 1 0 0 1147832 2284 474040 0 0 0 0 872 252 78 0 22 0 0 150 2021 / 01 / 18 09:58:15 1 0 0 1147832 2284 474040 0 0 0 0 869 232 80 0 20 0 0 151 2021 / 01 / 18 09:58:16 2 0 0 1147832 2284 474040 0 0 0 8 876 246 80 1 19 0 0 152 2021 / 01 / 18 09:58:17 1 0 0 1147832 2284 474040 0 0 0 0 876 234 80 1 19 0 0 153 2021 / 01 / 18 09:58:18 1 0 0 1147832 2284 474040 0 0 0 0 865 262 78 0 22 0 0 154 2021 / 01 / 18 09:58:19 2 0 0 1147832 2284 474040 0 0 0 0 861 231 80 0 20 0 0 155 2021 / 01 / 18 09:58:20 1 0 0 1147832 2284 474040 0 0 0 0 876 262 80 0 20 0 0 156 2021 / 01 / 18 09:58:21 1 0 0 1147832 2284 474040 0 0 0 0 876 242 81 0 19 0 0 157 2021 / 01 / 18 09:58:22 1 0 0 1147832 2284 474040 0 0 0 0 868 241 80 1 19 0 0 158 2021 / 01 / 18 09:58:23 1 0 0 1147832 2284 474040 0 0 0 0 854 230 80 0 20 0 0 159 2021 / 01 / 18 09:58:24 1 0 0 1147832 2284 474040 0 0 0 0 872 237 80 0 20 0 0 160 2021 / 01 / 18 09:58:25 2 0 0 1147832 2284 474040 0 0 0 0 840 208 79 0 21 0 0 161 2021 / 01 / 18 09:58:26 1 0 0 1147832 2284 474040 0 0 0 0 879 232 81 0 19 0 0 162 2021 / 01 / 18 09:58:27 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 163 2021 / 01 / 18 09:58:27 r b swpd free buff cache si so bi bo in cs us sy id wa st 164 2021 / 01 / 18 09:58:27 3 0 0 1147804 2284 474044 0 0 0 0 874 256 78 1 21 0 0 165 2021 / 01 / 18 09:58:28 1 0 0 1147804 2284 474044 0 0 0 0 870 237 81 0 19 0 0 166 2021 / 01 / 18 09:58:29 0 0 0 1147804 2284 474044 0 0 0 0 871 246 81 0 19 0 0 167 2021 / 01 / 18 09:58:30 0 0 0 1147804 2284 474044 0 0 0 0 850 232 79 0 21 0 0 168 2021 / 01 / 18 09:58:31 1 0 0 1147804 2284 474044 0 0 0 0 887 239 81 0 19 0 0 169 2021 / 01 / 18 09:58:32 1 0 0 1147804 2284 474044 0 0 0 0 858 241 78 1 21 0 0 170 2021 / 01 / 18 09:58:33 1 0 0 1147804 2284 474044 0 0 0 0 870 234 81 0 19 0 0 171 2021 / 01 / 18 09:58:34 1 0 0 1147804 2284 474044 0 0 0 2 873 259 80 0 20 0 0 172 2021 / 01 / 18 09:58:35 1 0 0 1147804 2284 474044 0 0 0 0 877 251 80 0 20 0 0 173 2021 / 01 / 18 09:58:36 1 0 0 1147804 2284 474044 0 0 0 0 884 251 80 1 19 0 0 174 2021 / 01 / 18 09:58:37 1 0 0 1147804 2284 474044 0 0 0 0 852 236 78 0 22 0 0 175 2021 / 01 / 18 09:58:38 1 0 0 1147804 2284 474044 0 0 0 0 856 218 79 1 20 0 0 176 2021 / 01 / 18 09:58:39 1 0 0 1147804 2284 474044 0 0 0 0 869 253 81 0 19 0 0 177 2021 / 01 / 18 09:58:40 1 0 0 1147804 2284 474044 0 0 0 0 868 243 79 1 20 0 0 178 2021 / 01 / 18 09:58:41 0 0 0 1147804 2284 474044 0 0 0 0 886 280 81 0 19 0 0 179 2021 / 01 / 18 09:58:42 1 0 0 1147804 2284 474044 0 0 0 0 857 239 79 0 21 0 0 180 2021 / 01 / 18 09:58:43 0 0 0 1147804 2284 474044 0 0 0 0 862 244 79 1 20 0 0 181 2021 / 01 / 18 09:58:44 1 0 0 1147804 2284 474044 0 0 0 0 865 236 80 0 20 0 0 182 2021 / 01 / 18 09:58:45 3 0 0 1147804 2284 474044 0 0 0 0 879 252 81 0 19 0 0 183 2021 / 01 / 18 09:58:46 1 0 0 1147804 2284 474044 0 0 0 0 860 251 80 0 20 0 0 184 2021 / 01 / 18 09:58:47 2 0 0 1147804 2284 474044 0 0 0 8 887 252 80 0 20 0 0 185 2021 / 01 / 18 09:58:48 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 186 2021 / 01 / 18 09:58:48 r b swpd free buff cache si so bi bo in cs us sy id wa st 187 2021 / 01 / 18 09:58:48 1 0 0 1147804 2284 474044 0 0 0 0 857 249 78 1 21 0 0 188 2021 / 01 / 18 09:58:49 1 0 0 1147804 2284 474044 0 0 0 0 883 250 81 0 19 0 0 189 2021 / 01 / 18 09:58:50 1 0 0 1147804 2284 474044 0 0 0 0 851 224 79 0 21 0 0 190 2021 / 01 / 18 09:58:51 4 0 0 1147804 2284 474044 0 0 0 0 881 238 81 0 19 0 0 191 2021 / 01 / 18 09:58:52 1 0 0 1147804 2284 474044 0 0 0 0 860 217 81 0 19 0 0 192 2021 / 01 / 18 09:58:53 0 0 0 1147804 2284 474044 0 0 0 0 836 215 78 1 21 0 0 193 2021 / 01 / 18 09:58:54 2 0 0 1147804 2284 474044 0 0 0 0 873 225 81 0 19 0 0 194 2021 / 01 / 18 09:58:55 0 0 0 1147804 2284 474044 0 0 0 0 857 232 79 1 20 0 0 195 2021 / 01 / 18 09:58:56 1 0 0 1147804 2284 474044 0 0 0 0 854 239 79 0 21 0 0 196 2021 / 01 / 18 09:58:57 1 0 0 1147804 2284 474044 0 0 0 0 875 234 81 0 19 0 0 197 2021 / 01 / 18 09:58:58 1 0 0 1147804 2284 474044 0 0 0 0 863 257 79 1 20 0 0 198 2021 / 01 / 18 09:58:59 1 0 0 1147804 2284 474044 0 0 0 0 857 201 81 0 19 0 0 199 2021 / 01 / 18 09:59:00 0 0 0 1147804 2284 474044 0 0 0 0 855 242 78 0 22 0 0 200 2021 / 01 / 18 09:59:01 2 0 0 1147804 2284 474044 0 0 0 0 873 247 80 0 20 0 0 201 2021 / 01 / 18 09:59:02 0 0 0 1147804 2284 474044 0 0 0 0 862 228 81 0 19 0 0 202 2021 / 01 / 18 09:59:03 2 0 0 1147804 2284 474048 0 0 0 0 868 238 79 1 20 0 0 203 2021 / 01 / 18 09:59:04 6 0 0 1147804 2284 474048 0 0 0 2 872 202 80 1 19 0 0 204 2021 / 01 / 18 09:59:05 0 0 0 1147804 2284 474048 0 0 0 0 857 225 79 0 21 0 0 205 2021 / 01 / 18 09:59:06 5 0 0 1147804 2284 474048 0 0 0 0 876 230 81 0 19 0 0 206 2021 / 01 / 18 09:59:07 2 0 0 1147804 2284 474048 0 0 0 0 861 245 79 0 21 0 0 207 2021 / 01 / 18 09:59:08 1 0 0 1147804 2284 474048 0 0 0 0 870 249 80 1 19 0 0 208 2021 / 01 / 18 09:59:09 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 209 2021 / 01 / 18 09:59:09 r b swpd free buff cache si so bi bo in cs us sy id wa st 210 2021 / 01 / 18 09:59:09 3 0 0 1147804 2284 474048 0 0 0 0 874 245 79 0 21 0 0 211 2021 / 01 / 18 09:59:10 1 0 0 1147772 2284 474048 0 0 0 0 865 226 81 0 19 0 0 212 2021 / 01 / 18 09:59:11 0 0 0 1147772 2284 474048 0 0 0 0 852 235 80 0 20 0 0 213 2021 / 01 / 18 09:59:12 1 0 0 1147772 2284 474048 0 0 0 0 866 247 79 0 21 0 0 214 2021 / 01 / 18 09:59:13 1 0 0 1147772 2284 474048 0 0 0 0 868 237 80 0 20 0 0 215 2021 / 01 / 18 09:59:14 2 0 0 1147772 2284 474048 0 0 0 0 876 239 80 1 19 0 0 216 2021 / 01 / 18 09:59:15 1 0 0 1147772 2284 474048 0 0 0 0 868 232 80 0 20 0 0 217 2021 / 01 / 18 09:59:16 0 0 0 1147772 2284 474048 0 0 0 0 870 235 80 1 19 0 0 218 2021 / 01 / 18 09:59:17 1 0 0 1147772 2284 474048 0 0 0 0 867 222 79 1 20 0 0 219 2021 / 01 / 18 09:59:18 0 0 0 1147772 2284 474048 0 0 0 8 872 264 79 0 21 0 0 220 2021 / 01 / 18 09:59:19 1 0 0 1147772 2284 474048 0 0 0 0 867 235 79 1 20 0 0 221 2021 / 01 / 18 09:59:20 1 0 0 1147772 2284 474048 0 0 0 0 875 230 81 0 19 0 0 222 2021 / 01 / 18 09:59:21 2 0 0 1147772 2284 474048 0 0 0 0 865 248 80 0 20 0 0 223 2021 / 01 / 18 09:59:22 1 0 0 1147772 2284 474048 0 0 0 0 864 205 81 0 19 0 0 224 2021 / 01 / 18 09:59:23 0 0 0 1147772 2284 474048 0 0 0 0 848 233 78 0 22 0 0 225 2021 / 01 / 18 09:59:24 1 0 0 1147772 2284 474048 0 0 0 0 866 230 80 1 19 0 0 226 2021 / 01 / 18 09:59:25 1 0 0 1147772 2284 474048 0 0 0 0 849 221 79 0 21 0 0 227 2021 / 01 / 18 09:59:26 1 0 0 1147772 2284 474048 0 0 0 0 894 259 81 0 19 0 0 228 2021 / 01 / 18 09:59:27 1 0 0 1147772 2284 474048 0 0 0 0 871 234 81 0 19 0 0 229 2021 / 01 / 18 09:59:28 0 0 0 1147772 2284 474048 0 0 0 0 844 232 79 0 21 0 0 230 2021 / 01 / 18 09:59:29 0 0 0 1147772 2284 474048 0 0 0 0 886 251 81 0 19 0 0 231 2021 / 01 / 18 09:59:30 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 232 2021 / 01 / 18 09:59:30 r b swpd free buff cache si so bi bo in cs us sy id wa st 233 2021 / 01 / 18 09:59:30 1 0 0 1147772 2284 474048 0 0 0 0 854 244 78 1 21 0 0 234 2021 / 01 / 18 09:59:31 1 0 0 1147772 2284 474048 0 0 0 0 877 259 81 0 19 0 0 235 2021 / 01 / 18 09:59:32 1 0 0 1147772 2284 474048 0 0 0 0 868 237 80 0 20 0 0 236 2021 / 01 / 18 09:59:33 3 0 0 1147772 2284 474048 0 0 0 0 875 250 80 0 20 0 0 237 2021 / 01 / 18 09:59:34 1 0 0 1147772 2284 474048 0 0 0 3 899 295 81 0 19 0 0 238 2021 / 01 / 18 09:59:35 1 0 0 1147772 2284 474048 0 0 0 0 854 236 77 1 22 0 0 239 2021 / 01 / 18 09:59:36 1 0 0 1147772 2284 474048 0 0 0 0 867 238 81 0 19 0 0 240 2021 / 01 / 18 09:59:37 3 0 0 1147772 2284 474048 0 0 0 0 871 244 79 1 20 0 0 241 2021 / 01 / 18 09:59:38 1 0 0 1147772 2284 474048 0 0 0 0 876 251 80 0 20 0 0 242 2021 / 01 / 18 09:59:39 1 0 0 1147772 2284 474048 0 0 0 0 876 247 81 0 19 0 0 243 2021 / 01 / 18 09:59:40 0 0 0 1147772 2284 474052 0 0 0 0 851 226 79 1 20 0 0 244 2021 / 01 / 18 09:59:41 0 0 0 1147772 2284 474052 0 0 0 0 886 270 81 0 19 0 0 245 2021 / 01 / 18 09:59:42 4 0 0 1147772 2284 474052 0 0 0 0 847 217 78 0 22 0 0 246 2021 / 01 / 18 09:59:43 1 0 0 1147772 2284 474052 0 0 0 0 867 236 80 1 19 0 0 247 2021 / 01 / 18 09:59:44 1 0 0 1147772 2284 474052 0 0 0 0 854 233 79 0 21 0 0 248 2021 / 01 / 18 09:59:45 4 0 0 1147772 2284 474052 0 0 0 0 886 246 80 1 19 0 0 249 2021 / 01 / 18 09:59:46 0 0 0 1147772 2284 474052 0 0 0 0 875 246 81 0 19 0 0 250 2021 / 01 / 18 09:59:47 1 0 0 1147772 2284 474052 0 0 0 0 880 280 79 0 21 0 0 251 2021 / 01 / 18 09:59:48 2 0 0 1147772 2284 474052 0 0 0 0 872 247 79 0 21 0 0 252 2021 / 01 / 18 09:59:49 2 0 0 1147772 2284 474052 0 0 0 8 886 260 81 0 19 0 0 253 2021 / 01 / 18 09:59:50 2 0 0 1147772 2284 474052 0 0 0 0 884 242 80 1 19 0 0 254 2021 / 01 / 18 09:59:51 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 255 2021 / 01 / 18 09:59:51 r b swpd free buff cache si so bi bo in cs us sy id wa st 256 2021 / 01 / 18 09:59:51 2 0 0 1147772 2284 474052 0 0 0 0 864 237 78 0 22 0 0 257 2021 / 01 / 18 09:59:52 0 0 0 1147772 2284 474052 0 0 0 0 859 216 81 0 19 0 0 258 2021 / 01 / 18 09:59:53 1 0 0 1147772 2284 474052 0 0 0 0 877 255 80 0 20 0 0 259 2021 / 01 / 18 09:59:54 1 0 0 1147772 2284 474052 0 0 0 0 869 235 81 0 19 0 0 260 2021 / 01 / 18 09:59:55 1 0 0 1147772 2284 474052 0 0 0 0 866 237 79 1 20 0 0 261 2021 / 01 / 18 09:59:56 1 0 0 1147772 2284 474052 0 0 0 0 879 278 79 1 20 0 0 262 2021 / 01 / 18 09:59:58 1 0 0 1147772 2284 474052 0 0 0 0 864 232 80 1 19 0 0 263 2021 / 01 / 18 09:59:59 3 0 0 1147772 2284 474052 0 0 0 0 871 267 78 0 22 0 0 264 2021 / 01 / 18 10:00:00 1 0 0 1147772 2284 474052 0 0 0 0 877 252 81 0 19 0 0 265 2021 / 01 / 18 10:00:01 4 0 0 1147772 2284 474052 0 0 0 0 878 263 79 1 20 0 0 266 2021 / 01 / 18 10:00:02 4 0 0 1147772 2284 474052 0 0 0 0 908 286 81 0 19 0 0 267 2021 / 01 / 18 10:00:03 2 0 0 1147772 2284 474052 0 0 0 0 863 242 79 0 21 0 0 268 2021 / 01 / 18 10:00:04 1 0 0 1147772 2284 474052 0 0 0 0 874 234 80 1 19 0 0 269 2021 / 01 / 18 10:00:05 2 0 0 1147772 2284 474052 0 0 0 4 872 240 81 0 19 0 0 270 2021 / 01 / 18 10:00:06 0 0 0 1147772 2284 474052 0 0 0 0 861 269 78 0 22 0 0 271 2021 / 01 / 18 10:00:07 1 0 0 1147772 2284 474052 0 0 0 0 884 260 81 0 19 0 0 272 2021 / 01 / 18 10:00:08 2 0 0 1147772 2284 474052 0 0 0 0 894 275 81 0 19 0 0 273 2021 / 01 / 18 10:00:09 0 0 0 1147772 2284 474052 0 0 0 0 845 245 77 1 22 0 0 274 2021 / 01 / 18 10:00:10 0 0 0 1147772 2284 474052 0 0 0 0 882 280 81 0 19 0 0 275 2021 / 01 / 18 10:00:11 1 0 0 1147772 2284 474052 0 0 0 0 867 228 80 0 20 0 0 276 2021 / 01 / 18 10:00:12 1 0 0 1147772 2284 474052 0 0 0 0 873 240 80 0 20 0 0 277 2021 / 01 / 18 10:00:13 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 278 2021 / 01 / 18 10:00:13 r b swpd free buff cache si so bi bo in cs us sy id wa st 279 2021 / 01 / 18 10:00:13 3 0 0 1147772 2284 474052 0 0 0 0 885 245 80 1 19 0 0 280 2021 / 01 / 18 10:00:14 1 0 0 1147772 2284 474052 0 0 0 0 852 232 78 2 20 0 0 281 2021 / 01 / 18 10:00:15 2 0 0 1147772 2284 474052 0 0 0 0 881 242 80 0 20 0 0 282 2021 / 01 / 18 10:00:16 0 0 0 1147772 2284 474052 0 0 0 0 870 286 79 0 21 0 0 283 2021 / 01 / 18 10:00:17 1 0 0 1147772 2284 474056 0 0 0 0 869 226 81 0 19 0 0 284 2021 / 01 / 18 10:00:18 2 0 0 1147740 2284 474056 0 0 0 0 871 249 78 1 21 0 0 285 2021 / 01 / 18 10:00:19 1 0 0 1147740 2284 474056 0 0 0 0 872 242 81 0 19 0 0 286 2021 / 01 / 18 10:00:20 2 0 0 1147740 2284 474056 0 0 0 0 864 241 81 0 19 0 0 287 2021 / 01 / 18 10:00:21 0 0 0 1147740 2284 474056 0 0 0 8 876 291 79 0 21 0 0 288 2021 / 01 / 18 10:00:22 1 0 0 1147740 2284 474056 0 0 0 0 868 220 81 0 19 0 0 289 2021 / 01 / 18 10:00:23 0 0 0 1147740 2284 474056 0 0 0 0 864 229 79 1 20 0 0 290 2021 / 01 / 18 10:00:24 1 0 0 1147740 2284 474056 0 0 0 0 854 240 80 0 20 0 0 291 2021 / 01 / 18 10:00:25 4 0 0 1147740 2284 474056 0 0 0 0 869 245 80 0 20 0 0 292 2021 / 01 / 18 10:00:26 1 0 0 1147740 2284 474056 0 0 0 0 863 231 80 0 20 0 0 293 2021 / 01 / 18 10:00:27 2 0 0 1147740 2284 474056 0 0 0 0 880 237 81 0 19 0 0 294 2021 / 01 / 18 10:00:28 2 0 0 1147740 2284 474056 0 0 0 0 864 253 77 1 22 0 0 295 2021 / 01 / 18 10:00:29 1 0 0 1147740 2284 474056 0 0 0 0 876 236 81 0 19 0 0 296 2021 / 01 / 18 10:00:30 2 0 0 1147740 2284 474056 0 0 0 0 862 229 80 0 20 0 0 297 2021 / 01 / 18 10:00:31 1 0 0 1147740 2284 474056 0 0 0 0 873 236 81 0 19 0 0 298 2021 / 01 / 18 10:00:32 0 0 0 1147740 2284 474056 0 0 0 0 853 215 80 0 20 0 0 299 2021 / 01 / 18 10:00:33 1 0 0 1147740 2284 474056 0 0 0 0 855 230 77 2 21 0 0 300 2021 / 01 / 18 10:00:34 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 301 2021 / 01 / 18 10:00:34 r b swpd free buff cache si so bi bo in cs us sy id wa st 302 2021 / 01 / 18 10:00:34 1 0 0 1147740 2284 474056 0 0 0 0 857 241 80 0 20 0 0 303 2021 / 01 / 18 10:00:35 1 0 0 1147740 2284 474056 0 0 0 47 884 256 79 1 20 0 0 304 2021 / 01 / 18 10:00:36 1 0 0 1147740 2284 474056 0 0 0 0 877 253 81 0 19 0 0 305 2021 / 01 / 18 10:00:37 1 0 0 1147740 2284 474056 0 0 0 0 867 249 80 0 20 0 0 306 2021 / 01 / 18 10:00:38 1 0 0 1147740 2284 474056 0 0 0 0 875 254 79 1 20 0 0 307 2021 / 01 / 18 10:00:39 1 0 0 1147740 2284 474056 0 0 0 0 872 231 81 0 19 0 0 308 2021 / 01 / 18 10:00:40 1 0 0 1147740 2284 474056 0 0 0 0 848 256 79 0 21 0 0 309 2021 / 01 / 18 10:00:41 0 0 0 1147740 2284 474056 0 0 0 0 874 253 81 0 19 0 0 310 2021 / 01 / 18 10:00:42 1 0 0 1147740 2284 474056 0 0 0 0 853 237 79 0 21 0 0 311 2021 / 01 / 18 10:00:43 1 0 0 1147740 2284 474056 0 0 0 0 874 243 80 1 19 0 0 312 2021 / 01 / 18 10:00:44 5 0 0 1147740 2284 474056 0 0 0 0 881 254 80 0 20 0 0 313 2021 / 01 / 18 10:00:45 1 0 0 1147740 2284 474056 0 0 0 0 870 252 80 0 20 0 0 314 2021 / 01 / 18 10:00:46 1 0 0 1147740 2284 474056 0 0 0 0 862 237 81 0 19 0 0 315 2021 / 01 / 18 10:00:47 0 0 0 1147740 2284 474056 0 0 0 0 886 284 79 1 20 0 0 316 2021 / 01 / 18 10:00:48 0 0 0 1147740 2284 474056 0 0 0 0 862 246 80 0 20 0 0 317 2021 / 01 / 18 10:00:49 1 0 0 1147740 2284 474056 0 0 0 0 873 245 79 1 20 0 0 318 2021 / 01 / 18 10:00:50 0 0 0 1147740 2284 474056 0 0 0 0 865 241 81 0 19 0 0 319 2021 / 01 / 18 10:00:51 1 0 0 1147740 2284 474056 0 0 0 0 853 231 77 1 22 0 0 320 2021 / 01 / 18 10:00:52 0 0 0 1147740 2284 474056 0 0 0 4 877 246 80 1 19 0 0 321 2021 / 01 / 18 10:00:53 1 0 0 1147740 2284 474056 0 0 0 0 858 243 80 0 20 0 0 322 2021 / 01 / 18 10:00:54 1 0 0 1147740 2284 474056 0 0 0 0 876 241 80 0 20 0 0 323 2021 / 01 / 18 10:00:55 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 324 2021 / 01 / 18 10:00:55 r b swpd free buff cache si so bi bo in cs us sy id wa st 325 2021 / 01 / 18 10:00:55 2 0 0 1147740 2284 474060 0 0 0 0 853 204 81 0 19 0 0 326 2021 / 01 / 18 10:00:56 1 0 0 1147740 2284 474060 0 0 0 0 870 248 79 1 20 0 0 327 2021 / 01 / 18 10:00:57 1 0 0 1147740 2284 474060 0 0 0 0 868 232 81 0 19 0 0 328 2021 / 01 / 18 10:00:58 0 0 0 1147740 2284 474060 0 0 0 0 852 241 78 0 22 0 0 329 2021 / 01 / 18 10:00:59 1 0 0 1147740 2284 474060 0 0 0 0 866 242 81 0 19 0 0 330 2021 / 01 / 18 10:01:00 1 0 0 1147740 2284 474060 0 0 0 0 867 238 80 0 20 0 0 331 2021 / 01 / 18 10:01:01 1 0 0 1147740 2284 474060 0 0 0 0 868 234 79 1 20 0 0 332 2021 / 01 / 18 10:01:02 0 0 0 1147592 2284 474068 0 0 0 0 873 304 79 2 19 0 0 333 2021 / 01 / 18 10:01:03 1 0 0 1147592 2284 474068 0 0 0 0 886 247 82 0 18 0 0 334 2021 / 01 / 18 10:01:04 1 0 0 1147592 2284 474068 0 0 0 0 856 228 81 0 19 0 0 335 2021 / 01 / 18 10:01:05 1 0 0 1147592 2284 474068 0 0 0 10 850 232 77 1 22 0 0 336 2021 / 01 / 18 10:01:06 0 0 0 1147592 2284 474068 0 0 0 0 164 270 4 0 96 0 0 337 2021 / 01 / 18 10:01:07 0 0 0 1147592 2284 474068 0 0 0 0 133 290 0 1 99 0 0 338 2021 / 01 / 18 10:01:08 0 0 0 1147592 2284 474068 0 0 0 0 143 313 0 0 100 0 0 339 2021 / 01 / 18 10:01:09 0 0 0 1147592 2284 474068 0 0 0 0 126 274 0 1 99 0 0 340 2021 / 01 / 18 10:01:10 0 0 0 1147592 2284 474068 0 0 0 0 121 264 0 0 100 0 0 341 2021 / 01 / 18 10:01:11 0 0 0 1147592 2284 474068 0 0 0 0 125 268 0 0 100 0 0 342 2021 / 01 / 18 10:01:12 0 0 0 1147592 2284 474068 0 0 0 0 120 269 0 0 100 0 0 343 2021 / 01 / 18 10:01:13 1 0 0 1147592 2284 474068 0 0 0 0 107 230 0 0 100 0 0 344 2021 / 01 / 18 10:01:14 0 0 0 1147592 2284 474068 0 0 0 0 108 244 1 0 99 0 0 345 2021 / 01 / 18 10:01:15 0 0 0 1147560 2284 474068 0 0 0 0 112 243 0 0 100 0 0 346 2021 / 01 / 18 10:01:16 procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- 347 2021 / 01 / 18 10:01:16 r b swpd free buff cache si so bi bo in cs us sy id wa st 348 2021 / 01 / 18 10:01:16 1 0 0 1147560 2284 474068 0 0 0 0 116 260 0 0 100 0 0 349 2021 / 01 / 18 10:01:17 0 0 0 1147560 2284 474068 0 0 0 0 122 265 0 0 100 0 0 350 2021 / 01 / 18 10:01:18 0 0 0 1147560 2284 474068 0 0 0 0 114 255 0 0 100 0 0 351 2021 / 01 / 18 10:01:19 0 0 0 1147560 2284 474068 0 0 0 0 149 316 0 0 100 0 0 352 2021 / 01 / 18 10:01:20 0 0 0 1147560 2284 474068 0 0 0 0 147 321 0 1 99 0 0 353 2021 / 01 / 18 10:01:21 1 0 0 1147560 2284 474068 0 0 0 0 146 318 0 0 100 0 0 354 2021 / 01 / 18 10:01:22 0 0 0 1147560 2284 474068 0 0 0 0 133 294 0 0 100 0 0 355 2021 / 01 / 18 10:01:23 0 0 0 1147560 2284 474068 0 0 0 8 130 281 0 0 100 0 0 356 2021 / 01 / 18 10:01:24 0 0 0 1147560 2284 474068 0 0 0 0 118 254 1 1 98 0 0 357 2021 / 01 / 18 10:01:25 0 0 0 1147560 2284 474068 0 0 0 0 111 246 0 0 100 0 0 358 2021 / 01 / 18 10:01:26 0 0 0 1147560 2284 474068 0 0 0 0 125 275 0 0 100 0 0 359 2021 / 01 / 18 10:01:27 0 0 0 1147560 2284 474068 0 0 0 0 138 297 0 1 99 0 0 360 2021 / 01 / 18 10:01:28 0 0 0 1147560 2284 474068 0 0 0 0 115 256 0 0 100 0 0 361 2021 / 01 / 18 10:01:29 0 0 0 1147560 2284 474068 0 0 0 0 114 250 0 0 100 0 0 362 2021 / 01 / 18 10:01:30 0 0 0 1147560 2284 474068 0 0 0 0 128 280 0 0 100 0 0 363 2021 / 01 / 18 10:01:31 0 0 0 1147560 2284 474072 0 0 0 0 121 269 0 0 100 0 0 364 2021 / 01 / 18 10:01:32 0 0 0 1147560 2284 474072 0 0 0 0 99 220 0 0 100 0 0 365 2021 / 01 / 18 10:01:33 0 0 0 1147560 2284 474072 0 0 0 0 111 240 0 0 100 0 0 366 2021 / 01 / 18 10:01:34 0 0 0 1147560 2284 474072 0 0 0 0 130 282 0 0 100 0 0 367 2021 / 01 / 18 10:01:35 0 0 0 1147560 2284 474072 0 0 0 50 112 239 0 0 100 0 0 368 2021 / 01 / 18 10:01:36 0 0 0 1147560 2284 474072 0 0 0 0 130 282 0 0 100 0 0 実務でよく使用されるのが「r(実行中と実行待ち中のプロセス数の合計)の欄」と「CPU」の欄であるため、今回はその二つの平均を awk を用いて算出する。 「rの平均(プロセスの平均)」 awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sum += $3; count +=1} END{print "プロセス数合計："sum, "プロセス数平均："sum/count} ' vmstat_0956_1001.log ※「vmstat_0956_1001.log」はログファイル名 # 結果 プロセス数合計： 363 プロセス数平均： 1 . 08036 「CPUの各情報毎の平均」 # us(カーネルコード以外の実行に使用した時間) awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sumUs += $15; count +=1} END{print "実行に使用した時間の合計："sumUs, "実行に使用した時間の平均："sumUs/count} ' vmstat_0956_1001.log # 結果 実行に使用した時間の合計： 23939 実行に使用した時間の平均： 71 . 247 # sy(カーネルコード以外の実行に使用した時間) awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sumSy += $16; count +=1} END{print "実行に使用した時間の合計："sumSy, "実行に使用した時間の平均："sumSy/count} ' vmstat_0956_1001.log # 結果 実行に使用した時間の合計： 100 実行に使用した時間の平均： 0 . 297619 # id(アイドル時間) awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sumId += $17; count +=1} END{print "アイドル時間の合計："sumId, "アイドル時間の平均："sumId/count} ' vmstat_0956_1001.log # 結果 アイドル時間の合計： 9561 アイドル時間の平均： 28 . 4554 # wa(I/O待ち時間) awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sumWa += $18; count +=1} END{print "I/O待ち時間の合計："sumWa, "I/O待ち時間の平均："sumWa/count} ' vmstat_0956_1001.log # 結果 I/O待ち時間の合計： 0 I/O待ち時間の平均： 0 # st(CPUリソースを割当ててもらえなかった時間の割合) awk ' (NR % 23 < 1 ) || (NR % 23 > 2) {sumSt += $19; count +=1} END{print "CPUリソースを割当ててもらえなかった時間の割合の合計："sumSt, "CPUリソースを割当ててもらえなかった時間の割合の平均："sumSt/count} ' vmstat_0956_1001.log # 結果 CPUリソースを割当ててもらえなかった時間の割合の合計： 0 CPUリソースを割当ててもらえなかった時間の割合の平均： 0 目次へ おわりに 今回は awk コマンドについての説明を執筆させていただきました。 awk の魅力が少しでも伝わっていれば幸いです。少しでも興味を持った方はとてもとっつきやすいので触ってみてはどうでしょうか。解説に関しては長々となってしまい申し訳ありません。本当を言えば筆者の書きたいことはまだまだあるのですが、これ以上長くなってしまうのは忍びないのでこのあたりで〆させていただきます。ご高覧ありがとうございました。 また、 Linux コマンドの一覧表を以下ブログにてまとめておりますので、ご参考ください。 よく使うLinuxコマンド一覧【最新版】 Linux の理解をより深めたい方へ以下関連おすすめブログ ・ ls コマンド 【使い方 まとめ】 ・ find コマンド 【使い方 まとめ】 ・ iptables まとめ【Linux ファイアウォール】 ・ sed コマンド【使い方 まとめ】 ・ vi コマンド【使い方まとめ】 ・ Linuxのファイル操作でよく使うLinuxコマンド ・ 実務で使える！基本的なシェル（Linux）コマンドの話 ～forとsed～ ・ 【Linux】今振り返りたい、プロセスって何？ 　 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 https://rakus.hubspotpagebuilder.com/visit_engineer/ rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに 感想 ドメイン駆動設計との出会い 今ではそんなに悪い奴ではないかなと思えるように 知見 なぜドメイン駆動設計は難しく感じられるのか 原典の重厚さ 導入タイミングの難しさ ドメインエキスパートの協力が得られない ドメインモデルは育てるもの 自社サービスにおけるドメインの捉え方 アーキテクチャには適切なフェーズがある これからドメイン駆動設計を実践する方へ 初めは軽量DDDからでも良い すでにある程度開発が進んでおり、ドメイン知識と技術的負債をコードがたっぷり蓄えているプロジェクト これから立ち上げるプロジェクト おすすめはユビキタス言語から いかにしてドメイン知識を得るか 最後に はじめに こんにちは。logyです。 私は前職で一年と少し、 ラク スに入社してから一年間 ドメイン 駆動設計に関連する開発に関わってきました。 今回は、そこから得られた知見や感想、また、これから ドメイン 駆動設計を実践する方におすすめの方法について書こうと思います。 感想 ドメイン 駆動設計との出会い 私が ドメイン 駆動設計に出会ったのは、前職での部署異動がきっかけでした。 新しく関わることになるプロジェクトが ドメイン 駆動設計を採用しており、当然、メンバーになった私もその思想を習得する必要があったのですが、 当時、まだ オブジェクト指向 ですらあまりしっくりと来ていなかった私にとって、分厚い エヴァ ンス本 *1 は解読困難な古文書のようでした。 並行して実践 ドメイン 駆動設計も読み始めましたが、こちらはまだ幾分わかりやすかった気がします。 そのプロジェクトは所謂業務システムとは少し異なる抽象的な領域をターゲットにしており、 ドメイン 自体を理解するのも非常に難易度が高かったと思います。 一方で、戦術的設計が至るところで用いられており、今思えば、実践 ドメイン 駆動設計を辞書代わりにコードリーディングを行うには最高の環境でした。 そんな環境で1年ほど過ごして様々なノウハウを身に着けていきました。 今ではそんなに悪い奴ではないかなと思えるように ドメイン 駆動設計に出会ってから2年以上経った今でも、「完全に理解した」とは到底言えず、むしろ「全くわからない」状態に近いのが正直なところです。 しかし、これまで目にしてきたような、すっかり ドメイン が流出してしまっており、何度も ヒアリ ングを行い想像を重ねることでやっと理解できるようなあのシステム達も、 ドメイン 駆動設計を取り入れれば、もしかしたら救ってあげられるのかも、と思うようになったり、実装を進める際にはこれは果たして ドメイン の関心事だろうか、と意識するようになりました。 。 当然 ドメイン 駆動設計も 銀の弾丸 ではありませんが、うまく使えば、複雑なシステムに立ち向かうための強力な戦力になってくれるはずです。 知見 なぜ ドメイン 駆動設計は難しく感じられるのか 最近はいろんな記事などで触れられることが多い ドメイン 駆動設計ですが、その内容もさることながら、よく同時に語られるのがその難しさについてです。 導入を試みたが、難しすぎて駄目だった、思ったような効果が得られなかったといった声をよく耳にします。 なぜこのようなことになってしまうのでしょうか。私は次の3つが大きな原因ではないかと考えています。 原典の重厚さ その当時の私も同じくこれに心が折られました。 頑張って読み進めてもなかなか頭に入ってこない。 原典で語られている話は抽象的なものが多く、一読しただけでは「じゃあ、どうすれば？」となりがちです。 特に初学者の場合は、実践 ドメイン 駆動設計から読むことをおすすめします。 最近は他にも初学者向けに日本語で書かれたものがいくつか出ているので、分厚い本に抵抗感のある方はそちらから入っても良いかもしません。 ドメイン 駆動設計を学べる書籍について、別の ラク スエンジニアがまとめた記事がありますので、こちらもどうぞ。 tech-blog.rakus.co.jp 導入タイミングの難しさ 正直言って、 ドメイン 駆動設計を導入する際の初期コストは大きいです。 ドメイン モデリング を行うコストを払う必要があったり、大量の ドメイン クラスを作ることで実装コストも膨らみます。 その分、保守コストを削減できるのがメリットなのですが、その効果を実感できるのは、ある程度システムが複雑化してからになるため、 開発初期の段階で導入判断を行うのは難しいのではないでしょうか。 一方で、すでに複雑化してしまったシステムに、徐々に ドメイン 駆動設計を適用することも、かなり骨の折れる作業となり、導入を妨げている要因といえそうです。 ドメイン エキスパートの協力が得られない ドメイン 駆動設計の導入に際して、一番のハードルと言っても良いのではないでしょうか。 ビジネスサイドと開発サイドが肩を並べて隣で仕事をしているような現場であれば、大きな問題にはならないですが、 サイロ化が進んでいる組織では、定期的に時間を割いてもらうのがやっとで、必要なときに十分な協力を得られないことがよくあります。 たとえ、開発サイドが ドメイン 駆動設計の導入に意気込んでいたとしても、ビジネスサイドの理解が得られず、いつの間にか自然消滅…なんてことにも。 ドメイン 駆動設計の文脈から外れてしまうため、このあたりにしておきますが、組織に関する問題は、 システム開発 につきものです。 *2 幸い、 ラク スでは、ビジネスサイドはもちろん、実際のユーザーでもあるコーポレート部門の方たちにも積極的に協力いただきながら開発を進めることができています。 非常に恵まれた環境で開発を進められてることに、この場を借りて感謝したいと思います。 ドメイン モデルは育てるもの とりあえず モデリング をやってみたはいいものの、あまりしっくりこなかったり、すぐに実状と合わなくなってしまったという経験をお持ちの方も多いのではないでしょうか。 しかし、そこで諦めてはいけません。むしろそこからモデルを進化させ続けることこそ ドメイン 駆動設計の醍醐味です。 特にプロジェクト初期のように、業務理解が浅いうちは、それ相応のモデルしか作成できないはずです。 しかし、 ドメイン モデリング を行うことそれ自体が、 ドメイン へのより深い理解を促し、新たな概念の発見を通じて、既存のモデルをより洗練されたモデルへと進化させます。 自社サービスにおける ドメイン の捉え方 ラク スのように自社サービスを開発している現場では、 ドメイン を分析する際に業務 ドメイン とはまた違った難しさが存在します。 それは ドメイン がすぐに変化しやすいという点です。 SaaS の開発では、数多くのお客様に使っていただくため、ある程度、どの現場でも共通する業務をターゲットに開発を行います。 つまり、製品が扱う ドメイン としては、特定のお客様の ドメイン ではなく、ある程度、最大公約数的なものをイメージして定義することになります。 それぞれ微妙に異なる ドメイン すると、「このお客様の現場では正しいけど、別の現場では不適切」となるような ドメイン 知識を得ることもあり、製品としてどうあるべきか常に折り合いをつけ続ける必要があります。 サービスが成長し続ける限り、その検討範囲は拡大し、時折自己矛盾を生むこともあるでしょう。 それらを反映した ドメイン モデルを維持し続けることの大変さは、想像に難くないはずです。 また、これまで存在しなかったような、革新的な機能を提供するサービスでは、そもそも新たな ドメイン そのものを作り出す作業が必要となるため、これもまた大変な仕事になりそうです。 アーキテクチャ には適切なフェーズがある 実践 ドメイン 駆動設計で触れられているような、CQRS+ESといった アーキテクチャ は、複雑なシステムを制御する手段として有効です。 私は実際にこれを採用しているプロジェクトに関わったこともありますが、確かに ドメイン イベントとイベントソーシングの相性は抜群で、どんな要件にも柔軟に対応できるのではという気持ちにもなりました。 集約の設計を突き詰めると、そのうちCQRS+ESにたどり着くといった話も時折耳にします。 しかし、あくまでそれは、そのプロジェクトがいくつもの検討の末にたどり着いた解決手段の一つであるということを忘れてはいけません。 プロジェクトの初期から「DDDをやるならCQRS+ESで決まりでしょ！」みたいな発想で初めるのは明らかに アンチパターン です。 私が関わったプロジェクトでも、初めからCQRS+ESが採用されていたわけではなく、発展を続けるうちに、いろんなパターンを経てたどり着いた、とのことでした。 RDSの限界やNoSQLの発展がCQRS+ESを生み出したように、別の技術の発展がそのうちまた新たな方式の アーキテクチャ を生み、発展させていくのでしょう。 現行の アーキテクチャ が将来の発展に耐えられそうにないと判断したとき、課題に応じた解決策を選択できるようにしたいですね。 これから ドメイン 駆動設計を実践する方へ 初めは軽量DDDからでも良い 所謂、軽量DDDは アンチパターン と言われることが多いですが、個人的には、初めは軽量DDDから導入を進めるのも良い選択だと思います。 というのも、上記で述べたように、 ドメイン 駆動設計は導入、学習コストが非常に高く付く点がネックです。 そこで、戦術的設計を先に導入することで、徐々に理解を深め、最終的に戦略的設計の適用を目指せば、初期コストを低く抑えつつ導入を進められます。 また、評価の結果、 ドメイン 駆動設計がプロジェクトに合わないと判断された場合でも、戦術的設計は オブジェクト指向設計 の1パターンとしてその先も利用でき、負債になりづらいです。 とはいえ、将来的に戦略的設計を全く採用する気がないのであれば、 ドメイン 駆動設計の導入はおすすめしません。 様々な記事で触れられているように、戦術的設計はあくまで ドメイン と向き合うための足掛かりとなる手段であり、最終的には ドメイン を通じてソフトウェアの価値を高めることが ドメイン 駆動設計の目的だからです。 そこで、おすすめしたいのは、次のような導入方法です。 すでにある程度開発が進んでおり、 ドメイン 知識と技術的負債をコードがたっぷり蓄えているプロジェクト 戦術的設計（軽量DDD）を用いて、既存のコードを整理し、 ドメイン 知識を抽出する。 DDDに慣れてきたら戦略的設計を適用してみる。 これから立ち上げるプロジェクト 戦略的設計を積極的に適用し、 ドメイン モデルと共に成長を目指す。 おすすめは ユビキタス 言語から 仮に戦略的設計を導入することになった場合、まずは ユビキタス 言語の徹底から始めることをおすすめします。 通常の システム開発 でも、用語集や辞書といったものを用いて用語の統一を図ることが多いですね。 しかし、 ユビキタス 言語は単なる用語集づくりではありません。 ユビキタス 言語の特徴としては、統一した用語を開発者だけでなく、 ドメイン エキスパートとの会話でも使用する点が挙げられます。 これを徹底することで、仕様とコードの行き来が圧倒的に楽になり、コミュニケーションミスも減ります。 また、 ドメイン エキスパートと開発者が使用する僅かな用語の違いから、新たな ドメイン 知識を発見するなど、 ドメイン のより深い理解に繋がります。 他の戦略的設計である「境界づけられたコンテキスト」の実践にも、 ユビキタス 言語は非常に重要な役割を果たすため、初めに適用することで後続につなげることもできます。 いかにして ドメイン 知識を得るか もちろん ドメイン エキスパートとの会話が一番の機会になるでしょう。 仕様の相談はもちろん、そのときは開発と直接関係がないような業務上の話題まで、 ドメイン エキスパートと同じ目線で ドメイン を捉えることができるようになればなるほど、 開発はスムーズに進むようになるはずです。 また、 ドメイン エキスパートが普段触れている情報源に触れてみるのも一つの手段です。 日々のニュースや、必読とされている書籍など、少しでも同じ知識を手に入れることで、普段の会話にもついていきやすくなります。 関連する資格取得を目指すのも良いかもしれません。銀行検定、証券外務員、簿記、社労士など、資格勉強を通じてたくさんの ドメイン 知識に触れることが出来ます。 最後に この記事では、私が2年間と少し ドメイン 駆動設計に関わって得られた、感じたことについてまとめてきました。 ドメイン 駆動設計については、多くの方がさまざまな媒体を通じて情報発信されています。 私も色々見聞きはしたものの、まだ実践できていないようなプ ラク ティスもたくさんありますので、引き続き経験を積んでいきたいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com *1 : エリック・ エヴァ ンスの ドメイン 駆動設計。 ドメイン 駆動設計の原典と言われる。 *2 : コンウェイ の法則や 割れ窓理論 、 パーキンソンの法則 を初めとして健全な開発を続けるには人間の性質とうまく付き合っていく必要がありますね。

こんにちは。株式会社 ラク スで先行技術検証や非エンジニアの方向けへの勉強会を実施している技術推進課のt_okkanです。 今回は非エンジニアの方向けの勉強会で、 IPv4 と IPv6 についてまとめる機会があったため記事にしました。 エンジニアでない方でも理解できるようにまとめましたので、 IPアドレス枯渇 問題を調べる際の事前知識としてもらえればと思います。 IPとは IPv4とネットワーク IPv4アドレス枯渇問題 NATを使用した対策 グローバルIPアドレスとプライベートIPアドレス NAT IPv4アドレスの確保 IPv6への移行 IPv6への移行の現状 IPv6へ移行するメリット IPv6へ移行するデメリット IPv6が普及していない理由 まとめ 参考 IPとは IPとは、Internet Protocolの略でコンピュータとコンピュータを繋ぐための通信規格の1つです。 複数のネットワークを相互に接続して、データを中継・伝達しながら1つの巨大なネットワーク「インターネット」を構成する役割を担っています。 IPによって接続されたインターネットでは、個々のネットワークとコンピュータを識別するために IPアドレス を割り当て、 送信先 と送信元を指定して通信を行っています。 IPv4 とネットワーク IPアドレス とは、インターネットに接続されたコンピュータ1台ごとへ割り振られる番号で、コンピュータのインターネット上での住所のようなものです。 そのため、ネットワーク上に接続されているコンピュータの IPアドレス は基本的に重複することはありません。 コンピュータがインターネット上でデータの送受信を行う場合、この IPアドレス を用いてデータの 送信先 と送信元を指定して通信を行っています。 この IPアドレス にはバージョン4とバージョン6が存在し、現在広く使用されているのがバージョン4の IPv4 になります。 IPv4 の IPアドレス は2進数の32桁で8桁ごとの4つに区切られており、それぞれ10進数にした形で表現されています。 2進数の1桁は0と1の2通りで、8桁の場合は256通りを表現できます。 IPv4 アドレスはその8桁の数字を4つ組み合わせているため、約43億通り表現できます。 よって IPv4 アドレスは約43億台のコンピュータを識別できます。 IPv4 アドレス枯渇問題 IPv4 アドレスを使用すると、約43億個のコンピュータを識別できます。しかし、2020年の世界の人口は約77億人と言われており、一人がPCと スマートフォン などの複数のコンピュータを所持する世の中になっています。 IPv4 アドレスでは、43億個以上のコンピュータに IPアドレス を割り当てることができなくなってしまいます。このように、インターネットに接続するコンピュータに割り振る IPv4 アドレスがなくなることを、 IPv4 アドレス枯渇問題と呼んでいます。 実際に、2019年に欧州地域で IPアドレス を管理しているRIPE NCC は IPv4 アドレスが完全に枯渇したと報告しています。 1 また、日本を含むアジア太平洋地域の IPアドレス を管理している組織であるAPNICは、2021年に IPv4 アドレスが完全に枯渇するのではないかと予想しています。 2 この問題を解決するための対策として、 IPv4 を利用して対策を行う延命策と、別の仕組みを利用して解決を行う恒久的な対策があります。延命策としてはNATを利用した対策などが、恒久的な対策として IPv6 への移行が主な対策として挙げられます。 NATを使用した対策 IPv4 アドレスの枯渇問題に対する IPv4 を利用した延命策の一つとして、NATを利用した対応があります。 NATの説明の前に、 グローバルIPアドレス とプライベート IPアドレス の説明をします。 グローバルIPアドレス とプライベート IPアドレス グローバルIPアドレス とは、インターネットに接続しているコンピュータに割り当てられる IPアドレス で、これまで扱ってきた IPアドレス を指します。 一方のプライベート IPアドレス は、企業のネットワークや家庭用のネットワーク内で使用される IPアドレス です。インターネット上では使用できず、同じネットワーク内でのみ使用できる IPアドレス になります。プライベート IPアドレス は、同じ IPアドレス でもネットワークが異なる場合は重複してもよいです。 IPv4 アドレスの枯渇が懸念されすべてのコンピュータに IPv4 アドレスを割り当てできなくなるため、ルータや公開サーバーなどインターネットに直接接続するコンピュータにのみ グローバルIPアドレス を割り当て、ルータ内の閉じられたネットワークに接続されているコンピュータにはプライベート IPアドレス を割り当てるようにしています。こうすることで IPv4 アドレスを効率的に使用できます。 ではどのようにして、 グローバルIPアドレス とプライベート IPアドレス を結び付けているのでしょうか。この IPアドレス の変換を行うのがNATです。 NAT NAT(Network Adress Translation)とは、 グローバルIPアドレス をプライベート IPアドレス に、またはその逆の変換を行う技術のことです。最近は IPアドレス とポート番号を組み合わせたNAPT(Network Address and Port Translation）が主流になっています。主に ルーター にこのNATの機能が組み込まれています。この技術を利用することで、プライベート IPアドレス が割り当てられた複数のコンピュータを1つの グローバルIPアドレス で管理できます。 このように、一つの IPv4 アドレスで複数のコンピュータを効率的に管理でき グローバルIPアドレス を節約できるため、 IPv4 の延命策としてNATが利用されています。 IPv4 アドレスの確保 もう一つの IPv4 アドレス枯渇問題の対策として、未使用の IPv4 アドレスの確保が挙げられます。 IPv4 アドレスが枯渇する前にプロバイダーから事前に未使用の IPv4 アドレスを割り当てを受けて確保しておくことや、未使用の IPv4 アドレスを 保有 している企業や組織から IPアドレス を購入して確保することが挙げられます。 しかし、2014年以降から IPv4 アドレスの消費ペースは上がっており最終的には IPv4 アドレス数の限界があるため、時間が進むにつれ IPv4 アドレスの確保が困難になります。 IPv6 への移行 IPv4 アドレスの枯渇を背景に恒久的な対応策として開発されたのが、 IPv6 です。 IPv4 は2進数の32桁で表現されましたが、 IPv6 は2進数の128桁で16桁ごとに区切り表現できます。また、それぞれ16進数にした形で表現されます。 2進数で16桁の場合は65536通りを表現できます。 IPv6 アドレスはその16桁を8つ組み合わせているため、約340潤個の IPアドレス を管理できます。1潤は1兆の3乗ですのでほぼ無限であることがわかります。 そのため、全世界のコンピュータに対して IPアドレス を割り当てることができ、NATを介さずに直接コンピュータ同士で通信を行えるようになります。 IPv4 アドレスから IPv6 アドレスへ移行することで、 IPv4 アドレス枯渇問題を根本的に解決することができます。 IPv6 への移行の現状 IPv4 アドレスの恒久的な対策である IPv6 への移行ですが、現状は IPv6 が普及しているとは言い難い状況です。 3 IPv6 へ移行するメリットとデメリットを紹介し、 IPv6 が普及しない原因を考察していきます。 IPv6 へ移行するメリット サービスを提供する企業において、 IPv4 アドレスの枯渇問題の制限を受けることなく、サービスの拡大や新規サービスの展開を行うことが挙げられます。 4 IPv4 アドレスが枯渇することで、新たにサービスを拡大する際に必要なネットワーク機器やサーバーに IPアドレス を割り当てることが困難になります。 また今後は IPv4 アドレスの市場価値が高まり値段が高騰する可能性もあり、サービスを拡大するために莫大なコストを投下する必要があるかもしれません。 5 IPv6 に移行することで、ほぼ無限に IPアドレス を付与することができるため、このような制限を気にすることなくサービスの拡大を行うことができます。 逆に IPv6 への対応が遅れると IPv4 アドレスの制限を受け、サービスの拡大や新サービスの展開ができなくなる可能性もあります。 IPv6 へ移行するデメリット IPv6 へ移行することのデメリットとして、 IPv4 との互換性がないことが挙げられます。 IPv4 と IPv6 は同じIPという プロトコル であっても互換性がなく、 IPv4 アドレスのコンピュータと IPv6 アドレスのコンピュータは直接通信することができません。 そのため IPv4 から IPv6 へ移行するために、 IPv6 に対応したルータやソフトウェアの開発・導入するコストが必要になります。 6 また、 IPv4 と IPv6 の通信のどちらにも対応する必要があることも挙げられます。今後も IPv4 を利用し続けるサービスやユーザーが存在することになります。 IPv4 のインターネットと IPv6 のインターネットが同時に存在することになり、 IPv4 の通信と IPv6 の通信のどちらにも対応する必要があります。 デュアルスタックやトンネリングなど IPv4 と IPv6 を共存させる技術があるため、そのための機器の導入や環境を構築するコストが必要になります。 IPv6 が普及していない理由 IPv4 アドレスの枯渇を解消するために開発された IPv6 ですが、今だに主流となっているのは IPv4 になっており、 IPv6 が普及しているとは言い難い状況です。 Google が「 IPv6 の採用状況」という統計で、 IPv6 アドレスを利用して Google サービスにアクセスしているユーザーの割合のデータを公開しています。 7 この統計によると、 IPv6 アドレスを利用している全世界のユーザーの割合は約35%で、日本国内のユーザーの割合は約40%となっています。 IPv6 が普及していない理由としては、以下の記事でも紹介されているようにこのような理由が考えられます。 cloud.watch.impress.co.jp 対応、運用コストがかかる IPv6 のデメリットでも紹介した、 IPv4 から IPv6 へ移行するためのコストや、 IPv4 と IPv6 の通信を共存するための運用コストが高いことが原因で、 IPv6 の普及が進んでいないと考えられます。 新たな利益を獲得できる訳ではなく、優先度が低い また IPv4 と IPv6 を共存させる技術があり、今後も IPv4 を利用できます。 IPv6 に移行しても、新たなユーザーを獲得したり新たな利益を得ることができる訳ではないため、優先度が低く対応が遅れていると考えられます。 また 総務省 の IPv6 についての調査結果によると、データセンター事業者とコンテンツ事業者で IPv6 への移行を検討していない理由として「自社だけで検討しても意味がない」ことや、「同業他社の動向を見てから検討する」ことが挙げれれています。 8 IPv6 に移行する必要性はあるものの、移行にかかるコストを回収できるわけでもないため、他の誰か（他社）が IPv6 に移行するのを待っている状態なのかもしれません。 まとめ IPアドレス のバージョンである IPv4 と IPv6 と、 IPv6 への移行について、簡単に説明してきました。 サービスを提供する企業にとって、 IPv6 に移行しても新たに利益がでない可能性があるものの、移行しないとサービスの拡大の障壁になるかもしれません。 IPv4 枯渇問題や IPv6 対応についての記事を見る前の、事前知識としてもらえたらと思います。 参考 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com The RIPE NCC has run out of IPv4 Addresses ↩ IPv4アドレスはもう残っていないのか、枯渇問題の現状 ↩ 日本におけるIPv6の普及とIPv4 over IPv6 ↩ IPv6@APNIC ↩ IPv4アドレスのお値段について考える ↩ Professional IPv6（無料版） ↩ IPv6の採用状況 ↩ IPv6 によるインターネットの利用高度化に関する研究会 最終報告書 ↩

こんにちは。 株式会社 ラク スで先行技術検証を行っている「技術推進課」の堀内（ id:yhoriuchi ）です。 今回、先行技術検証の取り組みである「技術推進プロジェクト」で調査を行なったメッセージキュー（MQ）について紹介します。 調査項目としてMQを選定した理由とゴール よくある話として、画面操作からのバッチ実行制御（実行順序制御、リトライ制御、エラー制御など）は非同期に動作するため実装が複雑化しやすいという問題を抱えています。 この「非同期な実行制御」をメッセージキュー製品で解決し、コードベースの簡素化が可能かの結論を出すことをゴールとして進めました。 MQとは何か 非同期型の通信方式のことです。システム間で通信を行う際、キューを挟んでメッセージをやり取りすることで非同期通信を実現します。 技技術的には1980年代から利用されており、歴史がある技術領域となっています。 近年ではマイクロサービス アーキテクチャ や分散処理システムの非同期通信において利用されることが多いため、このコンテキストでは聞いたこと・使ったことのある方もいるかもしれません。 下記にMQを使わない場合、使った場合の違いを簡単な絵で説明します。 MQを使わない場合のイメージ AさんからBさんへの作業依頼を直接行うことがイメージとして近いです。 Bさんが不在だったり、忙しい場合は作業依頼を受け付けてもらうことができないため、依頼できるようになるまでAさんは待ち続ける必要があります。 MQを使った場合のイメージ AさんとBさんとの間に「机」を設置して作業依頼を行うようなイメージです。Aさんは作業依頼を机に置いておくことでBさんに依頼を出すことができます。 Bさんは都合の良いタイミングで依頼を受け取れば良いですし、AさんはBさんの都合に合わせて待つ必要も無くなります。 このように送信側（Aさん）と受信側（Bさん）はMQ（机）を挟むことでお互いが好きなタイミングで処理を行うことができるようになります。 さらには受信側に障害が発生していたとしても、送信側はそれを意識することなく作業依頼を送ることができるため、障害に強いシステムにすることができます。 MQが無い場合のシステム 画面から CSV をアップロードする場合を想定し、手っ取り早く実現することを考えると下記のようになります。 ①ファイルをアップロードする ②Webアプリケーションがリク エス トを受け取り、 バッチ処理 を起動する ③ バッチ処理 の中でDBへの書き込みを行う ④一連の処理が終わった後、ユーザーに結果を返す この場合、リク エス トを受けてバッチが実行されるため、ユーザーはリク エス トを行うとすぐに処理が開始し、処理が終わればすぐに結果を受け取ることができます。また、特別な制御を行わないので実装量も少なくなります。 しかし、リク エス トのたびに バッチ処理 が実行されるため、たくさんのリク エス トを同時に受け付けるとサーバーが高負荷になりやすいというデメリットもあります。 これを回避するために取られる手段としてDBを用いた実行制御が考えられます。 次のようなイメージです。 このようにWebアプリとバッチの間にジョブ管理用のテーブルを用意し、cronや自作の常駐プロセスでジョブ管理テーブルを常に監視しながらバッチ実行を行うことになります。 DBを使ったジョブ管理も悪くはないのですが、1サーバーを複数の顧客で共有する（マルチテナント）場合は途端に考えないといけないことが増えます。 例えば、A社、B社、C社...と複数ある顧客で バッチ処理 が同時に起動しても問題ないのか、サーバーリソースを考えると何社まで同時起動が許容されるか、シーケンシャルに全テナントを処理した方がよいのか、などなど。システム要件にもよるので、どれが良い悪いではありませんが、考えることが増えると実装にも跳ね返ってくるのが世の常ですよね。 MQを導入した場合 先ほどの画面からの CSV アップロードは下記のような構成になります。 ①ファイルをアップロードする ②Webアプリケーションがリク エス トを受け取り、キューに登録する（このタイミングでユーザーにレスポンスを返す） ③ワー カープ ロセスがキューからメッセージを1つずつ取り出す ④DBへの書き込みを行う ⑤一連の処理が終わった後、ユーザーに結果を通知する キューを介してWebアプリと バッチ処理 であるワー カープ ロセスを分離することが可能となり、非同期処理を実現できるようになります。 さらにキューからメッセージを1つずつ取り出して処理するため、同時アクセスによる多重起動を気にする必要はありません。 下記のようなイメージです。 こうなってくると バッチ処理 部分をスケールしたい場合にどうするのか気になるところですが、この場合はキューに接続するバッチをスケールしたい分だけ単純に増やしてあげれば実現できます。基本的にキューのメッセージは 排他制御 されるため、別のプロセスが同じメッセージを取り合うことはありません。 セマフォ のような制御を意識する必要もありません。 さらに、メッセージを取り出すとメッセージは削除されます。何らかの理由でリトライが必要な場合はメッセージをキューに戻す（リキューと呼ぶ）ことも簡単に実現できます。 通常DBでジョブ管理を行うとテーブルをロックしてステータスを「処理中」に更新する、完了したら完了ステータスに更新する、一定の期間が経過したらジョブ管理テーブルから履歴を消す、といったことが必要になってくると思いますが、MQを利用するとこれらの実装は不要となります。 結論 ここまで調べてきた結果、下記の理由から複雑な箇所をMQに任せることができるため、実装が減りコードベースを簡素化できることが分かりました。 MQでリク エス トを1列に整列できるため、多重起動制御の実装が不要になる。 MQのメッセージ登録、取得がジョブのステータス管理に相当するため、ステータス管理を実装する必要がない。 メッセージは重複なくキューから受信側に配信されるため、 排他制御 を意識する必要がない。 利用できる ユースケース CSV ファイルアップロードを例に考えてきましたが、MQの利用が向いていると思われる ユースケース を考えてみました。 下記のような瞬間的に大量リソースを要求するケースや、機能間の 疎結合 を実現したい場合に有効となります。 大量のデータ登録／出力など、長時間リソースを消費するケース CSV アップロード／ CSV ダウンロードなど 画像変換等、瞬間的に大量リソースを使うケース 画像のリサイズ、加工をユーザーリク エス トに応じて実施するなど サービスとサービスを分離したいケース マイクロサービス アーキテクチャ のような構成で、サービス間にMQを挟むことで分離する 最後に MQを調べ始めた頃、基本的な用語が分からず変に時間がかかってしまったので、基本用語の説明と検証した結果からの所管を書いて締めくくろうと思います。 基本用語 MQ製品を調べていると プロデューサー／コンシューマー 、 パブリッシャー／サブス クライバー （略してパブサブとも呼ばれる）が説明として出てくることがありますが、この用語を理解しておくと製品理解がスムーズなのでここで説明しておきます。 プロデューサー／コンシューマー 1つのメッセージが1つの受信者だけに配信されるケースでは、送信側を「プロデューサー」、受信側を「コンシューマー」と呼びます。 1対1通信となる設計で使われる用語で、このページで紹介した内容がまさにプロデューサー／コンシューマーの関係で成り立っています。 多くのWebアプリでは直感的に理解しやすい構成だと思います。 パブリッシャー／サブス クライバー MQでは1つのメッセージを2つ以上の受信者にブロードキャストする仕組みがあり、その場合は送信側と受信側の呼び方が上記と変わります。 送信側が「パブリッシャー」、受信側が「サブス クライバー 」となります。さらにキューは「トピック」と呼ばれるようになります。（調べ始めの頃はトピックが何かが分かっておらず、ドキュメントを読むのに苦労していました...） 検証した結果からの所感 今回の検証でMQを使えば、リク エス ト毎にプロセスを起動する実装のデメリットを解消しつつ、DBでジョブ管理を行う際の煩わしさから解放されることが分かりました。 サーバーのリソースコン トロール が必要な際には是非とも導入しておきたい技術だと思います。 一方で、すでにDBによるジョブ管理を行なっており、実装が複雑になってしまっている場合、MQに置き換えるべきかについてはどうでしょうか。 個人的な結論となりますが、このケースでは無理に置き換えなくて良い考えています。実装が複雑になっていたとしても、それで保守・運用が回っているのであればMQに置き換えるだけのコストメリットはないでしょう。 もしかしたらジョブを追加、変更する頻度が多くて、その都度バグが発生するようなケースがあるかもしれませんが、この場合は作り直しが候補に上がってくると思います。作り直すのであればMQの導入も検討に含めるのが良いでしょう。

はじめに みなさんこんにちは。フジサワです。 「フロントエンド」や「フロントエンドエンジニア」という単語を耳にするようになって久しいですが、自他共に認めるバックエンドエンジニアを出自に持つ私にとって フロントエンド界隈の移り変わりは激しく、追いかけるのもなかなか大変です。 そこで今回は、改めてフロントエンドとは、またフロントエンドエンジニアに必要なスキルとは、といったあたりを整理してみたいと思います。 フロントエンドエンジニアに興味を持ったものの、あまりよくわかっていないと言う方の参考になれば幸いです。 はじめに フロントエンドとは フロントエンドエンジニアとは バックエンドとは バックエンドエンジニアとは フロントエンドエンジニアが押さえておいた方が良い技術要素 フロントエンド基本三要素 パッケージマネージャ ビルドツール群 JavaScriptフレームワーク SPAと状態管理 WebComponents Modern CSS テスト 型システム サーバーサイドレンダリング(SSR) GraphQL おわりに 参考 フロントエンドとは まずはフロントエンドとは何なのか、その定義から確認してみましょう。 Web開発業界におけるフロントエンドとは、システムの利用者が直 接触 れる・見ることができる領域、つまり Webブラウザ 上で動作する領域をさします。 一昔前は、「クライアントサイド」と呼ばれることが多かったですが、最近は「フロントエンド」という呼び方をすることが多い印象です。 実際に、 Google トレンドなどで調べてみると、2014年ごろを境に「フロントエンド」の呼称が増えているようです。 ※「クライアントサイド」の比較対象を「フロントエンドエンジニア」という単語にしているのは、「フロントエンド」という単語がアプリケーション開発以外でも 用いられる単語のためです。厳密には比較する対象の次元が異なっていますが、呼称の移り変わり程度は、上記画像からでも読み取れると思います。 フロントエンドエンジニアとは 主にHTML, CSS , JavaScript を用いて、前述のフロントエンド領域、すなわち Webブラウザ 上のUI部分を開発するエンジニアを指すことが多いです。 利用者からの操作を受け付け、後述のバックエンドに対して情報の取得・検索や更新などのリク エス トを行い、得られた結果を加工・表示する部分を担います。 以前は、 Webデザイナー が兼務をすることも多かったですが、フロントエンド領域の複雑化・大規模化によって求められる範囲が広くなるに従い、分業されるようになっています。 ただし、これはあくまでそういうケースもある、ということで、チームの体制、人員、プロダクトの規模によってはこの限りではありません。 バックエンドとは フロントエンドに対して、バックエンドとは、利用者が直 接触 れない領域、つまりサーバー上で動作する領域を指します。 このため、クライアントサイドの対義語として、サーバーサイドと呼ばれることも多いです。 バックエンドエンジニアとは Java や PHP 、 Python 、 Ruby などの言語を用いて、サーバー上で実行される処理を開発するエンジニアです。 フロントエンドからのリク エス トを受け付け、計算処理やデータベースに対して情報の取得・検索や更新の処理を実行し、処理結果をフロントエンドにレスポンスする部分を担います。 Webデザイナー とフロントエンドエンジニアの線引きがときに存在しないように、フロントエンドエンジニアとバックエンドエンジニアの線引きも、状況によっては存在しない場合もあります。 一人のエンジニアが、フロントエンド領域とバックエンド領域、双方を担うというケースも少なくありません。 大規模な開発においてはフロントエンド、バックエンド、あるいは、デザイナーやインフラエンジニアといった分業が行われることが多いと思いますが、 前述の通り、プロダクトの状況によっては一人のエンジニアが多くの領域を担うことも十分にありえます。 おそらくこの記事を読まれている方の中には、これからエンジニアを目指そうとされている方も多いかと思いますが、 私見 として、どのような領域を目指すにせよ、それはあくまでその領域に対する専門性が突出して高い・強みである、という状態であって、 「フロントエンドエンジニアなのでバックエンドのことは全くわからない」よりは、「フロントエンドエンジニアだけどバックエンドもある程度分かる」という状態を 目指すのが良いのではないでしょうか。（もちろん、その逆も然り） フロントエンドエンジニアが押さえておいた方が良い技術要素 それでは、フロントエンドエンジニアはどのような技術要素を押さえておけば良いかを見ていきましょう。 「これが正解」というものはないと思いますが、筆者が参考にしている下記のWebサイトを元に簡単にそれぞれの技術要素について抜粋する形で補足をします。 また、ここで紹介する技術要素が全て必要、というわけではありませんので、その点もご留意ください。 Developer Roadmaps（のFrontend Developerの項） https://roadmap.sh/frontend フロントエンド基本三要素 HTML CSS JavaScript パッケージマネージャ アプリケーションを開発する際に用いる フレームワーク やライブラリなどのインストール、バージョン、依存関係のある関連パッケージの管理などを行うもの。 パッケージマネージャと呼ばれるもの自体は数多く存在しますが、フロントエンド領域においては、 npm ・ yarn が主に用いられます。 ビルドツール群 タ スクラン ナー 開発の際に実行する様々なタスクを自動化するためのもの。 フロントエンドで開発をする際、 コンパイル する、テストを実行する、ソースを難読化する…など様々なタスクを実行することが多くなりますが、自動化することで、省力化したり、ミスを防いだり、あるいは自動化の設定をチーム内で共有することで属人化を解消することができるようになります。 以前はGulpやGruntをよく耳にしましたが、パッケージマネージャのnpmに備わっている npm-scripts がRoadmapでは推奨されています。 モジュールバンドラー JavaScript や CSS 、画像ファイルを一つにまとめるためのもの。 複数のファイルに分割した JavaScript の依存関係を整理する、Webサイトにアクセスした際のブラウザからのアクセスの回数を減らすことなどを目的に使用されます。 特に、大規模なプロダクトのフロントエンド開発においては、 JavaScript を細かく分割し、可読性や保守性・拡張性の向上を行うことが必要になるため、モジュールバンドラーを用いない場合はこの管理がとても大変になります。 Roadmapでは webpack が推奨。なお、Webpackにはタ スクラン ナーとしての機能も有しているため、タ スクラン ナーの一種として紹介されることもあるので混乱しないように注意してください。 Linter/Formatter ソースコード の整形や記述ルール、構文のチェックを行うためのもの。 ESLint （Linter)や、 Prettier （Formatter）など。 複数のエンジニアでプロダクトを開発する際には、 ソースコード を読みやすくするために、書式を統一することが一般的です。この際に用いられるのがFormatterです。 また、 ソースコード の解析で検出できるレベルの記法ミス・バグを見つけるために用いられるのがLinterです。 なお、両者は ソースコード の静的解析を行うという点で同じ領域を守備範囲に持つため、双方がルールに沿った ソースコード の自動整形や補正機能を持っていることがあり、同時に語られたり、併用する／しないといったケースがあります。 JavaScript フレームワーク 開発の生産性を高めるために、一定の枠組み・ルールに沿って実装を行うための基盤となるソフトウェア。 フロントエンド開発においてもっとも注目されている領域の一つがが JavaScript フレームワーク ではないでしょうか。 メジャーな JavaScript フレームワーク としては React.js 、 Vue.js 、 Anglar など。RoadmapではReact.jsが推奨されていますが、弊社では、React.jsとVue.jsを採用しています。個人的な意見としては、フロントエンドエンジニアでも、バックエンドエンジニアでも、少なくともメジャーな JavaScript フレームワーク のうち、一つだけでも押さえておくと良いのではないかと思います。 厳密には JavaScript フレームワーク ではないのですが、小規模な開発においては古くから活用されている jQuery を採用するケースもあります。 「脱・ jQuery 」という文脈で JavaScript フレームワーク が代替手段として語られることがありますが、完全な代替手段というわけではなく、小規模なフロントエンド開発において、まだ jQuery の活用範囲はあるかなと思っています。 Svelt など、新しい フレームワーク もどんどん出てきており、今後の JavaScript フレームワーク の盛衰に注目です。 SPAと状態管理 JavaScript フレームワーク の進歩と共に、従来の Webブラウザ の画面を全て書き換えて画面遷移を行うスタイルのアプリケーションから、よりリッチな操作性や表現を実現するために、一つの画面だけを用意し、その画面内の一部分だけを更新するというアプローチをとるSPA（SinglePageApplication）という手法がメジャーになっています。 SPAの流れの中で、画面に表示されているUI要素の状態（読み込み中、とか現在選択されている、など）を管理する量、複雑さが増すことになりました。 これらを解決する手段として用いられるのが状態管理ライブラリです。（ Redux や Vuex など） WebComponents フロントエンド開発が大規模化すると、画面を構成するHTML要素を意味のあるカタマリ、役割でまとめ、他の要素の影響を受けなくしたり（ カプセル化 ）、部品として再利用できるようにする必要が生じました。 これを可能にするのがWebComponentsの考え方で、 HTML Templates 、 Custom Elements 、 Shadow DOM 、といった３つの技術要素がベースになっています。 Chrome 、 FireFox 、 Safari やEdgeといった主要なブラウザ全てでWebCompotentsがサポートされています。 なお、HTML要素を部品化する、 カプセル化 するというアプローチは、ReactやVueなどの JavaScript フレームワーク でも行われており、それらも「 コンポーネント 」と呼ばれています。 いずれにせよ、HTMLの要素とその振る舞い、デザイン、これらを意味のあるカタマリでまとめるというアプローチが、現在のフロントエンド開発では重要な考え方となります。 Modern CSS JavaScript は ES Modules によって、HTMLは WebComponents というアプローチによって適切に カプセル化 することができるようになりました。 CSS も、JSやHTMLと同様に適切に意味や責務によって カプセル化 をしたくなります。これを実現するのが Styled Components や CSS Modules といった技術要素になります。 テスト バックエンド開発においては、テストコードを書いてテストするというのは一昔前からスタンダードな開発手法になっていますが、フロントエンド開発の大規模化により、フロントエンドでも同様にテストコードを書くようになりました。Roadmapでは Jest や Cypress などが推奨されています。 型システム JavaScript は実行時に初めてデータの種類（型）が評価される言語であるため、数値を格納するための変数に文字列を代入できてしまうなどの不具合があったとしても、実行時までそれを十分に検出することができません。そこで、 JavaScript に対して型の概念を導入し、安全な実装ができるようにしたいというニーズが生じました。 型の導入により、より安全な実装ができるようになった他、 ソースコード の実装者の意図や処理、部品の役割を表現しやすくなることで、可読性や保守性の向上も実現できるようになりました。 この領域においては、現在ではほぼ TypeScript の採用一択なのではないかと思います。 サーバーサイド レンダリング ( SSR ) SPAで実現されたアプリケーションは、 JavaScript などの読み込みファイルが大きくなったり、ブラウザ上で動的に レンダリング を行うため、従来のWebアプリケーションに比べ、初回アクセス時の表示が遅くなりがちという課題が生じました。 これを解決するためにサーバー側でHTMLを生成してしまおうというアプローチが SSR です。React.jsの場合は Next.js 、Vue.jsの場合は Nuxtjs で実現することができます。 GraphQL SPAでは、フロントエンドとバックエンドの通信を REST API の呼び出しで行うことが一般的です。 REST API の仕様はシンプルである一方、柔軟なリク エス トに対して柔軟なレスポンスを返すことを実現するのが難しく、専用の API を大量に実装したり、あるいは不要なパラメータをフロントエンド側で取捨選択するといった方法が取られていました。また、 REST API では API の仕様を理解する必要があり、フロントエンドのエンジニアがバックエンドの仕様を理解するオーバーヘッドが発生していました。 GraphQLでは、 API のデータ構造の表現方法（ スキーマ ）と問い合わせ方法（クエリ）を規格化することで、バックエンドの内部実装に依らず、フロントエンドで必要な情報を柔軟にリク エス トすることができるようになります。 おわりに さて、本項では、フロントエンドとバックエンドの定義から、現在フロントエンドで主流となっていると思われる各種技術要素について整理して解説させて頂きました。 今回改めて整理してみると、フロントエンド領域の変化はとても激しく、情報をキャッチアップするのにとても苦労しました。 自分自身の知識整理もかねて、今回の記事を書かせて頂きましたが、これがみなさまのキャッチアップのお役にも立てれば幸いです。 解説に誤りなどありましたら、ご指摘いただけると幸いです！ 参考 Developer Roadmaps - https://roadmap.sh/ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

こんにちは ラク ス開発エンジニアのUKoniです。 社会人になって PHP 開発するようになったら、配列の機能がいろいろあることを知りました。 「あれってどうするんだっけ？」といちいち調べるのもあれなんで、ここにまとめます。 PHP の配列の機能を忘れてしまったときに活用してもらえるとうれしいです。 配列とは PHPでの配列の変数作成 多次元配列 PHPの配列と繰り返し PHPでの配列の操作 追加 式で追加 1つ以上の値の追加(array_push関数) 削除 特定の値の削除(unset関数) 重複した値の削除(array_unique関数) 並び替え 検索 配列内の値の全取得(array_values関数) 指定した値が配列内にあるか(in_array関数) 配列内の添字の取得(array_keys関数) 指定した添字が配列内にあるか(array_key_exists関数) 配列の要素数の取得(count関数) 変更 式で変更 配列同士の値の置き換え(array_replace関数) 変換 配列から文字列へ変換(implode関数) 文字列から配列へ変換(explode関数) 結合 配列同士の結合(同一の文字列添字の値を上書き)(array_merge関数) 配列同士の結合(同一の文字列添字の値をまとめる)(array_merge_recursive関数) まとめ 配列とは 配列とは、複数の値を格納できる変数のことです。配列は値ごとに添字を持ちます。 PHP での配列の変数作成 PHP で配列では、 array() 、または [] (角括弧)で作成することができます。 [] (角括弧)での配列の作成は、PHP5.4以降で使用できます。 この記事では [] (角括弧)の書き方で進めていきます。 では、実際に作成します。 <?php $ country = [ 'Japan' , 'USA' ] ; print_r ( $ country ) ; 実行すると以下のようになります。 Array ( [0] => Japan [1] => USA ) 配列に値を格納することで添字に番号が付けられます。 番号は配列内で使用されている整数の添字の最大値+1が次に追加される値の添字になります。 また、添字に番号の代わりに好きな文字列をつけることができます。 このような、文字列を添字にもつ配列を「 連想配列 」と呼びます。 <?php $ capital = [ 'Japan' => 'Tokyo' , 'USA' => 'Washington D.C.' ] ; echo $ capital [ 'Japan' ] ; 結果： Tokyo PHP では配列と 連想配列 に差はなく、1つの配列で番号の添字と文字列の添字を同時に使うことができます。 多次元配列 多次元配列とは、配列の中に配列を格納している配列です。 PHP では多次元配列を以下のように生成します。 <?php $ numbers = [ 'odd' => [ 'one' , 'three' , 'five' ] , 'even' => [ 'two' , 'four' , 'six' ] ] ; echo $ numbers [ 'even' ][ 0 ] ; 結果： two 配列と繰り返し 条件を満たすまで同じ処理をくり返します。 foreach文の場合 PHP の配列をforeach文で処理するときは、以下のように実装します。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' , 'Kyoto' , 'Fukuoka' , 'Aichi' , 'Kanagawa' ] ; foreach ( $ prefectures as $ value ) { echo $ value . '<br>' ; } 上記のプログラムでは、foreach文の条件式内の $value に配列の値が入ります。 そして、foreach文内の処理が完了すると、 $value の値は配列の次の値に変わります。 これを配列の最後の値の処理が終わるまで繰り返します。 実行結果は以下になります。 Tokyo Osaka Kyoto Fukuoka Aichi Kanagawa また、 連想配列 では添字と値を同時に取得することができます。 <?php $ prefectures = [ 'Tokyo' => '東京' , 'Osaka' => '大阪' , 'Kyoto' => '京都' , 'Fukuoka' => '福岡' , 'Aichi' => '愛知' , 'Kanagawa' => '神奈川' ] ; foreach ( $ prefectures as $ key => $ value ) { echo $ key . ' ： ' . $ value . '<br>' ; } foreach文の条件式内の $key に $value と紐づいた添字が入ります。 実行結果は以下になります。 Tokyo ： 東京 Osaka ： 大阪 Kyoto ： 京都 Fukuoka ： 福岡 Aichi ： 愛知 Kanagawa ： 神奈川 for文の場合 先ほどはforeach文での実装を紹介しましたが、for文でも実装は可能です。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' , 'Kyoto' , 'Fukuoka' , 'Aichi' , 'Kanagawa' ] ; for ( $ i = 0 ; $ i < count ( $ prefectures ) ; $ i ++ ) { echo $ prefectures [ $ i ] . '<br>' ; } 実行結果は以下のようになります。 Tokyo Osaka Kyoto Fukuoka Aichi Kanagawa PHP での配列の操作 ここには PHP で配列の操作の方法をまとめています。 追加 PHP の配列に新たな値を追加します。 1. 式で追加する PHP で配列に値を追加する式は以下の通りです。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' ] ; $ prefectures [] = 'Aichi' ; //連想配列の場合 $ prefectures [ 'Kyoto' ] = 'Kyoto' ; print_r ( $ prefectures ) ; 結果： Array ( [0] => Tokyo [1] => Osaka [2] => Aichi [Kyoto] => Kyoto ) 2. 1つ以上の値の追加(array_push関数) 1つ以上の値を配列の最後に追加します。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' ] ; array_push ( $ prefectures , 'Kyoto' , 'Fukuoka' , 'Aichi' ) ; print_r ( $ prefectures ) ; 結果： Array ( [0] => Tokyo [1] => Osaka [2] => Kyoto [3] => Fukuoka [4] => Aichi ) 削除 PHP の配列の値を削除します。 1. 特定の値の削除(unset関数) 配列から指定した添字と紐づいている値を削除します。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' , 'Kyoto' ] ; unset ( $ prefectures [ 0 ]) ; print_r ( $ prefectures ) ; 結果： Array ( [1] => Osaka [2] => Kyoto ) 2. 重複した値の削除(array_unique関数) 配列内で重複している値を削除します。 配列の先頭から最初に当たった値を残して、それ以降同じ値があると削除します。 <?php $ number = [ 'A' => 10 , 0 => 15 , 1 => 10 , 'B' => 13 , 'C' => 15 ] ; $ result = array_unique ( $ number ) ; print_r ( $ result ) ; 結果： Array ( [A] => 10 [0] => 15 [B] => 13 ) 並び替え PHP で配列内のデータの並び替えを行う関数は以下の表の通りです。 関数 説明 sort関数 値の昇順に並び替える。並び替え後の値に新しく番号の添字を割り当てる。 rsort関数 値の降順に並び替える。並び替え後の値に新しく番号の添字を割り当てる。 asort関数 値と添字を紐づけたまま、値の昇順に並び替える。 arsort関数 値と添字を紐づけたまま、値の降順に並び替える。 ksort関数 値と添字を紐づけたまま、添字の昇順に並び替える。 krsort関数 値と添字を紐づけたまま、添字の降順に並び替える。 では実際に使ってみましょう。 商品名を添字にし、値を値段にした $menu という配列を用意します。 この配列にsort関数を使うとこのようになる。 <?php $ menu = [ 'pasta' => 800 , 'hamburger' => 1000 , 'sashimi' => 2000 , 'sarada' => 500 , 'juice' => 300 ] ; sort ( $ menu ) ; print_r ( $ menu ) ; 結果： Array ( [0] => 300 [1] => 500 [2] => 800 [3] => 1000 [4] => 2000 ) このように値段の安い順になりますが、商品名が番号に変わっています。 ではこれをasort関数にするとどうなるでしょうか。 <?php $ menu = [ 'pasta' => 800 , 'hamburger' => 1000 , 'sashimi' => 2000 , 'sarada' => 500 , 'juice' => 300 ] ; asort ( $ menu ) ; print_r ( $ menu ) ; 結果： Array ( [juice] => 300 [sarada] => 500 [pasta] => 800 [hamburger] => 1000 [sashimi] => 2000 ) このように商品名を添字にもったまま、値段の安い順にはなります。 最後にksort関数を使います。 <?php $ menu = [ 'pasta' => 800 , 'hamburger' => 1000 , 'sashimi' => 2000 , 'sarada' => 500 , 'juice' => 300 ] ; ksort ( $ menu ) ; print_r ( $ menu ) ; 結果： Array ( [hamburger] => 1000 [juice] => 300 [pasta] => 800 [sarada] => 500 [sashimi] => 2000 ) このように商品名の昇順に並びます。 検索 PHP の配列内の値や添字、配列の要素の数などを調べます。 1. 配列内の値の全取得(array_values関数) PHP の配列内のすべての値を取得します。 ただし、添字は一緒に取得はできません。 <?php $ prefectures = [ 'Tokyo' => 'Shinjuku' , 'Osaka' => 'Osaka' , [ f : id : UKoni : 20201223191948p : plain ] 'Kyoto' => 'Kyoto' , 'Fukuoka' => 'Fukuoka' , 'Aichi' => 'Nagoya' , 'Kanagawa' => 'Yokohama' ] ; $ result = array_values ( $ prefectures ) ; print_r ( $ result ) ; 結果： Array ( [0] => Shinjuku [1] => Osaka [2] => Kyoto [3] => Fukuoka [4] => Nagoya [5] => Yokohama ) 2. 指定した値が配列内にあるか(in_array関数) PHP の配列内に指定した値があるかを調べます。 array_values関数とは違い、値を取得はしません。 <?php $ productList = [ 'banana' , 'orange' , 'mellon' , 'lemon' ] ; if ( in_array ( 'banana' , $ productList )) { echo 'バナナは取り扱っています。' ; } else { echo 'バナナは取り扱っていません。' ; } 結果： バナナは取り扱っています。 3. 配列内の添字の取得(array_keys関数) PHP の配列の中のすべての添字を取得します。 <?php $ fruits = [ 'banana' => 'yellow' , 'orange' => 'orange' , 'mellon' => 'green' , 'lemon' => 'yellow' ] ; print_r ( array_keys ( $ fruits )) ; 結果： Array ( [0] => banana [1] => orange [2] => mellon [3] => lemon ) また、指定した値を持つ添字を調べることもできます。 <?php $ fruits = [ 'banana' => 'yellow' , 'orange' => 'orange' , 'mellon' => 'green' , 'lemon' => 'yellow' ] ; print_r ( array_keys ( $ fruits , 'yellow' )) ; 結果： Array ( [0] => banana [1] => lemon ) 4. 指定した添字が配列内にあるか(array_key_exists関数) PHP の配列内に特定の添字があるか調べるときに使います。 array_keys関数とは違い、添字を取得はしません。 <?php $ kantou = [ 'Tokyo' => 'Shinjuku' , 'Kanagawa' => 'Yokohama' ] ; $ kansai = [ 'Osaka' => 'Osaka' , 'Kyoto' => 'Kyoto' , 'Hyogo' => 'Kobe' ] ; if ( array_key_exists ( 'Tokyo' , $ kantou )) { echo '東京は関東にあります。' ; } if ( array_key_exists ( 'Tokyo' , $ kansai )) { echo '東京は関西にあります。' ; } 結果： 東京は関東にあります。 5. 配列の要 素数 の取得(count関数) PHP の配列の要 素数 を数えます。 <?php $ fruits = [ 'banana' => 'yellow' , 'orange' => 'orange' , 'mellon' => 'green' , 'lemon' => 'yellow' ] ; echo count ( $ fruits ) ; 結果： 4 変更 PHP の配列内の値をほかの値に変更します。 1. 式で変更 既に配列内にある添字で値を呼び出し、別の値に変更します。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' , 'Kyoto' ] ; $ prefectures [ 2 ] = 'Aichi' ; print_r ( $ prefectures ) ; 結果： Array ( [0] => Tokyo [1] => Kanagawa [2] => Aichi ) 2. 配列同士の値の置き換え(array_replace関数) 配列の値をほかの配列の値に置き換えます。 この時、最初の配列にない添字が置き換える配列にある場合は、最初の配列に追加されます。 <?php $ prefectures = [ 'Tokyo' , 'Osaka' , 'Kyoto' ] ; $ replace = array_replace ( $ prefectures , [ 1 => 'Kanagawa' , 2 => 'Chiba' , 3 => 'Saitama' ]) ; print_r ( $ replace ) ; 結果： Array ( [0] => Tokyo [1] => Kanagawa [2] => Chiba [3] => Saitama ) 変換 PHP の配列を別の型に変換したり、別の型の変数を配列に変換します。 1. 配列から文字列へ変換(implode関数) 配列を文字列に変換します。 <?php $ array = [ 'Tokyo' , 'Osaka' , 'Kyoto' ] ; $ string = implode ( ',' , $ array ) ; echo $ string ; 結果： Tokyo,Osaka,Kyoto 2. 文字列から配列へ変換(explode関数) 文字列を配列に変換します。 <?php $ string = 'Tokyo, Osaka, Kyoto' ; $ array = explode ( ',' , $ string ) ; print_r ( $ array ) ; 結果： Array ( [0] => Tokyo [1] => Osaka [2] => Kyoto ) 結合 PHP の配列同士をつなげます。 1. 配列同士の結合(同一の文字列添字の値を上書き)(array_merge関数) 配列を結合します。そのとき添字が重複した場合は、文字列だと後の配列の値に上書きし、番号だと追記します。 <?php $ car1 = [ 'color' => 'silver' , 'price' => 5000000 , 0 => 'car navigation' ] ; $ car2 = [ 'color' => 'black' , 'price' => 10000000 , 'max_speed' => '200km' , 0 => 'sports car' ] ; $ result = array_merge ( $ car1 , $ car2 ) ; print_r ( $ result ) ; 結果： Array ( [color] => black [price] => 10000000 [0] => car navigation [max_speed] => 200km [1] => sports car ) 2. 配列同士の結合(同一の文字列添字の値をまとめる)(array_merge_recursive関数) 結合するのはarray_merge関数と同じです。 この関数の特徴は、添字が重複した場合は、文字列だとその添字の値同士で配列を作り、番号だと追記します。 <?php $ car1 = [ 'color' => 'silver' , 'price' => 5000000 , 0 => 'car navigation' ] ; $ car2 = [ 'color' => 'black' , 'price' => 10000000 , 'max_speed' => '200km' , 0 => 'sports car' ] ; $ result = array_merge_recursive ( $ car1 , $ car2 ) ; print_r ( $ result ) ; 結果： Array ( [color] => Array ( [0] => silver [1] => black ) [price] => Array ( [0] => 5000000 [1] => 10000000 ) [0] => car navigation [max_speed] => 200km [1] => sports car ) まとめ 今回は PHP での配列機能をまとめました。 まとめたものだけでも、 PHP には配列の操作や関数が多くありました。 ただし、ここでまとめたものは PHP の配列の操作の一部分で、ここで書いたもの以外にも配列の操作や関数はあります。 PHP の配列を活用して、より良いプログラムを作成しましょう。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

技術広報の syoneshin です。 今回は当社の開発組織メンバー達に 『2020年の気になったニュース』 と 気になった理由やポイントを聞きました。 質問：皆さんの「2020年の気になったニュース」 を教えてください。 【目次】 『2020年の気になったニュース』ランキング 『WSL2 正式版リリース』 『Apple、MacのAppleシリコンへの移行』 『PHP8リリース』 『東証システム障害』 『Zen3アーキテクチャ』 『オープンソースで作る東京都新型コロナウイルス対策サイト』 『KubernatesがDockerランタイムを非推奨に』 『Centos8　EOL』 『Flash終了』 『Google 障害』 『PostgreSQL13 リリース』 『5G』 『NAVERまとめ終了』 『東芝が量子暗号通信を事業化』 『GitHubのデフォルトブランチ名』 まとめ 『2020年の気になったニュース』ランキング 以下は当社の開発組織メンバーが選んだ「2020年の気になったニュース」ランキングです。 調査概要 調査手法:任意アンケート( ヒアリ ングシート)※複数回答可 調査対象:当社開発組織メンバー(テッ クリード ・開発マネージャー含む) 調査項目:2020年12月18日迄のニュース 有効回答数:60名 ランキング内容:得票数2票以上の2020年の気になったニュース Rank ニュースタイトル(概要) 得票数 1 WSL2 正式版リリース 9 2 Apple 、 Mac の Apple シリコンへの移行を発表 8 3 PHP8リリース 6 4 東証 システム障害 5 5 Zen3 アーキテクチャ 4 6 オープンソース で作る東京都 新型コロナウイルス 対策サイト 3 6 KubernatesがDockerランタイムを非推奨に 3 6 Centos8　EOL 3 6 Flash 終了 3 10 Google 障害 2 10 postgreSQL13 リリース 2 10 5G 2 10 NAVER まとめ終了 2 10 東芝 が量子暗号通信を事業化 2 10 GitHub のデフォルトブランチ名 2 当社で得票数1位の2020年の気になったニュースは 『WSL2 正式版リリース』 forest.watch.impress.co.jp 以下は気になった理由やポイント Windows で気軽に Linux 環境を動かせるようになって良かったです。 windows マシンで手軽に本物の Linux を動かせるようになるということで、ずっと楽しみにしていました。特に Docker Desktop はぐっと使いやすくなったと思います。 最近の Mac OS につらみを感じていて、脱却する手段の一つとしてウォッチしていました。 Windows Terminalも併せてMSの方向性を知ることができたのも良かったです。 業務で使っている Mac を修理に出した時、大した苦労もなく Windows 上に開発環境を構築し、手が止まる時間を最小限にできた。 etc 次いで、得票数2位の2020年の気になったニュースは 『 Apple 、 Mac の Apple シリコンへの移行』 www.apple.com 以下は気になった理由やポイント スマホ で活躍している ARMアーキテクチャ が x86 が主流だった昨今のPCに搭載されるということで注目を浴びています。 アプリ開発 でも ARMアーキテクチャ へのネイティブ対応するなど、大きな変化をもたらしているかと思います。 比較サイトを見ると格段に性能が上がっているらしく、独自開発でこういった結果を残せる Apple はさすがだなと感じた。 スマホ 用途で急速に性能向上してきた ARMアーキテクチャ が、 x86 アーキテクチャ とスペック的に遜色なくなってきて、 x86 に比較して強みだった省電力と GPU 性能を引っさげてデスクトップ用途に入ってきたこと。ARM版Windows10やARM搭載ノートは既にあったのでそこまで不思議はなかったが、一定のシェアをもつ Apple がシフトしたことで、デスクトップ用途のARMが市民権を得た印象。 etc 得票数3位の2020年の気になったニュースは 『PHP8リリース』 www.php.net 以下は気になった理由やポイント 議論がしばらく続いていたので、期待していました。 PHP らしい新機能・非推奨の廃止が見れて楽しい。 JIT 導入によって PHP の活用範囲の幅が広がった。 etc 次いで得票数4位の2020年の気になったニュースは 『 東証 システム障害』 www.itmedia.co.jp 以下は気になった理由やポイント 金融系は ステークホルダー の数が非常に多いため、意思決定の難しさや、普段から備えることの大切さを改めて思い起こさせてくれる出来事でした。 原因解明のスピード感がすごかった。判明している問題をすべて提示して、調査中などのコメントもなく「市場運営者としての責任は私共に全面的にある」の回答など、完璧な記者会見だと思った。 原因自体はマニュアル把握不備（ヒューマンエラー）という部分で、規模や事業の垣根を越えたITにおける根源的で極めて大きな課題を感じた。 etc 次いで得票数5位の2020年の気になったニュースは 『Zen3 アーキテクチャ 』 pc.watch.impress.co.jp 以下は気になった理由やポイント AMD のCPUが高い処理性能のCPUとして認知されるようになったことは、元 AMD 信者として感慨深いものがあります。最近は GPU も nvidia と バチバチ やってますね。 AMD のCPUがシングルスレッドで Intel を超えた。 etc 次いで得票数同率6位の2020年の気になったニュース３つは 『 オープンソース で作る東京都 新型コロナウイルス 対策サイト』 www.itmedia.co.jp 以下は気になった理由やポイント 政府主導ではなくエンジニア・デザイナー主導で公共性のあるサイトが作られて素晴らしい。 COCOA と似ていますが、 自治 体（しかも東京都）の公式サイトが オープンソース で開発されるというのが興味深く感じました。 etc 『KubernatesがDockerランタイムを非推奨に』 www.publickey1.jp 以下は気になった理由やポイント Kubernetes がDockerを経由しなくてもcontainerdを操作できるようになった。コンテナ業界がちゃんと規格化されて発展しているいい話だなあ、と思いました。 コンテナ＝Dockerという印象を改めないといけない気になった。Dockersim使っている人は構成変更もあってお祭りになってました。 etc 『Centos8　EOL』 gigazine.net 以下は気になった理由やポイント OSS の商用利用を考えさせられ、ただただ辛いな…と思ったニュースでした。 唐突に「来年末終わって商用に切り替えます」となり、コミュニティから反発があった後、「やっぱ後続続けます」となった経緯が面白かった。 etc 『 Flash 終了』 www.adobe.com 以下は気になった理由やポイント 昔、ネットに大きな影響を与えた Flash がとうとう終了しました。最近では使うこともなくなってきましたが少しさびしい気がしますね。 昔よく見たサイトが Flash だったりして時代の隆盛を実感する一方、製品にも影響するので対応が大変な今日この頃です。 etc 次いで得票数同率10位の2020年の気になったニュース6つは 『 Google 障害』 www.itmedia.co.jp 以下は気になった理由やポイント 障害そのものよりも、ストレージ不足という原因の判明と解消までを45分で乗り切った Google の技術力に驚嘆しました。 影響範囲を考えると日常でどれだけ Google 頼りになっているのかが見えたようで、笑えないけど興味深いと思いました。 『PostgreSQL13 リリース』 www.postgresql.jp 以下は気になった理由やポイント PostgreSQL12からどういうバージョンアップがあったか気になった。 毎年のお約束ですが、変更ポイントは抑えておきたい。 『5G』 www.softbank.jp 以下は気になった理由やポイント キャリアサービス開始とか、みんなが騒ぎ出して5G普及したらどうなる？というのが盛り上がった気がっていました。 「今後の生活にどう影響してくるのか」が楽しみというところで気になっていました。 『 NAVER まとめ終了』 www.itmedia.co.jp 以下は気になった理由やポイント 雑学からグルメから何からものすごくお世話になりました。 なくなっていくのは時代ですね。。。 技術ネタだけでなく、 ウィキペディア よりも オタッキー なネタたちに、たくさんお世話になっていました。大きなサービスが突如終わる切なさ…あります。 『 東芝 が量子暗号通信を事業化』 www.toshiba.co.jp 以下は気になった理由やポイント 中国など競争相手も多いが、ぜひ世界をリードする分野に育ってほしい。 論理的に破られない暗号というのがポイントで、暗号解読される心配がなくなる。まさに最強の暗号技術という点で気になりました。 『 GitHub のデフォルトブランチ名』 [ www.publickey1.jp 以下は気になった理由やポイント OSS 文化も社会情勢を考慮するようになったのだなと思いました。 センシティブな話だとは思いますが、ずっと「master」と呼んでた身からすれば違和感があります…。 その他 『 SpaceX の有人宇宙飛行成功』 jp.techcrunch.com 『 接触 確認アプリ「 COCOA 」、 ソースコード を GitHub 上に公開』 k-tai.watch.impress.co.jp 『Vue3リリース』 news.vuejs.org 『シン・テレワークシステムの開発』 www.itmedia.co.jp 『Zoom』 www.nikkei.com などなど 110件の「2020年の気になったニュース」が当社内で共有されました。 まとめ 以上、いかがだったでしょうか。 改めて、2020年は本当に大変な一年だったと振り返っております。 当社開発組織では 重要な技術ニュースの クリッピング と見解を メンバー達が日常的にチャット共有し 最新の技術動向をチェックしております。 また最新の技術動向をプロダクトに導入するか を検証する社内勉強会も実施しており 検証で得られた知見も今後の主催イベントで発信していきます。 もし、当社活動に少しでもご興味をお持ちいただけましたら 当社イベントにも是非ご参加下さい。 主催イベント一覧 rakus.connpass.com 本記事でご紹介した 2020年の気になったニュース が皆さまの情報探索の一助となれば幸いです。 私たちは一緒に働く仲間を募集しています。 ご興味を持たれましたら以下のサイトからお問い合わせください。 career-recruit.rakus.co.jp

初めに 皆さん初めましてmosyoryです。 画像処理に興味はあるがどうやってやるのかわからない、そんな方もいるのではないでしょうか。 本記事では Windows ・ Mac の環境で Python と OpenCV を使ってちょっとした画像処理の方法を紹介したいと思います。関数等の詳細な解説は行っていないので予めご了承ください。 初めに OpenCVとは OpenCVのインストール Windows Mac pipでインストールできない 基本操作 読み込み 表示 保存 画像処理 色空間の変換 二値化処理 輪郭検出 輪郭描画 終わりに 参考サイト OpenCV とは OpenCV (Open Source Computer Vision Library)とは オープンソース コンピュータ・ビジョン・ライブラリです。 画像処理や汎用的な数学処理、 機械学習 に関する アルゴリズム が多数含まれています。 C+、 Python 、 Java でサポートされており Windows 、 Linux 、 OS X 、 Android 、 iOS などの様々なプラットフォームに対応しています。 BSD 3-Clauseラインセンスでリリースされているので商用利用も可能です。 opencv.org OpenCV のインストール まずは OpenCV のインストールから行います。 Windows と Mac での方法を紹介しますのでお持ちのパソコンに合わせて行ってください。 Python はすでにインストールされている前提で進めますのでまだの方は Python 公式サイトからPython3.xのバージョンをインストールしてください。本記事ではPython3.9で進めています。 www.python.org Windows コマンドプロンプト からpipを使用してインストールします。pipは Python のパッケージ管理ツールでPython3.4以上なら標準で付属していますので別途インストールする必要はありません。 Python の OpenCV はNumpyというライブラリを使用しますのでこちらもインストールします。 OpenCV をインストールするとNumpyの最新バージョンも自動でインストールしてくれるのですがブログ作成時はWindows10 2004とNumpy1.19.4の組み合わせだと Python プログラムを実行した際にエラーになります。 なのでバージョン1.19.3を指定してインストールしましょう。 pip install numpy==1.19.3 pip install opencv-python Mac ターミナルからpipでインストールします。以前はHomeBrewから OpenCV を入れていましたが今はpipだけでインストールできるようになりました。 Mac はNumpy1.19.4でも問題なく動くので OpenCV のインストール時にNumpyも自動でインストールしてもらいましょう。 pip install opencv-python pipでインストールできない pipで OpenCV をインストールしようとするとこんなエラーが出る時があります。 WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/opencv-python/ WARNING: Retrying (Retry(total=3, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/opencv-python/ WARNING: Retrying (Retry(total=2, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/opencv-python/ WARNING: Retrying (Retry(total=1, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/opencv-python/ WARNING: Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))': /simple/opencv-python/ Could not fetch URL https://pypi.org/simple/opencv-python/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host='pypi.org', port=443): Max retries exceeded with url: /simple/opencv-python/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1123)'))) - skipping ERROR: Could not find a version that satisfies the requirement opencv-python ERROR: No matching distribution found for opencv-python どうやら Python パッケージを管理している PyPI との通信で SSL に問題があるらしく接続先を指定する必要があるそうです。 なのでpipを使う時にオプションを設定してインストールしましょう。 pip install opencv-python --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --trusted-host pypi.org 基本操作 ここでは画像処理を行うための基本操作を紹介します。画像はお好きなものを用意してください。 今回は OpenCV のア イコン画 像を使って例をお見せします。 まず最初に OpenCV を Python のプログラム内で使えるようにインポートしましょう。 import cv2 読み込み 画像の読み込みではcv2.imread()を使います。引数は画像のファイル名です。 異なる ディレクト リにファイルがある場合は 絶対パス か 相対パス で指定してください。 パスが間違っていてもエラーにならず処理は継続されるので注意しましょう。 img = cv2.imread( 'OpenCV.png' ) 表示 画像をウィンドウに表示するにはcv2.imshow()を使います。 引数にウィンドウの名前、表示したい画像を指定してください。 表示する際にはcv2.waitKey()とcv2.destroyAllWindows()も一緒に書きましょう。 この2つはキーボード入力を受け付ける関数と作成したすべてのウィンドウを閉じる関数です。 cv2.imshow()だけではウィンドウは表示された後すぐに消えてしまいますが、続けて2つの関数を書くことでキーボード入力が行われるまでウィンドウが表示され続けます。 画像は左が Windows 、右が Mac で表示した際のウィンドウになります。 cv2.imshow( 'OpenCV' , img) cv2.waitKey( 0 ) cv2.destroyAllWindows() 保存 保存はcv2.imwrite()を使います。引数に保存する画像のファイル名、保存したい画像を指定します。 cv2.imwrite( 'save.png' , img) 画像処理 それでは画像処理を行っていきます。 今回は色空間の変更、二値化処理、輪郭検出・描画の方法を Python プログラムと結果画像と併せて紹介します。 色空間の変換 色空間(カラースペース)とは特定の色を数値などのパラメーターで表したものです。RGBや HSV のことですね。 OpenCV では画像はBGRで読み込まれますが画像処理の内容によっては別の方が適している場合があります。 そんな時はcv2.cvtColor()を使いましょう。引数に色空間を変更したい画像、色変換のフラグを指定してください。 よく使用する変換フラグはcv2.COLOR_△△2○○という形式で用意されており△△が変更前、○○が変換後の色空間の名前になります。 gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) #BGR → グレースケール 二値化処理 二値化処理とはグレースケール画像に対し 閾値 を設け白黒画像に変換することです。 二値化処理にはcv2.threshold()を使います。引数にグレースケール画像、 閾値 、 閾値 以上(フラグによっては値以下)の画素に割り当てる値、 閾値 処理を行うフラグを指定することで 閾値 と二値化画像を返します。 下の Python コードは画素が127以上なら白に、以下なら黒に変換しています。 ret, thresh = cv2.threshold(gray, 127 , 255 , cv2.THRESH_BINARY_INV) OpenCV の緑のマークが映らなくなりましたね。 輪郭検出 輪郭検出はcv2.findContours()を使います。引数に二値化画像、輪郭を検索するモード、輪郭検出方法のフラグを指定し実行することで輪郭と輪郭の階層情報を返します。 OpenCV は黒の背景から白の物体の輪郭を探すことを前提としているので使用する二値化画像に気を付けましょう。 contours, hierarchy = cv2.findContours(thresh, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE) contoursに検出された全輪郭がlistで格納されています。 輪郭描画 描画にはcv2.drawContours()を使います。 引数に画像、listに格納された輪郭、描画したい輪郭のインデックス、描画する色と線の太さを指定します。 下の Python コードは全ての輪郭を線の太さ3の紫色で描画しています。 cv2.drawContours(img, contours, - 1 , ( 255 , 0 , 255 ), 3 ) OpenCV の文字と赤、青のマークに紫色の輪郭線が描画されましたね。 終わりに Python と OpenCV を使った画像処理の例を紹介しました。 今回は色の変換や描画となりましたが、 OpenCV では人の顔の検出や 機械学習 など多くのことができるようになっています。 公式のドキュメントにも Python のサンプルコード付きで説明がありますので詳しい処理内容を知りたい方はそちらをご覧になってください。 参考サイト OpenCV: OpenCV-Python Tutorials Pythonによる画像処理に利用するライブラリを現役エンジニアが解説【初心者向け】 | TechAcademyマガジン 画像処理をマスターしよう！PythonでOpenCVを使う方法を紹介！ | TechTeacher Blog Pythonで画像処理をするならOpenCVがオススメ！ | 侍エンジニアブログ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

この記事は アーキテクチャテスト Advent Calendar 2020 - Qiita の 25 日目のエントリです。 qiita.com こんにちわ。株式会社 ラク スで「楽楽 労務 」を開発している @kawanamiyuu です。遅くなりましたが、先月開催された JJUG CCC 2020 Fall の登壇レポートです。 イベント概要 プロポーザル 登壇資料 登壇に対する反応 登壇を終えて イベント概要 日時 2020 年 11 月 7 日 (土) 開催形式 オンライン（事前録画放送＋リアルタイムQ&A） 公式サイト https://ccc2020fall.java-users.jp/ タイムテーブル https://confengine.com/jjug-ccc-2020-fall/schedule タイムライン #jjug_ccc since:2020-11-07_00:00:00_JST until:2020-11-08_00:00:00_JST - Twitter Search 発表動画リスト 2020-11-07 JJUG CCC 2020 Fall - YouTube プロポーザル jjug-ccc-2020-fall - マイクロサービスアーキテクチャをあきらめないための、モノリスで始めるアーキテクチャテスト | ConfEngine - Conference Platform マイクロサービス アーキテクチャ にチャレンジしたい！しかし、プロダクト立ち上げ時においては、 業務 ドメイン に対する知識の少なさから、適切な粒度のサービス分割が難しい そもそも売れるか分からない、仮説検証を高速にまわしていかなければいけない段階で、MSAで開発・運用するオーバーヘッドが大きい 手段が目的化している感 といった理由から、モノリシックなアプリケーションとして開発を開始するケースは少なくないと思います。一方で、あとから分割すればよいと開発を始めた モノリス で、いざ分割を検討する段階でアプリケーション内の依存関係が複雑に絡み合い、分割したくとも解きほぐすのが困難になってしまっているケースも少なくないはずです。 モノリス で適切なモジュール分割を実現するために ドメイン 駆動設計や、具体的な設計パターンとしてクリーン アーキテクチャ やレイヤード アーキテクチャ などの方法をとることが多い最近のソフトウェア開発において、モノリシックなアプリケーションを構成するレイヤーや ドメイン 、各パッケージ・クラスの依存関係をいかに適切に維持し続け、将来 アーキテクチャ を発展させる可能性を残すか。 この発表ではその１つの有力な方法としての「 アーキテクチャ テスト」についてお話します。 登壇資料 speakerdeck.com 登壇資料のサマリー 登壇に対する反応 (jjug_ccc_b OR archunit) since:2020-11-07_17:00:00_JST until:2020-11-07_18:00:00_JST - Twitter Search 依存関係を適切に設計したいだけ いい言葉だ #jjug_ccc #jjug_ccc_b — Kei Kondoh (@kei_kondoh) 2020年11月7日 私のところは今は人数が少ないので アーキテクチャ に対するレビューもできるし直してももらえるけど人が増えてきたりすると アーキテクチャ の維持って厳しいよなー #jjug_ccc_b — uuuu.kt (@yushi_koga) 2020年11月7日 ここでも ArchUnit ！ #jjug_ccc #jjug_ccc_b — YujiSoftware ☕ (@YujiSoftware) 2020年11月7日 派手さはないけど落ち着いた議論でいいっすな #jjug_ccc #jjug_ccc_b — kabao (@kabao) 2020年11月7日 「ソフトウェアが「ソフト」であるための選択肢を残す」 いいメッセージ！ #jjug_ccc #jjug_ccc_b https://t.co/O7zYARquNL — YujiSoftware ☕ (@YujiSoftware) 2020年11月7日 ハンズオン モデラー がいないと アーキテクチャ の維持は難しいっていう印象があったけど、 アーキテクチャ テストがあれば、少しはそれがマシになりそう #jjug_ccc_b — uuuu.kt (@yushi_koga) 2020年11月7日 今日は arch unit のことを初めて知った。たしかに正しくない依存の記述を、コードレビューで目で見るのは大変なので、自動テストの中でテストできるのは便利＆品質の維持に繋がりますね #jjug_ccc #jjug_ccc_b — Yuusuke Masaki (@makky55makky55) 2020年11月7日 ArchUnit、使ってみたい #jjug_ccc #jjug_ccc_b — lethe2211 / Shuhei Shogen (@lethe2211) 2020年11月7日 登壇を終えて まず今回、当日参加された方、タイムテーブルをご覧になった方はお気づきになったかと思いますが、まさかの アーキテクチャ テストネタかぶり でした！ （もう一つの発表は こちら ） アーキテクチャ テストをテーマにした登壇は、過去に 2 回（ ArchUnit で Java アプリケーションのアーキテクチャを CI する - JJUG CCC 2019 Spring 、 ドメイン駆動設計を支えるアーキテクチャテスト - Object-Oriented Conference 2020 ）行っていて、今回はそれらの内容も整理しながら、「マイクロサービス アーキテクチャ をあきらめないための、 モノリス で始める アーキテクチャ テスト」という主題で登壇内容をまとめました。 私のこれまでのカンファレンス規模のイベント登壇経験としては、最長でも 20 分枠の発表だったため、今回初めて 40 分という枠を満足させるボリュームと質の発表内容を作り上げることできるか不安でした。しかし、資料を作り始めてみると なんだかんだで なんとか、30 分程度の発表に仕上がりました。資料としては 100 ページを超えていたため、もしかすると時間が足りないかも？と一時は思いましたが、事前録画方式だったので淡々としゃべってしまい余裕で時間枠内に収まりました。コロナ禍で無聴衆（オンライン）での発表は何度か経験していますが、目の前に聴衆がいないと、発表中の間のとり方が難しいです。 さて、今回で アーキテクチャ テスト 3 部作 (?) の完結編として、いったん今時点で私が アーキテクチャ というものに対して考えていることは 言語化 できました。今後も アーキテクチャ テストを実際のプロダクト開発の中で実践的に取り組んでいきたいと思っているのと、この手の話は、 プログラミング言語 に関係なく通じるもので 他の言語でのアーキテクチャテスト も試してみて、別の言語コミュニティでも アーキテクチャ テストを布教していきたいと思っています。 それでは、また。 今回はオンラインかつ事前録画だったからかなりましだったけど、登壇する当日までは一定のマインドシェアを持って行かれるので登壇終わったらしばらく何も考えずゆっくりしたいと思うんだけど、終わったら終わったで何か物足りなくて次の機会を探してしまう現象に名前付けたい。（文字数まであとちょっ — ゆう (@kawanamiyuu) 2020年11月7日

こんにちは。新卒の id:w1p と申します。 今回業務でTypeScriptを導入するということで、いい機会なのでTypeScriptについていろいろ調べました。 目次 環境構築 TypeScriptの基本的な文法 型アノテーションの書き方 基本の型 number型 bigint型 string型 boolean型 symbol型 null型 undefined型 型エイリアスで型に別名をつける リテラル型 複合型 object型 array型 tuple型 enum 数値型enumの注意点 class Union型 Intersection型 その他の型 Function型 Index Signitures 特殊な型 any unknown void never インターフェースと型エイリアス インターフェース 2つの違い 宣言のマージ プリミティブ型とUnion型 その他 ジェネリクス ジェネリクスを導入できる場所 関数型 型エイリアス インターフェース tsconfig.json 型を操作する 型のキーワード typeof keyof Lookup Types in extends infer Utility Types Partial / Required / Readonly Pick<T, K> Record<K, T> Exclude<T, ExcludedUnion> Union Distribution Extract<T, Union> Omit<Type, Keys> NonNullable Parameters ConstructorParameters ReturnType InstanceType ThisParameterType OmitThisParameter ThisType Uppercase / Lowercase Capitalize / Uncapitalize まとめ 参考 環境構築 Microsoft 公式がブラウザ上で実行できる サンドボックス を提供しており、これを使用すると手軽にTypeScriptを試すことができます。 TypeScriptから JavaScript への変換結果や、型定義ファイル生成の結果まで見れます。 この記事で出てくるサンプルコードはすべてTS Playground v4.1.2上で行っています。 Playground Link Visual Studio Code や Intellij IDEAなど手元のエディタで書いてローカルで実行したい場合には以下の手順を踏む必要があります。 npm or yarnがインストールされていることが前提です。 Step1. TypeScriptをインストールする $ mkdir ts && cd ts $ npm init -y # yarn init -y $ npm i -D typescript # yarn add -D typescript Step2. .ts拡張子のファイルを作成する $ echo ' console.log("Hello, TypeScript!"); ' > ./hello.ts Step3. TypeScriptを実行する ここでは手軽にTypeScriptを実行する方法として、 tsc を使用する方法と、 ts-node というパッケージを使用する方法を紹介します。 tsc を使用する場合 tsc はTypeScriptを JavaScript へトランスパイルするための公式ツールです。 tsc の挙動は tsc 実行時にオプションとして渡したり、 tsconfig.json というファイルで変更することができます。 hello.ts のあるフォルダで以下を実行します。 $ npx tsc ./hello.ts # yarn run tsc ./hello.ts tsc はトランスパイルした結果を指定された ディレクト リに出力します。 今回は特に指定していませんのでカレント ディレクト リに出力されます。 あとは通常のjsファイルと同様に実行できます。 $ node hello.js Hello, TypeScript! ts-nodeを使用する場合 ts-node を使用すると、 tsc → node という2度手間を省略できます。 $ npm i -D ts-node # yarn add -D ts-node 実行は以下のように行えます。 $ npx ts-node ./hello.ts # yarn run ts-node ./hello.ts TypeScriptの基本的な文法 ここまではどのようにTypeScriptファイルを実行するのかについて見てきました。 ここからは基本的なTypescriptの文法について見ていきます。 型 アノテーション の書き方 型 アノテーション とは、変数や関数の戻り値などの型が何であるかを明示的に指定することです。 基本的には : type の形式で書くことができます。 // 変数nの型をnumberに let n: number = 123 n = 'string' // Type 'string' is not assignable to type 'number'. // argをstring, fの戻り値はvoidに function f ( arg: string ) : void { /* */ } f ( 123 ) // Argument of type 'number' is not assignable to parameter of type 'string'. TypeScriptは 型推論 (型をコンテクストから推論すること)により、全ての場所に型 アノテーション を必要としない仕組みになっています。 // nはnumber型と推論される let n = 123 // tはboolean型と推論される let t = true ; 基本の型 早速ですが、TypeScriptの核となる型についてみていきます。 ここで紹介する型はプリミティブ型と呼ばれる基本的な型です。 number型 number型は実数に加え、無限を表す Infinity , 非数を表す NaN が含まれます。 const n1: number = 123 ; const n2: number = -0 . 1 ; const n3: number = Infinity ; const n4: number = NaN ; bigint型 ES2020で導入されたbigint型は Number.MAX_SAFE_INTEGER(2^53 - 1) よりも大きな整数を扱うことができます。 精度が落ちる可能性があるためnumber型変数へ直接代入することはできず、明示的な変換が必要になります。 let big = 123n ; let num = 123 ; num = big ; // Type 'bigint' is not assignable to type 'number'. big = num ; // Type 'number' is not assignable to type 'bigint'. num = Number ( big ); big = BigInt ( num ); string型 文字列全般をとりうる型です。 const s1: string = "Hello, World!" ; const s2: string = s1.slice ( 0 , 5 ); boolean型 true と false の2つの値をとり得る型です。 let b: boolean ; b = true ; b = false ; b = !!1 ; b = 1 ; // Type 'number' is not assignable to type 'boolean'. symbol型 ES2015から取り入れられた、一意の値を生成するための仕組みです。 const s1: unique symbol = Symbol ( 'abc' ); // typeof s1 let s2 = Symbol ( 'abc' ); // symbol let s3 = Symbol . for( 'abc' ); // symbol const s4 = Symbol . for( 'abc' ) // symbol console .log ( s1 === s2 ); // false console .log ( s2 === s3 ); // false console .log ( s3 === s4 ); // true null型 nullもしくはany型のみを受け付ける型です。 const n1: null = null ; const n2: null = 123 as any ; const n3: null = undefined ; // Type 'undefined' is not assignable to type 'null'. const n4: null = 123 as unknown ; // Type 'unknown' is not assignable to type 'null'. undefined型 undefinedとany型のみを受け付けます。 const u1: undefined = undefined ; const u2: undefined = 123 as any ; const u3: undefined = null ; // Type 'null' is not assignable to type 'undefined'. const u4: undefined = 123 as unknown ; // // Type 'unknown' is not assignable to type 'null'. 型 エイリアス で型に別名をつける 型 エイリアス と呼ばれる機能により、任意の型に別名をつけることができます。 型 エイリアス は type キーワードで作成できます。 type ID = number ; type Name = string ; type Cond = boolean ; リテラル 型 TypeScriptの面白い特徴として リテラル 型があります。 リテラル 型とは、プリミティブ型に含まれる一部の値のみをとりうるような型です。 const で変数を定義する際に、TypeScriptはその値はもう変化しないだろうと考え リテラル 型で推論します。 // numberのリテラル型 let num1 = 123 ; // number型 const num2 = 123 ; // 123型 // stringのリテラル型 let str1 = "abc" ; // string型 const str2 = "abc" ; // "abc"型 // booleanのリテラル型 let bool1 = true ; // boolean型 const bool2 = false ; // false型 後述するUnion型とよく組み合わせて使われます。 // 許容するHTTPメソッドの一覧 type AllowedHttpMethods = "GET" | "HEAD" | "POST" | "PUT" ; let method: AllowedHttpMethods = "GET" ; // OK method = "PUT" ; // OK method = "DELETE" ; // Type '"DELETE"' is not assignable to type 'AllowedHttpMethods'. 複合型 object型 プリミティブ型以外の値をとりうる型です。 オブジェクトの構造を指定することはできません。 const o1: object = { a: 123 , b: "abc" } ; const o2: object = {} const o3: object = 123 ; // Type 'number' is not assignable to type 'object'. const o4: object = null ; // Type 'null' is not assignable to type 'object'. array型 配列を表す型です。 型 アノテーション の方法として T[] と Array<T> の2パターンありますが、前者の方が多く使われています。 const arr1: number [] = [ 1 , 2 , 3 ] ; const arr2: Array < string > = [ "a" , "b" , "c" ] ; tuple型 TypeScriptではタプル型を宣言できます。 タプルは複数の要素からなる組み合わせのような型です。 配列と違うのは、異なる型の要素が共存できる点です。 const tup1: [ number , string ] = [ 1 , "str" ] ; const tup2: [ number , number , number ] = [ 1 , 2 , 3 ] ; const arr: number [] = tup2 ; // number型の要素しかないため配列に割り当て可能 enum tuple同様、TypeScriptは独自に enum を使用できます。 enum は プログラマ が事前に定義した特定の値のみをとりうるような型です。 enum Suits { Diamonds , Clubs , Hearts , Spades } console .log ( Suits.Diamonds === 0 ) // true それぞれの列挙子には値を割り当てることができます。 上の Suits には値を割り当てていませんが、そのような場合TypeScriptは0から数値を割り当てます。 数値型 enum の注意点 「TypeScriptの Enum は使わない方が良い」という意見を聞いたことがある方もいらっしゃるかと思いますが、 1番の問題としては数値型の enum にはすべての数値を割り当てることができてしまう点かと思います。 const suit: Suits = 10000 ; // OK これを回避するためには文字列型の enum を使用するか、もしくはUnion型を使用する方法があります。 enum Suits { Diamonds = "Diamonds" , Clubs = "Clubs" , Hearts = "Hearts" , Spades = "Spades" } const suit: Suits = Suits.Diamonds ; type Suits = "Diamonds" | "Clubs" | "Hearts" | "Spades" ; const suit: Suits = "Diamonds" ; class ES2015から導入されたclass宣言はもちろんTypeScriptでも利用できます。 class Animal { // TypeScriptではprivate / protected / publicが使用できる private species?: string ; constructor( species: string ) { this .species = species ; } } const animal = new Animal ( 'dog' ); animal.species = 'cat' ; // Property 'species' is private and only accessible within class 'Animal'. speciesフィールドはprivateなため、クラス外部から触ることはできずエラーになっています。 Union型 TypeScriptの大きな特徴としてよく挙げられるのがこのUnion型です。型同士を | でつなぐことで作成できます。 Unionの名前通り、Union型は構成する型がとる値それぞれの和集合になります。 type StrOrNum = string | number ; let val: StrOrNum = "str" ; val = 123 ; val = true ; // Type 'boolean' is not assignable to type 'string | number'. この例の StrOrNum はstringがとりうる値とnumber型がとりうる値の両方をとります。 Intersection型 Intersection型はそれぞれの型いずれにも割り当てられる型を作り出します。 Union型を和集合とみるなら、Intersection型は積集合を作り出すイメージです。 type StrOrNum = string | number ; type BoolOrNum = boolean | number ; type I = StrOrNum & BoolOrNum ; let val: I = 123 ; // valはnumber型になる val = 'str' ; // Type 'string' is not assignable to type 'number'. val = true ; // Type 'boolean' is not assignable to type 'number'. その他の型 Function型 Function型は全ての関数を受け付ける型です。 引数の型や数、戻り値の型などは指定できないため、object型と同じく使用頻度は高くありません。 let fun: Function = ( arg: string ) => console .log ( `Hello, ${ arg } !!` ); fun ( 'TypeScript' ); // "Hello, TypeScript!!" fun () // "Hello, undefined!!" let fun2: ( arg: string ) => void = ( arg: string ) => console .log ( `Hello, ${ arg } !!` ); fun2 (); // Expected 1 arguments, but got 0. fun は arg という引数が必要ですが、 Function 型で宣言しているためにTypeScriptは警告を出しません。 基本的には上の例で使用した (arg: type) => returnType という形式で アノテーション します。 Index Signitures キーの型、値の型を指定してプロパティの個数は指定しないようなオブジェクトも定義できます。 type T = { [ key: number ] : string } const t: T = { 1 : 'one' , 2 : 'two' , 3 : 'three' } ; // このコードはエラーにならないので注意 console .log ( t [ 0 ] .length ); // Cannot read property 'length' of undefined 特殊な型 any anyは何でもありの型です。どのような型でも受け付け、どのような型にも割り当てられます。 let any : any ; any = 123 ; any = { a: 123 , b: 'string' } ; any = null ; any = 123 as unknown ; const s: undefined = any ; any型は実際の値がどのような型か全くわからないため、TypeScriptのメリットを享受しづらくなってしまいます。 プロジェクトを JavaScript からTypeScriptに置き換える際に、とりあえずanyとして型をつけておくのは便利ですが、 できるなら使用は避けるべきです。 型が実行時までわからないような場合には、unknown型の使用をまずは検討しましょう。 unknown TypeScript 3.0から導入されました。 unknown型の変数はどのような値も代入可能な点でanyと同様ですが、変数を利用するときには その変数の値の型が実際は何であるかが判明するまで利用することができません。 let unknown : unknown ; unknown = 123 ; unknown = { a: 123 , b: 'string' } ; // 比較は可能 if ( !! unknown ) { console .log ( 'truthy' ); } unknown = 'Hello unknown' ; if (typeof unknown === 'string' ) { console .log ( unknown .substring ( 0 , 5 )); } 上の例では typeof 演算子 を使用し、変数 unknown の実際の型が何であるかをチェックしてから String.substring メソッドを使用しています。 型をチェックしなければ変数を使用できないという面で any 型の変数よりも安全です。 void return文で値を返さない関数の戻り値はvoid型として推論されます。 function f () {} type R = typeof f ; // () => void // undefinedはvoid型に代入可能 let r = f (); r = undefined ; never never型はとりうる値が一つもない型です。 never型の変数にはanyすら代入できません。 let never : never ; never = {} ; // Type '{}' is not assignable to type 'never'. never = 123 as any ; // Type 'any' is not assignable to type 'never'. とりうる値が一つもないため、never型とその他の型のUnion型においてnever型は無視されます。 type T = string | number | never ; // Tは string | number 型 使い所としては、実行したら2度と呼び出し元の関数に処理が戻らないような関数の戻り値があります。 以下はNodeの Process.exit 関数の型です。 NodeJS.Process.exit ( code?: number | undefined ) : never exitを呼び出した時点で指定された ステータスコード でプロセスを終了するため、呼び出し元に処理が戻ることはありません。 その他、後述するConditional Typesにおいても使用されています。 インターフェースと型 エイリアス インターフェース TypeScriptにはインターフェースという仕組みがあり、オブジェクトの構造を指定することができます。 interface User { name: string , id: number , registeredDate: Date } const user: User = { name: 'Guest' , id: 0 , registeredDate: new Date ( '1900-01-01' ) } Classに実装することもできます。 class UserClass implements User { constructor( public name: string , public id: number , public registeredDate: Date ) { } } 型 エイリアス もしくは他のインターフェースを継承できます。 type Animal = { name: string , age: number } interface Cat extends Animal { mew () : void } const tama: Cat = { name: 'tama' , age: 2 , mew () { console .log ( "mew" ) } } 2つの違い TypeScriptには型 エイリアス とインターフェースが存在し、共にオブジェクトの構造を定義することができます。 この2つは何が違うのでしょうか？ 宣言のマージ インターフェースは同名のインターフェースを重複して宣言できます。 その場合はインターフェースの定義をTypeScriptが自動的にマージします。 interface User { id: number } interface User { // 同一のプロパティは同じ型でなければならない // id: string, name: string , } const user: User = { id: 0 , name: "Guest" } ; 外部ライブラリの型を拡張したい場合インターフェースで宣言されていれば、 同名のインターフェースを再度宣言するだけで拡張が可能です。 対して、同名の型 エイリアス はエラーになります。 // Duplicate identifier 'User'. type User = { id: number } type User = { name: string } プリミティブ型とUnion型 インターフェースでは型 エイリアス で表現できる以下のような型を表現できません。 // プリミティブ型 type ID = number ; // Union型 type NumOrStr = number | string ; その他 インデックス シグネチャ を型のプロパティとして持つ際に違いがあるようです。 assignabiltity between interfaces and types · Issue #14736 · microsoft/TypeScript · GitHub ジェネリクス ジェネリクス はTypeScriptに限らず様々な言語で導入されている、型を抽象化するための仕組みです。 配列のそれぞれの要素に関数を適用する map 関数は ジェネリクス を使用して以下のように定義できます。 // <T>によって型変数Tを導入できる function map < T >( arr: T [] , f: ( element: T ) => T ) : T [] { const result = [] ; for ( const e of arr ) { result.push ( f ( e )) } return result ; } console .log ( map ( [ 1 , 2 , 3 ] , elm => elm * 2 )) ジェネリクス を導入できる場所 関数型 上のmap型のような書き方も可能ですが、アロー関数でももちろん ジェネリクス を使用できます。 const map = < T >( arr: T [] , f: ( e: T ) => T ) : T [] => { /* ... */ } 型 エイリアス type F < T , R > = ( arg: T ) => R ; const f: F < number , string > = arg => arg.toString (); インターフェース interface F < T , R > { ( arg: T ) : R ; } const f: F < number , string > = arg => arg.toString (); tsconfig. json tsconfig.json はTypeScript コンパイラ の挙動を指定するための設定ファイルです。 以下のコマンドを実行するとカレント ディレクト リ上にデフォルトの tsconfig.json が作成されます。 $ tsc -- init tsconfigで設定可能なオプションの一覧は以下で確認できます。 TypeScript: TSConfig Reference - Docs on every TSConfig option 型を操作する 型のキーワード ここではTypeScriptの型にまつわるキーワードについて紹介します。 typeof typeof val でvalの値の型を取得できます。 const n = 123 ; const s = 'str' ; const o = { n , s } ; const u = undefined ; // T1 = 123 type T1 = typeof n ; // T2 = "str" type T2 = typeof s ; // T3 = {s: string, n: number} type T3 = typeof o ; // T4 = undefined type T4 = typeof u ; keyof keyof は keyof Type とすることで、 Type が持つプロパティをUnion型として得ることができる 演算子 です。 type User = { id: number ; name: string ; age: number ; } // type UserKey = "id" | "name" | "age" type UserKey = keyof User ; Lookup Types Lookup Typesは特別なキーワードがあるわけではありませんが、 keyof と組み合わせて使われることが 多いためここで紹介します。 ある型TのプロパティKの型を T[K] として参照できる機能です。 type User = { id: number ; name: string ; age: number ; } // type UserIdType = number type UserIdType = User [ 'id' ] ; in for..in 構文でも使用されるinですが、TypeScriptでは Mapped Types と呼ばれる構文のためのキーワードとしても用いられます。 // type U = {A: any, B: any, C: any} type U = { [ K in "A" | "B" | "C" ] : any } inの後ろにある要素(Union型の場合には1つずつ取り出すイメージ)をキーとしたプロパティを作成します。 extends classやinterface,typeなどを継承する際に用いられる extends キーワードですが、 Conditional Types と呼ばれる機能でも使用されています。 // T1 = true type T1 = number extends number | string ? true : false ; // T2 = false type T2 = number extends null ? true : false ; T extends U ? X : Y となっている箇所が Conditional Types です。TypeScript 2.8から導入されました。 TがUに割り当て可能であればX、割り当て不可であればYを返します。 上の例では number 型は number | string 型にもちろん割り当てられますので、T1は true 型になります。 しかし null 型には割り当てられませんので、T2は false 型になります。 infer inferは推論した型を型変数として使用するための仕組みです。Conditional Types内で使用できます。 例としてこの後紹介するUtility Typesから ReturnType という型を見てみます。 type ReturnType < T extends ( ...args: any ) => any > = T extends ( ...args: any ) => infer R ? R : any ; ジェネリクス T extends (...args: any) => any の部分はTに割り当てられる型を関数型に制限しています。 右辺の T extends (...args: any) => infer R はTが関数型かどうかをextendsで判定するとともに、 関数の戻り値の型を R という新たな型変数にバインドしています。 当然Tが関数型でない場合にはRに値がバインドされないので、Rが使用できるのはTが関数型の場合のみです。 その他の場合にはany型になります。 Utility Types 最後にTypeScript組み込みの、いくつかの便利な型について紹介します。 上のkeyofやextendsなどの使用例が盛り沢山です。 Partial / Required / Readonly この3つは似たような定義なのでまとめて紹介します。 type Partial < T > = { [ P in keyof T ] ?: T [ P ] ; } ; type Required < T > = { [ P in keyof T ] -?: T [ P ] ; } ; type Readonly < T > = { readonly [ P in keyof T ] : T [ P ] ; } ; Partialはオブジェクトのプロパティを省略可能( key?: value の構文)にします。 Mapped Type を用いて T のプロパティを列挙して、プロパティに ? をつけることで全てのプロパティを省略可能にしています。 T[P] の箇所は Lookup Types で、各プロパティの値の型を参照しています。 Requiredは全てのプロパティを省略不可に、Readonlyは変更不可にする型です。 補足: readonlyについて readonly はプロパティを変更不可にするキーワードです。 type U = { a: string , b: number } type T = Readonly < U > const t: T = { a: "str" , b: 123 , } t.a = "modified" ; // Attempt to assign to const or readonly variable readonly も ? と同様に -readonly とすることで、各プロパティから readonly を取り除くことができます。 Pick<T, K> Pickはオブジェクトの型から指定したプロパティのみを持つオブジェクトを作る型です。 type Pick < T , K extends keyof T > = { [ P in K ] : T [ P ] ; } // T = { a: string, b: number } type T = Pick < { a: string , b: number , c: boolean } , "a" | "b" > K extends keyof T の部分は、Kが指定できるプロパティをTが持つプロパティのみに制限しています。 Record<K, T> Recordは2つの型K, Tを受け取り、Kの各プロパティに対してTを値としたオブジェクトの型を作る型です。 type Record < K extends keyof any , T > = { [ P in K ] : T ; } ; keyof any は確認してみるとわかりますが、 string | number | symbol というUnion型です。 type K = string | number | symbol つまり K extends keyof any はキーとする型Tを、キーとして指定できる型に制約しているということになります。 Exclude<T, ExcludedUnion> Excludeは型TからExcludedUnionの各要素を除いたものを作る型です。 type Exclude < T , U > = T extends U ? never : T ; // type E = 123 | "str" type E = Exclude < 123 | "str" | (() => any ), Function > 123 | "str" | (() => any) というUnion型から、Function型に割り当て可能な型のみを取り除いています。 never 型を返却する理由は、先の方でも述べましたが、以下のようにUnion型における never はないものとして扱えるためです。 // U1 = string | number type U1 = string | number | never ; // U2 = void type U2 = null | void | never ; Union Distribution 上の例のように、 T extends U のT が型変数かつUnion型の場合、TypeScriptは Union Distribution という特殊な挙動になります。 type Exclude < T , U > = T extends U ? never : T ; // type E = 123 | "str" type E1 = Exclude < 123 | "str" | (() => any ), Function > // E1はこんな感じに分配されるイメージ type E2 = 123 extends Function ? never : 123 | "str" extends Function ? never : "str" | (() => any ) extends Function ? never : (() => any ); 参考: TypeScript: Documentation - Advanced Types#Distributive conditional types Extract<T, Union> Excludeの逆です。 type Extract < T , Union > = T extends Union ? T : never ; Omit<Type, Keys> TypeScript 3.5から導入されました。 Pickとは対照的に、プロパティをKeysとしてUnion型で指定しTypeから取り除きます。 type Omit < T , K extends keyof any > = Pick < T , Exclude <keyof T , K >>; // T = { c: boolean } type T = Omit < { a: string , b: number , c: boolean } , "a" | "b" > 既出のUtility TypesであるPickとExcludeを使用しています。 ExcludeでTのプロパティからKを除き、残ったプロパティのみの型をPickで作成しています。 NonNullable 型Tを受け取り、名前通りnullはもちろん、undefinedもTから取り除きます。 type NonNullable < T > = T extends null | undefined ? never : T ; // U = string | (() => any) type U = NonNullable < string | null | undefined | (() => any )> Parameters 関数型を受け取り、引数の型をタプル型として返却します。 type Parameters < T extends ( ...args: any ) => any > = T extends ( ...args: infer Arg ) => any ? Arg : never ; // P1 = [a: number, b: string] type P1 = Parameters <( a: number , b: string ) => void > // P2 = type P2 = [a: { b: number, c: boolean }] type P2 = Parameters <( a: { b: number , c: boolean } ) => string > // P3 = unknown[] type P3 = Parameters < any > infer を使用して引数の型を推論し、結果をArgという新たな型変数にバインドしています。 ConstructorParameters Parameterのコンスト ラク タ版です。 type ConstructorParameters < T extends new ( ...args: any ) => any > = T extends new ( ...args: infer Arg ) => any ? Arg : never ; class A { constructor( private id: number , private name: string , ) {} } // U = [id: number, name: string] type U = ConstructorParameters <typeof A > T extends new (...args: any) => any でTの取りうる型をコンスト ラク タに制限しています。 ReturnType Parametersの戻り値版です。 type ReturnType < T extends ( ...args: any ) => any > = T extends ( ...args: any ) => infer R ? R : any ; // U1 = void type U1 = ReturnType <() => void > function f () { return Math .random () < 0.5 ? "OK" : "NG" } // U2 = "OK" | "NG" type U2 = ReturnType <typeof f > infer で今度は戻り値の型を推論しています。 InstanceType constructorの戻り値の型を取得します。 ReturnTypeのコンスト ラク タ版です。 type InstanceType < T extends new ( ...args: any ) => any > = T extends new ( ...args: any ) => infer Class ? Class : any ; class C { constructor( private name: string = "Guest" , private id: number = 0 ) {} } // U1 = C type U1 = InstanceType <typeof C > // U2 = any type U2 = InstanceType < any > ThisParameterType Tが関数型で this をパラメータとして持つ場合にその型を返却します。 type ThisParameterType < T > = T extends ( this : infer This , ...args: any ) => any ? This : unknown ; function f1 ( this : number ) {} function f2 ( arg: number ) {} // F1 = number type F1 = ThisParameterType <typeof f1 > // F2 = unknown type F2 = ThisParameterType <typeof f2 > this パラメータは必ず引数の先頭である必要があるため、それを利用してthisの型を推論しています。 OmitThisParameter 関数型Tを受け取り、Tが this パラメータを含んでいればそれを除いた関数型を返します。 type OmitThisParameter < T > = unknown extends ThisParameterType < T > ? T : T extends ( ...args: infer A ) => infer R ? ( ...args: A ) => R : T ; // F1 = (a: string) => any type F1 = OmitThisParameter <( this : number , a: string ) => any > // F2 = 123 type F2 = OmitThisParameter < 123 > unknown extends ThisParameterType<T> でTがthisパラメータを含むかどうか確認しています。 thisは可変長引数のパラメータに含まれないようなので、関数型であれば可変長引数の型を推論して返します。 ThisType この型を利用するためには --noImplicitThis を有効にする必要があります。 公式の例を引用して説明します。 TypeScript: Documentation - Utility Types#ThisType type ObjectDescriptor < D , M > = { data?: D ; methods?: M & ThisType < D & M >; // Type of 'this' in methods is D & M } ; function makeObject < D , M >( desc: ObjectDescriptor < D , M >) : D & M { let data: object = desc.data || {} ; let methods: object = desc.methods || {} ; return { ...data , ...methods } as D & M ; } let obj = makeObject ( { data: { x: 0 , y: 0 } , methods: { moveBy ( dx: number , dy: number ) { this .x += dx ; // Strongly typed this this .y += dy ; // Strongly typed this } , } , } ); obj.x = 10 ; obj.y = 20 ; obj.moveBy ( 5 , 5 ); ObjectDescriptor 内の methods?: M & ThisType<D & M> は、methods内で使用される this の型をobjの型である D & M 型に アノテーション します。 D & M 型はdataの型とmethodsの型の交差型なので、今回は以下のような型になります。 { x: number ; y: number ; moveBy ( dx: number , dy: number ) : void ; } makeObjectの引数が ObjectDescriptor 型なので、method内の this が上のような型に推論されるため this.x の形式でxにアクセスできる、ということだと思われます。 ちなみにThisTypeで アノテーション しない場合には関数内のthisは以下の型になりますので、TypeScriptはエラーを出します。 moveBy ( dx: number , dy: number ) { // Property 'x' does not exist on type '{ moveBy(dx: number, dy: number): void; }' this .x += dx ; // Property 'y' does not exist on type '{ moveBy(dx: number, dy: number): void; }' this .y += dy ; } Uppercase / Lowercase ここから紹介する4つの型はTypeScript 4.1から導入された新しめの型です。せっかくですので紹介します。 いずれも文字列型を操作できます。 // U1 = "FOO" type U1 = Uppercase < "foo" >; // U2 = "bar" type U2 = Lowercase < "BAR" > Capitalize / Uncapitalize // C1 = "Foo" type C1 = Capitalize < "foo" >; // C2 = "bar" type C2 = Uncapitalize < "Bar" > これらは単体で使うというよりかは、同じく4.1から導入された仕組みである Template literal types の補助として使われるのではと思います。 Template literal types の説明は流石に入門記事の範囲外のため割愛します。詳しく知りたい方はこちらをご覧ください。 TypeScript: Documentation - Template Literal Types まとめ 入門記事ということで長めになってしまいましたが、これをきっかけに少しでもTypeScriptに興味を持っていただけたなら嬉しい限りです。 紹介していないTypeScriptの機能もまだまだあるようですので、また機会があれば書かせていただきたいと思います。 参考 O'Reilly Japan - プログラミングTypeScript 実践TypeScript | マイナビブックス TypeScript: Handbook - The TypeScript Handbook TypeScript: TSConfig Reference - Docs on every TSConfig option TypeScript: Documentation - Utility Types TypeScript Ninja TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita さようなら、TypeScript enum | Kabuku Developers Blog TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します - LINE ENGINEERING TypeScriptのInterfaceとTypeの比較 - Qiita TypeScriptにヤバい機能が入りそうなのでひとしきり遊んでみる｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社 TypeScript: Interfaces vs Types - Stack Overflow assignabiltity between interfaces and types · Issue #14736 · microsoft/TypeScript · GitHub エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに こんにちは、Engawaです。 ここ最近業務でReactについて触れる機会があり、Reactの学習を行ったので、 環境構築からreact-router-domを使用した簡単なSPAの作成方法についてザックリ紹介していこうと思います。 はじめに Reactとは 環境構築 起動 SPAの作成 react-router-domのインストール サンプルコード 実行 おわりに 参考資料 Reactとは React は FaceBook 社が開発した、UIを作るための JavaScript 用ライブラリです。 アプリに特化したReactNativeもあります。 そちらについては こちら で紹介していますのでご覧いただけれと思います。 環境構築 私が学習をした際の環境は以下になります。 node： v10.19.0 OS ： macOS Catalina 使用したエディタ： VSCode こちらで記載する環境構築方法は macOS のみになります。 windowsでnodeをインストールする時はこちらを参考にしてください。 次の５つのコマンドを順番にターミナルで実行してください。 Homebrewのインストール (nodeをインストールする際に使用します) /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" nodeのインストール brew install node nのインストール npm -g i n nodeのバージョン確認 node -v 上記コマンドを実行してバージョンが表示されていればnodeのインストールは完了です。 $ node -v vバージョン 続いてファイル等の作成を行います。 が、1から設定ファイル等の作成は面倒なのでcreate-react-appを使用します。 create-reeact-appは環境構築ツールで一度インストールしてしまえば、コマンド1つでReactに必要な環境を構築することができます。 まずは下記コマンドでcreate-react-appをインストールします。 npm install create-react-app インストールが完了したらプロジェクトを作成したいフォルダ上で、下記コマンドでcreate-react-appを実行してReactプロジェクトを作成します。 create-react-app 作成したいプロジェクト名 上記コマンド実行後、プロジェクトフォルダの中に以下のフォルダおよびファイルが作成されていたら作成完了です。 プロジェクト名 ├── node_modules/ ├── package. json ├── public/ ├── README.md ├── src/ └── yarn.lock 起動 作成したプロジェクトフォルダに移動して、 cd プロジェクト名 下記コマンドで起動します。 npm install ↓ npm start 実行後下記画面が表示されれば問題なく起動できています。 SPAの作成 react-router-domのインストール Reactで画面遷移させるため、react-router-domを使用します。 プロジェクト名のフォルダ直下で下記コマンドを実行してreact-router-domをインストールしてください。 npm install react-router-dom package. json にreact-router-domのライブラリが追加されていたらインストール完了です。 サンプルコード src/index.js <BrowserRouter> でrouterの導入を行います。 react-router関連の処理はすべて <BrowserRouter> 内で使用しなくてはいけないかつ、1プロジェクトにつき1つしか使用できないため、 <BrowserRouter> は上位層で使用することになります。 import React from 'react' ; import ReactDOM from 'react-dom' ; import { BrowserRouter } from 'react-router-dom' ; import './index.css' ; import App from './App' ; import reportWebVitals from './reportWebVitals' ; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document .getElementById( 'root' ) ); reportWebVitals(); src/App.js <Route> にはルーティング先のURLと コンポーネント の切り替えを行います。 今回はroutes.jsにパスを記載して、routesからそれぞれの値を呼び出し、 <Switch> でURLが一致した時に コンポーネント を表示させます。 import React from 'react' ; import { Route, Switch, withRouter } from 'react-router-dom' ; import routes from './routes' ; const App = () => { return ( <Switch> { routes.map((route, idx) => ( <Route path= { route.path } exact= { route.exact } component= { route.component } key= { idx } /> )) } </Switch> ); } ; export default withRouter(App); src/routes.js(新規で作成) import One from './page/one' ; import Two from './page/two' ; const routes = [ { path: '/' , component: One, exact : true } , { path: '/two' , component: Two, } , ] ; export default routes; src/page/one.js(新規で作成) 画面遷移をするために <link> を使用しています。 やっていることはaタグと同じで、to属性でリンク先のURLを指定しています。 import React from 'react' ; import { Link } from 'react-router-dom' ; import Two from './two' ; class One extends React.Component { render() { return ( <div> test_one<br/> <Link to= '/two' >twoへ</Link> </div> ) } } export default One; src/page/two.js(新規で作成) import React from 'react' ; import { Link } from 'react-router-dom' ; import One from './one' ; class Two extends React.Component { render() { return ( <div> test_two<br/> <Link to= '/' >oneへ</Link> </div> ) } } export default Two; 実行 実行するとこんな感じで画面遷移することができます。 おわりに 今回はReactの触りについて学習を行ったので、環境構築から簡単な画面遷移のやり方について紹介させていただきました。 何かしら学習を行う際は大体環境構築あたりで躓いて投げ出すことが多いので、今回みたいにcreate-reeact-appを実行するだけで簡単に環境構築ができるのは大変助かりました。 参考資料 https://qiita.com/ShinKano/items/541050c36e08e78a5176 https://dezanari.com/react-react-router/ https://code-ship-blog.wemotion.co.jp/technology/react-js%E3%81%A7%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEreact-router%E3%81%AE%E7%B4%B9%E4%BB%8B/ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに 初めましてこんにちは！matsutairaです！ 今回は、普段何気なく利用している DNS サーバーというものにフォーカスし、実際にWebサーバー・ DNS サーバーの構築を通して DNS サーバーとは何なのかをざっくり学べる内容となっております。「 DNS サーバーってどんなもの？」「自分で DNS サーバーを構築してみたい！」という方々の力になれればと思います。 今回は初めて触る方向けの内容になっていますので、「 DNS サーバーの構築方法だけ知りたい！」という方は目次からジャンプしていただければと思います。 手順の大まかな流れとしては、「 ドメイン 取得」 → 「各種サーバー構築」 → 「動作確認」です。 ドメイン の取得は通常それなりのコストがかかりますが、お名前ドットコムであれば初回1年間は1円で利用することができる「.work」 ドメイン があるため、最小限のコストに抑えることができます。また、 ドメイン の取得は個人・法人問わず、ホームページやメールアドレス、個人ブログで利用することができ、世界に一つだけのオリジナルであるという証明にもなります。 各種サーバーの構築は今回 AWS を利用して作成していきます。 AWS を利用するメリットとしては、初回1年間のみ無料で試すことができ、今回利用する範囲内であれば1年間無料で利用できます。（BDやRoute53を利用する場合は別途料金がかかります）また、 AWS 上でサーバーを一括管理できることや グローバルIPアドレス の取得が容易であること、 GUI での操作が可能であることもメリットになります。 通常お金のかかる ドメイン の取得と AWS の利用ですが、今回は合計1円のみで DNS サーバーについて学ぶことができるため、初めての方でも取り組みやすい内容になっているかと思います。 目次 はじめに DNSサーバーとは 環境準備 ドメイン取得 AWS登録 インスタンス作成 ネットワーク設定 Webサーバー構築 Apacheのインストール HTMLの作成と配置 セキュリティグループの変更(Webサーバー) DNSサーバー構築 プライマリDNSサーバーの構築 セカンダリDNSサーバーの構築 セキュリティグループの変更(DNSサーバー) DNSサーバー登録 動作確認 おわりに DNS サーバーとは DNS （ D omain N ame S ystem）とは、 ドメイン 名や完全修飾 ドメイン 名（ FQDN ）に対応する IPアドレス の情報を管理・運用するシステムです。 簡単に言えば、例えば ドメイン 名「 google .com」を「172.217.175.14」という IPアドレス に変換してくれるシステムです。 もう少し詳しく言うと、インターネット上でコンピュータ同士が通信を行うためには IPアドレス と呼ばれるインターネット上の住所のようなものを使って通信します。 しかし私たち人間が IPアドレス 「172.217.175.14」を見ただけでは、それが「 google .com」のサーバーだとはわかりません。 同様にコンピュータが ドメイン 名「 google .com」を見ても、コンピュータは IPアドレス でしか読み取ることができないため、人間とコンピュータにわかるようにするための相互変換が必要になり、 DNS というシステムが使用されています。 DNS サーバーはその機能を実装しているサーバーということになります。 例えば、検索バーに「 google .com」と入力します。先ほども説明したようにコンピュータには「 google .com」という文字列からサーバーの住所はわかりませんが、 DNS サーバーに「 google .comの IPアドレス （住所）を教えて下さい」と問い合わせを行うことで DNS サーバーは「 google .comの IPアドレス （住所）は172.217.175.14ですよ」とコンピュータに教えてくれます。これによりコンピュータは受け取った IPアドレス にアクセスすることで google .comのページが表示されるということになります。 簡単に DNS サーバーの動きを説明しましたが、 DNS サーバーは世界中にある無数の DNS サーバーが階層構造になって存在しています。そのため、一口に「 google .comの IPアドレス は何？」と言っても、「ルート DNS サーバー」→「.comを管理している DNS サーバー」→「 google .comのIPを管理している DNS サーバー」を経由して IPアドレス をコンピュータに教えてくれます。この動作は世界中にある無数の DNS サーバーが連携し一瞬で完了するため、私たちは普段意識することはありません。また、 DNS サーバーにはキャッシュ DNS サーバーと権威 DNS サーバーというものが存在しています。キャッシュ DNS サーバーは、自身で ドメイン 名と IPアドレス の情報を管理しているわけではなく、他の DNS サーバーに問い合わせを行ったり、自身で保持しているキャッシュから IPアドレス などを返したりする DNS サーバーです。逆に権威 DNS サーバーは、自身で ドメイン 名と IPアドレス の情報を管理している DNS サーバーになります。今回は、自身で ドメイン 名と IPアドレス の情報を管理するので、権威 DNS サーバーを構築します。 今回の名前解決の流れは以下のようになります。 クライアントはブラウザで「 http://web-test.dns-server-test.work 」と入力すると、Webサーバーの IPアドレス を得るためにキャッシュ DNS サーバーに問い合わせを行います。 キャッシュ DNS サーバーは、「 http://web-test.dns-server-test.work 」の IPアドレス を保持している場合はその IPアドレス をクライアントに返し、保持していない場合はルート DNS サーバーに問い合わせを行います。 ルート DNS サーバーには、「 http://web-test.dns-server-test.work 」の IPアドレス の情報はありませんが、「.work」を管理している DNS サーバーの IPアドレス を保持しているため、その IPアドレス を返します。 3で受け取った DNS サーバーの IPアドレス を元に、「.work」を管理している DNS サーバーに「 http://web-test.dns-server-test.work 」の IPアドレス を問い合わせます。 「.work」を管理している DNS サーバーには、「 http://web-test.dns-server-test.work 」の IPアドレス の情報はありませんが、「 dns -server-test.work」を管理している DNS サーバーの IPアドレス を保持しているため、その IPアドレス を返します。 5で受け取った DNS サーバーの IPアドレス を元に、「 dns -server-test.work」を管理している DNS サーバーに「 http://web-test.dns-server-test.work 」の IPアドレス を問い合わせます。 「 dns -server-test.work」を管理している DNS サーバーには、「 http://web-test.dns-server-test.work 」の IPアドレス 情報が記載されているため、その IPアドレス を返します。 受け取った「 http://web-test.dns-server-test.work 」の IPアドレス をクライアントに返します。 クライアントは「 http://web-test.dns-server-test.work 」の IPアドレス を元にWebサーバーにアクセスします。 WebサーバーのHTMLからブラウザ上にWebページが表示されます。 DNS サーバーには、 ドメイン 名と IPアドレス を紐づける情報が無数に蓄積されています。しかし、 DNS サーバーがダウンしてしまった場合、 ドメイン 名と IPアドレス の紐づけができなくなるため、 Webサービス にアクセスできなくなったり、メールを送信することができなくなってしまいます。そのため、 DNS サーバーは障害がいつ発生しても問題ないように2つ以上のサーバー群で構成されています。今回はプライマリ DNS サーバーと セカンダリ DNS サーバーの2つを構築し、片方の DNS サーバーで障害が発生しても問題ないことも確かめたいと思います。 目次へ 環境準備 実際に DNS サーバーを構築するための準備を行っていきます。 ※今回は AWS 上で作成したWebサーバーと DNS サーバーに SSH 接続するため、RLoginという SSH クライアントをインストールしておきます。 ※すでにターミナルソフトがインストールされている方はそちらを利用してください。 http://nanno.dip.jp/softlib/man/rlogin/#INSTALL nanno.dip.jp ドメイン 取得 まず、 ドメイン の取得です。今回は初回1年のみ1円/年で取得できる「.work」 ドメイン を取得します。 ※今回は dns -server-test.work ドメイン を取得しました（取得する場合は） www.onamae.com ※お名前ドットコムは1年後に ドメイン が自動更新される設定になっているため、自動更新を解除しておきましょう。 ※お名前ドットコムからは頻繁にメールが届くため、メールの配信設定を変更することをお勧めします。 AWS 登録 次に AWS （ Amazon Web Service）を利用するためアカウント登録を行います。 aws.amazon.com インスタンス 作成 AWS が利用可能になったら次は インスタンス を作成していきます。 インスタンス とは、 AWS クラウド 上にあるOSを載せた仮想サーバーのことです。 インスタンス を作成することでサーバーの環境構築を行うことができます。 以下のリンクを参考に インスタンス を作成します。 aws.amazon.com インスタンス の仕様は以下のように設定します。 AMI( Amazon マシンイメージ)：CentOS8 minimal インスタンス タイプ　　　　：t2.micro セキュリティグループ　　　：Webサーバー・・・ SSH (マイIP)、HTTP(80番ポート) 　　　　　　　　　　　　　： DNS サーバー・・・ SSH (マイIP)、 DNS ( UDP )、 DNS ( TCP ) Nameタグ　　　　　　　　 ：Webサーバー・・・web-test 　　　　　　　　　　　　　：プライマリ DNS サーバー・・・dns1-test 　　　　　　　　　　　　　： セカンダリ DNS サーバー・・・dns2-test Webサーバー・プライマリ DNS サーバー・ セカンダリ DNS サーバーの3つ分、 インスタンス を作成します。 ネットワーク設定 次にネットワークの設定を行っていきます。 AWS ではEIP（Elastic IP）というものが設定でき、今回作成したサーバーに固定の IPアドレス を付けることができます。 以下の リンクを参考にEIPを設定します。 docs.aws.amazon.com 今回使用するWebサーバー・プライマリ DNS サーバー・ セカンダリ DNS サーバーの3つにそれぞれ割り当てます。 EIPが重複せずに設定されていれば完了です。 目次へ Webサーバー構築 DNS サーバーの構築に入る前に、Webサーバーを作成します。 初めにWebサーバーに SSH 接続します。 今回はログインユーザ名を「 centos 」とする必要があるため注意してください。（rootユーザではログインできません） また、 インスタンス 作成時に作成したキーペアを登録します。（登録しない場合 SSH できません） SSH 接続後は、rootに切り替えてコマンドを実行していきます。 （デフォルトではrootユーザでログインできないため） ※以降サーバー内でコマンドを実行するときは必ずrootユーザに変更してから行う # sudo su - SSH 接続後は、 ミドルウェア アップデートをして 脆弱性 の排除を行います。 # dnf check-update # dnf upgrade ミドルウェア アップデートが完了したら再度確認を行い、最新の状態であることを確認します。 アップデート対象が表示されなければ完了です。 # dnf check-update Apache のインストール 次に、 Apache をインストールします。 # dnf install httpd インストールが完了したら、 Apache のバージョンを確認しておきます。 # httpd -v Server version: Apache/2.4.37 (centos) Server built: Nov 4 2020 03:20:37 Apache を 自動起動 する設定に変更しておきます。 enabledになっていれば 自動起動 される設定になったということになります。 # systemctl enable httpd.service Created symlink /etc/systemd/system/multi-user.target.wants/httpd.service → /usr/lib/systemd/system/httpd.service. # systemctl list-unit-files | grep httpd.service httpd.service enabled Apache を起動してステータスを確認します。 「Active: active (running)」となっていれば起動状態です。 # systemctl start httpd.service # systemctl status httpd.service ● httpd.service - The Apache HTTP Server Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled) Active: active (running) ～省略～ 無事 Apache が起動しましたので、次はHTMLの作成と配置です。 HTMLの作成と配置 クライアントからのアクセスでファイル名を指定しなかった場合（ http://example.com/index.html ← この最後のファイルを指定しない場合）、/etc/ httpd /conf/ httpd .confファイル内のDirectoryIndexディレクティブからindex.htmlがデフォルトで表示されるようになっています。 ～省略～ <IfModule dir_module > DirectoryIndex index.html </IfModule> ～省略～ このようにデフォルトではindex.htmlが指定されており、 http://www.dns-server-test/ にアクセスされると、index.htmlが存在すればそのHTMLが、存在しなければ Apache のテストページが表示されます。 そのため、今回は編集する箇所を少なくしたいという意味も込めて、index.htmlファイルを作成していきます。 まず、HTMLファイルの配置場所ですが、以下のコマンドを使用することで確認することができます。 # grep "^DocumentRoot" /etc/httpd/conf/httpd.conf DocumentRoot "/var/www/html" これによりHTMLファイルは「/var/www/html」の下に配置すればよいということがわかります。 次に、HTMLの作成です。以下のコマンドでHTMLを作成します。 # vi /var/www/html/index.html 簡易的ですが、記述するHTMLを記載します。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < meta name = "description" content = "" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < title > DNS TEST </ title > </ head > < body > < h1 > Successful Access! </ h1 > </ body > </ html > HTMLの作成と配置が完了しました。 セキュリティグループの変更(Webサーバー) これにてWebサーバーの構築は完了しましたので、構築できているか確認するためにアクセスします。 Webサーバーにアクセスするためには、セキュリティグループを変更して80番ポートを解放する必要があります。 以下のように設定を追加します。 タイプ：HTTP ソース：カスタム、0.0.0.0/0 一度動作確認のため、 IPアドレス でアクセスしてみます。 成功しました。 目次へ DNS サーバー構築 前置きが長くなりましたが、いよいよ本題のプライマリ DNS サーバーと セカンダリ DNS サーバーの構築に入ります。 プライマリ DNS サーバーの構築 それでは実際に構築していきます。 まず、 AWS 上で作成したサーバーを DNS サーバーとして動作させるための設定ファイル等が入った ミドルウェア をインストールする必要があります。 今回インストールするものは、「bind」「bind- chroot 」「bind-utils」の3種類です。 bind ・・・・・・BIND9本体で各種設定ファイル等が入っているもの bind- chroot ・・・ chroot 化させるためのもの bind-utils・・・・nslookupやdigコマンドを使用するためのもの（named-checkzoneコマンドも使用できるようにするため） Step1～9で DNS サーバーの構築を行います。 Step1 Webサーバー構築時と同様にプライマリ DNS サーバー（dns1）に SSH 接続します。 ※接続方法はWebサーバーで解説していますのでそちらを参照 ※「# sudo su -」でrootユーザに変更してから実施 Step2 Webサーバー構築時と同様に ミドルウェア アップデートを行います。 # dnf check-update # dnf upgrade Step3 以下のコマンドを入力し、BIND関連の ミドルウェア をインストールします。 # dnf install bind bind-chroot bind-utils Step4 BINDのバージョンがBIND9系であることを確認します。 # named -v BIND 9.11.20-RedHat-9.11.20-5.el8 (Extended Support Version) <id:f3d1d66> Step5 namedではなくnamed- chroot というサービスを起動して利用するため、namedのステータスと設定を確認します。 ※ chroot については後述します。 # systemctl list-unit-files | grep ^named.service named.service disabled # systemctl status named ● named.service - Berkeley Internet Name Domain (DNS) Loaded: loaded (/usr/lib/systemd/system/named.service; disabled; vendor preset: disabled) Active: inactive (dead) namedが 自動起動 しない設定であることと停止していれば問題ありません。 自動起動 する設定や起動している場合には、以下のコマンドで停止させましょう。 # systemctl disable named.service # systemctl stop named.service Step6 named- chroot を 自動起動 する設定にして起動させます。先ほど説明を後回しにした chroot ですが、ルート ディレクト リを変更するというもので、namedを chroot 化させると/var/named/ chroot 以下に関連するファイルがマウントされ、 chroot より上位の ディレクト リにはアクセスをできなくなります。これによりアクセス可能な範囲が制限されセキュリティ対策となります。 # systemctl enable named-chroot.service Created symlink /etc/systemd/system/multi-user.target.wants/named-chroot.service → /usr/lib/systemd/system/named-chroot.service. # systemctl start named-chroot.service # systemctl status named-chroot.service ● named-chroot.service - Berkeley Internet Name Domain (DNS) Loaded: loaded (/usr/lib/systemd/system/named-chroot.service; enabled; vendor preset: disabled) Active: active (running) ～省略～ Step7 named.confファイルを編集して DNS サーバーの基本設定を行います。 ※ chroot 化しているため、/etc/named.confではなく/var/named/ chroot /etc/named.confを編集することに注意 # vi /var/named/chroot/etc/named.conf デフォルトのnamed.confファイルは以下になります。 // // named.conf // // // named.conf // // Provided by Red Hat bind package to configure the ISC BIND named(8) DNS // server as a caching only nameserver (as a localhost DNS resolver only). // // See /usr/share/doc/bind*/sample/ for example named configuration files. // options { listen-on port 53 { 127.0.0.1; }; listen-on-v6 port 53 { ::1; }; directory "/var/named"; dump-file "/var/named/data/cache_dump.db"; statistics-file "/var/named/data/named_stats.txt"; memstatistics-file "/var/named/data/named_mem_stats.txt"; secroots-file "/var/named/data/named.secroots"; recursing-file "/var/named/data/named.recursing"; allow-query { localhost; }; /* - If you are building an AUTHORITATIVE DNS server, do NOT enable recursion. - If you are building a RECURSIVE (caching) DNS server, you need to enable recursion. - If your recursive DNS server has a public IP address, you MUST enable access control to limit queries to your legitimate users. Failing to do so will cause your server to become part of large scale DNS amplification attacks. Implementing BCP38 within your network would greatly reduce such attack surface */ recursion yes; dnssec-enable yes; dnssec-validation yes; managed-keys-directory "/var/named/dynamic"; pid-file "/run/named/named.pid"; session-keyfile "/run/named/session.key"; /* https://fedoraproject.org/wiki/Changes/CryptoPolicy */ include "/etc/crypto-policies/back-ends/bind.config" ; }; logging { channel default_debug { file "data/named.run" ; severity dynamic; }; }; zone " . " IN { type hint ; file "named.ca" ; }; include "/etc/named.rfc1912.zones" ; include "/etc/named.root.key" ; 今回編集するのは、options ステートメント とzone ステートメント です。以下のように変更します。 options { // 1. BINDのバージョンを隠蔽 version "unknown" ; // 2. ホスト名 hostname "dns1.dns-server-test.work."; // 3. 53番ポートでの受付をすべて許可 listen-on port 53 { any; }; // 4. ipv6を使用しない listen-on-v6 { none; }; directory "/var/named"; dump-file "/var/named/data/cache_dump.db"; statistics-file "/var/named/data/named_stats.txt"; memstatistics-file "/var/named/data/named_mem_stats.txt"; secroots-file "/var/named/data/named.secroots"; recursing-file "/var/named/data/named.recursing"; // 5. すべてのクエリーを受け付ける allow-query { any; }; // 6. リゾルバとして動作しないように設定 recursion no; allow-recursion { none; }; allow-query-cache { none; }; dnssec-enable yes; dnssec-validation yes; managed-keys-directory "/var/named/dynamic"; pid-file "/run/named/named.pid"; session-keyfile "/run/named/session.key"; /* https://fedoraproject.org/wiki/Changes/CryptoPolicy */ include "/etc/crypto-policies/back-ends/bind.config" ; }; logging { channel default_debug { file "data/named.run" ; severity dynamic; }; }; // 7. ルートDNSサーバーのゾーン情報は今回必要ないのでコメントアウト /* zone "." IN { type hint; file "named.ca"; }; */ // 8. ゾーンファイルdns-server-test.workの設定 zone " dns-server-test.work " IN { // プライマリDNSサーバーであることを指定 type master ; // ゾーンファイルのファイル名を指定 file "dns-server-test.work" ; // ゾーンファイルの変更を通知する notify yes ; // ゾーンファイルの変更を通知する先を指定（セカンダリDNSサーバーのプライベートIPアドレスを指定） also-notify { xxx.xxx.xxx.xxx; }; // ゾーン転送先を指定（セカンダリDNSサーバーのプライベートIPアドレスを指定） allow-transfer { xxx.xxx.xxx.xxx; }; }; include "/etc/named.rfc1912.zones" ; include "/etc/named.root.key" ; BINDのバージョンを隠蔽 nslookupコマンド等でBINDのバージョンを表示されないようにします。バージョンが知られてしまうと、そのバージョンでの 脆弱性 を突いて攻撃される可能性があるためです。今回は入力をunknownしているため、unknownと表示されることになります。 ホスト名 DNS サーバーのホスト名を記述します。プライマリ DNS サーバーのnamed.confファイルを編集しているので、「dns1-test. dns -server-test.work」となります。 53番ポートでの受付をすべて許可 DNS サーバーは53番ポートを使用するため許可する設定にします。 IPv6 を使用しない 今回は IPv4 のみ使用するため使用しないことを明示的に記述しています。（記述しない場合も使用しない設定になります） すべてのクエリーを受け付ける どこからでも名前解決の問い合わせを受け付ける設定にします。 リ ゾル バとして動作しないように設定 recursionは 再帰 問い合わせを行う設定です。今回は権威 DNS サーバーを構築するため、設定をnoにします。 ルート DNS サーバーのゾーン情報は今回必要ないので コメントアウト キャッシュ DNS サーバーとして動作させないため コメントアウト します。 ゾーンファイル dns -server-test.workの設定 DNS サーバーがプライマリなのか セカンダリ なのかの指定や、ゾーンファイルの名前を指定、ゾーン転送先を指定等をします。 編集が完了したら記述が正しくできているかチェックを行います。 ※正しく記述できている場合には何も表示されません # named-checkconf /var/named/chroot/etc/named.conf Step8 named.confファイルの編集が終わったら次はゾーンファイルの作成です。簡単に言うとゾーンファイルは ドメイン 名と IPアドレス の対応表を記載していくファイルになります。 /var/named/ chroot /var/named以下に作成します。 # vi /var/named/chroot/var/named/dns-server-test.work ゾーンファイルの記述は以下のようになります。 $TTL 30 0 @ IN SOA dns1-test.dns-server-test.work. xxxxxxxxxx.gmail.com. ( 2020122000 ; Serial（シリアル ） 3600 ; Refresh（転送間隔 ） 900 ; Retry（再試行猶予時間 ） 21600 ; Expire（有効時間 ） 60 ; Minimum TTL（ネガティブキャッシュTTL ） ) ; DNSサーバ ー IN NS dns1-test.dns-server-test.work . IN NS dns2-test.dns-server-test.work . dns1-test IN A xxx.xxx.xxx.xx x dns2-test IN A xxx.xxx.xxx.xx x ; Webサーバ ー web-test IN A xxx.xxx.xxx.xx x ゾーンファイル内では「 ; 」はコメントとして扱われます。以下に各記述の内容を記載します。 TTL DNS サーバーがレコード情報をキャッシュする時間で、この場合最大5分間ローカルにキャッシュを保持します。 ＠ IN SOA ～ SOA レコートといい、＠ IN SOA {MNAME} {RNAME}で記述します。 MNAMEは、 DNS サーバーの名前を記述します。 RNAMEは、この ドメイン の管理者のメールアドレスを記述します。＠マークは「 . 」に置き換えて記述する必要があります。 Serial ゾーンファイルのバージョンを表し、YYYYMMDDnn形式で記述します。この場合であれば「2020年12月 20日 1回目の変更」ということになります。※変更回数は0回からカウントします。 例えば同じ日に2回目の変更をした場合はシリアルを変更して「2020122001」となります。 Refresh ゾーンの情報をリフレッシュするまでの時間です。 セカンダリ DNS サーバーはゾーン転送をした後、この時間が経過すると、ゾーンの更新がされたかを問い合わせ、必要に応じて再度データを入手しようとします。 Retry Refreshでゾーンの情報が更新できなかった場合に、指定された時間後に再度リフレッシュを試みます。 Expire ゾーン情報のリフレッシュができない状態が続いた場合に、 セカンダリ DNS サーバーが所持しているデータをどのくらいの時間利用するか記述します。 Minimum TTL ネガティブキャッシュと言われ、名前解決ができなかったという情報を保持する時間を記述します。 IN NS ～ NSレコードといい、 DNS サーバーを記述します。今回の場合はプライマリ DNS サーバーと セカンダリ DNS サーバーを指定します。 最後に「 . 」を付けます。 ～ IN A ～ Aレコードといい、ホスト名に対応する IPアドレス を記述します。 ゾーンファイルの編集が終わったら パーミッション と所有権を変更します。 # chmod 750 /var/named/chroot/var/named/dns-server-test.work # chown root:named /var/named/chroot/var/named/dns-server-test.work # ll /var/named/chroot/var/named/dns-server-test.work -rwxr-x---. 1 root named 570 Dec 20 14:01 /var/named/chroot/var/named/dns-server-test.work ゾーンファイルもnamed.confと同様、記述が正しいかチェックします。「OK」と表示されれば問題ありません。 ※構文が正しいかのみのチェックであるため、 IPアドレス が正しいかどうか等は判定されません # named-checkzone dns-server-test.work /var/named/chroot/var/named/dns-server-test.work zone dns-server-test.work/IN: loaded serial 2020122000 OK Step9 最後に設定を反映させます。rndcコマンドを使用することで、 DNS サーバーを再起動させることなくゾーンファイルを反映させることができます。 # rndc reload server reload successful プライマリ DNS サーバーの構築は完了です。 目次へ セカンダリ DNS サーバーの構築 プライマリ DNS サーバーの構築が終わったら次は セカンダリ DNS サーバーの構築です。構築はプライマリ DNS サーバーとほぼ同様です。 セカンダリ DNS サーバーに SSH 接続し、プライマリ DNS サーバーで行った Step2～6 までを行います。 Step7はプライマリ DNS サーバーと セカンダリ DNS サーバーでは変更箇所があるため、変更箇所を以下に記述します。named.confファイルを編集します。 # vi /var/named/chroot/etc/named.conf options { // BINDのバージョンを隠蔽 version "unknown" ; // ホスト名 hostname "dns2.dns-server-test.work."; // 53番ポートでの受付をすべて許可 listen-on port 53 { any; }; // ipv6を使用しない listen-on-v6 { none; }; directory "/var/named"; dump-file "/var/named/data/cache_dump.db"; statistics-file "/var/named/data/named_stats.txt"; memstatistics-file "/var/named/data/named_mem_stats.txt"; secroots-file "/var/named/data/named.secroots"; recursing-file "/var/named/data/named.recursing"; // すべてのクエリーを受け付ける allow-query { any; }; // リゾルバとして動作しないように設定 recursion no; allow-recursion { none; }; allow-query-cache { none; }; dnssec-enable yes; dnssec-validation yes; managed-keys-directory "/var/named/dynamic"; pid-file "/run/named/named.pid"; session-keyfile "/run/named/session.key"; /* https://fedoraproject.org/wiki/Changes/CryptoPolicy */ include "/etc/crypto-policies/back-ends/bind.config" ; // 1. セカンダリDNSサーバーからは通知を送信しない notify no; // 2. セカンダリDNSサーバーからはゾーン転送しない allow-transfer { none; }; }; logging { channel default_debug { file "data/named.run" ; severity dynamic; }; }; // ルートDNSサーバーのゾーン情報は今回必要ないのでコメントアウト /* zone "." IN { type hint; file "named.ca"; }; */ // 3. ゾーンファイルdns-server-test.workの設定 zone " dns-server-test.work " IN { // セカンダリDNSサーバーであることを指定 type slave ; // ゾーン転送されたファイルをバイナリ形式からテキスト形式に変換する設定 masterfile-format text; // ゾーンファイルのファイル名を指定 file "slaves/dns-server-test.work" ; // マスターDNSサーバーを指定（マスターDNSサーバーのプライベートIPアドレスを指定） masters { xxx.xxx.xxx.xxx; }; }; include "/etc/named.rfc1912.zones" ; include "/etc/named.root.key" ; セカンダリ DNS サーバーからは通知を送信しない プライマリ DNS サーバーからは通知を送信しますが、 セカンダリ DNS サーバーはバックアップのような存在であるため、通知の必要がありません。 セカンダリ DNS サーバーからはゾーン転送しない プライマリ DNS サーバーからはゾーン転送を行いますが、 セカンダリ DNS サーバーはゾーン転送を受ける側なので必要がありません。 ゾーンファイル dns -server-test.workの設定 DNS サーバーがプライマリなのか セカンダリ なのかの指定や、ゾーンファイルの名前を指定、ゾーン転送先を指定等をします。 セカンダリ DNS サーバーはゾーン転送によりゾーンファイルがプライマリ DNS サーバーから転送されてくるため、Step8は行いません。 Step9を行います。 # rndc reload server reload successful 最後にStep10として、ゾーン転送されているか確認します。 ※最初のゾーン転送が行われるまでは若干時間がかかる可能性があるため、次の「セキュリティグループの変更」や「 DNS サーバー登録」を行ってから再度確認してください。 # ll /var/named/chroot/var/named/slaves/ total 4 -rw-r--r--. 1 named named 473 Dec 20 15:20 dns-server-test.work セキュリティグループの変更( DNS サーバー) Webサーバーのセキュリティグループ変更と同様に DNS サーバーのセキュリティグループを以下のように変更します。 DNS サーバーは53番ポートで通信を行うため、 DNS ( UDP )と DNS ( TCP )を解放する必要があります。 DNS サーバーのセキュリティグループ変更は完了です。 目次へ DNS サーバー登録 先ほど構築した DNS サーバーですが、構築しただけでは DNS サーバーとしての役割、つまり名前解決を行うことはできません。 DNSサーバーとは の部分でも触れましたが、 DNS サーバーは階層構造になっているため、今回構築した DNS サーバーの一つ上の DNS サーバーに、構築した DNS サーバーの IPアドレス を登録する必要があります。 つまり今回の場合であれば「.work ドメイン を管理している DNS サーバー（お名前ドットコム）に、今回構築した DNS サーバーの IPアドレス を登録する」ということになります。 まずはお名前ドットコムにアクセスします。 画面右上の「お名前ドットコム navi ログイン」をクリックしてログイン画面に移ります。 ドメイン 取得時にお名前IDが発行されているのでそちらとパスワードを入力しログインします。 ログインが完了したら、画面上部の DNS タブにカーソルを合わせ、「 ドメイン の DNS 設定」をクリックします。 取得した ドメイン にチェックを入れ「次へ」をクリックします。 画面下部にある「ネームサーバー名としてホスト登録を行う」の「設定する」をクリックします。 作成にチェックを入れ「入力画面に進む」をクリックします。 ホスト名「dns1」とdns1の IPアドレス を入力し、「確認画面へ進む」をクリックします。 ※dns2も同様にホスト名と IPアドレス を登録します。（ DNS サーバーを2つ登録しないと後の画面でエラーになります。） ホスト名の登録が完了したら次は、 DNS サーバーの変更を行います。 画面左のメニューバーから「ネームサーバーの変更」をクリックします。 ドメイン の選択で ドメイン 名にチェックを入れます。ネームサーバーの選択でその他を選択し、構築した DNS サーバーの FQDN を入力します。 今回であれば「dns1. dns -server-test.work」「dns2. dns -server-test.work」を入力します。（ここで2つ登録できないとエラーになります。） エラー時参考： 【ドメイン】ネームサーバーの変更ができません。｜ヘルプサポート | ドメイン取るならお名前.com 「確認」をクリックすれば DNS サーバーの変更は完了です。 ※場合によっては、反映に時間がかかる可能性があります。 目次へ 動作確認 最後に DNS サーバーが正常に動作しているか確認します。 URL入力欄に FQDN を入力します。 成功です。 次は、 コマンドプロンプト から確認してみます。 > nslookup web-test.dns-server-test.work サーバー: ~~~~~~~~ Address: xxx.xxx.xxx.xxx　←自分のIPアドレス 権限のない回答: 名前: web-test.dns-server-test.work Address: xxx.xxx.xxx.xxx　←WebサーバーのIPアドレス Webサーバーの IPアドレス が返ってきていれば成功です。 次は DNS サーバーを直接指定して名前解決ができるか確認します。 まずは、プライマリ DNS サーバーからです。（yyy.~はプライマリ DNS サーバーの IPアドレス を指定） > nslookup web-test.dns-server-test.work yyy.yyy.yyy.yyy サーバー: UnKnown Address: xxx.xxx.xxx.xxx　←自分のIPアドレス 権限のない回答: 名前: web-test.dns-server-test.work Address: xxx.xxx.xxx.xxx　←WebサーバーのIPアドレス 次に、 セカンダリ DNS サーバーです。（zzz.~は セカンダリ DNS サーバーの IPアドレス を指定） > nslookup web-test.dns-server-test.work zzz.zzz.zzz.zzz サーバー: UnKnown Address: xxx.xxx.xxx.xxx　←自分のIPアドレス 権限のない回答: 名前: web-test.dns-server-test.work Address: xxx.xxx.xxx.xxx　←WebサーバーのIPアドレス どちらもWebサーバーの IPアドレス が返ってきていれば成功です。 最後にプライマリ DNS サーバーが停止している状態で確認します。 AWS マネジメントコンソール画面からプライマリ DNS サーバーを停止させておきます。 正常に停止したことを確認したら、次は コマンドプロンプト でコマンドを実行します。 PC内にゾーン情報が残っている可能性があるため、キャッシュを削除します。 > ipconfig /flushdns Windows IP 構成 DNS リゾルバー キャッシュは正常にフラッシュされました。 nslookupコマンドでも確認しておきます。 サーバー: ~~~~~~~~ Address: xxx.xxx.xxx.xxx　←自分のIPアドレス DNS request timed out. timeout was 2 seconds. 権限のない回答: 名前: web-test.dns-server-test.work Address: xxx.xxx.xxx.xxx　←WebサーバーのIPアドレス Webサーバーの IPアドレス が返ってきていれば準備完了です。 キャッシュを削除する以外にも、 Google Public DNS （8.8.8.8）を指定してコマンドを打つことでも確認することができます。 URL入力欄に FQDN を入力します。 成功です。 これにより、プライマリ DNS サーバーが何等かの不具合により停止したとしても、 セカンダリ DNS サーバーが稼働しているためWebページにアクセスすることが可能になっていることがわかります。 目次へ おわりに 長くなってしまいましたが、難しい手順などもなく簡単に DNS サーバーを構築できたのではないでしょうか。普段意識することの無い DNS サーバーについて少しでも知ることができていれば幸いです。 今回学んだことを応用すると、例えば「 DNS サーバーがダウンし目的のWebページにアクセスできないとなった場合（ DNS サーバーが応答していません等）、 Windows や Mac の参照先 DNS サーバー（ Google Public DNS ：8.8.8.8 や OpenDNS：208.67.222.222 等）を変更し、その DNS サーバーを経由させ名前解決を正常に行えるようにすればWebページにアクセスできるようになる」ということが理解できるかと思います。このように、 DNS サーバーについて理解を深めることで、Webサーバーがダウンしてアクセスできないのか、 DNS サーバーがダウンしてアクセスできないのか等の原因の切り分けにも利用できるかと思います。 冒頭で一瞬出ましたが、 AWS にはRoute53という DNS サーバーを簡単に構築することができるサービスがあるので、気になる方は是非調べてみてください。 今回は触れませんでしたが、 DNS サーバーの逆引き設定についても機会があれば紹介したいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

こんにちは。 株式会社 ラク スで先行技術検証をしたり、ビジネス部門向けに技術情報を提供する取り組みを行っている「技術推進課」という部署に所属している鈴木（ @moomooya ）です。 ラク スでは有り難いことにサービスが順調に成長しています。今後の成長に対応できるようにするために、継続的な検討課題としてより拡大可能な アーキテクチャ の検討を行っています。 拡大成長可能な ウェブアプリケーション （のバックエンド） アーキテクチャ としてすぐに挙がるのが「 マイクロサービス アーキテクチャ 」だと思いますが、マイクロサービス アーキテクチャ が一般的に議論されるようになったのが2015年頃からだったと思います。それ以来いろいろと考え続け、従来のモノリシック アーキテクチャ 群との間にある アーキテクチャ とイメージがつながってきたのでまとめてみたいと思います。 この記事でそれぞれのバックエンド アーキテクチャ を俯瞰的に比較することで、 ウェブアプリケーション 開発時のヒントになると思います。 各アーキテクチャについて モノリシックアーキテクチャ マイクロサービスアーキテクチャ ミニサービスアーキテクチャ モジュラーモノリス 各アーキテクチャの使い分け マイクロサービスに必要なもの BtoB, BtoCの観点から まとめ 追記 各 アーキテクチャ について 今回比較する各 アーキテクチャ はどれも ウェブアプリケーション のバックエンド アーキテクチャ になります。 昔ながらのモノリシック アーキテクチャ が無秩序でつぎはぎだらけなメンテナンスしにくい ソースコード に陥りやすいという課題感は 1997 年に発表され、 1999 年に Big Ball of Mud という論文で広く認知されるようになりました（参考： 大きな泥だんご - Wikipedia ）。 www.laputan.org それから15年後の 2014 年に ThoughtWorks 社の James Lewis 氏と Martin Fowler 氏が自社ブログにて『 マイクロサービス 』を発表しました。 誤解を恐れず言うのであれば発表された「マイクロサービス」の定義内容はコンセプチュアルな内容、言い換えるのであれば「 実用可能ではあるが想定が極端な アーキテクチャ コンセプト 」であったと思います。 martinfowler.com 2014年に発表されてからの数年間、 ITアーキテクト の皆さんはどうやったらプロダクトコードに落とし込むことができるのか理解と解釈を進めたと思います。 そのうち、マイクロサービス アーキテクチャ で想定されてる規模とマッチする ウェブアプリケーション に対してはマイクロサービスが適用され始めましたが、マッチする ウェブアプリケーション の範囲は ITアーキテクト たちが考えていたほど広くはありませんでした。 とはいえマイクロサービス アーキテクチャ のコンセプトは長年求められているものでした。なんとかそのコンセプトを適用することができないかと模索した結果、現実的なアプローチとして 2017 年に Cloud Elements 社の Ross Garrett 氏が自社ブログにて『 ミニサービス：実用的なマイクロサービスアーキテクチャ 』という投稿を公開しています（詳細は更にリンクされているTechTargetの記事）。 これはマイクロサービス アーキテクチャ ほど細かく分割はせずに、利用する技術要素も既存技術でまかなう考え方で、モノリシック アーキテクチャ とマイクロサービス アーキテクチャ の間にある落とし所を探す アーキテクチャ の一つとなりました。 https://blog.cloud-elements.com/pragmatic-microservices-architecture blog.cloud-elements.com といっても、ミニサービス アーキテクチャ も 複数サービスを開発・運用していく という部分では変わりなく、それよりも更に小規模であったり動的なスケールが必要ない ウェブアプリケーション にとっては導入によるデメリットが大きく、積極的に適用出来るわけではありませんでした。 モノリシック アーキテクチャ とミニサービス アーキテクチャ の間に位置づけられる アーキテクチャ として、 2018 年に Root Insurance 社の Dan Manges 氏が自身のブログで『 Railsのアーキテクチャ：モジュラーモノリス 』としてモジュラー モノリス アーキテクチャ を発表しました （2025.5.2追記）モジュラー モノリス の初出はDevNexus2016で基調講演として発表されたSimon Brownによる『 Modular monolith 』のようです 。 これはモノリシック アーキテクチャ をベースに、サービスに分割するのではなくモジュール（ Rails なのでgem）に分割していき、最終的には単一の ウェブアプリケーション としてデプロイする アーキテクチャ でした。 medium.com ここまでをまとめると アーキテクチャ が生まれた順序は以下のようになります。 各 アーキテクチャ 間の関係は以下のようになります。 それぞれの アーキテクチャ についてもう少し詳細に見ていきたいと思います。 モノリシック アーキテクチャ デプロイメントラインが1つで、バックエンドサービスが1つの アーキテクチャ 。 デプロイメントラインが1つであることは利点で『 マイクロサービス 』でも立ち上げ時などの速度を重視するタイミングではモノリシックで構築することが推奨されています。 反面、アップデートを重ね規模が大きくなると開発コストが増大するとされていますし、感覚値としてもその通りであるという印象があります。 特に成功したサービスほど急速にアップデートが行われることを考えると、成功した場合にはどこかでリアーキテクトを考える必要があると言えます。ただ……開発エンジニアの想定（というか渇望）よりはモノリシックのままで対応できる範囲は広く、それが判断を難しくしている原因とも思います。 マイクロサービス アーキテクチャ 2014年に提唱されて以来、ノウハウがまとまった書籍が揃ってきました。 まずはサム・ニューマン著『マイクロサービス アーキテクチャ 』を読みましょう。 概要についてはこの本で網羅的に抑えることが出来ます。ちなみに原著の方では第2版がO'reilly Learning Centerで先行リリースされています " Building Microservices, 2nd Edition "。 ※追記 ：2022/12/2に第2版の翻訳版が発刊されました 「マイクロサービス アーキテクチャ 」の流行もやや落ち着き、冷静な議論が出来るタイミングが来ていると感じていますが、忘れてはいけないのは提唱者ら自らが「『マイクロサービス アーキテクチャ から始めるべきではない』というのは合理的な議論である。 モノリス から始めて、モジュール構造を保って、 モノリス であることに問題が生じたらマイクロサービスに分割する」と語っていることを忘れてはいけません。 One reasonable argument we've heard is that you shouldn't start with a microservices architecture. Instead begin with a monolith, keep it modular, and split it into microservices once the monolith becomes a problem. " Are Microservices the Future? - Microservices " モノリス からマイクロサービスへの移行パターンについても翻訳本はまだ出ていませんが、"Building Microservices"と同じ著者で" Monolith to Microservies "という本が2019年に出版されています。 と、思ったら2020年12月26日に翻訳本が発刊されるようです！ うれしい！！ ミニサービス アーキテクチャ マイクロサービス アーキテクチャ は破壊的すぎるとしてミニサービス アーキテクチャ が提唱されています。大きな違いとしては以下があります。 サービス分割単位は機能単位ではなく ドメイン 単位 データストアは必ずしもサービスごとではなく、共有データストアでもOK サービス間通信はpub/subではなく、httpでもOK 調査会社のガートナー社では以下のように図解しています。 出典元： Gartner また私が以前にMicroservices Meetupで発表した資料へのリンクも置いておきます。 モジュラー モノリス マイクロサービス、ミニサービス、とサービスを分割――すなわちデプロイメントラインを複数にする――というアプローチを前提においていましたが、デプロイメントラインが複数になるということは 複数の Webサービス を開発・運用する ということになります。このコストは無視できません（なんせより大きな成功につながる かもしれない 別の Webサービス を展開するのと同等のコストです）。 この問題について1つのデプロイメントラインを維持しつつ、サービス分割をモジュール分割とすることで解決しようとしたアプローチがモジュラー モノリス になります。 2019年に Shopifyが実際に移行した取り組み で話題になりました。Shopifyでは分割後のモジュールとの依存を管理するために Wedge というツールを開発してプロジェクトを進めていたようです（このツールも OSS として公開したいとのこと）。 （2021.1.6追記） Wedge は Packwerk として公開済みとコメントにて教えていただきました。 takahashimさん、ありがとうございます。 shopify.engineering 翻訳記事も見つけました。 qiita.com モジュラー モノリス においてデータストアはどのように扱うのか、という点においてはミニサービスアキテクチャのように共有データストアを利用するケースもあれば、モジュール単位でデータストアを持つ方法も試されているようです。このあたりの話は Mnolith to Microservices(モノリスからマイクロサービスへ) の第1章「必要十分なマイクロサービス」の「 モノリス の課題」や、第4章「データベースを分割する」が参考になると思います。 モジュラー モノリス については弊社の先行技術検証の取り組みである「技術推進プロジェクト」の成果として別途記事にもしているのでご参照ください。 tech-blog.rakus.co.jp 各 アーキテクチャ の使い分け マイクロサービスに必要なもの これまでそれなりの時間をかけて検証を重ねてきましたが、マイクロサービス アーキテクチャ を採用するのは相当にハードルが高いと感じました。 最初に必要となる適切に構成された コンポーネント 群についてはサービス分割を念頭に起きながらサービスの開発・運用を一定期間続けることできれば、 ドメイン 知識の蓄積によりなんとか「適切な構成」を見出すことは出来るかもしれません（「サービス分割を念頭におく」ことが相当に難しいことはともかく）。 スキルレベルの高いエンジニアチーム、具体的には分散システムの開発・運用を実現するためのツール群や設計思想などに精通したエンジニアチームとなりますが、これも一朝一夕では厳しくとも時間をかければなんとか実現出来ると思います。 ただ、それらを揃える労力を「マイクロサービス アーキテクチャ 」を実現するコストとして投入するかというと悩ましいところです。 BtoB, BtoCの観点から ラク スはBtoBでのビジネス展開をしているわけですが、BtoBサービスにおいてはマイクロサービス アーキテクチャ の必要性はそこまで高くないと判断しています。 マイクロサービス アーキテクチャ の旨味である「オートスケールと組み合わせての予想しない負荷への自動対応」だとか「日に何十回もの小刻みな本番環境へのリリース」といったBtoCで求められることは特定多数がユーザーであるBtoBではあまり求められていないです 1 。 とはいえサービスが大きくなったときにモノリシック アーキテクチャ のままであることにもつらさがあるため、 モノリス とマイクロサービスの間のどこかを目指すことになると考えています。 直近では モノリス の状態で、問題が出始めたら"Monolith to Microservices"でも「多くの組織にとって、モジュラー モノリス は優れた選択肢である」と書かれているようにモジュラー モノリス を目指していくことになるのではないかと考えています。 コンテナ オーケストレーション だとか、分散ロギングなどの運用ノウハウが十分に貯まったころに、次いでミニサービス アーキテクチャ が選択肢に入ってくるとイメージしています。 まとめ さて、この数年間で比較されてきた モノリシック アーキテクチャ モジュラー モノリス ミニサービス アーキテクチャ マイクロサービス アーキテクチャ の4つを俯瞰して見渡してみました。 アーキテクチャ 検討の参考になればと思います。 なお、現時点では 2 先述の通り「モジュラー モノリス 」が一番現実解に近いかな……と検証を行っていますが、モノリシック アーキテクチャ に比べるとモジュールとして分離するコストが上乗せされる分高くなります。どの程度の規模で分離しはじめるべきなのか、見極めラインは今後も探っていきたいと思います。 追記 [2020.12.21追記] 今年翻訳本が発刊されたクリス・リチャードソン著『マイクロサービスパターン』もおすすめです。サービス分割に関する部分など、マイクロサービスに限らずミニサービスやモジュラー モノリス にも役に立つ内容が掲載されています。ちなみに元ネタはこの本の著者が運営するウェブサイト Microservices.io です。 microservices.io [2021.1.6追記] コメントにて takahashim さんから「 Wedge は Packwerk として公開済み」と教えていただきました。2020年9月に公開されていたようです。名前が変わっているとは盲点でした。 shopify.engineering エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 https://rakus.hubspotpagebuilder.com/visit_engineer/ rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com 契約しないと利用することが出来ないことと、契約からサービス利用開始までに一定期間があるため直近の負荷予測ができるからオートスケールはいらない。またアナウンスなしでの機能追加なども現状では考えにくく、日に何度もアナウンスされても利用者も困る。 ↩ 2年前はモジュラー モノリス の発想がなかったこともあり、ミニサービスが現実解かと思っていました。しかしデプロイメントラインが複数になるコストは無視できないものでした。 ↩

はじめに 株式会社 ラク ス 配配メール開発課の PHP エンジニア Jazumaです。 2020年12月12日(土)に PHPカンファレンス が開催されました。 phpcon.php.gr.jp 例年では「 大田区産業プラザ PiO」で開催予定でしたが、今年は 新型コロナウイルス の影響でオンライン開催となりました。個人的にはオンライン開催である分、地方のエンジニアでも気軽に参加することができたのは良かったのではないかと思います。 ラク スは PHPカンファレンス にスポンサーとして参加 させていただいている他、社内からLT枠で2名が登壇しました。 今回は PHPカンファレンス に参加した社内の PHP エンジニアがイベントをレポートしましたので、ご紹介したいと思います。 各セッションのスライドについては以下にまとめましたので、ご活用いただければ幸いです。 No タイトル 1 SPAのAPI開発の「やりづらさ」をDDDとオブジェクト指向の発想で解決する 2 PHPの今とこれから2020 3 PHP WEBアプリケーション設計入門――10年先を見据えて作る 4 レガシープロジェクトで、メタプログラミングを使ったPHPStan静的解析レベル上げ 5 長期運用を目指す『Shadowverse』におけるリファクタ事例の紹介 〜テストの導入とメンバーへの普及法〜 6 PHP on Kubernetes 7 Webサービスをセキュアに保つために必要な視点 8 Composer 2.0 って何？どう変わるの？読んでみました！ 9 今こそ理解する、PHPの日時時計 10 PHP8時代のWebアプリケーションフレームワークの話をしよう 11 ウェブセキュリティのありがちな誤解を解説する 12 PHPで作るオンラインカンファレンス向け録画システム 13 静的解析ではじめる負債コード解消 14 レガシーシステムに自動テストを導入する第一歩 SPAの API 開発の「やりづらさ」をDDDと オブジェクト指向 の発想で解決する report by mrym_618 tech.quartetcom.co.jp 現代のSPAでの API 開発には様々な問題があり、その問題に対してどのような解決策があるかについてのセッションでした。 このセッションで話されていた、問題と解決策は以下の通りです。 ロジックの重複 問題：フロントエンドとバックエンドで同じロジックが現れる 解決策：バックエンド側で隠蔽する トランザクション できない 問題：サーバ側の状態が変化することを止められない 解決策：バックエンド側でロジックの隠蔽を行い、 トランザクション はサーバ内で行う この API 、他にどこで使われていたっけ?!問題 問題： API を使い回した結果、その API を削除したくても他に影響が出そうで削除できない 解決策： API もSRP（単一責任の原則）にし、フロントエンドから見て別であれば別の API にする n+1 問題：n+1回のリク エス トを発行してしまう 解決策：n+1を解決できるレイヤー（ SQL ）に任せる 全ての解決策に共通していることから、バックエンド側に任せられることは任せてしまい、フロントエンド側はフロントエンドのことに集中する。 そして、それぞれが連携し合って開発していくことが大切であると改めて感じる発表でした。 PHP の今とこれから2020 report by richardwagner カンファレンス冒頭を飾ったのは、 PHP がリリースされてからの25年間を俯瞰しつつ、最新のPHP8の新機能にも触れた廣川類さんの基調講演でした。 PHPの今とこれから2020 from Rui Hirokawa www.slideshare.net 前半パートは具体的な数値にふれながら、 PHP が果たしてきた性能向上と規模拡大の実例が紹介されました。 PHP4の時代からこの20年で、実に50倍の性能向上を実現 cファイルベースの総ステップ数は、Python3の40万行、Ruby2の80万行を、PHP8の120万行が大きく凌駕 後半パートではPHP8の変更/改善点と、新機能 JIT における性能向上がわかりやすくまとめられていました。 機械学習 やAIが PHP で書かれるようになる（かも）という将来は、私たちPHPerにとっても心躍る話でした。 PHP WEBアプリケーション設計入門――10年先を見据えて作る report by soachr speakerdeck.com 10年先でも使える設計についてどうあるべきか、という内容で濃い1時間のセッションでした。 冒頭に10年たったら フレームワーク ・技術が変わる というところについて実例を交えて説明されていました。 弊社も10年超えのサービスがありがたいことにいくつもあるのですが、同じように技術が変わって”レガシー”になっておりとても共感する箇所が多かったです。 「10年先を予見するのは難しいので、10年間の変化に対応しうる設計にしておく」というスタンスでお話が展開されており、 設計時に考慮する点としておっしゃっていた以下が開発言語に関わらない考えだと思い、今後の設計フェーズで意識したいと思います。 フレームワーク などの特定技術から一定の距離を保っていく 広く長く使われることを開発当時から意識する レガシープロジェクトで、 メタプログラミング を使ったPHPStan静的解析レベル上げ report by takaram speakerdeck.com 弁護士ドットコムさんで、静的解析ツールPHPStanを導入した際のお話でした。以前こちらのnoteを読み興味を持っていたため、楽しみにしていたセッションのひとつでした。 note.com すでに規模が大きくなっているプロジェクトに途中から静的解析を導入すると、既存コードで大量にエラーが出てその対応に時間が取られる、というような話も聞きます。 その点とても上手く対応されていて、導入時にはLevel 0という最も緩いチェックのみを行い、対象ファイルも無理に全ファイルを対象にはしなかったそうです。 スモールスタートで導入した後、徐々に対象ファイルの拡大・チェックレベル上げを行うために、 メタプログラミング を使って 機械的 にコードの修正を実施していったということでした。 私が担当しているプロダクトもPHPStanのような静的解析ツールは未導入で、プロジェクトの規模や技術負債の状況も今回のお話によく似ていると感じました。そのため、静的解析導入の成功事例を聞けたことはとても勇気づけられるものでした。 ちなみに、このセッションとは別にCIでの静的解析についてのセッションもあり、そちらもとても面白かったです。 speakerdeck.com 長期運用を目指す『Shadowverse』におけるリファクタ事例の紹介 〜テストの導入とメンバーへの普及法〜 report by YS https://fortee.jp/phpcon-2020/proposal/ab40d17d-37e7-42af-8a88-188a61c6745b スライドは後日、ブログにアップ予定とのこと Cygames Engineers' Blog tech.cygames.co.jp ソーシャルゲーム 「Shadowverse」を5年間アップデートしてきたことにより「コードの可読性低下」「コードの属人化」等の課題が発生し、 現状だと長期運用が厳しい状態になり安定した リファクタリング を進めるために テスト導入チームを立ち上げ、テストコード等を導入し改善を行ったという内容について語ってくださいました。 テストコード等の施策を取り入れた後、 リファクタリング を行ったことにより、 リファクタリング 後の不具合は、 デバッグ 時に1件のみ発生という素晴らしい成果を得たそうです。 メンバーへの普及方法は、「環境導入」「テスト作成」「自動テスト実行」各作業でのハードルを下げることが重要で、次の様な施策を上げてくださっておりました。 ・「環境導入」のハードル 　手順書やツールの充実 ・「テスト作成」のハードル 　テストコードのレビュー等による学習機会の提供 ・「自動テスト実行」のハードル 　CIツールによる自動テスト実行と結果の通知等 システムの改修を安定して進めるためには、こちらのセッションで上げてくださった取り組みは とても重要な物であると認識しているため、今後の開発で参考にさせていただきます。 徳丸皆伝を狙いませんか？徳丸実務試験とPHP8上級試験の解説 report by kuwa_38 ( track2 2:25ほどから) セッション概要： 吉政さんからPHP8上級試験と徳丸実務試験の概要説明、それから特典（ PHP マグ カップ と PHP 本、徳丸本）が紹介されました。 その後、徳丸さんから徳丸実務試験の例題3問とその解説が行われました。 例題の概要： 1問目：特定サイトから利用するウェブ API のテスト中にCORSのエラーがでた。どう解消すべきか（4択から1つ選択） 2問目：提示された PHP の スクリプト のうち発生する 脆弱性 を全て示せ （4択から複数回答） 3問目： XSS脆弱性 のある JSONP による API の PHP ソースコード が提示され、対策として不適切なものを1つ選択（4択から1つ選択） 視聴後の所感： 私の視聴した動機が「どんな問題が出題されるか」だったこともあり、特に例題とその解説はとても興味深かったです。また、図解や選択肢1つ1つの解説もありとても分かりやすかったと思います。 問題と解説自体は10分強なので、セキュリティに興味や関わりがある方は、ぜひ アーカイブ をご覧頂ければと思います。 PHP on Kubernetes report by Jazuma chatwork所属Kouta Ozakiさん(@k_kinzal)のセッションのレポートです。 ※このレポートで使用している画像は全てOzakiさんの発表資料 の引用です。また、資料の利用にあたってはご本人の許可を得ています。 speakerdeck.com セッション内容まとめ・感想 k8s で PHP は普通に動く PHP が他の技術と比べて特段 k8s との相性が悪いということはなく、正しく導入すれば特に問題なく稼働するようです。 k8s の学習コストは高い VM やServerlessと比較して k8s の学習コストは高いようです。そのため何のために k8s を導入するのか決めずに無計画に取り入れようとしても意味がなく、逆に 工数 をとられるだけの結果になります。他の技術と同様に k8s はあらゆる問題を立ちどころに解決する 銀の弾丸 ではないようですね。 PHP アプリケーションのコンテナ化 PHP アプリのコンテナ化にあたってはアプリの設定をどのようにコンテナに反映させるのかが問題になります。 開発環境としての k8s k8s の開発環境としてのパフォーマンスを Vagrant やdocker-composeと比較すると上記のようになるようです。 個人的には開発環境として使うのであればどれも大差はないように思いました。 k8s の学習コストをどのように支払うのか 私がOzakiさんに「chatworkさんでは k8s を使うにあたってスイッチングコストや学習コストをどのように賄ったのか」と質問したところ以下のようにお答えいただきました。 全社的に k8s の導入に前向きだった SREチーム3名が尽力した 開発チームも巻き込んで何とかした このことから k8s を導入するには次のような要素が重要だと思いました。 新技術導入に前向きな姿勢 コンテナや クラウド に精通したSREチーム 開発チームと運用チームとの連携・協力 特に開発と運用の協力についてはあらゆる企業・チームが重視すべき要素のように思います。 Webサービス をセキュアに保つために必要な視点 report by tsudachantan fortee.jp speakerdeck.com Webサービス をセキュアに保つための観点、具体的な思考法、攻撃事例、対策のための指針についての話でした。 セキュリティを学び始めたばかりの初心者にもわかりやすい内容でした。 セキュリティ初心者にもとてもわかりやすい。視点の話。 #phpcon #phpcon2020 #track3 — さりー@Webエンジニア (@Sally_42) December 12, 2020 セキュアな状態とは何か、それはユーザが安心安全だと感じる状態である。では安心安全な状態とは？逆に、安心安全でない状態とは何か？ と順を追って 言語化 されていてとてもわかりやすかったです。 ユーザだけでなく、開発現場のITエンジニアに置き換えても頷けるような汎用性のある内容でした。 30分で再認証させるのは安全性を高めるけど、 ユーザーの利便性をかなり下げる気がする。 #phpcon #phpcon2020 #track3 — Fumito Mizuno 📕 #のベルズ (@ounziw) December 12, 2020 具体例を示しての掘り下げも行われ、セキュリティとユーザの利便性との兼ね合いについても触れられていました。 ユーザフレンドリーと一口に言っても、ユーザにとって「セキュアで優しい」とユーザにとって「使いやすくて優しい」を両立させることの難しさを感じました。 個人的に、セキュリティ負債の解消としてユーザの リテラシー の平均を議論するという話が、今まで無かった視点だったので興味深かったです。 フレームワーク や攻撃事例も紹介され、濃い内容の1時間でした。当日のスライドも公開されているので、ぜひご覧ください。 Composer 2.0 って何？どう変わるの？読んでみました！ report by MasaKu speakerdeck.com v2 の新機能についてのお話と v1 からどのような部分が変わったのかというお話。 CakePHP のプロジェクト作成を v1 と v2 で比較して実演してくださったが、結果 v2 の場合、約半分以下の時間でプロジェクト作成が完了していたのが印象的でした。 また、メモリ使用量も劇的に削減されておりました。 メモリ削減の理由 v1 の場合は、composerの依存関係を解決する際に、packagist からパッケージの一覧を取得してメモリ上に配置する ファイルには ハッシュ値 を記録しておき、再度、composer を実行した場合は、 ハッシュ値 をもとに古くなっている場合は再取得するという流れになっている 一方、v2の場合はパッケージのリストを取得するという処理は行っていない packages, json に定義されたmetadata-url というフィールドから対象の メタデータ を取得する。 そのため、余計な処理が走らないようになっている。 この仕組みを lazy provider といって、先にリストをすべて読みこまなくても良くなったため高速化およびメモリの削減が実現できた模様。 その他にもissue や過去のリリース情報を見ると勉強になることがあるため、興味がある人はぜひ見たほうがよいとのことでした。 今まで当たり前に行っていたことを根本的に見直すことで、劇的に改善できることを体現した勇気づけられる発表だと思いました！ 今こそ理解する、 PHP の日時時計 report by nr_1228 speakerdeck.com 基本的な日付関数の説明を踏まえ、DateTimeクラスとDateTimeImmutableクラスの比較など、 PHP の日付計算はどうするのがベストなのかというお話でした。 日付を取り扱うにあたってのトラップなども紹介されており、 自分がハマったことのあるトラップに関しては画面の前で大きく頷いてしまいました。 日時計 算のコードは頻繁に書くわけではないので、忘れたころにやってくることが多いです。 故にまとめる時間をなかなか取れずにいたので、今回のセッションを聞くことで考える時間を纏って取ることができてとても良かったです。 日付に関して調べたことがあるという人はぜひ アーカイブ を視聴してみてください。 PHP8時代のWebアプリケーション フレームワーク の話をしよう report by Y-Kanoh HTTPリク エス トを入力とし、HTTPレスポンスを返す仕組みである、Webフレームワークの内部の作りに、PHP8の新機能がどう利用できるかを解説したセッションでした。 Constructor Property Promotion や、Attributes など、PHP8では フレームワーク の内部で活用できそうな機能が増えて、Webアプロケーションを考えるための下地がさらに整ったと言えますので、今後はこれらの機能を用いた フレームワーク が増えることでしょう。 また、最近ではデプロイ先の選択肢も増えているため、これらの新しく開発される フレームワーク には、これらの環境へのデプロイを簡易にしてくれる機能が期待されます。 近年のフロントエンドとバックエンドを切り離す動きから、 フレームワーク にはシステムのつなぎ目をうまく作る、 API ファーストな考え方が求められており、 API 仕様から仕組みを決めてしまう方法や、サーバサイドもJS/TSで書いてしまう方法、フロントエンドもバックエンドと同じ言語で書いてしまう方法など、 システム間をスムーズにつなぐための方法も紹介されていました。 speakerdeck.com PHP8の目玉機能の一つである Attributes は、 フレームワーク やライブラリの開発に向けた機能だと考えられるため、今後どのように活用され、我々が利用することになるのかは気になるところです。 また、Webを取り巻く環境の変化やトレンドも、今後どのように フレームワーク を変えていくのか、これから開発される フレームワーク に期待が持てる発表でした。 ウェブセキュリティのありがちな誤解を解説する report by richardwagner ウェブセキュリティに関してともすれば誤解されがちな10のポイントに関する、具体的な例が満載の非常に役に立つ基調講演でした。 ウェブセキュリティのありがちな誤解を解説する from Hiroshi Tokumaru www2.slideshare.net Cookie についての誤解はエンジニアならぜひとも押さえておきたい内容でしたが、 それに加えてクレジットカードをサイト保存せず都度入力することのリスクや、 Google 検索上位サイトへの盲目的信頼への警鐘など、 エンジニアに限らず一般の方々にもぜひ参考にしていただきたい内容が目白押しでした。 個人的にも、非エンジニアの家族や友人にも紹介しようと思ったスライドでした。 そして書籍でいつもお世話になっている徳丸浩さんの、落ち着いた大学講義のような語り口はとても聞きやすく、あっという間の1時間でした。 PHP で作るオンラインカンファレンス向け録画システム report by id:radiocat speakerdeck.com 今回の PHPカンファレンス はTrack1だけが ライブ配信 でそれ以外は録画配信となっていますが、この録画配信システムは PHP （CakePHP3）で構築されいるとのことです。もともとはiOSDC Japan 2020で構築した仕組みを今回も取り入れているようです。iOSDCでのエピソードは Podcast の PHP の現場でも話されていました。 php-genba.shin1x1.com 録画はZoomと Youtube Liveの API を使って全て自動化 動画編集は様々なツールやサービスを組み合わせて PHP のコードで腕力解決 「すごいシステムを作るのに必ずしもすごいことをする必要はない」と仰っていたのが印象的でした。 API の仕様をしっかり把握してそれを駆使する。それ以外は必要な環境＋ PHP の腕力で地道に実現する。いずれもエンジニアリングの本質だと再認識したセッションです。 PHPカンファレンス 大LT大会 report by id:radiocat 大LT大会では16名の登壇者が次々とライトニング トーク されました。ここでは弊社から登壇した2名のスライドをご紹介させてください。 静的解析ではじめる負債コード解消 speakerdeck.com PhpStormのInspectionを使って負債コードを特定する方法をご紹介しました。Inspectionを使いながら開発を進めることで、 プログラマ は自分が担当している開発の範囲で負債コードを検知して少しずつ技術的負債を減らしていくことができています。 レガシーシステム に自動テストを導入する第一歩 speakerdeck.com 10年以上前にサービス開始したレガシープロダクトに PHPUnit を使った テスト駆動開発 を導入した話です。従来から存在する機能を API 化するタイミングで、まず既存機能のテストを作成してから API 化することで仕様変更に強い テスト駆動開発 の効果を実感することができました。 おわりに PHPカンファレンス では PHP の基礎から最新技術の導入事例まで幅広いテーマが扱われていました。 皆さんも今回紹介したイベントレポートやセッションの内容をぜひご自身のお仕事に取り入れてみてはいかがでしょうか。 弊社はオンラインで勉強会を開催しています。 PHP がテーマの勉強会もありますのでぜひご参加ください。 rakus.connpass.com 直近で開催されたLaravel/PHP8/Dockerをテーマとした勉強会にはのべ200人近くの方にご参加いただきました。 rakus.connpass.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com