こんにちは技術広報の syoneshin です。 個人的にプログラミング基礎を楽しく継続して学ぶため いくつかのプログラミングゲームを利用しております。 最近は、さまざまな種類のプログラミングゲームがあり、プログラミングの基礎知識をゲームで学習できる環境は充実してきていると言えるのではないでしょうか。 そこで本記事は プログラミングを体験したい・学習したい 新しい プログラミング言語 を学びたい と考える未経験者や初学者の方向けに ゲームを通してプログラミング学習ができるサービスやアプリを厳選してご紹介します。 ※本記事での紹介内容は2021年8月27日時点の情報です。 スマホ・タブレットでプレイできるプログラミングゲームアプリ3選 Tynker(ティンカー) トライビットロジック Swift Playgrounds　　 ゲーム感覚でプログラミング学習できるアプリ4選 Progate Programming Hub Study-C プログラミング子供学習ドリル パソコンでプレイできるプログラミングゲーム8選 CodeCombat Scratch Hour of Code CodinGame コードクロニクル ロジックサマナー エンジニアが死滅シタ世界 推しと学べるプログラミング さいごに スマホ ・ タブレット でプレイできるプログラミングゲームアプリ3選 スマホ や タブレット で、好きな時間や場所でプログラミング学習したい方向けに、ゲームアプリを3つご紹介します。 Tynker(ティンカー) 引用元: https://www.tynker.com/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 Tynker Swift ビジュアルプログラミングやSwiftを使って、さまざまなゲームをクリアしていく、 アメリ カ発のプログラミング教育用プラットフォームです。サービスは英語のみですが、日本語化されているものもあります。 初心者向けのコースは、基本的にブロックタイプのビジュアルプログラミングで動かすものですが、同画面で JavaScript や Python に切り替えてコードを見ることもできます。 トライビットロジック 引用元: https://www.himacs.jp/sp/app/trybit_logic/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 トライビットロジック 論理演算 パズルゲーム形式で４つの論理演算「OR」「NOT」「AND」「XOR」を学べる学習アプリです。「バグ」を倒すゲームでマスコットキャラのビットロボが論理演算や遊び方を説明してくれます。 ※2018年12月にSwitch版「トライビットロジック」として配信されています。 Swift Playgrounds　　 引用元: https://www.apple.com/jp/swift/playgrounds/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 Swift Playgrounds Swift Apple 社が開発したゲーム型のプログラミング学習アプリです。ビジュアルプログラミングではなく、実際のコードを扱いながらドラッグ＆ドロップでプログラミングができるようにインターフェースが洗練されており、説明部分も日本語のため、小中学生でも楽しんでプログラミング学習できそうな仕様です。 ※Swift Playgrounds上でプログラミングしたコードでドローンやロボットを自在に動かすことも可能です。 ゲーム感覚でプログラミング学習できるアプリ4選 続いて、ドリル形式やクイズ形式などゲーム感覚でプログラミングが学習できるアプリを4つご紹介します。 Progate 引用元: https://prog-8.com/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 Progate HTML、 CSS 、 Javascript 、 Java 、 Python 、 Ruby 東大工学部の学生が在学中に開発したサービスとして話題になったProgateのアプリは、直感的な操作性とゲーム感覚でのスムーズな学習ができて、かわいいイラスト中心の説明で理解力を深めることができる学習アプリです。 習熟度チェックをドリル形式で行うため、ゲーム感覚でレッスンが進められておすすめです。 ※無料範囲は各言語の基礎レベルの18レッスン Programming Hub 引用元: https://programminghub.io/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 Programming Hub HTML、 CSS 、 Javascript 、C、 Java 、C ++、C＃、Swift、 Python 、 R言語 、AIなど ゲーム感覚の要素は一番少ない学習アプリですが、20以上の プログラミング言語 が学べ、またプログラミングのコードサンプルは5000以上あり、そのサンプルを参考にしながらプログラミング練習が可能です。演習問題はありませんが コンパイラ 機能があり、サンプルコードを自由に書き換えて実行結果をチェックすることも可能です。 基本的に無料で利用できるため、中学生程度の英語ができれば、とてもおすすめです。 Study-C https ://apps. apple .com/jp/app/study-c/id1454336400?ign-mpt= uo %3D4&at=10l8JW&ct=hatenablog apps.apple.com スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 Study-C C言語 C言語 の基礎について学ぶ，プログラミング学習サポートアプリです。 丁寧な説明とイラストで分かり易くなっております。 私が進めた範囲での問題はなかったのですが、ユーザーの中には、「問題についての解説がもっとほしい」「課金の反映がされていない」などのユーザーコメントや要望もありますので、ユーザーコメントにも留意した上でご利用下さい。 プログラミング子供学習ドリル プログラミング子供学習ドリル kazuya yoda 教育 無料 apps.apple.com スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有 プログラミング子供学習ドリル プログラミングで使う簡単な計算や論理演算の基礎など 簡単な計算式を解いたり数を数えたり、ドリル形式でプログラミングの基本的な考え方が身に付く、幼児や小学校低学年向けの学習アプリです。 パソコンでプレイできるプログラミングゲーム8選 パソコンでのプレイを推奨するゲームを8つご紹介します。 以下に紹介するサービスの中には、もはやゲームといえるクオリ ティー のものもあり、楽しんでプログラミング学習するにはおすすめのサービスです。 ※以降サービスは、公式サイトに詳細があるため紹介文は省略 CodeCombat 引用元: https://codecombat.com/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ CodeCombat 【言語】 Python 、 JavaScript 、 CoffeeScript 他【内容】構文・メソッド・パラメータ・文字列・ループ・変数などなど Scratch 引用元: https://scratch.mit.edu/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ有り※ WEBブラウザ 推奨 Scratch ビジュアル プログラミング言語 、論理的思考、モノづくり体験 Hour of Code 引用元: https://hourofcode.com/jp/learn スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 iOS アプリ対応ゲームも有り Hour of Code Python 、 JavaScript 、 C++ など※ゲームによる CodinGame 引用元: https://www.codingame.com/start スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ CodinGame C、 C# 、 C++ 、Go、 Java 、 Javascript 、Kotlin、 PHP 、 Python 、 Ruby 、Swift、TypeScriptなど　※英語対応のみ コードクロニクル 引用元: https://paiza.jp/codechronicle スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ コードクロニクル Python 、 PHP 、 Ruby 、 Java 、C、 C# ロジックサマナー 引用元: https://paiza.jp/logic_summoner スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ ロジックサマナー Swift、C、 C++ 、 C# 、 Objective-C 、 Java 、 Perl 、 Python (2.x系)、 Python (3.x系)、 Ruby 、 PHP 、 Scala 、Go、 Haskell 、 Erlang 、 Bash 、R、 JavaScript 、 CoffeeScript 、 Cobol 、 VB 、F#、 Clojure 、D計24言語 エンジニアが死滅シタ世界 引用元: https://paiza.jp/botchi/ スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ エンジニアが死滅シタ世界 Swift、C、 C++ 、 C# 、 Objective-C 、 Java 、 Perl 、 Python (2.x系)、 Python (3.x系)、 Ruby 、 PHP 、 Scala 、Go、 Haskell 、 Erlang 、 Bash 、R、 JavaScript 、 CoffeeScript 、 Cobol 、 VB 、F#、 Clojure 、D計24言語 推しと学べるプログラミング 引用元: https://paiza.jp/oshipro スマホ 対応 ゲーム アプリ/サービス名 学習できる開発言語/内容 WEBブラウザ のみ 推しと学べるプログラミング Python 、 PHP 、 Ruby 、 Java 、C、 C# 、 JavaScript 、 C++ 、Kotlin さいごに ご紹介の「プログラミング ゲーム -無料学習できるアプリ・サービス15選-」は、いかがだったでしょうか？ スマホ ブラウザで利用できるプログラミングゲームやアプリの場合、隙間時間を有効活用した学習ができ、スクールなどに比べて費用的にも安いため、プログラミングゲームでの学習は、未経験者や初学者にはとっつきやすく、とてもおすすめです。 ただしプログラミングゲームやアプリは、あくまでプログラミングを楽しんで学ぶためのきっかけの一つであって、プログラミングに関する深い知識や高度な技術を習得する事はできないという点はご注意下さい。 ※習得できる知識や技術はアプリ・サービスによります。 本ブログが、これからプログラミングを学びたい・学び直したいという方の一助になれば、幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに こんにちは、 MasaKu です。 ソースコード の修正によりこれまで保証していた動作が保証されず不具合になってしまうケースがあるかと思います。 こういった不具合を減らすためにも手動によるテストに加えて、テストコードによる繰り返しテストを実行できるようにしておくとも重要です。 PHP では PHPUnit という ユニットテスト ツールを利用することでテストコードを作成することができます。 今回は PHP で作成された さいころ プログラムを例にして PHPUnit のテストコードの書き方をご紹介いたします。 なお、弊社のエンジニアブログにて PHPUnit で利用する アサーション メソッドについて解説された記事がございますので、こちらもあわせてご確認いただけますと幸いです。 PHPUnitのアサーションメソッドを知ろう！ - RAKUS Developers Blog | ラクス エンジニアブログ はじめに PHPUnit の基本 テスト対象のプログラム さいころクラスの詳細 PHPUnit によるテストケース作成 さいころクラスのテストケース テストクラスの作成方法 テストメソッドの作成方法 テストケースの解説 setUpメソッド アサーションメソッド assertInstanceOf() assertTrue() assertCount() assertContains() アノテーション @depends テストコードの実行結果 おわりに 参考URL PHPUnit の基本 PHPUnit とは PHP コードで記述可能な ユニットテスト ツールです。 そのため、普段から PHP のコードを書く プログラマ にはとても親しみやすいと思います。 PHPUnit では テストコードを記述するテストクラスを作成 し、そのクラス内で 実施したいテストメソッドを追加 していくというのが大まかな流れです。 テストメソッドをどのように作成するかがテストコードを作成する上での重要なポイントかと思いますが、流れとしては以下になります。 アサーション によるテストケースの作成 アノテーション によるテストケースの依存性定義 単純なテストであれば、対象のプログラムのふるまいを確認したい アサーション を実行するテストメソッドを実装するだけで ユニットテスト が作成できます。 以下では PHP で作成された さいころ プログラムのテストコードを例にして PHPUnit によるテストコード作成の流れを解説したいと思います。 テスト対象のプログラム 今回作成した さいころ プログラムは以下のような構成になっています。 さいころ クラス ６面体である １から６までの出目を持っている 転がすことで出目が確定する 出目を確認することができる さいころ クラスの詳細 <?php // さいころクラス class Dice { protected array $ sided ; protected int $ number ; public function __construct (){ } public function setSided () : void { $ this -> sided = [ 1 , 2 , 3 , 4 , 5 , 6 ] ; } public function getSided () : array { return $ this -> sided; } public function roll () : void { $ this -> number = $ this -> sided [ array_rand ( $ this -> sided )] ; } public function getNumber () : int { return $ this -> number; } } PHPUnit によるテストケース作成 以下では上記のプログラムのテストコードを解説していきます。 なお、 PHPUnit のバージョンは 9.5.6 として記載していきます。 まずはざっくりとプログラムを確認していただければと思います。 さいころ クラスのテストケース <?php class DiceTest extends TestCase { protected Dice $ dice ; protected function setUp () : void { $ this -> dice = new Dice () ; } public function testInstanceOf () { $ this -> assertInstanceOf ( Dice :: class , $ this -> dice ) ; } public function testEmpty (){ $ this -> assertTrue ( empty ( $ this -> dice -> sided )) ; } public function testSided (){ $ this -> dice -> setSided () ; $ this -> assertCount ( 6 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 1 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 2 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 3 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 4 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 5 , $ this -> dice -> getSided ()) ; $ this -> assertContains ( 6 , $ this -> dice -> getSided ()) ; return $ this -> dice; } /** * @depends testSided */ public function testRoll ( $ dice ){ $ dice -> roll () ; $ this -> assertTrue ( 1 <= $ dice -> getNumber () && 6 >= $ dice -> getNumber ()) ; } } テストクラスの作成方法 まず、テストクラスを作成する方法について解説していきます。 PHPUnit でテストクラスを作成する際にはいくつかルールがあります。 こちら、 PHPUnit の公式を参照させていただきます。 Class という名前のクラスのテストは、 ClassTest という名前のクラスに記述する ClassTest は、(ほとんどの場合) PHPUnit\Framework\TestCase を継承する 今回のケースだと、 Dice という さいころ クラスがテスト対象であるため、テストクラスの名称は DiceTest という名前になります。 また、2番目のルールとして PHPUnit\Framework\TestCase を継承する、というものがあります。これは、 PHPUnit でのテスト実行時に必要となる各種メソッドをテストクラス内で利用するために親クラスであるTestCaseから継承したいためです。 (ほとんどの場合) という注意書きがありますが、 TestCase クラスを継承したテストクラスを継承してテストケースを作成したい、などのシーン以外では、基本的には TestCase を継承してテストクラスを作成する方法で問題ないと思います。 テストメソッドの作成方法 テストメソッドの作成についても PHPUnit の公式側でルールが決められています。 テストは、 test* という名前のパブリックメソッドとなります。 あるいは、 @test アノテーション をメソッドのコメント部で使用することで、それがテストメソッドであることを示すこともできます。 アノテーション を付けることも許可されていますが、個人的にはメソッド名の先頭に test を付けるルールに従う方針で良いのではないかと思います。 この後にも登場しますが、 アノテーション はテストコードの メタデータ を表す情報となるため、できる限りノイズになるものは少なくした方が良いのではないかと思います。 （全メソッドに @test という アノテーション を付けるのも無駄かと思います） テストケースの解説 それでは、テストコードについて解説していきます。 作成したテストコードは以下の通りです テスト実施前の準備 テスト対象がDiceクラスの インスタンス であるかの確認 さいころ の目が意図せず確定していないことの確認 さいころ の目が６面体であり１から６までの出目を持っていることの確認 さいころ を振れば１から６までのいずれかの出目がでることの確認 それぞれについて詳しく解説していきます setUpメソッド setUp() では、 PHPUnit にてテストコードを実行する際にはじめに実行されるメソッドです。 今回の例ではテスト対象となる Dice というクラスのオブジェクトを生成する処理を記載しました。 ここで生成されたオブジェクトを用いて以降のテストケースを実行していきます。 こちらについての詳しい内容は以下のページをご参照ください。 phpunit.readthedocs.io アサーション メソッド ここから実際にテスト対象のプログラムが、期待通りのふるまいで実装されているかを確認するためのテストコードについて解説していきます。 おさらいになりますが、今回のテスト対象となる Dice クラスは以下の通りです。 Diceクラスの特徴 ６面体である １から６までの出目を持っている 転がすことで出目が確定する 出目を確認することができる これらの特徴が必ず保証されていることを確認するためのテストケースを作成していきます。 assertInstanceOf() assertInstanceOf() は対象となるオブジェクトが指定されたクラスのオブジェクトかどうかを判定する アサーション メソッドです。 setUp() により Dice クラスのオブジェクトを生成しているため問題ないと思いますが、オブジェクトが期待通りのものになっていることを確認するようにします。 assertInstanceOf() の注意点なのですが、指定するオブジェクトのサブクラスのオブジェクトであってもテスト成功と判定されてしまいます。 つまり、 Dice クラスを継承した DummyDice クラスなどを作成し assertInstanceOf() を実行した場合、テスト成功となってしまうというわけです。 この動きは PHP の標準機能の instanceOf という型 演算子 と同様の動きですのでご注意ください。 www.php.net assertTrue() assertTrue() はTrueが返されることを確認する アサーション メソッドです。 Dice クラスは出目をセットするメソッド（setSideメソッド）を実行するまではどのような出目を持っているかが確定しない仕様になっていますので、 PHP の標準関数 empty() を実行することで、設定されているかを検証することができます。 ちなみに、配列が空であるかどうかをチェックするだけであれば assertEmpty() という アサーション メソッドも存在します。 しかし、 PHP 標準関数の empty() では変数が定義されているのか、というところまでチェックできます。 www.php.net 同じ アサーション メソッドでもテストコードの記述を工夫することで柔軟にテストケースが書けるのもいいですね。 <?php // 同じ意味のテストケース public function testEmpty (){ // 以下は成功になる $ emptyArray = [] ; $ this -> assertTrue ( empty ( $ emptyArray )) ; $ this -> assertEmpty ( $ emptyArray ) ; // 以下は assertEmpty が失敗になる $ this -> assertTrue ( empty ( $ notSetArray )) ; $ this -> assertEmpty ( $ notSetArray ) ; } 以下は上記のテスト実行結果です。 PHPUnit 9.5.6 by Sebastian Bergmann and contributors. E 1 / 1 (100%) Time: 00:00.010, Memory: 4.00 MB There was 1 error: 1) PhpUnitTest::testEmpty Undefined variable $notSetArray /home/masaku/study/phpunit/test/PhpUnitTest.php:15 ERRORS! Tests: 1, Assertions: 3, Errors: 1. assertCount() assertCount() は指定された配列の要 素数 が期待通りかどうかを確認する アサーション メソッドです。 こちらも assertSame() という アサーション メソッドを利用することで、同様のテストコードを記述することができます。 <?php // 同じ意味のテストケース public function testSided (){ $ this -> dice -> setSided () ; $ this -> assertCount ( 6 , $ this -> dice -> getSided ()) ; $ this -> assertSame ( 6 , count ( $ this -> dice -> sided ())) ; } assertSame() を利用しても同じ意味のテストコードが記述できますが、配列の要 素数 のテストに関しては assertCount() を利用した方が、テスト失敗時のエラーメッセージがより分かりやすくなる、というメリットがあります。 // asertCount() で失敗した場合のメッセージ 1) DiceTest::testSided Failed asserting that actual size 6 matches expected size 5. // assertSame() で失敗した場合のメッセージ 1) DiceTest::testSided Failed asserting that 6 is identical to 5. PHPUnit では アサーション メソッドが豊富ですので、狙い通りの アサーション メソッドが見つかる場合もあるかと思います。しかし、標準関数を併用することで期待するテストコードが記述できますので、あまり見かけない アサーション メソッドを利用してテストコードの可読性を下げてしまうよりは汎用的な アサーション メソッドから実行できるようにする、ということも一定メリットがあるかと思います。 assertContains() assertContains() は配列内に指定した値を持つ要素が含まれているかを確認する アサーション メソッドです。 少しわかりにくくなってしまいますが、こちらも PHP 標準関数の array_search を利用すれば assertSame() と組み合わせることで同様のテストケースが作成可能です。 <?php public function testSided (){ $ this -> dice -> setSided () ; $ this -> assertContains ( 1 , $ this -> dice -> getSided ()) ; $ this -> assertSame ( 0 , array_search ( 1 , $ this -> dice -> getSided ())) ; } このテストケースにより １～６ の数値を持っていることが確認できました。 アノテーション 最後に PHPUnit でのテストコード作成する際、より複雑なテストコードを作成する上で重要になる アノテーション について解説いたします。 アノテーション とはテストメソッドに対する メタデータ を表す構文のことで、PHPDoc などでも利用されています。 PHPUnit ではテストケースの依存性を表現したり、各テストの実行後に毎回実行して欲しい処理などを表現するために利用します。 @depends @depends という アノテーション はテストケースの依存性を表す アノテーション です。 <?php public function testSided (){ // 省略 return $ this -> dice; } /** * @depends testSided */ public function testRoll ( $ dice ){ $ dice -> roll () ; $ this -> assertTrue ( 1 <= $ dice -> getNumber () && 6 >= $ dice -> getNumber ()) ; } testRoll という さいころ を振った際の数値が１から６の間で出現するかどうかを確認するテストケースですが、こちらのテストケースの前提は １～６ の数値を持った６面体のさいころである ということが前提になっています。 そのため、上記観点のテストコードを通過できた Dice クラスのオブジェクトでテストを実施する必要があります。 （６の目しか出ない さいころ でもテストが合格になってしまうため） このような、その他のテストケースの実行後の戻り値を受け取ってテストを実施したい場合は アノテーション を以下のように記述します。 @depends + "テストメソッド名" このように記述することで、 アノテーション が付与されたテストメソッド側で依存している戻り値を引数として受け取ることができます。 これで期待通りのテストケースが実行できます。 テストコードの実行結果 それでは、上記テストを PHPUnit で実行した結果を確認したいと思います。 PHPUnit 9.5.6 by Sebastian Bergmann and contributors. .... 4 / 4 (100%) Time: 00:00.010, Memory: 4.00 MB OK (4 tests, 10 assertions) このように全部で４個のテストメソッド（１０個の アサーション ）がすべて成功になりました。 もし、テスト対象としている Dice クラスの出目が全て６の さいころ などに書き換わってしまった場合などは、 PHPUnit 側でエラーを検知することができます。 PHPUnit 9.5.6 by Sebastian Bergmann and contributors. ..FS 4 / 4 (100%) Time: 00:00.030, Memory: 4.00 MB There was 1 failure: 1) DiceTest::testSided Failed asserting that an array contains 1. /home/masaki/study/phpunit/test/DiceTest.php:30 FAILURES! Tests: 4, Assertions: 4, Failures: 1, Skipped: 1. 上記の通り、サイコロの出目に１が含まれていないことが確認できています。 おわりに いかがでしたでしょうか。 PHPUnit はテストコードそのものも PHP のコードで記述できるため、 PHP の開発をしている開発者であれば簡単にテストコードが記述できるかと思います。 テストコードが書きたいプログラム自体がテストコードが書きやすい構成になっているか、という課題はありますが、テストコードを書く習慣が無いという方でも導入のイメージが持てるようになっていれば幸いです。 このときはこういう動きをする ということがある程度固定化されるクラスやメソッドの場合はテストコードを記述しておくことで、コード修正時の不具合を未然に防ぐことができますので、積極的にテストコードを書いていきたいと思います。 参考URL PHPUnit マニュアル — PHPUnit latest Manual PHP: Hypertext Preprocessor PHPUnitのアサーションメソッドを知ろう！ - RAKUS Developers Blog | ラクス エンジニアブログ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 　はじめまして、 ラク スでインフラを担当しているftkenjです。 WEBページにアクセスしようとするとたまに発生する「 DNS エラー」について、よくある原因とその解決方法を紹介します。 はじめに 「DNS」について 「DNSエラー」について DNSエラーとなる主な原因 1.インターネットに繋がっていない 2.ネットワークの構成が共有接続になっている 3.一時的なアクセスの不具合 4.DNSサーバの不具合 5.WEBサイトの閉鎖 解決方法 1.ネットの接続状況の確認 * Windows10 * Mac 2.ネットワーク構成の変更 3.パブリックDNSの利用 4.サイト管理者の対応を待つ 最後に 参考サイト 「 DNS 」について 　 DNS (Domain Name System)とは、 IPアドレス と ドメイン を紐づけるサーバのことです。 具体的には、WEBサイトにアクセスするときの ドメイン 名と、WEBサーバやメールサーバにアクセスする番号となる IPアドレス を紐づける役割を担っています。 <補足> ・ IPアドレス 　 スマホ やPCなど、ネットワーク上の機器に割り当てられるインターネット上の住所のようなもの。 インターネットでのWEBページの閲覧、メールの送受信で相手を識別する番号となります。 IPアドレス には IPv4 と IPv6 がありますが、こちらの説明については割愛させていただきます。 ・ ドメイン 　こちらもインターネット上の住所のようなもの。 IPアドレス と紐づいており、数字のみの IPアドレス を人間が認識しやすくしたものです。 こちらについても詳しい説明は割愛させていただきます。 「 DNS エラー」について 　 DNS エラーとは、 IPアドレス と ドメイン 名の紐づけがうまくされていない状態を指します。 本来であれば、目的のサイトにアクセスするため ドメイン と IPアドレス が紐づいていることでブラウザからのリク エス トにWEBサーバがレスポンスを返しますが、紐づけがうまくできていない、紐づいていてもなんらかの問題で名前解決ができないと「 DNS エラー」となります。 DNS エラーとなる主な原因 1.インターネットに繋がっていない 　使用しているPCがインターネットに接続されていないと DNS と通信できないため、「 DNS エラー」が表示されWEBサイトへアクセスできません。 (そもそもインターネットに接続できていないのでサーバまで通信が到達できませんが...) 2.ネットワークの構成が共有接続になっている 　 Windows にて 無線LAN のアクセスポイントモードを共有接続していたり、 無線LAN で共有接続をしているときに DNS エラーが発生する場合があります。 どちらの場合も、ホストに設置情報を伝えるクライアントサーバ( DHCP サーバ)が自動で IPアドレス の割り当てに失敗していることがエラーの原因と考えられます。 3.一時的なアクセスの不具合 　 DNS にアクセスが集中していると、一時的にですが DNS エラーが発生する場合があります。 アクセスが集中した場合、応答しない相手先に対して一定時間すると切断する仕組みになっています。 少し時間を空け、再度アクセスしたら問題なくつながったという場合は、このケースが多いです。 一時的にアクセスが集中したことが原因なため、解消されればその後は問題なくインターネットを利用することができます。 4. DNS サーバの不具合 　 DNS サーバにて以下のような事象が発生した場合、名前解決ができないため DNS エラーとなります。 過剰なアクセス集中 サーバが DDoS攻撃 を受け高負荷 ハード故障等によるサーバダウン 　この場合、時間をおいても解消されない可能性が高いです。 解消するには、他の DNS を使用するように設定変更することが有効と考えられます。 5.WEBサイトの閉鎖 　アクセスしようとしているWEBサイトがすでに閉鎖してしまっている可能性も考えられます。 解決方法 1.ネットの接続状況の確認 　まずは使用しているPCがインターネットに接続されているかの確認です。 有線でつないでいる場合はLANポートに接続されているか、接続されていても"ネットワークと共有センター"にてインターネットに繋がっていないかを確認できます。 無線LAN を使用している場合は、無線ルータで問題が発生している可能性があるため一度電源を切って再起動するのがよいです。 　どちらも問題が解決できない場合は、ネットワーク診断などで トラブルシューティング しましょう。 * Windows10 スタートメニュー ⇒ ネットワークとインターネット ⇒ 「ネットワークの トラブルシューティング ツール」選択し実行 ツールが起動して自動実行されるため待ち ツールの画面右上に「完了」か「再診断」が表示されたら完了となります。 「再診断」となった場合は、対処方法を確認してください。 * Mac 　もし、 wi-fi に問題が検出されたら、メニューバーの wi-fi アイコンに「 wi-fi に関する勧告」が表示されます。 これに推奨される解決策が提示されますが、「ワイヤレス診断( macOS Sierra 以降のみ)」を使用すればさらに詳細な分析が可能です。 wi-fi に接続(Appを開いている場合はすべて終了してから) 「option」キーを押しながら、 wi-fi ステータスメニューの「ワイヤレス診断を開く」を選択 画面の案内に従い、管理者の名前のパスワードを入力 その後ワイヤレス環境の分析が開始 2.ネットワーク構成の変更 　PCのネットワーク設定から IPv6 プロトコル を無効にした状態で再起動を行い、ブラウザのプロパティにある優先 DNS サーバを「8.8.8.8」、代替 DNS サーバを「8.8.4.4」(どちらも Google Public DNS )に設定してエラーが解消されるか確認してください。 3.パブリック DNS の利用 　そもそもパブリック DNS とは、無料で安心して使用できる公共 DNS サーバとなります。プロバイダーの DNS よりも高速な通信速度を実現することも可能です。 パブリック DNS には以下があります。 ※括弧内は特徴 ・ Google DNS (安全性&速度) 　一般向けの DNS としては一番 知名度 が高く、利用者も多い。 DNS サーバの IPアドレス は「8.8.8.8」と「8.8.4.4」です。 GoogleDNSの特徴は「安全性の高さ」と「速度」で、それぞれ極端に性能が高いというわけではありませんが、運営が Google なので信頼性も高く初めてパブリック DNS を利用したい方にとってはおすすめです。 ・Cloudflare DNS (速度) 　レスポンス速度が優れているためゲームをするという方にはおすすめです。 DNS サーバの IPアドレス は「1.1.1.1」と「1.0.0.1」です。 Cloudflareの特徴は、上記の通りレスポンス速度の速さです。DNSperfの公表しているデータによればGoogleDNSのレスポンス速度が22.06ms、CloudflareDNSのレスポンス速度が14.77msとなっています。 ・quad9 (安全性) 　 DNS サーバの IPアドレス は「9.9.9.9」と「149.112.112.112」です。 quad9の特徴は、X-Force脅威インテリジェンスを利用した安全性の高さで、今回の３つの DNS 中でも一番の安全性が高いと思われます。ですが、変わりにレスポンス速度が遅いため、安全性重視の方におすすめとなります。 今回は安全性と速度のあるGoogleDNSの設定方法についてWindows10と Mac のそれぞれを紹介します。 ●Windows10設定方法 スタートボタン ⇒ 設定 ⇒ ネットワークとインターネット ネットワーク設定の変更から「アダプターのオプションを変更する」を選択 インターネット接続に使用しているアイコンを右クリックし、メニューから「プロパティ」を選択 プロパティ画面から「 インターネットプロトコル v4(TCP/IPv4)」を選択し、「プロパティ」を押す 「全般」タブの「次の DNS サーバーのアドレスを使う」にチェックを入れてそれぞれに以下を入力し「OK」を押します 優先 DNS サーバー 8.8.8.8 代替 DNS サーバー 8.8.4.4 ● Mac ( Macintosh )設定方法 Apple マークから「システム環境設定」を開き、「ネットワーク」アイコンを選択 「 Ethernet 」や「 wi-fi 」などの、インターネットの接続に使用している インターフェイス を選択し「詳細」ボタンを押す 「 DNS 」タブにある DNS サーバの欄に、プラスボタンをクリックして以下を入力して「OK」ボタンを押す 優先 DNS サーバー 8.8.8.8 代替 DNS サーバー 8.8.4.4 ※もしすでに IPアドレス が設定されている場合はマイナスボタンで削除 4.サイト管理者の対応を待つ 　WEBサイト自体の不具合の場合、サイト管理者が対応するまで待つしかありません。 またWEBサイトの乗っているサーバ側の不具合の可能性もあるため、すぐにアクセスできるようになるわけではない点はご注意ください。 最後に 　いかがでしたでしょうか。 現実的な話でいうと DNS エラーでよくあるのはアクセス集中やそれに伴う DNS サーバの高負荷/ダウンになるのでは、と思います。 とはいえ、すぐにそちらを疑うのではなく、まずはローカルPCの設定を確認してそれでも解消されないようであれば DNS サーバをパブリック DNS に切り替えてみるというのを試してみるのがよいのではないでしょうか。 また、今回は紹介していませんが IPv6 が現れ始めており、一部プロバイダーでは対応を始めているところもあります。 ですが、プロバイダーが対応していてもWEBサイトやメールを提供するサーバ側が IPv6 に対応していなければ通信自体成立しないため注意は必要です。 参考サイト DNSエラーが起こる原因と解決方法5つ｜パブリックDNSの設定方法 | テックマガジン from FEnetインフラ DNSエラー？DNSサーバーに問題がある？接続できないときの原因と解決方法｜ferret DNSサーバーの仕組、よく出るエラーの原因究明・解消方法をご紹介 - Digital Shift Times（デジタル シフト タイムズ） その変革に勇気と希望を エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

弊社で毎月開催し PHP エンジニアの間で好評いただいている PHP エンジニアのための勉強会『 PHP TechCafe』。2021年7月のイベントでは社外でご活躍されている PHP エンジニアにもご参加いただいて「PHPerの今とその先」について語り合いました。今回はその内容についてレポートします。 rakus.connpass.com PHPerの今とその先 PHPの基本知識 PHPの歴史 1990年代の黎明期 2000年代以降の機能強化 PHPエンジニアの人口／人気／キャリア 言語別の求人数ではPHPが1位 PHPバージョン PHP5がひとつの到達点 PHP7以降は言語機能が拡張され続ける IDE フレームワーク フロントエンドとPHP PHPの強み・弱み PHPは遅いのか？ コミュニティ PHP TechCafeについて PHPerの今とその先 以下のShowNoteをベースに、様々な切り口で PHP の情報をピックアップしながら PHP エンジニアの開発の現場のこれまでとこれからについてディスカッションしました。 hackmd.io PHP の基本知識 まずは PHP とはどんな言語なのかを改めておさらいしました。 PHP とは実行時に コンパイル される動的型付け言語で、WEB開発に適した言語です。 最も有名な CMS である WordPress が利用できたり、 Laravel 、 Symfony 、 CakePHP などの強力な フレームワーク が豊富で、学習コストが低く自由に開発できる、HTMLに直接書き込めるなどが PHP の主な特徴です。 PHP の基本知識 手軽に開発できてHTMLに直接書き込めるのは賛否両論あって、最近ではテンプレートエンジンを使うことも多いですが、 Smarty が出てきたあたりではテンプレートエンジンのテンプレートエンジンができてしまうなど複雑な面もあったという話題もありました。とはいえ、手軽に扱えて「何か書いたら動いた」と言えるのが PHP の特徴だよね、という話では多くの参加者が頷いていました。 同じように手軽さのある言語でも C# や Java などは中間ファイルを作らなければいけない一方、 PHP はオンタイムで コンパイル されるため環境構築を行うのが手軽という意見も話題になりました。「極端な話、デプロイされたファイルを直接手を加えて動かすことができる」、「それを堅牢性と言えるかどうかは価値観によるかもしれないですね」という話でした。 PHP の歴史 次に、公式サイトに掲載されている情報を参考に PHP の歴史を振り返りながら議論してみました。 www.php.net 1990年代の黎明期 PHPerにとって黎明期で特に熱い話題は、初期のパフォーマンス改善です。現在の PHP 言語の前世代である PHP /FIのパフォーマンス不足を感じたAndiとZeevは PHP の生みの親であるRasmusを巻き込んで PHP を書き直す議論がネット上で沸き起こりました。 この頃を知る参加者は、「当時流行していたホームページや 掲示 板作成サービスで無料で PHP が使えるようになった」、「この頃が PHP に触れた最初だった」、「この頃から PHP を使った個人サイトの台頭が始まった」と語りました。 2000年代以降の機能強化 2000年代からWebアプリを作るための基礎的な機能が揃ってきて PHP 5.0でZend Engin 2.0となり現在のベースとなっています。現在は PHP 8.0がリリース、8.1が開発中です。また、この間に最低限の環境として、XAMPPなどのこれがあれば動くよねというツール、オンラインツール、Dockerが揃ってきました。 ここでは、「今のPHPerは PHP の開発を始めるにあたってどんな環境を使うのだろう？」という議論が白熱しました。まずチャットからは「 MAMP 、XAMPPから入った」という回答がありました。「Dockerは Linux コマンドを覚えてからでないとハードルが高いかも？」という意見もありましたが、既にDockerを使っているという回答も多くありました。Dockerを使って PHP の開発を始めるPHPerも増えてきているようです。 PHP の開発環境の話題で盛り上がる 「 PHP が動作する環境の知識もしっかり抑えたいならXAMPP環境を作るところも学んだほうが良いのでは」という意見もありましたが、「環境のをことを気にすると雑念が入り、その雑念が環境を壊す」ので、「まず PHP のプログラミングを覚えることに集中するならDockerで環境を構築したほうが良い」、「ローコード・ノーコードの動きもあるので時代の流れだろう」といった意見があがりました。 PHP エンジニアの人口／人気／キャリア 全世界で使用されている WEBサービス のうち 79％がPHP製と言われています 。これは世にある WEBサービス の4割が WordPress であり、それが PHP のシェアを押し上げているようです。このため PHP の求人数も多く1位となっています。 PHP を採用しているサービスは海外では Facebook 、 Wikipedia 、Slackなど、国内では ぐるなび 、 GMO などがあります。 サーバーサイド言語のシェア　　出展： W3Techs から引用 言語別の求人数では PHP が1位 ここでは言語別の求人数の話題で盛り上がりました。 PHP が1位ということに対しては、参加したPHPerからも「意外だ」という感想があがりました。「 Java やGoなどが思ったほど多くない」、「日本で人気のある Ruby も思ったほど多くない」、「 Python は昨今の 機械学習 系の盛り上がりで求人が伸びてきているのだろう」といった意見が出ました。 言語別求人数の話題で盛り上がる このテーマだけでも話題は尽きない様子でしたが、「 PHP は ソーシャルゲーム のバックエンドなどでも使わている事例がある」、「裾野が広く、 PHP を抑えておけば10年20年は食いっぱぐれない」、「 PHP がわかるから WordPress がわかるわけではないので2つを抑えておいたほうが良い」という、PHPerのイベントらしいまとめでこの話題を締めくくりました。 PHP バージョン 次に PHP の各バージョンで強化されてきた機能をざっと追いかけてみました。 PHP /FI： Cookie 、DB連携 3.0：名称を「 PHP hypertext processor 」に変更 4.0：Zend Engine、WEBサーバサポート拡張HTTPセッション 5.0：Zend Engine 2、 XML などに対応 5.1：パフォーマンス改善、日付処理の書き換え 5.2：Zend Engine用のメモリマネージャー（このあたりからモダン化が進む） 5.5：finery、拡張によるオペコードキャッシング 6.0：開発中止（UTF16サポートしようとしてメモリ使用量が増えすぎて廃止） 7.0以降：Zend Engine 3、処理速度向上、末尾カンマを許容、classのプロパティで型宣言など型の定義が厳格化されていく PHP5がひとつの到達点 ある程度の規模のWebアプリを作る機能がPHP5あたりで揃いました。参加者からは「このあたりから PHP の開発案件が増えた」という意見が出ました。現在、古いバージョンの PHP のシステムを抱えて困っているケースは、聞くとだいたいPHP5系で、おそらくこの頃に量産されたシステムがバージョンアップできずに困っているのだろうとのことでした。 PHP7以降は言語機能が拡張され続ける PHP7以降になると、使ったことのない機能も多いという話題になりました。使ったことがない機能の代表例として「宇宙船 演算子 ってなんだっけ？」「たしかに使ったことない」という意見が出ました。 PHP /FIの頃は簡易なツールだったものが、Webアプリつくるために拡張され続けたのがPHP5の頃で、PHP7の頃になると「コミュニティの中でこういうのがあったら便利、他の言語のこういう機能が便利というものが追加されているのだろう」と語ってこのテーマを締めくくりました。 ※補足：宇宙 演算子 はPHP7で追加された <=> で2つの式の大小関係をチェックする比較 演算子 です。 www.php.net IDE IDE は VSCode 、 Atom 、PhpStormなどが紹介されました。このテーマも話題にするとキリがありませんが、時間の関係もあって今回は紹介のみでした。 フレームワーク フレームワーク については直近ではLaravel一強というのが参加者の総意でした。 PHP 言語の足りない機能も補ってくれており、当面はLaravelを選ぶことが多いであろうという印象です。参加者の中では Symfony を使っているPHPerがLaravelの次に多いようでした。 また、 Zend Framework については2019年でプロジェクトを終了し、現在は後継としてLaminasというプロジェクトが立ち上がっています。 PHP 言語を支えてきたZeevとAndiが立ち上げた Zend Framework の後継だけに、今後の動向に注目したいという意見がありました。 getlaminas.org フレームワーク についてもこのテーマだけで論争になるようなテーマなのでまた別の機会に取り上げましょうということになりました。 フロントエンドと PHP 一昔前ではサーバーサイドで処理を行い、ブラウザが表示するHTMLを出力するまでを PHP で実装し、 JavaScript は一部のUIにのみ使われるケースがほとんどでしたが、最近では PHP は API だけを処理し、UIなどはVue.js やReact.js を使用していることが増えています。LaravelにおいてもBladeをテンプレートエンジンとするだけでなく、BladeをベースとしたSPA（Single Page Application）を実現するLivewireや、Vue.jsやReact.js で実装するInertiaなどのライブラリが公式に実装されています。 laravel-livewire.com inertiajs.com ただし、今後は全部がSPAになるかというとそうではなく、SPAは開発コストが割高になりがちなので、素早くWebアプリを作るには従来型の開発も残り続けるだろうとのことでした。とはいえ、もともとはHTMLに直書きしていた PHP 言語が、フロントエンドとバックエンドを分離可能にし、サーバサイドが PHP のメイン領域になろうとしているのが PHP の現状であるというのが参加者からの意見でした。 PHP の強み・弱み これまで見てきたように、 PHP はバージョンアップを重ねるにしたがって動作が早くなり、他の言語に引けを取らずソフトウエア開発の現場で戦える言語になりました。また、手軽で扱いやすいというのも大きなメリットです。 PHP は遅いのか？ 「 PHP は遅い」という意見も根強くありますが、最近のバージョンでは他の言語に負けない速さになってきています。ここでは、そもそも開発の現場で何が遅いのか？、何に速さを求めるか？を考えるべきという議論で盛り上がりました。「設計時点で速さを意識した設計ができているのか？」、「そもそもWebに速さを求めるものなのか？速さが重要ならもっと別の技術もあるのでは？」、「I/Oなどが ボトルネック になることも多く、 PHP の速さを求めるよりも SQL をチューニングしたほうが遥かに効果がある」といった意見が出ました。 PHP の領域だけで速度の問題を捉えるのではなく扱うサービス全体で ボトルネック に目を向ければ PHP の処理速度が問題になるケースはあまり無いのではないかというのが参加したPHPerから出た意見でした。 コミュニティ 最後にPHPer向けのコミュニティについて取り上げました。 PHPカンファレンス PHPerKaigi PHPカンファレンス 北海道 ／ 仙台 ／ 関西 ／ 福岡 ／ 沖縄 Laravel JP Conference PHP TecCafe（毎月開催） このほか、 PHP Matsuri というコミュニティが過去に存在したという情報が参加者から共有されました。24時間夜通しで ハッカソン する硬派なイベントでしたが、2013年を最後に休止しているようです。 PHPカンファレンス のコミュニティの特徴として、どこかが取りまとめて各地方に巡業しているのではなく、各地それぞれに独立したコミュニティが立ち上がって運営しているということが話題に上がりました。全体でとりまとめていないため、各コミュニティが他のコミュニ ティー に呼びかけてイベントの日程などを調整しているようです。 PHP TechCafeについて 最後に、弊社の社員が運営している PHP TechCafeでは「エンジニア同士の学び・情報共有の場をつくり、エキスパートまでの自己成長を支援する」コミュニティを目指して毎月開催しています。興味を持たれましたら、以下のConnpassのページから次回のイベントにご参加ください。参加いただき、メール会員登録された方には過去の PHP TechCafeの動画も共有しており、今回の記事となったイベントも全編視聴いただけます。多くのPHPerの皆さんのご参加をお待ちしています。 rakus.connpass.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは。 株式会社 ラク スで先行技術検証をしたり、ビジネス部門向けに技術情報を提供する取り組みを行っている「技術推進課」という部署に所属している鈴木（ @moomooya ）です。 今回は最近プライベートで利用するようになったフロントエンド フレームワーク の Next.js について、使えるようになるまでに参考にした情報などをまとめようと思います。 Next.jsは ホスティングサービスを提供するVercel 社が開発しているReactベースのフロントエンド フレームワーク です。このNext.jsをプライベートプロジェクトのサイト構築に利用したケースを元に情報をまとめていきたいと思います。 この記事がこれからNext.jsを触りたいという方の参考になれば幸いです。 Next.jsを利用しようと思った背景 Next.jsを使うにあたって参考にした資料 ウェブサイト 書籍 和書 洋書 Next.jsで実現したいと思ったことと実現方法 ・Headless CMSから取得したコンテンツを表示 ・コンテンツを部品化し、複数ページで表示 → うまくいかなかったorz 他にNext.jsでできること Gatsby.jsとの比較 Next.jsを利用しようと思った背景 プライベートプロジェクトのWebサイトをGit + SSG 1 で構成していましたが、共同でプロジェクトを進めているメンバーには非エンジニアもいるため、更新ハードルが高くサイトの更新が属人化していました。旧来の Wordpress を使ったサイト構築であれば解決するとは思うものの、せっかくなのでHeadless CMS + SSG（静的ページ）の構成で再構築しようと考えました。 都合が良いことに該当のサイトは 固定ページ ブログ 入力フォーム を含む程度のシンプルな構成のサイトだったので新しいことを試すのにもってこいでした。 現状では以下のような構成です。 SSGには Hexo を利用 固定ページやレイアウトは pug で構築 ブログ部分は Markdown で記述 入力フォームは Google Apps Scriptで構築してiframeで埋め込み Netlifyで ホスティング Hexoはシンプルな用途にはnode.jsがあれば動作するためシンプルに使えて便利だったのですが 「『お知らせ』カテゴリのブログ記事を新着から5件トップページに表示したい」 といったことをしようと思うと簡単にはできずモヤモヤしていました。 なのでまずコンテンツ管理はHeadless CMS に切り出して、カテゴリや新着n件といった絞り込みはWeb API 経由に任せることにしました。 レイアウトエンジンというかSPAな部分の実装については、表示部品を コンポーネント として使い回しできるように実装できることを期待して、SSGとしても利用することができるNext.jsを組み合わせることにしました。 Next.jsを使うにあたって参考にした資料 ウェブサイト React.jsは公式ドキュメントが日本語訳されていますが、Next.js, Vercelについては公式のドキュメントは英語です。 React.js React.js公式日本語ドキュメント Next.js Next.js公式ドキュメント Next.js非公式日本語ドキュメント Next.js公式サンプル集 公式サンプル集を分類しているQiita記事 書籍 Reactの書籍は2015年頃にたくさん出版されていますが、Reactの推奨される記述作法が何度か変わっていることから古い書籍はお勧めしません。 また、Next.jsの書籍はほとんどありません。Next.jsについては公式サイトの チュートリアル や、豊富に用意された公式サンプルコードを読み解きながら試してみるのが良いと思います。 和書 Reactハンズオンラーニング 第2版 ハンズオンとあるものの後述の通りハンズオンではないです JavaScript の文法→Reactの概念→Reactでの書き方といった、教科書的な構成なので頭から読んでいくのは結構大変かも 洋書 Learning React: Modern Patterns for Developing React Apps 2nd edition 『Reactハンズオンラーニング第2版』の原著 見ての通り原題には「ハンズオン」とは入っていない React Cookbook 今月（2021年8月）発刊の新刊 目次を見る限りこちらの方がハンズオン感がありそう Next.jsで実現したいと思ったことと実現方法 Headless CMS から取得したコンテンツを表示 ブログだけではなく、固定ページの内容もHeadless CMS で管理 コンテンツを部品化し、複数ページで表示 ・Headless CMS から取得したコンテンツを表示 Headless CMS には国産Headless CMS サービスの microCMS 2 を採用しています。 ベースは create-next-app コマンドで生成しました。 まずはHeadless CMS からコンテンツを取得するライブラリを作ります。 // lib/posts.ts import axiosBase from 'axios' // Headless CMSへの基本接続設定 const axios = axiosBase.create ( { baseURL: 'https://hogehoge.microcms.io/api/v1/' , headers: { 'X-API-KEY' : '（APIキー）' , 'Content-Type' : 'application/json' , 'X-Requested-With' : 'XMLHttpRequest' } , responseType: 'json' } ) // 全ブログの取得（ブログ一覧画面で使用） export const getAllPosts = async () => { const res = await axios.get ( '/posts' ) return res.data.contents.map (( post: any ) => { return { id: post. id , title: post. title } } ) } // 全ブログスラッグ（コンテンツID）の取得（ブログ個別画面で使用） // ↑のgetAllPostsと統一できそうだけど、試行錯誤中 export const getAllPostIds = async () => { const res = await axios.get ( '/posts' ) return res.data.contents.map (( post: any ) => { return { params: { id: post. id } } } ) } // 個別ブログの取得（ブログ個別画面で使用） export const getPostData = async ( id: any ) => { const res = await axios.get ( '/posts/' + id ) return res.data } ブログ記事一覧を表示したいときは // pages/blogs.tsx import Link from 'next/link' import { getAllPosts } from '../lib/posts' const IndexContent: NextPage = ( { posts } ) => { return ( < div > < ul > { posts.map ( post => ( < li key = { post. id } > < Link href = { `/${post.id}` } > < a > { post. title } < /a > < / Link > < /li > )) } < /ul > < /div > ) } export const getStaticProps = async () => { const res = await getAllPosts () return { props: { posts: res } } } export default IndexContent といった感じでタイトルとコンテンツIDの取得と表示ができるので、ブログトップの表示はできそうです。関数 getStaticProps はビルド時にNext.jsが呼び出すので IndexContent に渡すパラメータを取得するために使っています（ 参考 ）。 Next.jsでは pages ディレクト リ以下のファイル名でルーティング処理が行われるため、 pages/blogs.tsx というファイルで実装すれば https://hogehoge.com/blogs というパスでアクセスできるようになります。 個別ページの表示については pages/[id].tsx （ [ や ] はそのままファイル名）というファイル名で実装すると、パスパラメータを取ることができます。ブログ記事一覧でスラッグをパスパラメータとして渡すようなリンクを生成したので、以下のような実装で個別ページを表示することができます。 // pages/[id].tsx import * as React from 'react' import { NextPage } from 'next' import Link from 'next/link' import styles from '../styles/Home.module.css' import { getAllPostIds , getPostData } from '../lib/posts' type Props = { post: object } const PostContent: NextPage < Props > = ( { post } ) => { return ( < div > < h1 > { post. title } < /h1 > < div dangerouslySetInnerHTML = {{ __html: `${post.content}` }} >< /div > < /div > ) } export const getStaticPaths = async () => { const paths = await getAllPostIds () return { paths , fallback: false } } export const getStaticProps = async ( { params } ) => { const post = await getPostData ( params. id ) // ここでパスパラメータを取得 return { props: { post } } } export default PostContent 基本的な構造はブログ記事一覧の取得と一緒です。関数 getStaticPaths は動的ルーティングされるファイルにおいてビルド時に取りうる全パスを取得するためにNext.jsから呼ばれます（ 参考 ）。つまりは https://hogehoge.com/[id] の [id] が取りうる値を確定するための関数です。 固定ページについても同様に実装できます。固定ページの場合は、パスパラメータで動的に制御してもいいですし、コンテンツのスラッグと一致させたくない場合はページごとにファイルを作ってスラッグを固定でリク エス トしてもいいと思います。 ・コンテンツを部品化し、複数ページで表示 → うまくいかなかったorz 冒頭で触れたように 「お知らせ」カテゴリの記事を取得 記事タイトルを5件表示 といった コンポーネント を作ろうと考えていたので、 コンポーネント 内でHTTPリク エス トを投げて表示するような仕組みにできれば実現できるかと思ったのですが、子 コンポーネント 内でビルド時にHTTPリク エス トを投げる手段が見つからず実現に至っていないです。 やるとしたら親となるPage コンポーネント （pages ディレクト リ以下の コンポーネント ）で、データを取得して子 コンポーネント に渡すことで別 コンポーネント にはできますが、データ取得を親に持たせるのが微妙……。 残念ながらやりたいことを実現する方法は見つかりませんでした 3 。どなたかやり方わかる方いたら教えてください。 他にNext.jsでできること 少し前だとNext.jsというと「 SSR 用の フレームワーク でしょ？」という印象が強かったですが、ここまでやってきたように現在ではSSG用途の機能が充実しています。 また開発元の Vercel は ホスティング サービスを提供しているのですが、Vercelで利用した場合にはISR: Incremental Static Rendering（インクリメンタル静的生成）というSSGした後に差分データの分だけインクリメンタルに動的生成するという挙動もできるようです。 レンダリング 以外にもページルーティングだけではなく、 API ルーティングにも対応しているため弊社内のBFF 4 の検証で フレームワーク としてNext.jsを採用したりといった使い方もしています。Next.jsの進化すごい。 Gatsby .jsとの比較 同じようなReactベースの フレームワーク として Gatsby.js があります。 Gatsby .jsは プラグイン システムであることと内部データをグラフ構造で扱うというところが特徴です。 Markdown からグラフ構造への変換なども プラグイン で行うのですが、以前 Markdown とAsciidocを共存させようとした時に変換後のグラフ構造の形式が統一されていなく、結局手動でフォーマットを合わせてマージして、ソートして……という手間が発生して苦労した記憶があります。おそらく Gatsby .jsの作法としては「 Markdown とAsciidocの両方に対応した変換 プラグイン を作る」というのが正しいと思うけど、それぞれの プラグイン が存在するのに再発明はしたくなかった……。 今回Next.jsではそこまで触ってはいませんが、 Markdown からの変換は直接HTMLに変換するのが一般的なようで手間としてはあまり変わらない印象です。 バックエンドが別途構築されていたり、今回のようなHeadless CMS から取得してレイアウトして表示するような用途だと、グラフ構造に変換したりというのはオーバースペック感があるのでNext.jsの方が使いやすい印象です。 Gatsby .jsはテンプレートに用意されている物をデザインだけ修正して使うような方法だと、裏側で画像の最適化なども特に工夫なくやってくれる 5 ので個人でブログ作ったりは Gatsby .jsの方が使いやすいと思います。 私としてはNext.jsの方がよく触れる分野で有用そうなので、今後の学習時間は Gatsby .jsよりもNext.jsに費やしたいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com Static Site Generator: Markdown などからツールを使って静的ページ（単純なHTML + JS + CSS の構成）を生成する仕組み。Gitへのpushをトリガーに再生成と公開サーバーへのデプロイを行うことでウェブサイト更新を行う。 ↩ 頻繁にシステムアップデートについてのメールが届くのですが、内容がエンジニア目線で好印象です。関係ないけど会社がご近所。 ↩ useState と useEffect を使って子 コンポーネント から取得することはできるのですが、これだとクライアントサイド レンダリング で動いてしまうためSSGが実現できず……。 ↩ Backends for Frontends. ↩ Next.jsでも画像最適化機能が実装されたらしいけどまだ使っていない。 ↩

はじめに 技術広報の yayawowo です。 いつも ラク スのエンジニアブログをお読みいただき、またエンジニアイベントへのご参加、ありがとうございます。 今回はイベント申込も200名以上となり、大変盛り上がったMeetup（8/4開催）の発表内容についてご紹介します。 rakus.connpass.com はじめに イベントテーマ概要 発表の紹介 ラクスの技術スタックを新陳代謝し開発を加速させる取り組み 若手育成と機能開発を両立する開発戦略〜新機能開発を若手チームに任せてみた〜 スクラム開発チームをLessでスケールさせた話 おわりに イベントテーマ概要 今回のテーマは、大規模な SaaS サービス開発と20年以上向き合っている ラク スの 『開発戦略』 と 『マネジメント』 です。技術の先行検証を行っている技術推進課と以下プロダクトの開発と運用の最前線で関わるメンバー達が登壇しました。 楽楽精算 楽楽明細 発表の紹介 それではここから各発表内容と資料を共有させていただきます！ ラク スの技術スタックを新陳 代謝 し開発を加速させる取り組み 株式会社 ラク スでは「日本を代表する SaaS 開発エンジニア集団となる」というビジョンを掲げ、 組織力 と技術力を強化しています。 しかし、技術力に関してはソフトウェア開発のトレンド技術へのキャッチアップが遅れ、後発の競合サービスに追い越されるのでは…という危機感がありました。 そこで2020年に技術推進課を立ち上げ、組織として技術トレンドを常にキャッチアップ、新技術を習得しサービスに導入を行う研究開発の取り組みを始めました。 今回、開発組織の技術スタックを新陳 代謝 、開発スピードを加速していく取り組みとして、以下内容を中心に技術推進課の岡本からご紹介しました。 GraphQL・Flutter・React Natvie・Ionic Framewrokの技術検証 サービスへの導入・提案を行った事例 speakerdeck.com 技術推進課の取り組みをまとめておりますので、是非こちらもご確認ください。 かみせん カテゴリーの記事一覧 - RAKUS Developers Blog | ラクス エンジニアブログ 若手育成と機能開発を両立する開発戦略〜新機能開発を若手チームに任せてみた〜 リリースから順調にビジネスとして成長を遂げてきた楽楽精算ですが、開発規模をスケールするために徐々に開発エンジニアが増えていきました。開発量とスピード、もちろん品質も求められる中、シニアエンジニアを中心とし、個人開発からチーム開発への転換に成功しました。 次は若手エンジニアの育成です。 「若手メンバーに新機能案件で実践経験を積んでもらいたい」 しかし、事業戦略・納期・品質・コストと足踏みする要素が多くありました。 楽楽精算の紀井からは、楽楽精算の新機能開発と若手育成を両立しつつ、若手チームがメジャーリリースの目玉機能の開発にチャレンジした事例を紹介させていただきました。 speakerdeck.com スクラム 開発チームをLessでスケールさせた話 楽楽明細開発チームでは、2年ほど前から スクラム 開発を取り入れています。サービスが成長するにつれて、機能要望が以前と比較にならないほど増えてきており開発チームをスケールアップさせることが急務となりました。 楽楽明細の三田から、 大規模 スクラム Large-Scale Scrum(LeSS) の手法を取り入れ、複数チームでの スクラム 開発を実践している事例 をお話させていただきました。 speakerdeck.com おわりに SaaS を支える開発戦略・マネジメントはいかがでしたでしょうか？ ラク スは、サービスの成長につれて開発規模も年々スケールアップしていますが、技術スタック強化や、若手育成、 スクラム 開発手法にも力をいれております。 今回はそんな当社の事例を踏まえた発表になりました。 当社エンジニア3名の発表が大規模 SaaS 開発に携わる方の一助となれば、幸いです。 ラク スのMeetupは、2021年度もまだまだ予定されておりますのでイベント公開までしばらくお待ちください！ また、今回の発表にもあった技術推進課が取り組んでいる 『技術推進プロジェクト』 の検証結果を勉強会形式で共有します！ 是非こちらへのご参加もお待ちしております。 rakus.connpass.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに こんにちは。楽楽精算開発チームのyk_itgです。 これまで6回の投稿で主に PostgreSQL についての記事を書いてきましたが、今回は PostgreSQL をはじめとする データベースを管理する DBMS や、 リレーショナルデータベースを管理する RDBMS についてまとめました。 初心者の方でも分かりやすい内容になっていると思いますので、ご参考いただけますと幸いです。 はじめに DBMSとは データベースって？ DBMSの分類と特徴 RDBMSとは RDBMSの特徴 柔軟な検索ができる 整合性を完全に保てる NoSQLとは NoSQLの特徴 処理が速い 拡張性が高い NoSQLの方がRDBMSより優れている？ RDBMSとDBMSについて まとめ 参考文献 ◆ 関連記事 ・ 【SQL入門】INSERT まとめ ・ 【SQL入門】UPDATE まとめ ・ 【SQL入門】DISTINCT 使い方 ・ SQLの基本【まとめ】 ・ 【RDBMS】PostgreSQLインストール・コマンド入門編 DBMS とは DBMS (DataBase Management System)はデータベース管理システムのことで、データベースの検索や整理を行う専門のソフトウェアです。 システムの開発者が自前でデータと記録や管理を実装しようとすると、整合性を考えたり、検索速度を考えたり、データを復元させたりなど考えることが多くかなり大変です。 DBMS を使えばそういったことは DBMS に任せて、自分が作っているソフトウェアはやりたいことに専念することができます。 データベースって？ データベースは整理して使いやすい形にしたデータの集合のことです。 データベースを使うと大量のデータを整理して保存することが可能で、必要なデータを素早く検索することができます。 DBMS の分類と特徴 DBMS には RDBMS とNoSQLといった大きく2つの分類があり、それぞれ特徴があります。 ここではそれぞれの得意なことや苦手なことを紹介していきたいと思います。 RDBMS とは RDBMS (Relational DataBase Management System)はリレーショナルデータベースを管理します。 DBMS の中で RDBMS (リレーショナルデータベース)が現在一番普及しています。 RDBMS (リレーショナルデータベース)は表のような関係モデルを扱い、データは行と列で構成されています(テーブルと呼びます)。例として以下の社員テーブルは「社員番号」や「社員名」等の列は項目を示しており、行はデータを表しています。 社員テーブル 社員番号 社員名 1 Aさん 2 Bさん RDBMS の特徴 柔軟な検索ができる RDBMS (リレーショナルデータベース)の一番大きな特徴として、リレーショナル(関係)の名前の通り複数の関係したデータをまとめて検索できることが挙げられます。 例えば、上記の社員テーブルに関係している「社員番号」と「電話番号」を持っている電話番号テーブルがあるとします。 RDBMS (リレーショナルデータベース)では SQL という専用の言語を使って、これらの関係するデータをまとめて一度に検索することができます。 例えば社員テーブルと電話番号テーブルを結合することで「社員名」とそれに紐づく「電話番号」をまとめて検索することができます。 電話番号テーブル 社員番号 電話番号 1 03… 1 090… 2 080… 社員テーブルと電話番号テーブルを結合したテーブル 社員番号 社員名 電話番号 1 Aさん 03… 1 Aさん 090… 2 Bさん 080… 結合以外にも、 SQL を使えば複雑な条件で検索することもできます。 例えば、社員番号が 1 、電話番号が 03 から始まるといった条件で検索することもできます。 社員番号が 1 、電話番号が 03 から始まるデータ 社員番号 社員名 電話番号 1 Aさん 03… まだまだ SQL でできることはたくさんありますが、このように RDBMS (リレーショナルデータベース)では SQL を使って、検索したいデータを柔軟に検索することが可能です。 SQL の使い方については当社の別ブログにまとめておりますので、是非ご参照ください。 ・ SQLの基本【まとめ】 整合性を完全に保てる RDBMS (リレーショナルデータベース)にはもう一つ特徴があり、 トランザクション という機能を使ってデータの整合性を完全に保つことができます。例えば、「名義」と「残高」を持つ以下の口座テーブルがあったとします。 口座テーブル 名義 残高 Aさん 100,000 Bさん 200,000 BさんからAさんに5万円の振込を行う場合を考えて以下の順番でデータを更新していくとします。 ①Bさんの残高から5万円減らす ②Aさんの残高に5万円増やす この順番で処理して①が成功した後に②が失敗してしまった場合、Bさんの残高のみが減ってしまい不整合な状態になってしまいます。 そこで トランザクション を使うと①と②の処理を一纏めすることで、一纏めにした処理が全て成功する、又は全て失敗すると整理できます。 上記の例だと②が失敗した場合に①の処理を ロールバック (戻す)ことで、不整合な状態になることを防ぎます。 NoSQLとは NoSQL(Not Only SQL )は非リレーショナルなデータベースを管理するシステムの大まかな分類です。 大まかな分類の中には例えば以下のようなデータモデルを扱う DBMS が含まれています。ざっくり言うと RDBMS (リレーショナルデータベース)のように関係モデルを扱わなければNoSQLになります。 キーバリュー型 カラム指向 ドキュメント指向 グラフ指向 NoSQLはその名前の通り SQL を使わないのですが、 SQL や関係モデルを使わないことで RDBMS (リレーショナルデータベース)の弱点を解消する特徴を持っています。 NoSQLの特徴 処理が速い RDBMS (リレーショナルデータベース)は柔軟な検索が可能ですが、それを実現するために検索速度が比較的遅いという弱点が挙げられます。 柔軟な検索に対応するために複雑な検索処理がとられているので、少ないデータであればそこまで遅くはならないのですが多くなってくると遅くなってしまいます。 そこで、NoSQLを使えばこの問題を解消することができます。 例えば、画像ファイルのようなファイル名と画像データのようなシンプルなデータを扱うシステムがあるとします。キーバリュー型 DBMS を使うと一致するキーのみの検索を行うため、シンプルな検索処理で高速な検索を行うことができます。 キーバリュー型 DBMS のデータモデルのイメージ キー バリュー ファイル名A ファイルデータA ファイル名B ファイルデータB 拡張性が高い RDBMS (リレーショナルデータベース)には、 データ形式 やサイズの変化に対応しづらいという弱点もあります。 RDBMS (リレーショナルデータベース)のテーブルは列に項目を定義して データ形式 を定めますが、あとから データ形式 を変更する場合には テーブルにあるすべてのデータに項目を追加する必要がある 関係する他のテーブルへの影響を考えたりする必要がある と、変更するのがかなり大変です。 この問題もNoSQLを使えば解消することができます。 例えば、ドキュメント指向 DBMS は RDBMS (リレーショナルデータベース)のテーブルのような決まったデータ構造は持たずにデータごとに別々の項目を持つため、項目を増やす場合でも他のデータへの影響を考えずに自由に追加することができます。以下の例ではメール2のデータでメール1にはなかった cc の項目を増やしています。 ドキュメント指向 DBMS のデータモデルのイメージ { " title ": " メール1 ", " from ": " Aさん ", " to ": " Bさん " } { " title ": " メール2 ", " from ": " Bさん ", " to ": " Aさん ", " cc ": " Cさん " } また、データのサイズが増えた場合にはサーバのデータ容量を増やす必要がありますが、サーバ単体のデータ容量を増やすよりも別のサーバを増やす方が簡単です。しかし、現在の RDBMS (リレーショナルデータベース)では基本的に複数のサーバがあってもデータを複製することしかできず、それぞれのサーバで別のデータを持つことができないため、サーバを増やしてデータ容量を増やすことが難しいです。 そこで、分散データベースという仕組みを持っているNoSQLでは複数のサーバにあるデータを一つのデータベースのデータとして扱えるようにすることができるため、サーバを増やすことでデータベースに保存可能なデータを簡単に増やすことができます。 NoSQLの方が RDBMS より優れている？ このようにNoSQLには RDBMS (リレーショナルデータベース)と比較して優れている点がありますが、すべての RDBMS (リレーショナルデータベース)がNoSQLに置き換わるかというと現実そんなことはないです。 それは、NoSQLにも RDBMS (リレーショナルデータベース)が得意としている柔軟な検索が苦手だったり、整合性を保つのが難しい弱点があるためです。 RDBMS (リレーショナルデータベース)とNoSQLにはそれぞれ得意なこと、苦手なことがあるので、用途によって使い分けたり、併用するのが現在の主流だと思います。 RDBMS と DBMS について まとめ データベースを管理する DBMS 、リレーショナルデータベースを管理するRDMBS、非リレーショナルデータベースを管理するNoSQLについてまとめてみましたがいかがでしたでしょうか。 どの DBMS も触ったことがない方は、まずはどれか一つを使ってみることをオススメします。 参考文献 DBMS（データベース管理システム）とは - 意味をわかりやすく - IT用語辞典 e-Words NoSQL - Wikipedia https://www.techcrowd.jp/nosql/documentdb/ 冒頭の画像について：Photo on iStock エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

こんにちは。 今回は前々から気になっていたNode.jsの後継Denoについて調べましたので、Node.jsと比較しながら紹介していきたいと思います。 Denoとは 環境 開発環境のセットアップ Deno CLIのセットアップ 各種IDEのセットアップ Denoの特徴 Node.jsとの違い TypeScriptにネイティブ対応 Promiseファースト モジュールシステム package.jsonとnpmの廃止 URLを利用したimport deps.ts import maps CommonJSからESModuleへ その他 deno cacheでモジュールをキャッシュする deno compileで実行可能バイナリを生成する Denoまとめ 感想 参考 Denoとは Node.jsの作者Ryan Dahlによって作られた、Rust製の新しい JavaScript /TypeScript実行環境です。 Node.jsと同じくV8エンジンを採用しています。 以下動画をみると"ディノ"と発音されるようです。 How to pronounce Deno (officially) - YouTube 環境 以下バージョンで動作確認を行なっています。 Deno: v1.12.0 deno_std: v0.101.0 開発環境のセットアップ Deno CLI のセットアップ 公式サイトの Getting Started をみながらDeno CLI をインストールします。 今回はHomebrew経由でインストールします。 $ brew install deno $ deno --version 各種 IDE のセットアップ Deno CLI のインストールが完了したら、以下公式ページを参考に各 IDE でのセットアップを行います。 https://deno.land/manual@v1.12.1/getting_started/setup_your_environment#editors-and-ides VSCode の場合には denoland.vscode-deno をインストールし、プロジェクトを開いた後、 Ctrl+Shift+P ( Mac であれば Cmd+P )より Deno: Initialize Workspace Configuration を実行し、 .vscode/settings.json を作成すれば補完などが効くようになります。 Denoの特徴 Deno公式に記載があります ので、1つ1つ見ていきましょう。 Secure by default. No file, network, or environment access (unless explicitly enabled). Denoのまず大きな特徴として、Node.jsとは異なり実行時に権限を細かく制御できる点が挙げられます。 デフォルトではfetch API を利用したネットワークアクセスすら行うことができません。 $ echo 'const res = await fetch("https://example.com");' > main.ts $ deno run main.ts error: Uncaught PermissionDenied: Requires net access to "example.com", run again with the --allow-net flag 実行時に明示的にネットワークアクセスを許可する必要があります。 $ deno run --allow-net=example.com main.ts Supports TypeScript out of the box. Node.jsではモジュールのインストールなどが必要でしたが、Denoは設定なしでTypeScriptを実行できます。 const add = ( a: number , b: number ) => { return a + b ; } ; console .info ( add ( 1 , 2 )); $ deno run main.ts 3 Ships a single executable ( deno ). 実行環境は単一のバイナリとして提供されるため、単純にdenoのバイナリをDLするだけでdenoを実行できます。 denoのバイナリは github.com/denoland/deno/releases からDLできます。 Has built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt). Linter( deno_lint )やFormatter( dprint ), テストランナー( Deno.test )といった、今や開発時には欠かせないツールが標準で準備されています。 それぞれ deno lint 、 deno fmt 、 deno test といったコマンドで実行することが可能です。 Has a set of reviewed (audited) standard modules that are guaranteed to work with Deno. Denoは deno_std という標準モジュール群を有しています。 deno_stdのREADMEにも記載がありますが、Go's standard libraryを大いに参考にしているようです。 2021年7月現在、deno_stdの最新は 0.102.0 であり、まだメジャーリリースされていません。変更が加わる可能性もあるため、バージョンを固定してimportすることが強く推奨されています(バージョンを固定したimportについては後述)。 Can bundle scripts into a single JavaScript file. エントリーポイントとなるファイルを指定して、単一のjsファイルにバンドルすることができます。 // add.ts export const add = ( a: number , b: number ) => { return a + b ; } ; // main.ts import { add } from "./add.ts" ; console .info ( add ( 1 , 2 )); $ deno bundle main.ts main.bundle.js // main.bundle.js const add = ( a , b )=> { return a + b ; } ; console .info ( add ( 1 , 2 )); Node.jsとの違い TypeScriptにネイティブ対応 Denoは以下のコマンド一発でTypeScriptを実行できます。 $ deno run main.ts Node.jsの場合TypeScriptの実行のために依存パッケージを追加しなければならないのに対し、DenoはDenoのバイナリさえあればTypeScriptファイルを実行可能なので、 さくっと スクリプト を書きたいときなどにも非常に便利だと思います。 Promiseファースト Denoが提供する非同期 API はPromiseを返しますので、callbackによりネストが深くなってしまう心配もありません。 しかしNode.jsの非同期 API でも徐々にPromiseを利用できるようになってきており( fs/promises など)、そこまで大きな差ではなくなってくるかもしれません。 モジュールシステム Node.jsとの一番大きな違いはこの点です。 package. json とnpmの廃止 Denoはnpm、node_modules、package. json を使用しません。 URLを利用したimport Node.jsのようにnode_modulesを使用する代わりに、URLを指定してモジュールをインポートします。 バージョンの違いによる意図しない変更を防ぐため、バージョンを指定してのimportが強く推奨されています。 // 常にstdの最新版からimport import { copy } from "https://deno.land/std/io/util.ts" ; // v0.101.0のstdからimport(recommended) import { copy } from "https://deno.land/std@0.101.0/io/util.ts" ; また、Node.jsのようなpackage. json での依存管理ではなく、 deps.ts と import maps で依存管理を行います。 deps.ts deps.tsで外部モジュールをimport、re-exportし、依存モジュールを管理する方式です。 // deps.ts export { copy , readAll , writeAll , } from "https://deno.land/std@0.101.0/io/util.ts" ; // main.ts import { copy , readAll , writeAll } from "./deps.ts" ; import maps import_map.json { " imports ": { " io/ ": " https://deno.land/std@0.101.0/io/ " } } // main.ts import { copy , readAll , writeAll } from "io/util.ts" ; 実行時には --import-map フラグで json を指定して実行します。 $ deno run --import-map=./import_map.json main.ts 上の通り、import mapsは実行時に1ファイルのみ指定できます。 CommonJSからESModuleへ DenoはNode.jsとは異なり require をサポートせず、 import export のみをサポートしています。 モジュールの名前解決のルールも異なるため、基本的にNode.jsの資産をそのまま使用することはできません。 その他 deno cache でモジュールをキャッシュする Node.jsは npm install を実行することでローカルにモジュールを保存しますが、Denoは初回実行時にローカルにモジュールをキャッシュします。 キャッシュの保存先は deno info で確認することができます。 $ deno cache main.ts $ deno info 依存モジュールのcacheの更新を行いたい場合には deno cache --reload main.ts で更新できます。 deno compile で実行可能バイナリを生成する 個人的に嬉しいのが、 deno compile main.ts で スクリプト を スタンドアロン の実行可能バイナリに コンパイル してくれる機能です。 Node.jsにもこのようなライブラリはありますが、Denoは標準機能として有しています。 以下のようなファイルを読み込んでコピーする スクリプト をシングルバイナリに コンパイル してみたいと思います。 { " imports ": { " io/ ": " https://deno.land/std@0.101.0/io/ " } } import { copy } from "io/util.ts" ; const fileName = Deno.args [ 0 ] ; const src = await Deno.open ( fileName ); const dst = await Deno.create ( ` ${ fileName } _copy` ); await copy ( src , dst ); コンパイル は deno compile コマンドで実施します。 fileのreadとwriteを行っているので --allow-read 、 --allow-write フラグが必要です。 $ deno compile --allow-read --allow-write --import- map=./import_map.json -o main main.ts $ ./main test.txt --target フラグを使用してク ロスコン パイルもできます。 シングルバイナリに コンパイル することでNode.jsと比べ スクリプト の配布も非常に楽になりありがたいですね。 Denoまとめ 感想 stdがまだstableでなかったり、Node.jsと比べるとやはりライブラリが少なかったりという点はありますが、 API の安定化が進み、Node.jsライブラリのDeno対応が進めばさらにDenoの勢いは増していくのではないかと思います。 まだまだNode.jsを代替するまでは遠いかと思いますが、今後も注目していきたいと思います。 参考 Deno - A secure runtime for JavaScript and TypeScript Denoとはなにか - 実際につかってみる - Qiita Effective Deno - Zenn File system | Node.js v16.6.1 Documentation 冒頭の画像について：Photo on iStock エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 前置き some every filter find findIndex map forEach reduce reduceRight さいごに 参考文献 はじめに こんにちは。UI開発課のmtaaaです。UI開発課のフロントエンドチームでは、定期的にメンバー間で勉強会や輪読会を行っております。 JavaScript のArray関数をテーマにした会で主導となって動く機会があったため、記録も兼ねて今回記事にしました。 Array関数は業務での利用機会も非常に多く、細かい部分を再確認できる良い機会になりました。それでは本題に入っていきます。 前置き 今回アロー関数を使用した記法が多く出てきますが、こちらは基本を理解している前提でサンプルコードを用意しています。 some 概要：配列内の要素が、条件に一致するか調べる。１つでも一致すればtrueを返す。 【使用例1】 const arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] console.log ( arr.some ( value => value > 0 )) // return true console.log ( arr.some ( value => value > 5 )) // return true // ※ 後述のeveryではfalse console.log ( arr.some ( value => value > 10 )) // return false 【使用例2】 // 配列内に男性がいるか判定 const members = { taro: "male" , ichiro: "male" , hanako: "female" } ; const hasMale = Object .keys ( members ) .some ( function ( key ) { return members [ key ] === "male" ; } ); console.log ( hasMale ); // return true every 概要：配列内のすべての要素が、条件に一致するか調べる。配列内のすべての要素に一致した場合はtrueを返す。 【使用例1】 const arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] console.log ( arr.every ( value => value > 0 )) // return true console.log ( arr.every ( value => value > 5 )) // return false // ※ 前述のsomeではtrue console.log ( arr.every ( value => value > 10 )) // return false 【使用例2】 // 配列内の要素が全て男性か判定 const members = { taro: "male" , ichiro: "male" , hanako: "female" } ; const isMale = Object .keys ( members ) .every ( function ( key ) { return members [ key ] === "male" ; } ); console.log ( isMale ); // return false filter 概要：ある配列に対して、指定した条件に一致する要素を抽出して新しい配列を生成する。 【使用例1】 const members = [ 'sato' , 'suzuki' , 'kobayashi' , 'yamamoto' ] ; // 名前の文字数が7より大きい要素を抽出 const result = members.filter (( name ) => name. length > 7 ) console.log ( result ) // Array['kobayashi', 'yamamoto'] // 名前の文字数が10より大きい要素を抽出 const result2 = members.filter (( name ) => name. length > 10 ) console.log ( result2 ) // Array[] 【使用例2】 // 東京に位置する観光地を抽出 const spots = [ { name: 'DisneyLand' , area: 'Chiba' } , { name: 'SkyTree' , area: 'Tokyo' } , { name: 'FujiHighland' , area: 'Yamanashi' } , { name: 'GhibliMuseum' , area: 'Tokyo' } ] const tokyo = spots.filter ( function ( spot ) { return spot.area === 'Tokyo' } ) console.log ( tokyo ) // Array[{ name: 'SkyTree', area: 'Tokyo'}, { name: 'GhibliMuseum', area: 'Tokyo'}] find 概要：指定した条件に一致した、配列内の最初の要素の値を返す。 【使用例1】 const array = [ 5 , 12 , 8 , 140 , 33 ] const found = array.find (( element ) => element > 10 ) console.log ( found ) // 12 // 140, 33も該当するが、一番最初の値である12が入る const found2 = array.find (( element ) => element > 200 ) console.log ( found2 ) // undefined 【使用例2】 // idが2の要素を探す const dataList = [ { id: 1 , name: "taro" } , { id: 2 , name: "ichiro" } , { id: 3 , name: "hanako" } ] const findId = 2 const findData = dataList.find (( data ) => data. id === findId ) console.log ( findData.name ) // ichiro findIndex 概要：指定された条件式で、配列内の最初の要素の位置を返す。条件を満たす要素がない場合は-1を返す。 【使用例1】 const array = [ 5 , 12 , 8 , 130 , 77 ] const isLargeNumber = ( element ) => element > 13 console.log ( array.findIndex ( isLargeNumber )) // 最初に条件に一致するのは130のため、その位置である3が返却される const isLargeNumber2 = ( element ) => element > 500 console.log ( array.findIndex ( isLargeNumber2 )) // 条件に一致する要素がないため、-1が返却される 【使用例2】 // 同じプロパティを持つオブジェクトの配列から、指定したオブジェクトを削除したい。 const templates = [ { "template" : "campaign" } , { "template" : "test" } , { "template" : "seminar" } ] const indexOfItem = templates.findIndex (( element ) => { return element.template === "test" } ) console.log ( indexOfItem ) // 1 console.log ( templates [ indexOfItem ] ) // { template: "test" } templates.splice ( indexOfItem , 1 ) console.log ( templates ) // [{ template: "campaign"}, {template: "seminar"}] map 概要：与えられた関数を全ての要素に対して呼び出し、その結果を要素とする配列を生成する。 【使用例1】 // 名前のリストに一律敬称をつける const names = [ '佐藤太郎' , '山田花子' , '鈴木次郎' ] const honorificNames = names.map (( name ) => { return name + `様` } ) console.log ( honorificNames ) // ["佐藤太郎様", "山田花子様", "鈴木次郎様"] 【使用例2】 // 年度が変わって給料を一律上げる interface employeeInfo { name: string salary: number } const info2020 = [ { name: '佐藤太郎' , salary: 100 } , { name: '山田花子' , salary: 150 } , { name: '鈴木次郎' , salary: 200 } ] const info2021 = info2020.map (( info ) => { return { name: info.name , salary: Number ( info.salary* 2 ) }} ) console.log ( info2021 ) /* [{ name: "佐藤太郎", salary: 200 }, { name: "山田花子", salary: 300 }, { name: "鈴木次郎", salary: 400 }] */ forEach 概要：与えられた関数を全ての要素に対して呼び出す(返り値なし)。通常のfor文に近い感覚で扱える。 【使用例】 // 配列内の要素全てをコンソールに書き出す const arr = [ "taro" , "ichiro" , "hanako" ] arr.forEach ( value => { console.log ( value ) } ) /* "taro" "ichiro" "hanako" */ reduce 概要：配列内の要素に与えられた関数を適用して蓄積し、1つの値を返す。 【使用例1】 // 配列内の要素の合計を算出する const arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] const sum = arr.reduce (( total , element ) => total + element ) console.log ( sum ) // 45 【使用例2】 // 配列内の最大値を返す const arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] const result = arr.reduce ( function ( provisional , element ) { if( provisional > element ) { return provisional ; } else { return element ; } } ); console.log ( result ); // 9 reduceRight 概要：配列内の要素に与えられた関数を一番後ろの要素から順に適用して蓄積し、1つの値を返す。 【使用例】 // 配列内の要素を逆から順に並び替える const arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] const reversedArr = arr.reduceRight (( p , c ) => [ ...p , c ] , [] ) console.log ( reversedArr ) // [9, 8, 7, 6, 5, 4, 3, 2, 1] さいごに JavaScript のArray関数は工夫すれば他の関数と同じような処理をできるケースが多いですが、用途によって使い分けを行うことでコード量を減らせて可読性も上がるため、一フロントエンドエンジニアとして抑えておきたい領域だと改めて感じました。 今回紹介しきれなかった関数もあるため、興味が出た方は調べていただければと思います。 ここまで読んでいただきありがとうございました。 参考文献 MDN Web Docs JavaScript Primer JavaScriptでforEach, filter, map, reduceとか 【javascript】reduce reduceの使い方メモ（主に集計目的） 【JavaScript】文字列を反転する方法いろいろ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

初めに 皆さんこんにちは。mosyoryです。 今回は Python のopenpyxlを使用して Excel の簡単な操作方法をご紹介します。 Python のコードを例として記載してますが、詳細な解説は行っていないので予めご了承ください。 初めに openpyxlとは openpyxlのインストール Excelファイルの準備 基本操作 Excelファイル(ワークブック)の 読み込み / 保存 読み込み 保存 ファイルを閉じる シートの操作 シートの取得 シートの作成 シートの削除 セルの操作 セルの取得 セルの値の取得 セルの値の書き込み / 削除 結合したセルの場合 グラフの作成 終わりに 参考サイト 　 openpyxlとは openpyxlとは Excel ファイルを読み書きするための Python ライブラリです。 これは Python からOffice Open XML フォーマットをネイティブに読み書きするために作られました。 openpyxl.readthedocs.io openpyxlのインストール openpyxlのインストールは簡単です。 1 ) コマンドプロンプトを起動 2 ) 「pip install openpyxl」を入力してエンター 3 ) インストール完了！ 本記事ではopenpyxlのバージョンは3.0.7を使用して進めます。 バージョンを確認したい場合は コマンドプロンプト から「pip list」を実行してください。 > pip list Package Version ----------------- -------- openpyxl 3.0.7 ※pipは Python のパッケージ管理ツールです。Python3.4以上なら標準で付属していますので別途インストールする必要はありません。 Python は既にインストールされている前提で進めますので、まだの方は Python 公式サイトからPython3.xのバージョンをインストールしてください。本記事ではPython3.9を使用します。 www.python.org Python のバージョンを確認したい方は コマンドプロンプト から「 python -V」を実行してください。 > python -V Python 3.9.1 Excel ファイルの準備 冒頭でも記載しましたがopenpyxlは Python で Excel ファイルを操作するライブラリです。 なので実際に Excel ファイルを用意し、そのファイルを使いながらopenpyxlの使い方を覚えていきましょう。 今回は以下の内容の Excel ファイルを使いながらopenyxlの操作方法を紹介します。 ・ Excel のファイル名：openpyxl_training.xlsx ・シートの名前：Sheet1 基本操作 openpyxlで Excel を操作するには最初に3つのステップが必要です。 1）Excelファイル(ワークブック)の指定 2）ワークシートの指定 3）セルの指定 どの Excel ファイルの、どのシートの、どのセルに対して操作を行うのかを指定しないと Python はどの Excel ファイルに処理を行えば良いかかわからなくなってしまいます。まずはこの3つについて紹介してきます。 Excel ファイル(ワークブック)の 読み込み / 保存 最初に Excel ファイルの読み込み、保存方法を紹介します。 この操作ができないとファイルの編集が出来なかったり、加えた変更が反映されなかったりするので覚えておきましょう。 まずは Python のプログラム内でopenpyxlが使えるようにインポートします。 import openpyxl 読み込み Excel ファイルを読み込みにはload_workbook()を使用します。 引数のファイルパスは 相対パス または 絶対パス で指定してください。 wb = openpyxl.load_workbook( "openpyxl_training.xlsx" ) 保存 保存はsave()を使用します。この時に読み込んだ Excel ファイルと同じ名前を指定すれば上書き保存、 別名を指定すれば新規での保存となります。保存しないと加えた変更がすべて消えてしまうので注意してください。 wb = openpyxl.load_workbook( "openpyxl_training.xlsx" ) wb.save( "openpyxl_training.xlsx" ) 　　　　 #上書き保存 wb.save( "Python.xlsx" )　　　　　　　　　　 #別名保存 ファイルを閉じる 開いたファイルはclose()で閉じましょう。この時ファイル名の指定は不要です。 wb.close() シートの操作 Excel ファイルは1つ以上のシートで構成されています。そのため操作を行いたいシートを取得する必要があります。 シートの取得 シートの取得方法は3つあります。1つ目はシート名を指定して取得する方法です。本記事の場合はSheet1ですね。2つ目はシートのインデックスで指定する方法です。インデックスは左のシートから順番に振られます。数字は0から始まるので注意してください。3つ目はアクティブなシートを取得する方法です。 Excel ファイルは開いた時点で1つのシートが選択された状態になっています。その選択された状態のシートを「アクティブなシート」と言います。 # 下の3つはどれもSheet1を取得している ws = wb[ "Sheet1" ] ws2 = wb.worksheets[ 0 ] ws3 = wb.active シートの作成 新しくシートはcreate_sheet()で作ります。引数のtitleに与えた値がシートの名前になります。 下の例では「 Python 」というシートが新たに作成されます。 ws4 = wb.create_sheet(title= "Python" ) シートの削除 逆にシートを削除したい場合はremove()です。例は先ほど作成した「 Python 」というシートを削除しています。 wb.remove(ws4) セルの操作 セルの取得 セルの取得には3つの方法があります。 1つ目：セルの場所を文字列で指定する方法 2つ目：引数に数字を渡し列と行を指定する方法 3つ目：2つ目の書き方から引数名を省略した書き方 行と列の番号は1から始まるため数字で指定する場合は注意してください。 # どれもセルB4を取得している cell1 = ws[ "B4" ] cell2 = ws.cell(row= 4 , column= 2 )　　 # rowが行, columnが列 cell3 = ws.cell( 4 , 2 ) セルの値の取得 上で紹介した方法はセルのオブジェクトを取得するだけであり、そのセルの値は取得してくれません。 そのため、セルのオブジェクトが持つ value から取得します。空白のセルの値はNoneになります。 # どれもセルB4の値を取得している val1 = ws[ "B4" ].value val2 = ws.cell(row= 4 , column= 2 ).value val3 = ws.cell( 4 , 2 ).value val4 = cell1.value セルの値の書き込み / 削除 値を書き込む場合も value を使用します。 このときNoneを与えるとセルの値を削除することができます。 # セルB11にPythonと書き込む ws[ "B11" ] = "Python" ws.cell(row= 11 , column= 2 , value= "Python" ) # セルB11の値を削除する ws[ "B11" ] = "None" ws.cell(row= 11 , column= 2 , value= "None" ) 結合したセルの場合 結合したセルに対して値の取得などを行いたい場合は結合したセルの中で1番左上のセルを指定してください。 print (ws.cell(row= 1 , column= 1 ).value) # セルA1を指定してるので「PythonでExcelを操作する練習用データ」と出力 print (ws.cell(row= 2 , column= 1 ).value) # セルA2を指定してるので「None」と出力 グラフの作成 最後に棒グラフを作成してみましょう。まずはグラフを作成した Python コードと作成したグラフをお見せします。 ※ Excel ファイル(ワークブック)の読み込みなどは省略しています。 chart = openpyxl.chart.BarChart() chart.title = "openpyxlで作成したグラフ" chart.height = 7.5 chart.width = 15 chart.y_axis.scaling.min = 0 chart.y_axis.scaling.max = 600 chart.y_axis.majorUnit = 50 chart.y_axis.title = "Y 軸ラベル" chart.x_axis.title = "X 軸ラベル" data = openpyxl.chart.Reference(ws, min_col= 3 , min_row= 4 , max_col= 4 , max_row= 9 ) chart.add_data(data, titles_from_data= True ) categories = openpyxl.chart.Reference(ws, min_col= 2 , min_row= 5 , max_col= 2 , max_row= 9 ) chart.set_categories(categories) ws.add_chart(chart, "F4" ) それでは各行が何をしているのか上から順に見ていきましょう。 最初の行は棒グラフ用のオブジェクトを作成してます。このオブジェクトに対し設定を行っていきます。 chart = openpyxl.chart.BarChart() 2~4行目はグラフエリアの設定を行っています。上からタイトルとグラフエリアの高さ、幅を設定しています。 これらは省略可能であり記述する順番に指定はありません。 Python コード上で指定しなかった場合は Excel の標準設定の値が使用されます。 chart.title = "openpyxlで作成したグラフ" # グラフのタイトル chart.height = 7.5 # 高さ chart.width = 15 # 幅 5~9行目は軸の設定です。軸の設定ではy_axis, x_axisに値を入れていきます。 上から順にY軸の最小値 / 最大値、目盛の間隔、X / Y軸のラベルを設定しています。 これらもグラフエリアの設定と同様に省略した場合は Excel の標準設定が適応されます。 chart.y_axis.scaling.min = 0 # Y軸の最小値 chart.y_axis.scaling.max = 600 # Y軸の最大値 chart.y_axis.majorUnit = 50 # 目盛の間隔 chart.y_axis.title = "Y 軸ラベル" # Y軸のラベル名 chart.x_axis.title = "X 軸ラベル" # X軸のラベル名 10~11行目でグラフとなるデータ範囲を設定しています。Referenceに与えている引数がセルの範囲となっています。 今回の例ではセルC4(3列目の4行目)からD9(4列目の9行目)までをデータ範囲としています。 それをadd_dataでグラフオブジェクトに渡すことでグラフになります。同時にtitles_from_data=Trueと指定しています。 これは設定したデータ範囲の先頭行をグラフの系列名として使用するということです。例での先頭行はセルC4とD4、つまり「データ1」と「データ2」が系列名として使用されます。この2行はグラフを作るうえで必須なので省略できません。 data = openpyxl.chart.Reference(ws, min_col= 3 , min_row= 4 , max_col= 4 , max_row= 9 ) chart.add_data(data, titles_from_data= True ) 12~13行目は横軸の項目名となるデータ範囲を設定しています。範囲を指定する方法はグラフのデータ範囲の指定を同じ記述になります。この例ではセルB5(2列目の5行目)からB9(2列目の9行目)を横軸に指定しています。 これをset_categoriesでグラフオブジェクトに渡すことで横軸ができます。この2行を省略した場合は1、2と番号が横軸に設定されます。 categories = openpyxl.chart.Reference(ws, min_col= 2 , min_row= 5 , max_col= 2 , max_row= 9 ) chart.set_categories(categories) 14行目はグラフをセルF4に配置しています。13行目まではグラフを作成している段階であり Excel ファイルに変化は起きていない状態です。そのためこの処理を省略すると Excel ファイルを開いてもせっかく Python で作成したグラフがない状態になります。 忘れず記述するようにしましょう。 ws.add_chart(chart, "F4" ) 終わりに Python のopenpyxlを使って Excel の操作方法を紹介しました。今回は棒グラフを作り、設定を少し変える程度でしたが折れ線などのグラフも作れます。またフォントやセルの色、SUMなどの Excel 関数といったよく使う操作も Python のopenpyxlで実行できるので興味のある方は試してみてください。 参考サイト OpenPyXL入門！使い方や基礎メソッドを7の事例で紹介(初心者向け) openpyxl による Excelファイル操作方法のまとめ - ガンマソフト Excelを自動化できる！Pythonのモジュール「OpenPyXL」で効率化してみた | AIZINE（エーアイジン） 【Excel x Python】 openpyxlを使って面倒なExcelのグラフ作成作業を自動化する | 似非プログラマの備忘録 冒頭の画像ロゴは、商標使用ポリシーに基づき以下サイトのものを利用しております。 https://www.python.org/community/logos/ 　 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

こんにちは、インフラエンジニアのfro-rivです。 業務や趣味で多くのサーバに SSH 接続する機会がある方は、サーバごとにパスワードを入力するのが面倒ですよね。 また、セキュリティ面の問題で SSH 接続時にパスワードログインを禁止しており 公開鍵を登録する場面があったりと何かと公開鍵認証設定をする機会は多いのではないでしょうか。 今回は、公開鍵認証の設定方法だけでなく、 鍵認証設定時によく見かけるエラーについてもまとめましたので、よろしければご覧ください。 公開鍵認証とは 公開鍵認証設定で何が楽になるのか 公開鍵認証設定をしてみよう 使用するサーバ 公開鍵・秘密鍵ペアの作成 よく使うオプション クライアントでの設定 公開鍵の配置 動作確認 よくあるエラー 鍵ファイルのパーミッション(秘密鍵) authorized_keysファイルのパーミッション ~/.ssh/ディレクトリのパーミッション 最後に 参考文献 公開鍵認証とは SSH 接続や ssh を使用した rsync , scpコマンドを使う際に 公開鍵・ 秘密鍵 のペアを使って 接続元のサーバが安全なものかを担保する認証方法 です。 ここでは難しい説明は省略しますが、「鍵」を持っていないと認証が成り立たないため、 パスワードログインよりも比較的安全な認証方法として知られています。 公開鍵認証設定で何が楽になるのか SSH 接続を行う際、公開鍵認証をすることでパスワード入力を行うことなく SSH 接続ができます。 (公開鍵・ 秘密鍵 を作成する際に パスフレーズ を設定しないことが前提ですが...) 公開鍵認証と合わせて、 ~/.ssh/config ファイルにサーバ情報を記載することで、更に便利になります。 ~/.ssh/config ファイルについては過去に記事にしていますので興味がある方はご覧ください。 過去記事： ~/.ssh/configを使ってSSH接続を楽にする 公開鍵認証設定をしてみよう 使用するサーバ 今回、検証で使用するサーバの情報です。( CentOS を使用しています) SSH 接続を行うクライアント: client.local SSH 接続先として使うサーバ: server.local 公開鍵・ 秘密鍵 ペアの作成 公開鍵・ 秘密鍵 ペアの作成は ssh-keygen コマンドを使用します。 よく使うオプション オプション 説明 -t 暗号化形式 rsa , dsa, ecdsa, ed25519 (デフォルト: rsa ) -b ビット長 rsa の場合、4096bitくらいあった方が良い ( rsa のデフォルト: 2048bit) ​ -f 秘密鍵 ・公開鍵の場所を指定 ※ 秘密鍵 パスの指定で、同階層に公開鍵も作成される (デフォルト: ~/. ssh /配下) -N パスフレーズ を指定 ​ クライアントでの設定 ssh-keygen コマンドを実行し、ファイルパスや パスフレーズ を対話形式で指定します。 ファイルパスの指定や、 パスフレーズ が必要ない場合はEnterキーを押すだけでOK ※ノンパスでログインする場合、 パスフレーズ は設定しないでください。 [root@client ~]# #公開鍵・秘密鍵のペアを作成する [root@client ~]# ssh-keygen -t rsa -b 4096 Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): ←←f オプションでも指定可能 Enter passphrase (empty for no passphrase): ←←Nオプションでも指定可能 Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa. Your public key has been saved in /root/.ssh/id_rsa.pub. The key fingerprint is: SHA256:9MTYgMkqHt0t0ZLL/BLW9uy4J/m+PE3Hd0TZ6HkXXXX root@client.local The key's randomart image is: +---[RSA 4096]----+ | . =. .oo| | B .= ooo| | . = *o + ...+ | | o o XXXo . oo o| | . o . =So. E..o | | . . . o . o o| | . + o . ..| | +.+ . | | .*=o | +----[SHA256]-----+ [root@client ~]# 上記の様に問題なく公開鍵・ 秘密鍵 ペアが作成出来たら鍵の確認をします。 ls -l ${鍵を保存しているディレクトリ} [root@client ~]# ls -l ~/.ssh/ -rw------- 1 root root 3247 7月 15 17:17 /root/.ssh/id_rsa -rw-r--r-- 1 root root 743 7月 15 17:17 /root/.ssh/id_rsa.pub これで、公開鍵・ 秘密鍵 の作成は完了です。 公開鍵の配置 次に SSH 接続を行う対象のサーバにクライアントの公開鍵を設置します。 クライアントサーバ(root@client.local)の公開鍵を SSH 接続先のサーバ(root@server.local)の ~/.ssh/authorized_keys に登録します。 クライアントサーバ(root@client.local)で、以下を実行します。 ssh-copy-id ${ユーザ名}@${サーバ名} [root@client ~]# ssh-copy-id root@server.local /usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/root/.ssh/id_rsa.pub" /usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed /usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys root@server.local's password: ←←パスワード入力だけ行えば自動で登録してくれる Number of key(s) added: 1 Now try logging into the machine, with: "ssh 'root@server.local'" and check to make sure that only the key(s) you wanted were added. [root@client ~]# ssh-copy-id コマンドを使わない場合は、公開鍵( id_rsa.pub )をコピーして SSH 接続先サーバの ~/.ssh/authorized_keys に張り付けましょう。 注意 .ssh ディレクト リ、 authorized_keys ファイルの パーミッション には注意してください。 .ssh ディレクト リは 700 , authorized_keys ファイルは 600 (644でも問題なし)です。 違っていた場合は chmod ${パーミッション} ${ファイルorディレクトリ} で変更可能です。 動作確認 設定が完了したら、client.local→server.localへパスワード入力なしで SSH 接続できるかを確認します。 ssh ${ユーザ名}@${サーバ名} -i ${秘密鍵のパス} ※ 秘密鍵 のパスは、デフォルト ~/.ssh/id_rsa の場合省略可能。(ユーザも同じ場合は省略可) [root@client ~]# ssh server.local ___ / __| ___ _ ___ _____ _ _ \__ \/ -_) '_\ V / -_) '_| |___/\___|_| \_/\___|_| Last login: Fri Jul 16 18:17:57 2021 from XXX.XXX.XXX.XXX [root@server 18:19:04 ~]# できました！！！設定はこれにて完了です。 鍵認証用の公開鍵・ 秘密鍵 を作る→ SSH 接続先のサーバ ~/.ssh/authorized_keys に登録するだけなので案外簡単にできると思います。 よくあるエラー 次に、公開鍵認証で SSH 接続しようとするときに頻発する(した)エラーをご紹介しようと思います。 これは私の経験による独断と偏見ですので当てはまらないかもしれませんが... 鍵ファイルの パーミッション ( 秘密鍵 ) クライアント側の公開鍵ファイル( id_rsa.pub )は 644 、 秘密鍵 ファイル( id_rsa )は 600 となっているはずですが、 秘密鍵 ファイルが何らかの拍子に パーミッション が変更された場合は、 chmod コマンドなどで修正しましょう。 ↓↓↓ こんなエラーが出ます。 ### 秘密鍵のパーミッションが644の場合 [root@client ~]# ssh server.local @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for '/root/.ssh/id_rsa' are too open. ←←パーミッションが開けすぎている旨のエラーが出る It is required that your private key files are NOT accessible by others. This private key will be ignored. Load key "/root/.ssh/id_rsa": bad permissions root@server.local's password: authorized_keysファイルの パーミッション SSH 接続接続先サーバに設置している ~/.ssh/authorized_keys ファイルの パーミッション は、 600 にしてください。 644でも認証できますが、ほかのサーバの公開鍵が格納されていますので好ましくありません。 権限が間違っていた場合、エラーは出ませんが公開鍵認証ができないためパスワード入力が必要になります。 ~/.ssh/ ディレクト リの パーミッション SSH 接続先のサーバの .ssh ディレクト リは 700 の パーミッション にしてください。 グループユーザ・他ユーザに書き込み権限などがあると、特にエラーは起きませんが、 authorized_keys と同様に公開鍵認証できずパスワード入力を求められます。 (デフォルトではグループユーザ・他ユーザに書き込み権限は付かないのでこのエラーの頻度は少ないかもです。) ### 700(正常な場合) [root@client ~]# ssh server.local ___ ←←パスワード入力不要 / __| ___ _ ___ _____ _ _ \__ \/ -_) '_\ V / -_) '_| |___/\___|_| \_/\___|_| Last login: Mon Jul 19 14:38:53 2021 from XXX.XXX.XXX.XXX [root@server 14:39:30 ~]# ls -al ./ | grep ".ssh" drwx------. 2 root root 80 7月 15 18:39 .ssh [root@server 14:39:46 ~]# ### 722(書き込み権限がある場合) [root@client ~]# ssh server.local root@server.local's password: ←←パスワード入力必要 ___ / __| ___ _ ___ _____ _ _ \__ \/ -_) '_\ V / -_) '_| |___/\___|_| \_/\___|_| Last login: Mon Jul 19 14:39:30 2021 from XXX.XXX.XXX.XXX [root@server 14:42:08 ~]# ls -al ./ | grep ".ssh" drwx-w--w-. 2 root root 80 7月 15 18:39 .ssh [root@server 14:42:10 ~]# 最後に 今回は、 SSH 接続の際に公開鍵認証を行う方法について紹介しました。 公開鍵認証の他に SSH 接続をパスワード入力なしで行う場合は、 sshpass コマンドを使用する方法などもありますが、 コンソールログにパスワードがそのまま残ってしまったり、 スクリプト 内でパスワードを平文で書く必要があったりとあまり好ましくありません。 設定自体は簡単ですし、 ssh だけでなく rsync やscpコマンドを使用する時にもパスワードが不要になり、 非常に便利だなと思いました。 公開鍵認証設定を行った上で、 ~/.ssh/config への設定も追加で行うと更に開発環境が快適になるのではないかと思います。 前回は、 .ssh/config ファイルについての記事を書いているのでよければご覧ください。 というわけで、 SSH 公開鍵認証設定方法の紹介でした。 tech-blog.rakus.co.jp 参考文献 SSH 公開鍵認証で接続するまで https://qiita.com/kazokmr/items/754169cfa996b24fcbf5 「よく分かる公開鍵認証」～初心者でもよくわかる！ VPS によるWebサーバー運用講座(2) https://knowledge.sakura.ad.jp/3543/ SSH CA認証まとめ https://kontany.net/blog/?p=211 SSH とは？仕組みと SSH サーバーの設定をわかりやすく解説します！ https://www.kagoya.jp/howto/rentalserver/ssh/ SSH 公開鍵認証とは何か？（初心者向けに解説） https://blog.senseshare.jp/ssh-public-key-authentication.html エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 技術広報の yayawowo です。 今回は、 CSS について初心者向けに基本的な 書き方 を解説します。 CSS を書く上で覚えておくべきことや、基本的な書き方をまとめております。 また、直ぐに実践できるようにサンプルコードを交えながら進めていきますので是非ご活用ください。 HTMLの基本的な説明は「 HTMLで改行【brタグ・pタグ・preタグ】 」もご確認ください。 はじめに CSSとは HTMLのサンプル HTML+CSSのサンプル CSS 書き方 基本 3つの場所 ①styleタグの書き方 ②インラインの書き方 ③別ファイルの書き方 3つの要素 よく使うプロパティ一覧 CSS 書き方 まとめ CSS とは CSS とは、「 Cascading Style Sheets 」 の略称で スタイルシート とも呼ばれています。 HTMLで作成した文章構造に対し、色や文字の大きさなどのデザインやレイアウトを整えてあげる役割が、ずばり CSS です。 イメージがつきにくいかと思いますので、以下の通りサンプルをご用意しました。 HTMLのサンプル シンプルではありますが、HTMLだけで書いたコードが以下になります。 <h1> ：大見出し <p> ：段落 See the Pen by yasuko ( @yayafu_ ) on CodePen . HTML+ CSS のサンプル HTMLで作成した文章に対し、 CSS でデザインを加えてみます。 <h1> ：大見出しを赤色に変更 <p> ：段落の内の文字を大きく変更 See the Pen by yasuko ( @yayafu_ ) on CodePen . 以上の通り、HTMLと CSS を組み合わせることでデザイン性があるWebぺージを作ることができます。 皆さんが見ているWebページでデザイン性が高いものは、HTMLに加え、 CSS が使われていると分かっていただけたのではないでしょうか。 CSS 書き方 基本 CSS を書く上での基本をご説明します。 3つの場所 CSS を書く場所は、3つあります。 プログラムを書く目的に応じて、書く場所を適切に変えてください。 パターン 場所 ① HTMLにstyleタグを書く ② HTMLのインラインに書く ③ 別ファイルに書く では、各パターンを細かく見つつ、書き方も説明していきたいと思います。 ①styleタグの書き方 CSS を書くために <style> タグを使います。 <style> タグは、HTML内にある <head> タグの中に書きます。 まずは、以下のサンプルコードをHTML内に書いてみましょう。 サンプルコード < style > h1 { color : red ; } p { font-size : 50px ; } </ style > <head> タグ内に書いた結果が以下の通りです。 See the Pen by yasuko ( @yayafu_ ) on CodePen . <style> タグ内に記載したタイトルの色と、大見出しの文字の大きさが反映されていることが分かります。 ②インラインの書き方 では、次に <style> タグではなくHTMLのインラインに書く方法を説明します。 以下のサンプルコードの通り、 <h1> タグと <p> タグに style が指定されているのがわかると思います。 この書き方をインラインと呼びます。 サンプルコード < h1 style = "color: red" > Hello World! </ h1 > < p style = "font-size: 50px" > こんにちは </ p > サンプルコードをHTMLにはめ込んだものが、こちらです。 See the Pen by yasuko ( @yayafu_ ) on CodePen . ①の表示結果と比べても、同様の結果になっているかと思います。 このように、 <style> タグで指定するのではなく、 <h1> や <p> の要素に直接 style を指定して書くこともできます。 ③別ファイルの書き方 最後に、 CSS を別ファイルに書く方法を説明します。 HTMLファイルから CSS ファイルを呼び出すことで可能とする実装方法です。 なお、ビジネスシーンでは③の書き方が一般的となっています。 サンプルコードを別ファイルに書き、「style. css 」と名前を付けて保存しましょう。 サンプルコード h1 { color : red ; } p { font-size : 50px ; } CSS を読み込むために、HTMLの <head> タグ内に以下記述をします。 <link rel="stylesheet" href="style.css"> rel ：relation（関係）の略称で、読み込むファイルの関係性を意味する href ：relで読み込むファイルがある場所（URL） を意味する ➡「style. css 」の スタイルシート を読み込む 表示結果は以下の通りです。 See the Pen by yasuko ( @yayafu_ ) on CodePen . ③も、①②と同様の表示結果になりました。 CSS を別ファイルに書くことで、保守性・汎用性が高まり一貫性のあるWebページが作成できます。 是非ビジネスシーンでWebページを作成する際は、③の書き方をオススメします。 3つの要素 次は、 CSS の3つの要素についてです。 CSS を書くには以下3つの要素を指定する必要があり、必須の知識となりますので覚えておいてください。 ①： セレクタ 　 ・・・どこの ②：プロパティ ・・・何を ③：値 　　　　 ・・・どのように変えるか では、以下サンプルコードはどのように指定するかを見てみましょう。 サンプルコード1 　　h1　 {　 　color:　 　 red; 　　 } 　￣￣￣　　　￣￣￣　　￣￣￣ 　 ① セレクタ 　　　　②プロパティ　　 ③値 ①： セレクタ 　 ・・・ h1 大見出しの ②：プロパティ ・・・文字色を ③：値 　　　　 ・・・赤色に変える サンプルコード2 　　p 　{　 font-size: 　　50px;　　 } 　￣￣￣　 ￣￣￣￣￣　　￣￣￣ 　 ① セレクタ 　　　　②プロパティ　　 ③値 ①： セレクタ 　 ・・・ p 段落の ②：プロパティ ・・・文字サイズを ③：値 　　　　 ・・・50pxに変える 以上の通り、3つの要素を指定することでデザイン性があるWebぺージを実装することができます。 よく使うプロパティ一覧 CSS の書き方を前述でまとめましたが、いざやってみよう！と思った際におそらくプロパティの指定に困るかと思います。そんな方のために、よく使うプロパティの一覧を種別にまとめましたので是非ご参考ください。 種別 プロパティ 説明文 フォント color 文字色 font-size 文字サイズを指定 font-weight 文字の太さを指定 font-family フォントの種類を指定 テキスト text-align 行の揃え位置を指定 text-decoration: 文字線を指定 line-height: 行間の高さを指定 letter-spacing: 文字間隔を指定 text-indent: 1行目の字下げ（インデント）を指定 リスト list-style-type: リストマークの種類を指定 list-style-position: リストマークの位置を指定 list-style-image: リストマークに画像を指定 ボックス margin: 上下左右のマージンを指定 padding: 上下左右のパディングを指定 border: 上下左右のボーダーを指定 イメージ background-image: 背景画像をURL指定 background-position: 背景画像の表示開始位置を指定 background-repeat: 背景画像の繰り返し表示方法を指定 background-attachment: 背景画像の固定や移動を指定 vertical-align: テキストや画像の縦方向位置を指定 CSS 書き方 まとめ CSS の基本的な書き方は、いかがでしたでしょうか。 HTMLや CSS は、メモ帳のような テキストエディタ があればすぐに実践ができるため、机上学習よりもまずは実装にトライしてみてください。 最後にはなりますが、本ブログの内容がエンジニア（特にフロントエンドエンジニア）やデザイナーを目指している方にとって、一助になれば幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

CDNって何ですか？ CDN とは 有名なCDN CDNを使うとどんな良いことがある？ CDNの仕組み 1．クライアント 2．エッジサーバ 3．オリジンサーバ 通常のウェブアクセスの場合 CDNを利用したアクセスの場合、 CDNを利用するときのDNSの話 CDNの料金 CDNのメリットを活かすために 1. キャッシュヒット率を上げる 2. キャッシュクリアは少なめに 3. コンテンツの容量は控えめに CDNのデメリット まとめ CDN って何ですか？ こんにちは、 ラク スのインフラを担当している akiponx です。 今回は CDN について書いてみようと思います。 みなさん、 CDN って知ってますか？？僕は知りませんでした。 調べたきっかけは以前、弊社が運営している Wordpress サイトがアクセス集中で落ちるということがあったため、どうすれば落ちないようにできるのか…？ を調べた時に CDN に巡り合いました。 CDN とは Contents Delivery Network の略です。 コンテンツをより早く、より効率的に届けられるようにしたサービスのことを言います。 有名な CDN CloudFlare Rabbit START 各 パブリッククラウド AWS : CloudFront GCP : Google Cloud CDN Azure : Azure CDN などなど パブリッククラウド が提供している CDN は各サービスと連携しやすいイメージがあります。 CDN を使うとどんな良いことがある？ CDN を利用するメリットとしては ウェブサーバの負荷を軽減することができる レスポンス速度を向上させることができる 表示の高速化 上記が期待できます。 画面が表示されるのに5秒も待つようなウェブサイトは嫌ですよね？僕は嫌です。 近年ではモバイルの表示速度が SEO の評価に影響するという話を見たり聞いたりしているので、 レスポンス向上、高負荷対策、表示高速化など、簡単に実装できるのでぜひ検討してみてください。 CDN の仕組み CDN の登場人物はおおむね全部で3つあります。 クライアント エッジサーバ オリジンサーバ 上記3つが登場人物です。 1．クライアント 皆さんが使っているような Chrome やEdge、 Firefox などのブラウザのことです。 2．エッジサーバ オリジンサーバの代わりに応答するキャッシュサーバのことです。 3．オリジンサーバ 実際にコンテンツが置いてあるサーバです。 それではまず、なぜウェブサーバの負荷軽減が期待できるのかを見ていきましょう。 通常のウェブアクセスの場合 ブラウザで https://rakus.co.jp/ へアクセス ウェブサーバがコンテンツを探してレスポンスを実施 CDN を利用したアクセスの場合、 ブラウザで https://rakus.co.jp/ へアクセス エッジサーバがキャッシュがあるかどうかをチェック キャッシュがある場合、エッジサーバが保持しているキャッシュを返す キャッシュがない場合、オリジンサーバへコンテンツを取得してキャッシュに保存し、レスポンスを返す 通常のアクセスと CDN を利用したアクセスを見比べた時にエッジサーバが入っていることがわかるかと思います。 CDN を利用した場合、オリジンサーバへのアクセスはエッジサーバがキャッシュを保持していない初回のみで、 2回目のアクセスからはオリジンサーバにリク エス トが届かず、エッジサーバが保持しているキャッシュがレスポンスとして返ってきます。 このため、ウェブサーバ(オリジンサーバ)の負荷が軽減されます。 続いて、なぜレスポンス速度の向上に期待できるのか見ていきます。 CDN のエッジサーバは基本的に世界中に分散配置されています。 クライアントのロケーションによって、地理的に一番近いエッジサーバにリク エス トが行くような仕組みになっています。 そのため、世界中どこからアクセスをがあってもサーバへの接続にかかる時間が短縮されます。 CDN を利用したときの図を見ると初回のみ時間がかかるように思いますが、 エッジサーバがキャッシュを保持していると接続しに行くときの距離が圧倒的に短くなることがわかります。 また、 CDN を利用しない場合、 リク エス トごとに必要なデータを取りに行くため、CPUやディスクI/Oに負荷がかかります。 CDN を利用していた場合、エッジサーバがキャッシュをそのまま返すためレスポンス速度の高速化が見込めます。 CDN を利用するときの DNS の話 CDN を使わない通常のアクセスであれば ドメイン を名前解決してウェブサーバにアクセスします。 CDN を利用する場合、エッジサーバを経由してアクセスすることになります。 このため、ウェブサイトに利用している ドメイン のAレコードを変更する必要があります。 CDN ベンダーによって内容は違うと思われますが、大体のところはCNAMEレコードというレコードを使います。 ブラウザの動きとしては DNS サーバに「www.rakus.co.jpの IPアドレス 教えて」と問合せを行います。(ここまでは一緒) DNS サーバにはAレコードの設定はせずにCNAMEレコードを登録しているため、「 cdn . example.com と同じだよ」とレスポンスを返します。 ブラウザは返ってきたレスポンスをみて「 cdn . example.com の IPアドレス 教えて」を再度 DNS に問い合わせに行きます。 ここでようやくエッジサーバへアクセスできます。 エッジサーバの挙動としてはURLをキーにキャッシュを保持しているかをチェックして、 キャッシュがなければオリジンサーバへリク エス ト。 キャッシュがあれば、キャッシュを返すという挙動をします。 CDN の料金 主に課金されるどこのベンダーでも課金される内容としては 通信料 リク エス ト数 上記の2つはほとんどのベンダーで課金対象に含まれると思います。 予算を考えるときは CDN 化したいサイトのリク エス ト数・転送量などを考慮して、予算を考えていきましょう。 CDN のメリットを活かすために CDN の仕組みや課金形態を見てきました。 なんとなく高速化や負荷軽減が出来そうな雰囲気をつかんでいただければ幸いです。 ただ、 「あれ？ DNS やオリジンサーバの間にエッジサーバが入っているから CDN を使うと逆に時間かかるんじゃないの？」 と思う方もいるかもしれません。 確かに作り方によってはレスポンスは遅くなるわ、お金はかかるわ。でいいことなしです。 そのような悲劇をなくすために下記のことに気を付けて実装しましょう。 ※ DNS で一度CNAMEの名前解決が増えるところはどうしようもありません。 　誤差なので突っ込まないでください。。。 　 AWS を使えばRoute53のAliasという特殊なレコードが存在しており、CNAMEを使う必要はなしなので 　1発で IPアドレス が返ってきます。 さて、それでは気を付けるところを見ていきましょう。 1. キャッシュヒット率を上げる 2. キャッシュクリアは少なめに 3. コンテンツの容量は控えめに 理由を説明していきます。 1. キャッシュヒット率を上げる CDN を利用する際にキャッシュヒット率を気を付けましょう。 エッジサーバにキャッシュを保持させればさせるほど、レスポンスの効率は良くなります。 逆にキャッシュを保持させなければ、 CDN を使っている理由がほぼなくなります。 2. キャッシュクリアは少なめに こちらも上記と同じような内容になりますが、 キャッシュの保存期間を長くすることによってオリジンサーバへのリク エス トが減り、レスポンスの効率が上がります。 コンテンツを更新した際にキャッシュクリアをするのも、できれば更新したコンテンツのキャッシュのみをクリアできるとベター。 ちなみに偉そうなことを書いていますが、私はめんどくさくて全キャッシュをクリアするように実装しました。 3. コンテンツの容量は控えめに こちらは主に節約が目的になります。 ベンダーにもよりますが、 CDN にはコンテンツを圧縮するかどうかの機能が実装されています。 が、画像などのファイルは圧縮してもそこまで圧縮されるわけではないです。 CDN では通信量も課金対象ですので翌月におったまげるくらいの請求が来てしまう可能性があります。 コンテンツの内容は基本的にインフラや開発者が管理していることが少ないので、コンテンツの制作者側と認識を合わせておく必要があります。 Wordpress などの CMS を利用していると容量など、あまり気にせずにアップロードして公開してしまうこともあるので注意です。 CDN を使う前ですが、 大容量の画像をアップしてプッシュ通知で記事を公開したところ転送量が3倍くらいになったことがあったので、気を付けましょう。。。 CDN のデメリット 最後ですが、 CDN のデメリットについてです。 コンテンツの反映に時間がかかる エッジサーバがキャッシュを保持しているため、キャッシュクリアが必要 エッジサーバにキャッシュを保持させてはいけないものの選別 会員サイトや Wordpress などのサイトにはキャッシュを保持させてはいけないURLなどがあるので注意 アクセスログ の取得 サーバにリク エス トが届かないため、 CDN 側の アクセスログ を取得する必要がある ⇒自動で取得できるような仕組みを準備しておくといいですね ベンダーによっては アクセスログ を提供していないものもあるらしい トラブルシューティング 時の切り分けポイントが増える CDN を利用しているとサイトにアクセスできない。 などの障害が発生した際に、 ・ CDN (エッジサーバ)でトラブルが起こっているのか？ ・オリジンサーバでトラブルなのか？ という切り分けが発生します。 また、仮に CDN (エッジサーバ)だった場合、我々では調査できない範囲になるため、 トラブル時は見守ることしかできなくなります。 CDN のデメリットしては上記が考えられます。利用する際は上記の内容を踏まえて選択・設計をする必要があります。 まとめ ざっくりと CDN について書いてみました。 実際の設定方法等を書いたわけでないので「ふーん。 CDN ってこんな感じなのね。」というような雰囲気が伝わればと思います。 CDN を利用するにあたって、静的コンテンツのサイトであれば CDN を利用することでレスポンスの向上や負荷軽減を見込めると思います。 動的なサイト( Wordpress )などのサイトで CDN を利用する場合は、キャッシュを保持させてはいけないサイト等があるため、動作確認はしっかりしましょう。 ちなみに私が実装したときは、キャッシュを保持させるURL / 保持させないURL でかなり苦戦しました。。。 あ、あと更新したときは、 CDN のキャッシュクリアをお忘れなく。 実装当時はコンテンツが反映されないんですけど！という問い合わせがよく来ていたので。。。 「 CDN を活かすために」という部分で記載しましたが、 CDN のメリット最大限享受するために CDN の仕組みを理解し、快適なウェブサーバ管理生活を送れるようにしましょう！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに SwiftUI とは SwiftUIのチュートリアルを始める準備 Section 1：SwiftUIのプロジェクトの作り方 Section 2：View要素を編集する Section 3：View要素を並べる Section 4：SwiftUIのカスタム画像Viewを作成する Section 5：他のフレームワークからのSwiftUI Viewを使用する Section 6：SwiftUIの詳細Viewを作成する 【おまけ】マウス操作だけでViewを編集する さいごに はじめに 少し前の話になりますが、 Apple から新しくSwiftUIという開発用の フレームワーク が発表されました。 Apple の公式ページにSwiftUIの チュートリアル が全10章に分けられて公開されています。 https://developer.apple.com/tutorials/swiftui ※「Get Started」をクリックしてスタートできます。 最初は基本的な内容から始まり、後半には応用的な内容が出てきているので、SwiftUIを使った アプリ開発 の勉強にちょうど良いと感じました。 そこで、SwiftUIの チュートリアル の内容を解説してみようかと思います。 ただ、すべての内容を１つの記事にまとめると量が膨大になるので、今回は第1章の「Creating and Combining Views」を解説しようかと思います。 こちらには、SwiftUIの基本的な内容が記載されているので、本記事を読むことで簡単なアプリであれば作成ができるようになります。 チュートリアル は全て英語なので、初めてSwiftUIをやってみたいという人のハードルを下げられたらと思います。 SwiftUI とは 2019年ごろ Apple が提供を開始した新しい iOS アプリ開発 用の フレームワーク で、以下のような特徴があります。 特徴 プログラムコード・データを更新した際に自動でViewのプレビューを更新 エミュレータ ・実機で動作確認を行う必要がない 開発効率が上がる 実装方法がよりシンプル・直感的に コードがシンプルになった エンジニアの負担を軽減 手を出しやすくなった 特に1番目に記載した、「自動でViewのプレビューを更新」は使っていてとても便利だと感じます。 ※後ほど出てきます。 SwiftUIの チュートリアル を始める準備 まず前提として、 Xcode のバージョン11以降がインストールされている Macbook が必要になります。 また、SwiftUI チュートリアル ページの赤枠で示したボタンをクリックして、Projectファイルをダウンロードしておいてください。 チュートリアル を進めるのに必要な画像ファイルなどが格納されています。 第一章を終えたときに完成するアプリの「完成版プロジェクト」も格納されているのでどうしても詰まったときは参考にすると良いと思います。 ここまでで準備は完了です。 早速、SwiftUIの チュートリアル を解説していこうと思います。 Section 1：SwiftUIのプロジェクトの作り方 以下の手順でSwiftUIのプロジェクトを作成してください。 Xcode を起動し、「Create a new Xcode project」を選択 iOS > Single View app を選択 各種プロジェクトの設定を行う 「 User Interface 」は、SwiftUIを選択してください。 チュートリアル ではアプリ名を「Landmarks」と設定しているので特に決まっていなければ同じで良いと思います。 任意の場所にプロジェクトを保存する ※インストールからプロジェクトの作成の方法を詳しく解説している記事も書いているので、こちらも参考にしてみてください。 ・ 【超入門】Xcodeのインストール方法-iosアプリを実機にインストールするまで - RAKUS Developers Blog | ラクス エンジニアブログ 上記が完了すると、以下のような画面が表示されます。 プレビュー機能 プロジェクトを作成した直後ですが、すでに「Hello,World!」と表示されるコードが完成しています。 右上の方にある「Resume」を押下するだけで プレビュー機能 を起動できるので、確認してみてください。 表示されている、「ContentView.swift」のコードを確認すると、次のようになっていると思います。 struct ContentView : View { var body : some View { Text( "Hello,World!" ) .padding() } } 3行目の「Hello,World!」の部分を任意の文字列に変更すると、右側のプレビュー画面に表示されている文字列もリアルタイムに更新されます。 前述した「自動でViewのプレビューを更新」は、この機能のことをさしています。 SwiftUIからデザインを確認しながらコードを書くことができるので、便利だと思います。 プレビューを表示させるための機能を担っているのが、コード中の以下の部分です。 struct ContentView_Previews : PreviewProvider { static var previews : some View { ContentView() } } previews 内に指定されているViewのプレビューを表示します。 デフォルトで ContentView() と記載されており、「Hello,World!」が表示されているということになります。 別のViewを作成し、 previews を編集することで、表示するViewを切り替えたり、複数のViewを同時に確認することができたりします。 SwiftUIでは、 PreviewProvider を継承することで、このような機能を実装することができるようです。 Section 2：View要素を編集する プロジェクトの生成直後、「Hello,World!」を表示させているコードは以下の部分になります。 Text( "Hello,World!" ) .padding() Text() は、任意の文字列のテキストラベルを作成します。 コードを見るだけで何となくイメージすることができる非常に直感的なコードです。 後ろにくっついている .padding() は、そのView要素の周りに余白を作成します。 後ほどまた出てくるので、そちらで効果を確認してみてください。 （今はView要素が１つしかないのでわかりにくいです、、、） 同じ要領で、対象のView要素の後にコードをつなげることで、様々な編集を行うことができます。 例えば、 チュートリアル に沿って以下のようにコードを編集してみます。 Text( "Turtle Rock" ) .font(.title) .foregroundColer(.green) プレビューを確認すると文字の色が緑色に変更され、文字サイズが大きくなったと思います。 Section 3：View要素を並べる 複数のパーツを並べるときは、 HStack 、 VStack 、 ZStack を使用します。 使い方は説明するより、コードを書いてプレビューを動かした方が分かりやすいと思います。 HStack：View要素を横（水平）方向に並べる HStack { Text( "Hello,World!" ) .font(.title) Text( "Joshua Tree National Park" ) .font(.subheadline) } VStack：View要素を縦（垂直）方向に並べる VStack { Text( "Hello,World!" ) .font(.title) Text( "Joshua Tree National Park" ) .font(.subheadline) } ZStack：View要素を画面に対して垂直方向に並べる 　 チュートリアル では使用しないので、割愛します。 これらは、ネストさせることも可能です。 また、VStackは引数に、 .leading を渡すことで、各要素を左寄せにすることが可能です。 ※他にも .center で中央、 .trailing で右寄せにもできます。 上記を屈指して チュートリアル のようにコードを編集します。 VStack(alignment : .leading) { Text( "Turtle Rock" ) .font(.title) HStack { Text( "Joshua Tree National Park" ) .font(.subheadline) Spacer() Text( "California" ) .font(.subheadline) } } HStack の内側が窮屈なので、 Spacer() を挟んでいます。 名前の通り、スペースを作成します。 スタックのネストは、以下のようなイメージです。 Section 2 で出てきた padding() を追加して、余白で見た目を整えて完成です。 VStack(alignment : .leading) { Text( "Turtle Rock" ) .font(.title) HStack { Text( "Joshua Tree National Park" ) .font(.subheadline) Spacer() Text( "California" ) .font(.subheadline) }.padding() } ※両サイドに若干余白が生まれました。 SwiftUI では、基本的にこれまでのことを組み合わせてアプリの画面を設計していくことになります。 内容を理解すれば、以降は苦労することなく実施できるかと思います。 Section 4：SwiftUIのカスタム画像Viewを作成する Viewの要素の中に、 Image() というものがあり、名前の通り画像を扱います。 読み込んだ画像を表示させるだけでは味気ないので、このSectionでは 今風？なデザインに編集していく手順を説明しています。 まずは、あらかじめダウンロードしたプロジェクトファイルの中になる turtlerock@2x.jpg をプロジェクトに追加してください。 Assets.xcassets に画像ファイルを ドラッグ&ドロップ して、追加できます。 画像を表示するためのViewを新しく作成するので、SwiftUIのファイルを追加してください。 上部の File > New > File... から、 SwiftUI View を選択して追加することができます。 ファイル名は チュートリアル に習うのであれば、「CircleImage.swift」としてください。 最初と同じく、「Hello,World！」のテキストラベルを表示するコードが生成されます。 次のように編集すると、プレビューに先ほど追加した画像が表示されるはずです。 struct CircleImage : View { var body : some View { Image( "turtlerock" ) } } "turtlerock"は、追加した画像ファイルの名前です。 このようにファイル名を引数で Image() に渡すことで 、該当の画像を表示させることができます。 後は Section 3 と同じ方法で、画像のViewを編集していきます。 struct CircleImage : View { var body : some View { Image( "turtlerock" ) .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth : 4 )) .shadow(radius : 7 ) } } それぞれの説明です。 ・.clipShape(Circle()) 　 .clipShape() は形を指定してViewを切り抜きます、 　今回は引数に Circle() を渡しているので、画像を丸く切り取る役割を担っています。 ・.overlay(Circle().stroke(Color.gray, lineWidth: 4)) 　 .overlay() は、任意のViewを重ねて表示させることができます。 　 Circle() は前述したとおり 丸 で、 .stroke() は枠線を意味しています。 　以上からコードを見ると「円形の白い枠線」を重ねて表示しているということになります。 　※lineWidthは枠線の幅を指定しています。 ・.shadow() 　Viewに影を追加します。 以上です。 やはり、非常に直感的なコードです。 Section 5：他の フレームワーク からのSwiftUI Viewを使用する 次は、MapKitを使って地図のViewを作成します。 Section 4と同様に新しくファイルを追加します。 チュートリアル に沿うなら、ファイル名は「MapView.swift」です。 importにMapKitを追加します。 ここがこれまでと違うところですね。 import MapKit 次にMapViewの中身を次のように変更します。 struct MapView : View { @State private var region = MKCoordinateRegion( center : CLLocationCoordinate2D (latitude : 34.011_286 , longitude : - 116.166_868 ), span : MKCoordinateSpan (latitudeDelta : 0.2 , longitudeDelta : 0.2 ) ) var body : some View { Map(coordinateRegion : $region ) } } Map() をプレビューで表示するには、「ライブモード」に切り替える必要があるようです。 画像の赤丸で囲まれたボタンを押下することで、切り替えることができます。 ※ チュートリアル の縮尺だと、表示範囲が狭いと感じたので 縮尺を広くとっています 順番に説明していきます。 region これは、表示する地図の位置とその縮尺の情報を格納したプロパティです。 引数である、 CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868) で緯度と経度を設定し、該当するポイントが地図の真ん中に表示されるようになります。 2番目の MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) が縮尺を決める値です。 latitudeDelta と、 longitudeDelta の値を大きくするほど、縮尺は大きくなります。 Map() 先ほど作成した、「表示させたい地図の情報」を引数で渡しています。 region の情報を任意に変更することで表示させたい地図の場所、尺度を変更できるということです。 @State これをつけたプロパティは、その値が監視されます。（使用するには、$をつける必要があります。 ） 何らかの処理で変更が加えられたとき、必要に応じてViewが再描画されます。 今回で言うと、例えば何らかの処理で region 内の緯度と経度の情報が書きかえられたとき、それに応じて表示される地図も再描画されます。 Section 6：SwiftUIの詳細Viewを作成する 最後に、これまで作ってきたViewを組み合わせて、1つのViewを作成していきます。 Section 2、3 で作成した、 ContentView.swift の編集に移ります。 まず Stackを屈指して、上から「Section 5で作った MapView() 」、「section 4で作った CircleImage() 」の順で縦にView を並べ、説明文用のViewを追加します。 不格好なので、 チュートリアル に従ってそれぞれのView要素を整理していきます。 以下がコードです。 struct ContentView : View { var body : some View { VStack { MapView() .ignoresSafeArea(edges : .top) .frame(height : 300 ) CircleImage() .offset(y : - 130 ) .padding(.bottom, - 130 ) VStack(alignment : .leading) { Text( "Turtle Rock" ) .font(.title) // 省略 } Divider() Text( "About Turtle Rock" ) .font(.title2) Text( "Descriptive text goes here." ) }.padding() Spacer() } } } .ignoresSafeArea()：セーフ ティエリア 外にもViewが表示されるようになります。 ※ iPhone χ以降からある、画面上部のバッテリー残量などが表示されているエリアです。 .frame()：表示されるViewの範囲を指定しています。 .offset()：対処のView要素を移動させることができます。 .padding()：余白を制御するやつですが、今回はマイナスの値で余白を小さくしています。 Divider()：区切り線を引きます。（VStackの時は横線で、HStackの時は縦線がひかれるみたいです） 最後に、見出し部分のコードと見た目を整えて完成です。 HStack { Text( "Joshua Tree National Park" ) Spacer() Text( "California" ) } .font(.subheadline) .foregroundColor(.secondary) HStack 内の Text() についている .font(.subheadline) を外にくくりだすこともできるようです。 Stack に着けた場合は、その内部の全ての要素にコードが効くようです。 【おまけ】マウス操作だけでViewを編集する チュートリアル にもかかれている、ちょっとしたTipsです。 1. 要素の編集を、コードを記述しないで行う 「control」+「option」を押しながらView要素のコードをクリックすると、マウス操作のみでViewの編集を行うことができます。 Font や Color などコードで設定したものも、マウス操作で変更可能です。 設定完了後、自動でコードが編集されます。 2. 要素の追加を、コードを記述しないで行う マウス操作のみでView要素を追加することができます。 画面右上の「＋」ボタンを押下する 追加したいView要素を選択 コードまで ドラッグ&ドロップ する さいごに 以上が第1章の解説になります。 解説した内容だけでも、SwiftUIをかなり使いこなせるようになると思います。 以降の章ではSwiftUIの画面遷移なども出てくるので、そちらも解説の記事を挙げられたらと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに パクチー が大好きな技術広報の yayawowo です。 今回は Linux コマンドについてご紹介したいと思います。 今回ご紹介したいのが、 Linux 標準の テキストエディタ を起動させる vi コマンド についてです。 本ブログでは、 Linux 上でエディタを触る機会が多い方向けに、vi コマンドの基本的な使い方を目的別にまとめました。 vi コマンドは、慣れてしまえば問題ないのですが多少扱いにくいコマンドでもあります。 Linux 上でvi コマンドを使う際、本ブログが操作のお供になれれば幸いです！ はじめに viとは vi のモード インサートモード コマンドモード vi コマンド 準備 vi コマンド一覧 起動 入力 移動 カーソル移動 画面移動 コピー・貼り付け・削除 コピー 貼り付け 削除 検索・置換 検索 置換 保存・終了 vi コマンド まとめ viとは viとは、 Linux にプリインストールされている テキストエディタ です。 Linux 上にあるテキストファイルをviで開き、内容の修正や確認をすることが多いです。 例えばサーバ保守の際に、 ssh でリモート接続して設定ファイルの修正をする場合にも利用できます。 現在は、viを立ち上げると vim （Vi IMproved）が立ち上がるケースも多いです。 vim とは、viに少し機能を追加したものですが、viと同じものと思っていただいて問題ございません。 vim では矢印キーが使用できるだけでなく、多段アンドゥ（Undo）や構文強調表示にも対応しています。 vi のモード viには、以下2つのモードがありますので覚えておいてください。 インサートモード 文字の入力が行えるモードです。 インサートモード時、左下に[INS]や挿入という文字列が表示されます。 また、以下の時は Escキー を押しましょう。 インサートモードを終了したい時 コマンドモードへ移行する時 viで困った時 コマンドモード 文字入力以外の編集作業が行えるモードです。 文字列の検索やテキスト保存、viの終了などもコマンドモードで行います。 vi コマンド 準備 viは、 テキストエディタ であるため修正・確認をするためのファイルが必要です。新規ファイルは、目的に応じて以下のどちらかで作成ください。 空の新規ファイルを作成する $ touch [ファイル名] 空の新規ファイルを作成し、そのまま編集する $ vi [ ファイル名 ] 「他の Linux コマンドをもっと知りたい」 「 touch コマンドの詳細は何だっけ…」 と思った方は、 よく使うLinuxコマンド一覧【最新版】 をご参考ください。 Linux の理解をより深めたい方へ以下関連おすすめブログ - ls コマンド 【使い方 まとめ】 - Linuxのファイル操作でよく使うLinuxコマンド - 初心者のためのawkコマンド - 実務で使える！基本的なシェル（Linux）コマンドの話 ～forとsed～ - 【Linux】今振り返りたい、プロセスって何？ vi コマンド一覧 次からは、vi コマンドを目的別にまとめております。 vi コマンドを利用する際は以下の内容をご参考ください。 起動 コマンド 説明 vi [ファイル名] ・ファイルを新規作成する ・ファイルを開く vi [Enterキー] ・新規ファイルを開く ※ファイル名は後で指定 vi -r [ファイル名] ・システムエラー時のファイルを復元して開く view [ファイル名] ・読み取り専用でファイルを開く 使い方例： vi [ファイル名] viを起動する際は、以下の通り vi [ファイル名] と入力します。 [ root@localhost dev1 ] # ls dev.txt dev1_1.txt dev1_2.txt [ root@localhost dev1 ] # vi dev.txt 起動後は、以下のようなエディタ画面が表示されます。 &quot;vi&quot;：起動後画面 入力 コマンド 説明 i カーソルの前（左側）に文字を入力 I カーソルのある行頭に文字を入力 a カーソルの後ろ（右側）に文字を入力 A カーソルのある行末 に文字を入力 o カーソルのある行の次の行頭 に文字を入力 O カーソルのある行の前の行頭 に文字を入力 使い方例： i i を入力することで、 インサートモード になります。 カーソルの前（左側）から文字が入力できます。 &quot;i&quot;：入力後画面 <figure class="figure-image figure-image-fotolife" title="i"：文字入力後画面"> "i"：文字入力後画面 移動 カーソル移動 コマンド 説明 h カーソルを左へ移動 j カーソルを下へ移動 k カーソルを上へ移動 l カーソルを右へ移動 w カーソルを1語進める b カーソルを1語戻す e カーソルを単語末尾へ移動 ^ カーソルを行頭へ移動 $ カーソルを行末へ移動 G カーソルを最終行行頭へ移動 - 前行の行頭へ移動 Enter 次行の行頭へ移動 使い方例： l → h l コマンドは、 コマンドモード で使えます。 l コマンドでカーソルを右へ移動してみましょう。 &quot;l&quot;：入力後画面 h コマンドでカーソルを左へ移動できます。 &quot;h&quot;：入力後画面 画面移動 コマンド 説明 H カーソルを画面先頭へ移動 M カーソルを画面真中へ移動 L カーソルを画面最終行へ移動 Ctrl + F １ページ下へ移動 Ctrl + B １ページ上へ移動 Ctrl + D 半ページ下へ移動 Ctrl + U 半ページ上へ移動 コピー・貼り付け・削除 コピー コマンド 説明 yy 1行をコピー 例) y3y ：3行コピー yl 1文字をコピー 例) y3l ：3文字コピー yw 1単語をコピー 例) y3w ：3単語コピー y0 行頭からカーソルの直前までをコピー y$ カーソルの位置から行末までをコピー 貼り付け コマンド 説明 p コピーした文字列をカーソルの後ろ（右側）に貼り付け P コピーした文字列をカーソル の前（左側）に貼り付け 削除 コマンド 説明 x カーソルの文字を削除 X カーソル左にある文字を削除 dl 1文字を削除 例) d3l ：3文字削除 dw 1単語を削除 例) d3w ：3単語削除 dd 1行を削除 例) d3d ：3行削除 d0 行頭からカーソルの直前までを削除 d$ カーソルの位置から行末までを削除 使い方例： yy → p → dd コピーした行を貼り付け、削除するまでの流れをご説明します。 コピー・貼り付け・削除は、 コマンドモード で実施します。 コピーしたい行にカーソルを合わせ、 yy と入力します。 画面上では何も起きていないように見えますが、該当行のコピーはしっかりとされているのでご安心ください。 &quot;yy&quot;：行のコピー カーソルを貼り付けたい箇所に移動させ、 p コマンドを入力します。 以下の通り、 yy コマンドでコピーした行が貼り付けられているのを確認いただけます。 &quot;p&quot;：コピーした行を貼り付け では最後に、 dd コマンドで行を削除します。 削除したい行の上にカーソルを合わせ dd と入力すると、以下の通り削除されます。 &quot;dd&quot;：行を削除 検索・置換 検索 コマンド 説明 f 検索したい文字 同行から文字を右方向へ検索 F 検索したい文字 同行から文字を左方向へ検索 ; 同行から次を検索 /検索したい文字列 ファイル全体から下方向へ検索 ?検索したい文字列 ファイル全体から上方向へ検索 n ファイル全体から次を検索 N ファイル全体から前を検索 置換 コマンド 説明 s 1文字置換 ※置換後はインサートモード r 1文字置換 ※置換後はコマンドモード R 上書き cw カーソルの位置から単語の末尾まで置換 :s/文字列A/文字列B/ カーソル行で最初に合致する文字を、文字列A→文字列Bに置換 :s/文字列A/文字列B/g カーソル行で合致する全ての文字を、置換文字列A→文字列Bに置換 :%s/文字列A/文字列B/g 全行で合致する全ての文字を、置換字列A→文字列Bに置換 :10,50s/文字列A/文字列B/g 10行目から50行目までの間で合致する全ての文字を、置換文字列A→文字列Bに置換 :10,$s/文字列A/文字列B/g 10行目から最終行までの間で合致する全ての文字を、置換文字列A→文字列Bに置換 使い方例： /検索したい文字列 "Bad"という文字列を検索します。 こちらも コマンドモード で、 /検索したい文字列 を入力してみましょう。 /Bad &quot;/検索したい文字列&quot;：&quot;Bad&quot;を検索 以下の通り、"Bad"の文字を検索することができました。 &quot;/検索したい文字列&quot;：&quot;Bad&quot;を検索後画面 使い方例： :%s/文字列A/文字列B/g 文字列の検索ができましたので、次は文字の置換を行います。 コマンドモード で、以下の通り入力してください。 : %s/Bad/Good/g &quot;:%s/文字列A/文字列B/g&quot;：&quot;Bad&quot;を&quot;Good&quot;に置換 以下の通り、"Bad"→"Good"に置換されました。 &quot;:%s/文字列A/文字列B/g&quot;：置換後画面 保存・終了 コマンド 説明 :q 終了 :q! 変更を保存せずに終了 :w 上書き保存 :w! 強制上書き保存 :wq 保存して終了 使い方例： :wq ファイル内容を修正後、保存をしなくてはなりません。 修正時は、 インサートモード になっていると思いますので Escキー で コマンドモード に戻してから操作を行ってください。 :wq コマンドを入力し、内容を保存して終了します。 &quot;:wq&quot;：保存して終了 vi コマンド まとめ vi コマンドを目的別一覧としてまとめさせていただきました。 一部コマンドの使い方例も記載しましたが、いかがでしたでしょうか。 本ブログをまとめるにあたり、久々にvi コマンドを触ってみましたが、横にコマンド集がないと結構操作ミスを起こしやすいな…と思いました。 是非本ブログをご参考いただきながら、操作ミスが起こらないようご活用いただけますと幸いです。 もし活用できそうと思った方は、ブックマークも大歓迎ですよ！ Linux の理解をより深めたい方へ以下関連おすすめブログ ・ find コマンド 【使い方 まとめ】 ・ iptables まとめ【Linux ファイアウォール】 ・ sed コマンド【使い方 まとめ】 ・ Linuxのファイル操作でよく使うLinuxコマンド ・ 初心者のためのawkコマンド ・ 実務で使える！基本的なシェル（Linux）コマンドの話 ～forとsed～ ・ 【Linux】今振り返りたい、プロセスって何？ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

6/25、26に開催された Scrum Fest Osaka 2021 にスポンサーとして参加し、弊社からは2セッション登壇させて頂きました。そのイベントレポートです。 スクラムフェス大阪 2021とは 『誰も嫌な思いをしない変化』Keynoteレポート 登壇レポート 経験ゼロからはじめる！10年以上続くプロダクトのアウトカム創出戦略 ラクスに入社8ヶ月、楽楽販売開発チームが課題ドリブンで少しずつスクラムっぽくなってきた おわりに スクラム フェス大阪 2021とは report by id:rakurakukawano www.scrumosaka.org 公式サイトには次のように書かれています。 Scrum Fest Osaka は スクラム の初心者からエキスパート、ユーザー企業から開発企業、立場の異なる様々な人々が集まる学びの場です。 スクラム を中心とした アジャイル コミュニティが集まる今年で3回目となるイベントです。今回も前回と引き続き新型コロナウィルスの影響でオンライン開催となりました。 前回はオフラインでの開催を計画していたところ急遽オンラインでの開催へと変更されましたが、さすが変化に強い アジャイル 実践者たち、ピンチをチャンスに変えてオンラインだからこそできること、ということで「大阪」と銘打っているにも関わらず、日本各地の アジャイル ／ スクラム コミュニティを巻き込んで全国規模の スクラム イベントに昇華してしまいました。今年はなんと20トラック約100セッション。まさに立場の異なる様々な人々が集まる学びの場でした。 20トラック約100セッションの一覧表 会場はオンライン上の Discord サーバとなります。チケットを購入すると Eventribe のコードがもらえるのでそれを使って Discord で受付をします。受付を済ますと今回のために用意されたカテゴリにアクセスできるようになります。セッションは Zoom で行われ、セッションによっては miro や mural などオンラインのホワイトボードを使った参加型のものもありました。そうでなくても、Zoom のチャット機能や Discord への投稿などで登壇者と気軽にコミュニケーションを取ることもできます。 会場の雰囲気やセッションの内容から、肩の力を抜いて前向きにより良くしていきたいという想いが伝わってくるイベントだったかなと感じています。 『誰も嫌な思いをしない変化』 Keynote レポート report by id:radiocat speakerdeck.com 楽天 の椎葉さんによる Keynote です。 スクラム で開発するということは変化へ適応していくことであり、それは誰かの行動を変えるということでもあります。だからとても難しいわけですが、椎葉さんが実践されてきたことをまとると次のような内容でした。 相手に期待したり、感情に踏み込むのではなく、自分自身の行動を変えることで相手の行動を引き出す 「この人のスキルがあればできるだろう」とか、「やる気を出してくれているので、きっとうまくできるだろう」のように相手側に結果を委ねる以外に、相手の行動を変化させるためにできることがあります。それは相手の行動を引き出せるように 自分の行動を変える ということです。 この話はマネジメント書などでも最近よく取り上げられる「 アドラー心理学 」や「 行動分析学 」にも通じるテーマだと思いました。そのように感じたのは私だけかもしれませんが、それくらい奥の深いテーマです。もし興味を持たれたら スクラム フェス参加者に詳細をお聞きになったうえで、以下のような情報も追いかけてみてはいかがでしょうか。 courrier.jp 行動分析学入門　――ヒトの行動の思いがけない理由 (集英社新書) 作者: 杉山尚子 集英社 Amazon さて、話を戻します。相手の行動を引き出して、「誰も嫌な思いをしない変化」を生み出すために、以下の2つのことを実践されているようです。 できていないことではなく、できていることを見る 誰もひとりにしない仕組みをつくる 2つめの「誰もひとりにしない仕組み」については、 スクラム マスターやプロダクトオーナーを孤独にしないように バディを組む体制 にしているとのことでした。たしかにこれらの役割は通常はチームに1人なので悩みを相談しづらい役割です。1人で思い悩んで立ち止まったりするよりも、バディを組むことによって互いに支え合い、学び合いながら前に進むための変化を選択する良い仕組みだと思いました。ただし スクラム の原則では スクラム マスターとプロダクトオーナーは1人となっているので、その原則に逆行したスタイルであることは理解しておくべきです。手法だけ真似すると痛い目をみそうだなと思いました。きっと、実践されているチームはずっと2人体制にしたいわけではなく、あくまで変化を起こすための手段としての選択なんだろうと思います。 前に進むための選択 プロダクト開発を少しでもうまくやりたいと思って スクラム に取り組んでも、「なんか スクラム じゃないかも？」と悩んでしまうことはよくあります。今回私たちが発表させていただいたアウトカム創造の取り組みの話（後述）も スクラム やっている話と言って良いのだろうか？という悩みの中で準備しました。私が今回の Keynote の中で最も勇気をもらえたのが次の言葉です。 ウォーターフォール の中でやっていようと、職能横断型のチームになってなかろうと、 スクラム をやろうとしていて、前に進むための選択をそのチームがし続けているんだったら、もうそれは スクラム やっていると言ってしまっていいんじゃないか このイベントに参加した私たちはそれぞれの思いで スクラム に向かって取り組んでいるはずです。その誰もが嫌な思いをせずに変化するための、支えになるメッセージでした。 登壇レポート 今回のイベントでは弊社からも2つのテーマで発表させて頂きました。その内容についてご紹介します。 経験ゼロからはじめる！10年以上続くプロダクトのアウトカム創出戦略 speakerdeck.com report by id:radiocat 今回の発表内容は昨年の スクラム フェス大阪で発表した 『スクラムちゃうがなと言われてもやってみぃひん？』 で取り組んだことの続きのエピソードです。2年前、 スクラム フェスの実行委員もされている中村洋さんと秋元さんが開催していた スクラム 相談会に参加して「単に開発スタイルを アジャイル に変えるだけではなく、ビジネスの成果を目指すのが理想」ということを学びました。 そこから1年は スクラム とは言えなくても アジャイル の原則を土台にして、少しずつ スクラム に近づいていくように取り組みました。そして、ある程度その開発スタイルがチームに馴染んできたところで、ビジネスの成果を目指すステージに向かいたいと思い始めました。そこで、チームで一番のベテランエンジニアにアウトカム創出の推進役としてプロダクトマネージャーを担当してもらい、ビジネスの成果を目指す開発スタイルに変えていきました。その2つめのステージの取り組みが今回の発表です。そこで、「これはやはり、本人の言葉で発表してもらいたい！」と思って、プロダクトマネージャーに声をかけてセッション応募しました。 ベテランエンジニアと二人三脚のチャレンジ スクラム フェスは スクラム の学びの場なので、今回のテーマはイベントが求めているテーマからは少し外れているようにも感じました。メインで発表してもらうことになったプロダクトマネージャーとも相談しながら、 スクラム に関する学びの論点と、アウトカムに取り組んだ我々の取り組み内容がうまく合わさるように、丁寧に議論を重ねながら発表内容を組み立てました。まだまだ道半ばの取り組みを発信することはやや恥ずかしさもありましたが、 スクラム を取り入れた時と同じく前へ進むための変化を起こす最初が一番大切で貴重な学びの機会だとも感じているため、今回の取り組みを発表できてよかったと思っています。また、「 スクラム 相談会で教えていただいたことを自分たちだけの学びにしない」という恩送りの意味でも、教えて頂いて一通り取り組んだ結果をアウトプットできてよかったです。 同じような課題を抱えて プロダクトマネジメント に取り組んでいる方々の参考になれば幸いです。 ラク スに入社8ヶ月、楽楽販売開発チームが課題ドリブンで少しずつ スクラム っぽくなってきた speakerdeck.com report by id:rakurakukawano マネージャーが忙しくて現場が回らないということはよくあることかと思います。 スクラム という フレームワーク には自己組織化／自己管理を促す仕組みが盛り込まれていて、 スクラム のプ ラク ティスを取り入れることで管理コストを下げるこができた事例として、楽楽販売開発課での取り組みを紹介させて頂きました。 また、 スクラム にはいろいろなプ ラク ティスが含まれていますが、それらを必要に応じて課題に合わせて少しずつ取り入れていくことで、今の業務プロセスをスクラップ＆ビルドすることなくムリせず改善していけるという事例にもなっています。 さらに、独自の切り口として、メンバーの自律を促すために『選択肢を増やす』ということにフォーカスしてまとめています。自律できないのは選択肢が限られているから。選択肢を増やすことで自律できるようになる。メンバーが自律できれば管理コストが下がるだけでなくより 有機 的でスケール可能なチーム／組織になることができる。 これらの知見が成長する組織のさらなる成長に役立ってくれたらいいなと思います。 おわりに 昨年に続き、当日はたくさんのセッションが同時進行し、イベントが終わってからもそのセッションを録画で見ることができるためボリュームたっぷりで学びの多いイベントです。有料イベントのため一般公開はされていませんが、当日の参加者と一緒に閲覧することはOKとなっているため、今後は各所のコミュニ ティー でサテライト的なイベントも開催されると思われます。ご興味がありましたら、そのようなコミュニティイベントを探して参加してみてはいかがでしょうか。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課の @t_okkan です。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在 ラク スでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕組みや利点を中心に紹介するため、実践的な話の紹介は少ないです。PostCSSの実践的な話はまた別の記事で紹介できればと思います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus.co.jp はじめに CSSのビルドプロセス PostCSS アーキテクチャ PostCSSでできること PostCSSは開発標準ツールになり得る 導入コストが非常に低い 拡張性の高い統一化されたCSSビルドツールを構築できる プラグインによって実装コストを下げられる SassなどのAltCSSの学習コストを下げられる PostCSSのデメリット・注意点 まとめ はじめに これまで ラク スでは複雑化するフロントエンドの CSS の領域において、難読化やAltCSSの導入など必要な機能を個別で追加し、都度環境を拡張していました。そこで、PostCSSなどの体系的に CSS 周りの処理を行うことができるツールを利用することで個別のツールを利用する場合と比べて、メンテナンスのしやすさ、処理の追加や削除が楽になる、といったことが期待できるのではと仮説を立てました。 PostCSSと個別のツールを用いた場合の有用性や、導入難易度を評価することで、PostCSSが開発標準ツールになり得そうかということを検証しました。 CSS のビルドプロセス PostCSSの評価を行う前に、 CSS のビルドプロセスについて整理します。 CSS のビルドプロセスは以下の図のように分解することができるかと思います。 設計・実装：PRE_ CSS やSMACSSなどの CSS の設計手法を用いて実装を行う。 静的解析： stylelintなどを用い実装された CSS ファイルの静的解析を行う。 プリプロセッサ ：SassやLESSなどの プリプロセッサ でAltCSSをPureな CSS に変換する。 ポストプロセッサ：Autoprefixerやmifierを実行しデプロイ用の CSS ファイルを生成する。 個別のツールを利用する場合、 CSS のビルドプロセスの各フェーズで独立してツールの実行を行う必要があり、ツールを追加するごとにビルドの手順が増えることになります。 では、PostCSSを導入することで CSS ビルドプロセスにどのような変化が起きるのかを解説します。 PostCSS CSS ビルドプロセスの静的解析から プリプロセッサ 、ポストプロセッサまでの様々な処理を実行する OSS になります。300を超える プラグイン が存在し、様々な CSS の処理を実行できます。 プラグイン を組み合わせて CSS ビルドツールを自作するイメージです。PostCSS本体と プラグイン は JavaScript で実装されておりNode.jsの環境で実行することが可能です。 PostCSSが開発された背景としては、SassやLessなどの独自構文を使用せずに、 W3C で策定中の次世代 CSS 構文で CSS の実装を統一したいという思いから開発されました。そのため JavaScript 界隈でCofeeScriptをやめてbabelに移行したことと似ています。PostCSSは OSS として開発されており、tailwindcssがスポンサーとして投資しています。 アーキテクチャ PostCSSの アーキテクチャ は以下のようになります。 PostCSS GitHubから参照 入力 CSS ：開発者が実装した CSS 。AltCSSでもPureな CSS でも可能です。 Parser：入力 CSS を解析し抽象構文記（AST）を構築する。 Plugin：Parserで生成したASTに対して プラグイン で CSS の処理を実行する。 Stringifier： プラグイン で変更されたASTをトランスパイルして CSS を出力する。 PostCSSの アーキテクチャ は非常にシンプルで、 プラグイン を利用しない場合には入力の CSS がそのまま出力の CSS として出力される。そのため、PostCSSを理解するためにはPostCSSの プラグイン を理解する必要があると言い換えることができると思います。 PostCSSでできること PostCSSを導入することで下図のように CSS のビルドプロセスの静的解析からポストプロセッサまでの様々な処理を実行できます。 PostCSSには300を超える プラグイン が提供されており様々な処理を実行することができます。各ビルドプロセスでPostCSSができることとして、以下のようなことがあげられます。 静的解析 Linterを利用して CSS ファイルのフォーマットを整える Can I use を利用して、利用ブラウザ環境での CSS プロパティの対応状況の調査 プリプロセッサ AltCSS（Sass、LESS、SCSS）の構文を解釈して CSS に コンパイル できる Sassなどを利用せずに プラグイン を利用して独自のAltCSSを構築できる W3C で仕様策定中の次世代 CSS 構文を利用ブラウザ環境で解釈できるようにトランスパイルできる ポストプロセッサ ベンダー プレフィックス などのコード自動生成や CSS ファイルの圧縮 利用ブラウザ環境への CSS プロパティの最適化や本番環境へのデプロイ作業の自動化 PostCSSの説明は以上になります。これらの情報をもとに様々な環境でPostCSSを導入・検証することで、PostCSSは開発標準ツールになり得ると判断しました。次の章ではそう判断した理由について説明します。 PostCSSは開発標準ツールになり得る PostCSSを調査・検証することで以下のようなことがわかり、フロントエンド CSS 領域の開発標準ツールになり得ると判断しました。 導入コストが非常に低い 拡張性の高い統一化された CSS ビルドツールを構築できる CSS のビルドプロセスを自動化し実装コストを下げられる SassなどのAltCSSの学習コストを下げられる それでは一つずつ解説していきます。 導入コストが非常に低い フロントエンドの開発に欠かせないバンドラーやタ スクラン ナーへのPostCSSの導入コストを検証しました。 導入先のツール 導入に必要なライブラリ 導入方法 Gulp gulp-postcss ・gulp-postcssを導入してPostCSSの プラグイン を実行するパイプラインを追加します。 ・ 導入参考資料 webpack postcss-loader ・postcss-loaderを導入しstyle-loaderや css -loaderの前に実行します。 ・ 導入参考資料 Storybook @storybook/addon-postcss ・addon-postcssをStorybookのaddonに追加します。 ・ 導入参考資料 vue-loader なし ・ロードされる CSS は全てPostCSSを通過する仕組みになっている。 ・プロジェクトのルート ディレクト リにPostCSSの設定ファイルである postcss.config.js を追加します。 ・ 導入参考資料 vite なし ・VueやReactのファイルにインポートされている CSS は全てPostCSSを通過する仕組みになっている。 ・プロジェクトのルート ディレクト リにPostCSSの設定ファイルである postcss.config.js を追加します。 ・ 導入参考資料 どの環境でも基本的にはライブラリやアドオンを追加するのみで導入できるため、導入コストが低く汎用性が高いツールであることがわかりました。また、vue-loaderやviteには内部的にPostCSSを実行する仕組みになっており、フロントエンドの必須の開発ツールになりつつあることがわかりました。 拡張性の高い統一化された CSS ビルドツールを構築できる PostCSSの紹介でもふれた通り、豊富な プラグイン を利用することで CSS のビルドプロセスの静的解析〜ポストプロセッサまでの様々な処理を実行するビルドツールを構築できます。 各プロセスで有効な プラグイン を以下に紹介します。 プラグイン プロセス 概要 stylelint 静的解析 ・eslintやtslintと同様な CSS のLinter ・次世代 CSS 構文やAltCSSの解析も可能 である。 ・ CSS 構文エラーやコーディングスタイル違反の発見、スタイルの自動修正が可能である。 doiuse 静的解析 ・Can I useを利用して CSS プロパティのブラウザサポートをチェックする。 ・ CSS プロパティのブラウザ未対応によるスタイル崩れを防止する。 postcss-sass プリプロセッサ ・DartSass構文を解釈し CSS 構文に変換する プラグイン ・PostCSSでSassを変換できるため、Sassの環境構築が不要になる。 ・LibSassは postcss-node-sass を利用する。 postcss-preset-env プリプロセッサ ・ cssdb を参照して W3C で仕様策定中の次世代 CSS 構文をトランスパイルする。 ・元々次世代 CSS 構文を変換していた cssnext の後継である。 ・ JavaScript 界隈の babel-preset-env の CSS 版のような位置付け。 autoprefixer ポストプロセッサ ・Can I useを参照し CSS プロパティに自動でベンダー プレフィックス を付与する。 ・フロントエンド開発ではほぼ必須となっている プラグイン 。 cssnano ポストプロセッサ ・本番環境にデプロイする CSS ファイルを可能な限り圧縮する。 ・ CSS 構文を理解して最適化してから圧縮を行うことができる。 これらの プラグイン を用いることで、拡張性の高い CSS ビルドツールを構築できます。 PostCSSは設定ファイルの postcss.config.js で プラグイン を管理しており、 プラグイン の追加や削除がしやすく プラグイン の実行順をカスタマイズできます。そのため、静的解析を好きなタイミングで実行できます。例えば、ポストプロセッサの プラグイン を実行しデプロイ用の CSS ファイルを生成した後、 doiuse を実行することでブラウザ利用環境での CSS プロパティの最適化をチェックすることができます。 また、PostCSSによって CSS のビルドプロセスを統一化できるため、フロントエンド開発環境の アーキテクチャ 変更による CSS への影響を最小限に抑えることができます。例えばバンドラーをwebpackからviteに移行しようとした場合、どちらの環境でもPostCSSを実行できるため設定ファイルであるpostcss.config.jsがあれば簡単に移行できます。 プラグイン によって実装コストを下げられる これまでに紹介した プラグイン を用いることで CSS のビルドプロセスの処理を自動化できます。 例えば、 doiuse や autoprefixer を利用することでブラウザ利用環境に合わせた CSS の開発コストを低くできます。 autoprefixer によりベンダー プレフィックス を自動付与することができ、実装コストを下げることができます。 doiuse でデプロイ用の CSS がブラウザ利用環境に最適化されているかをチェックできるので、各ブラウザでの表示崩れを未然に防ぐことができます。 その他にも、 postcss-cachebuster を利用することで画像URLのcacheを防ぐクエリストリングを自動で付与できることや、 postcss-purgecss でHTMLファイルから参照されていない CSS を出力 CSS ファイルから削除できます。 SassなどのAltCSSの学習コストを下げられる PostCSSには プリプロセッサ の機能を提供する プラグイン が多数存在します。これらの プラグイン を組み合わせることで、Sassを利用せずにSassのように CSS 構文を拡張し独自のAltCSSを構築できます。必要な構文のみを プラグイン として追加できるので、Sassの学習コストを下げることができます。 以下はSassの構文とPostCSSの プラグイン の対応表になります。 Sass文法 PostCSS プラグイン 変数 postcss-custom-properties postcss-simple-vars 演算子 postcss-calc ネスト・親 セレクタ (&amp;) postcss-nesting postcss-nested Mixin postcss-mixins 関数 postcss-define-function 色関数 postcss-color-function インポート postcss-import 拡張（extend） postcss-extend 制御構文（if, for） postcss-for postcss-conditionals PostCSSのデメリット・注意点 ここまでPostCSSのいいところを紹介してきましたが、実際に触れることでデメリットや注意点がわかりました。主に以下の3点が上げられるかと思います。 プラグイン の選定コストが高い 300以上の プラグイン が存在するため初回リリースからメンテナンスされていない プラグイン も存在します。またジョーク プラグイン も存在します。 プラグイン にバグが見つかった場合、修正されない可能性もあります。そのため、 GitHub star数が多いこと、リリースサイクルが安定していること、他社の導入事例があること、などを判断軸として プラグイン を選定する必要があるかと思います。 プラグイン の管理に注意が必要 プラグイン の実行順によってはエラーが発生したり、 CSS を変換されなくなることがあります。特にPostCSSで独自のAltCSSを構築する場合は プラグイン の実行順に注意が必要です。（importを先に実行するなど）そのため、拡張する構文が多い場合はPostCSSでAltCSSを構築するのではなく、Sassを利用することをお勧めします。 オレオレ CSS になり学習コストが高くなる PostCSSで独自のAltCSSを構築する場合、 CSS 拡張構文の プラグイン を導入しすぎるとその環境に依存したオレオレ CSS となり学習コストが高くなります。 プラグイン の管理のデメリットと同様に、拡張する構文が多い場合はPostCSSでAltCSSを構築するのではなく、Sassを利用することをお勧めします。 特に プリプロセッサ をどうすかがPostCSSを導入する際のポイントになるかと思います。判断軸の例としては、小規模なプロジェクトや モックアップ などであればPostCSSの構文拡張 プラグイン で独自のAltCSSを構築し、学習コストを抑えて開発を行う。中規模、大規模なプロジェクトであれば、Sass（SCSS）で CSS を実装しPostCSSの プラグイン で コンパイル を行う、のような判断ができるかと思います。 まとめ PostCSSの有用性を検証し、PostCSSは開発の標準ツールになり得るという結果になりました。 豊富な プラグイン で CSS のビルドプロセスの様々な処理を実行、自動化できます。 実はPostCSSは既に多くに環境で利用されています。 autoprefixer を利用する場合に依存関係としてプロジェクトに取り込まれています。もしかするとPostCSSを導入するというよりは、活用していくという表現の方が良いのかもしれません。 また、 vue-loader や vite といったバンドラーには内部的に CSS に対してPostCSSの処理を通過させる仕組みになっています。フロントエンド開発において必須のツールになりつつあるのではないかと思います。 是非一度、開発している環境を確かめてPostCSSを導入できるか、もしくはPostCSSをもっと活用できないかを考えてみてください。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 技術広報の yayawowo です。 突然ですが、皆様はパソコンをする際に「マウス」と「キーボード」、どちらを使うことが多いでしょうか。 私は、業務効率を格段に上げることができる「キーボード」操作を多く使っています。 そこで今回は、「キーボード」操作を使い業務効率を上げるために欠かせない 「ショートカットキー」を目的別に一覧化 しました。 数あるパソコンの中でも「ショートカットキー」が100個以上存在する Mac に特化してご説明します。 是非、パソコン作業を快適にするためにも本ブログをブックマークするなどして、是非ご参考ください。 目次 はじめに 目次 ショートカットキーとは Mac ショートカットキー一覧 修飾キー Mac ショートカットキーの基本操作 アプリ共通 Finder操作 書類操作 アプリ・ウィンドウ（画面）の切替操作 ブラウザ操作 アクセシビリティオプション操作 Mac ショートカットキー一覧のまとめ 参考サイト ショートカットキーとは ショートカットキーは、 Windows や Mac などの機能を、キーボードを使って簡単・効率的にパソコンの操作をするための機能のことです。ショートカットキーを覚えると、マウスを使う手間がなくなるため、文章を編集する際の効率が大幅にアップします。 Mac ショートカットキー一覧 前述にもありますが、 Mac のショートカットキーは、全部記載すると100個以上あるため、今回は目的別にまとめました。 修飾キー Mac のショートカットキーを使うにあたり、まずは修飾キーを覚えましょう。 以下の画像内に示している赤枠箇所と Mac キーボードとで、実際に確認してみてください。 ⌘ …command（コマンドキー） ⇧ … shift（シフトキー） ⌥ … option（オプションキー） ⌃ … control（コン トロール キー） ⇪ … caps lock（キャプスロックキー） では、次からは目的別にショートカットキーを解説します。 Mac ショートカットキーの基本操作 基本操作では、 Mac を使う上で覚えておきたい必須のショートカットキーを解説します。 Mac のキーボード左下にある「 ⌘ …command（コマンドキー） 」は、よく利用する修飾キーのため、操作感を覚えてしまいましょう。 ショートカットキー 説明 command + C コピー・複製する command + X 切り取り・カットする command + V ペースト・貼り付けする command + Z 操作の取り消し command + A 全選択する command + F 検索する command + P 選択した書類をプリントする command + T 新しいタブを開く テキストだけでなく、画像のコピーや貼り付けも上記ショートカットキーで業務効率を格段と上げることができます。 「command + C」の場合、親指を使って瞬時にコピー操作ができています。 アプリ共通 Mac に様々なアプリを導入しているかと思いますが、以下のショートカットキーはどのアプリにも共通して利用できます。 ファイル保存ができる「command + S」は、絶対覚えておいて損がないショートカットキーです。 ショートカットキー 説明 command + N 新規に作成する・新しいウィンドウを開く command + O ファイルを開く command + W ウィンドウ、タブを閉じる command + S 選択した書類を保存する command ＋ shift ＋ S 別名で保存する command + P 印刷する command + Q アプリを終了する Finder操作 Mac の書類、メディア、フォルダ、その他のファイルを探し、整理するために作成されたアプリがFinderです。 Finderを利用する上で、便利な Mac ショートカットキーをまとめました。 是非ご活用ください。 ショートカットキー 説明 command + D 選択したファイルを複製する command + I 選択したファイルの情報を確認する command + shift + C 「コンピュータ」ウィンドウを開く command + shift + D 「デスクトップ」フォルダを開く command + shift + G 「フォルダへ移動」ウィンドウを開く command + shift + K 「ネットワーク」ウィンドウを開く command + option + L 「ダウンロード」フォルダを開く command + shift + N 新規フォルダを作成する command + shift + O 「書類」フォルダを開く command + delete 選択したファイルをゴミ箱に捨てる command + shift + delete 確認ダイアログを表示し、ゴミ箱を空にする command ＋ option ＋ shift ＋ delete 確認ダイアログを表示せず、ゴミ箱を空にする command + スペース スポットライト検索をする command + shift + 3 全画面の スクリーンショット を撮影 command + shift + 4 選択範囲の スクリーンショット を撮影 command + shift + 4 + スペース ウィンドウ単位の スクリーンショット を撮影 書類操作 次は、書類に関する Mac のショートカットキーについてご説明しますが、利用するAppによってはショートカットキーが使えない場合があります。 その点注意していただき、ご利用いただけますと幸いです。 ショートカットキー 説明 command + B 選択したテキストを太字にする command + I 選択したテキストを斜体にする command + K Webリンクを追加する command + U 選択したテキストに下線をひく command + セミ コロン (;) 書類内でスペルに誤りのある単語を検索する option + delete 挿入ポイントの左側にある単語を削除する fn + 上矢印 1 ページ分上に移動する fn + 下矢印 1 ページ分下に移動する fn + 左矢印 書類の先頭に移動する fn + 右矢印 書類の末尾に移動する F7 文字をカタカナに変換する F8 文字を半角カタカナに変換する F9 文字を全角英数字にする F10 文字を半角英数字にする アプリ・ウィンドウ（画面）の切替操作 Mac のショートカットキーは、テキストや書籍だけでなく、ウィンドウの切替操作もできます。 日頃よく利用しているショートカットキーを以下にまとめさせていただきました。 ショートカットキー 説明 command + tab アプリケーションを切り替える command ＋ Q アプリケーションを終了する command ＋ option ＋ esc アプリケーションを強制終了する command + H 最前面のウィンドウを非表示にする command + M 最前面のウィンドウを最小化し、Dockにしまう command ＋ W 最前面のウィンドウを閉じる command ＋ option ＋ W 全ウインドウを閉じる ブラウザ操作 続いて、 Mac のショートカットキーを使ったブラウザ操作です。 ブラウザは、 Safari ・ Chrome ・ Firefox ・ Microsoft Edge などをご利用しているかと思います。 ブラウザを使う上で便利なショートカットキーは以下になりますので、ご参考ください。 ショートカットキー 説明 command ＋ R ページを更新または再読み込みする command ＋ N 新規ウィンドウでタブを開く command ＋ T 新規タブを開く command ＋ shift ＋ T 閉じたタブを再度開く command ＋ ← 前ページに戻る command ＋ ↑ ページに一番上に移動する command ＋ ↓ ページに一番下に移動する command ＋ ＋ 表示を拡大する command ＋ − 表示を縮小する command ＋ 0（ゼロ） 表示を実際のサイズに戻す command ＋ D 現在のページをブックマークに追加する アクセシビリティ オプション操作 Mac のショートカットキーを使って、 アクセシビリティ オプション操作をしてみます。 また、本操作は Siriに頼む こともできますので、お好みでご活用ください。 ショートカットキー 説明 option + command + 8 ズーム機能のオンとオフを切り替える option + command + プラス記号 (+) 拡大する option + command + マイナス記号 (-) 縮小する control + option + command + カンマ (,) コントラ ストを下げる control + option + command + ピリオド (.) コントラ ストを上げる Mac ショートカットキー一覧のまとめ 数あるショートカットキーの中でも、今回は Mac のショートカットキーを目的別にまとめましたがいかがでしたでしょうか。 今回初めて知ったというショートカットキーもあれば、元々知っていたショートカットキーもあったかもしれません。 また、今回記載していなかったショートカットキーも多くありますので、 Apple の公式サイトをご確認ください。 最後になりますが、本ブログが Mac を日常お使いの方にとっての一助になれば、幸いです。 参考サイト Mac のキーボードショートカット support.apple.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに こんにちは、フロントエンドチームのta_kameです。 私がSassを使い始めた頃、Sassに種類があるなんてことは全く知らず、その上多くの人に使われているはずのLibSassが非推奨になるなんて思ってもみませんでした。私自身知らずのうちに使っていて、結構最近になってから Dart Sassを覚えたのですが、今回はそのことについてまとめてみようと思います。同様にLibSassを扱っている方も含めて、今回はSassについて知っている人も知らない人も、少しでも参考になれば幸いです。 目次 はじめに 目次 Sassとは CSSとの互換性について Sassの記法について SCSS記法 SASS記法 Sassの種類 Ruby Sass LibSass Dart Sass LibSassとDart Sassの違い @import廃止 @use @forward おわりに 参考 Sassとは Sassとは（Syntactically Awesome Stylesheets）の略で CSS の メタ言語 です。 メタ言語 とは、言語に対して特定のルールを加えることで具体的な応用として利用可能なものにした言語のことを指します。簡単に言うと「 CSS にルールを追加して便利なものにした」言語がSassです。実際に使う時は、Sassのファイルを コンパイル （変換）した CSS ファイルを、HTMLファイルから読み込むようにします。 CSS との互換性について Sassと CSS は互換性があります。互換性があるとはどういう意味かというと、 CSS の記述をSassのファイルにそのまま書いても動作が保証されていることを指します。例えば今 CSS ファイルが手元にあったとして、そのコードをコピーしてSassのファイルにペーストしても問題ないということになります。このことからSsssの導入ハードルは非常に低いと言えます。 Sassには多くの機能が実装されていますが、もしも現在のプロダクトにSassを導入したいと考えた場合、全ての機能を使いこなすことができなくとも、変数、関数、継承など、好きな機能だけを追加するといった形で、Sassの機能を小規模から利用することができます。 Sassの記法について Sassには2種類の記法があります。しかし現在ではSCSS記法が主流となっています。「Sass（サス）だけど、記法についてはSASS（サス）ではなくSCSS（ エス シー エス エス ）」と少々混乱しそうですが、何はともあれ記法の違いを説明しておきます。 SCSS記法 ファイルの拡張子は.scssです。HTMLのようなツリー構造を CSS でも使えるようにしたのがSCSS記法です。 SCSS div { background: #eee; p { background:#fff; } } CSS div { background: #eee; } div p { background: #fff; } SASS記法 ファイルの拡張子は.sassです。{}や;を記述しないことでコーディング速度が上がり、便利そう…と思いきや、 CSS との互換性がないこと等の理由からSASS記法は浸透しませんでした。 SASS div background: #eee p background:#fff CSS div { background: #eee; } div p { background: #fff; } Sassの種類 再度わかりにくくなってしまうのですが、Sassには実装している言語によって３つに分かれます。しかしながら公式が推奨しているのは Dart Sassですので、今後新規で扱う場合や、また現在LibSassを扱っている場合も Dart Sassについて知っておいた方がよいかもしれません。 Ruby Sass Ruby で開発された最初に実装されたSassです。2019年3月26日にサポートが終了しました。 LibSass C/C++ で開発されたSassです。Node.js向けのnode-sassとして現在最も使われているライブラリです。しかし、開発において次第に Dart Sassに遅れを取っていき、現在では非推奨となっています。 Dart Sass Dart で開発された現在公式が推奨しているSassです。新しい機能はLibSassより先に Dart Sassに実装されます。 LibSassと Dart Sassの違い 前述した通り、LibSassは非推奨となっています。それでは実際にLibSassと Dart Sassで何が違うのか…主な項目として@useと@forwardがあげられます。 @import廃止 @useと@forwadの説明の前に@importについて説明します。Sassにおいて最初に実装された機能の一つである@importですが、インポートされている変数や関数の定義が最初にどこで定義されているのか、場所を特定するのが難しい、 CSS の@importと重複し意図しない副作用が発生してしまうなど、@importによる問題を何年も前から開発は認識しており、それは先にあげたような多くの問題を引き起こしていました。そのため@importは廃止されることが予定されています。 @use Dart Sassでは@importの代わりに@useを使用することになります。しかしながら@importを@useに単純に書き換えるだけではありません。 LibSass @import &#34;./variables”; p { color:$color-txt; } Dart Sass @use &#34;./variables”; p { color:variables.$color-txt; } @useに置き換えた場合、 名前空間 が発生するため、variables.$color-txtと記述しなければなりません。 名前空間 はas説によって変更することができます。 @use &#34;./variables” as var; p { color:var.$color-txt; } as *と記述すると、LibSassの書き方に近い形で記述ができます。しかし、ファイル内で名前が重複するとエラーになるので注意して下さい。 @use &#34;./variables” as *; p { color:$color-txt; } また、例えばstyle.scssで下記のように全てのscssファイルを読み込んで使用していた場合も注意が必要です。 style.scss @import &#34;variables” @import &#34;mixin” @import &#34;base” @import &#34;layout” @import &#34;component” @import &#34;utility” 上記の例でいうと、LibSassではvariablesやmixinで定義した変数や関数をその後のcomponentで使うことができましたが、 Dart Sassではできないので、全てのファイルで@useする必要があります。 @forward 似たような理由で、次のパターンもエラーとなります。 ×　 ファイルAで変数を定義 　> ファイルBでファイルAを@use 　> ファイルCでファイルBを@useしてファイルAの変数を使う LibSassでは下記の書き方で問題ありませんでした。 variables.scss $primary-color: #f28828; base.scss @import &#34;variables&#34; page.scss @import &#34;base&#34; p { color:$primary-color; } Dart Sassでは下記のように@forwardしたsassファイルを@useすることで利用できるようになります。 variables.scss $primary-color: #f28828; base.scss @forward &#34;variables” page.scss @use &#34;base&#34; p { color:base.$primary-color; } おわりに 今回はSassについての紹介や、 Dart Sassへの移行のポイントについて紹介しました。 紹介した内容以外でもwith節やshow節、map-getの書き方についてなど、他にも機能や注意すべき点があるので、興味のある方は調べてみて下さい。 参考 Sass: The Module System is Launched Sass&#x3092;@import&#x304B;&#x3089;@use&#x306B;&#x7F6E;&#x304D;&#x63DB;&#x3048;&#x308B;&#x305F;&#x3081;&#x306E;&#x624B;&#x5F15;&#x304D; | Web Design KOJIKA17 Sass&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x3092;@import&#x304B;&#x3089;@use&#x306B;&#x79FB;&#x884C;&#x3059;&#x308B;&#x65B9;&#x6CD5;&#x3092;&#x8003;&#x3048;&#x3066;&#x307F;&#x305F; | Rriver Sass&#x306E;&#x65B0;&#x3057;&#x3044;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30B7;&#x30B9;&#x30C6;&#x30E0; - &#x30B7;&#x30D5;&#x30C8;&#x30D6;&#x30EC;&#x30A4;&#x30F3;&#xFF0F;&#x30B9;&#x30BF;&#x30F3;&#x30C0;&#x30FC;&#x30C9;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x30E6;&#x30CB;&#x30C3;&#x30C8; Dart Sass&#x3001;&#x4F7F;&#x3063;&#x3066;&#x308B;&#xFF1F;Prepros&#x3092;&#x4F7F;&#x3048;&#x3070;&#x30B3;&#x30F3;&#x30D1;&#x30A4;&#x30EB;&#x3082;&#x697D;&#x52DD;&#xFF01; | Web&#x30AF;&#x30EA;&#x30A8;&#x30A4;&#x30BF;&#x30FC;&#x30DC;&#x30C3;&#x30AF;&#x30B9; エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは技術広報の syoneshin です。 今回は当社の開発メンバー達に聞いた おすすめの『 エンジニアの勉強法 』を中心に 現役エンジニアにも役立つ勉強法をいくつかご紹介します。 自主的な勉強の状況 平均的な勉強時間 エンジニアのおすすめ勉強法 勉強するハードルを下げる 読書を活用した勉強法 動画を活用した勉強法 まず手を動かす アウトプットする 新しい情報の収集 さいごに 自主的な勉強の状況 これからエンジニアを目指す方も含めて、現役エンジニアの多くが自主的な勉強に取り組んでいます。 技術環境の変化も速い中、エンジニアとしての価値を高めるには、新しい技術と情報を身につける必要があり、勉強を継続する事はとても重要です。 IPA 発行の「 IT人材白書2020 」のアンケートによると 先端IT従事者(データサイエンス、AI、IoT、 アジャイル 開発／DevOpsなどの領域従事者)の 7割以上 が「業務外（職場以外）でも勉強する」と回答しており、先端IT領域に関わる人達ほど、自主的な勉強に取り組んでいると言えます。 スキルアップ の自己負担額についてみると 先端IT従事者の6割以上が スキルアップ のための自己負担をし、月における自己負担額の平均値は1人あたり 12,780円 となっております。 また、同アンケートでは「ITやデジタル関連の スキルアップ に向けた勉強に関する課題」も尋ねられており、先端IT従事者で最も多かった回答は「業務が忙しく、勉強時間が確保できない」となっております。 同じような課題を抱えるエンジニアにとって、勉強時間の捻出と効率的な勉強方法の実践は、重要なテーマと言えそうです。 平均的な勉強時間 IT人材白書2020のアンケートでは、先端IT従事者の週当たりの勉強時間は「 1～2時間未満 」が最も多く 18.2% となっており、平均値で見ると、一人あたり 週2.7時間 は勉強しているようです。 また 2017年に 経済産業省 が行った「 IT関連産業の給与等に関する 実態調査結果 」 によると、エンジニアとしてのスキル標準レベルと年収が高い人ほど、残業が多く、忙しいことが分かります。 しかし、忙しくても勉強時間は多いという事も分かります。 スキル標準レベルが最も高いエンジニアは 毎月36.5時間の残業 をしながら、 毎週 4.3時間の勉強 をしており、レベルの高いエンジニアほど、総じてよく勉強していると言えます。 ※スキル標準レベル補足 レベル5・・・社内での指導者・幹部レベル レベル6・・・国内で著名なレベル レベル7・・・国際的に著名なレベル エンジニアのおすすめ勉強法 ここからは当社のエンジニア達に聞いた勉強法を中心に紹介します。 勉強するハードルを下げる 何事も、はじめの一歩は長いですが、手を付けてしまえば進むことが多く、とりかかりのハードルを下げることは勉強を習慣化する上でも重要です。 勉強することを習慣化できていないうちは、特定の環境でしかできない勉強方法より、どんな状況や環境でも継続できる勉強方法からはじめることをおすすめします。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「ハードルを考えず、勉強会に申し込む」 最近の勉強会はオンライン開催が一般的で、気が乗らなければ当日キャンセルOK、またちょっと参加して面白くなければ途中退出もOKなので、細かいことは考えずに勉強会に申し込んでみることはおススメです。個人的に実践してみて、参加した勉強会に最低でも学びが1つ以上ある事に気づけ、勉強するモチベーション維持にもつながっています！ ●当社エンジニアの事例「環境を変えて、勉強のハードルを下げる」 私の勉強方法はアウトプットを意識して、「 はてなブログ 」を定期的に書くことです。以前はブログを書く際、管理画面に都度アクセスするのが面倒でブログを書く前に挫折してました。そこでブログを書くまでのハードルとなっている環境を変えようと、PCを起動したらエディタを自動で起動し、かつローカル環境でもブログが書けるようなシステムを作りました。これによって私はブログを書く事のハードルが下がったことを実感でき、継続してアウトプットに取り組めるようになりました。皆さんもそれぞれに合わせて、まずはとりかかりやすい環境をつくる事をおすすめしたいです！ 読書を活用した勉強法 書籍は版元や著者によって情報の信頼性を担保された媒体で、専門書籍の多くは知識を体系的にまとめて書かれているため、読書は体系的な知識や情報の取得に適しています。 また最近は、 電子書籍 やオーディオブックで多くの書籍が取り込まれており、デ バイス さえあれば場所を問わず勉強できる環境も整ってきております。 当社エンジニア達がおすすめする勉強法では読書の事例が多く挙がっており、以下にいくつかの事例を紹介します。 ●当社エンジニアの事例「読書会で勉強する」 本の要約＋自分が要約した内容を他の人に説明することで理解が更に深まります。 「ラーニングピラミッド」などではアウトプットすることで学習内容の定着がより高まると言われています。 自分が主催した読書会は、読書箇所を他の人に説明する形式で行っており、自分はもちろん読書はサボれず、人に説明することの学習効果も実感できたため、読書会を活用した勉強方法はおすすめできます。 ●当社エンジニアの事例「図書館を活用する」 私たちエンジニアが参照する技術書をはじめとする専門書籍は値段の高いものが多いため、買うのを躊躇うことがあります。しかし図書館には読みたい書籍がある事も意外に多く、最近はＷＥＢ予約も充実しているので、読みたい書籍を無料で学習・勉強するには図書館活用はおすすめです。 ●当社エンジニアの事例「 電子書籍 を活用する」 電子書籍 はハイライトを引いた箇所を参照する機能や単語帳機能もあるので、思い出したい時や調べたい時にはすぐに確認ができる点が便利で、知識の定着には効果を感じているため、 電子書籍 での読書は勉強方法としておすすめです。 ●当社エンジニアの事例「読書にAudibleや読み上げ機能を活用」 本を読むのがツライときは、Audibleや読み上げ機能を使って聞くようにしています。 私は他の作業をしながら聞くことが多いのですが、そんな中でも印象に残る箇所は最低限おさえる事ができるため、おすすめしたいです。 動画を活用した勉強法 動画学習はテレビ・ビデオ教材からe-learnigが一般的となり、現在は YouTube や SNS でも学習用の動画コンテンツが増え、誰でも気軽に動画で勉強できる機会が増えてきました。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「Udemyなど動画で勉強する」 疲れている時でも、動画なら理解がしやすく、動画と一緒に実装を進めていける点で動画学習は優れていると思いました。 読書や講習より動画の方が勉強しやすいという人に向けて、今後は誰でも気軽に利用できる環境でエンジニア向けの学習動画コンテンツが充実してくる事を期待したいですね。 まず手を動かす エンジニアは目の前のシステムを動かすことが仕事で、システムを動かすには、まず触って手を動かすことがとても重要です。エンジニアの中には、体系的な知識を学ぶ勉強よりも手を動かすことをすすめる人もいます。当社のエンジニ アメンバー 達も「まず手を動かす」ことをすすめる事例が多く挙がり、「まず手を動かす」ことはおすすめの勉強法です。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「 チュートリアル をやってみる」 チュートリアル は一番手っ取り早く手を動かせ実行結果も見れるため、公式の チュートリアル をやってみる事はおすすめです。 チュートリアル だけだと定着しないこともあるので、 チュートリアル 完走後にボタン1つでも機能追加するなど、不具合が起きない程度に手を加える事で ソースコード が読めるようになり、知識の定着にはさらによいと思います。 ●当社エンジニアの事例「写経の後、ひたすらアレンジ」 写経(サンプルコードになぞって書く)だけだと、定着せずに終わってしまうこともあるため、自分のコードでひたすらアウトプットする。アウトプットする頃になるとだいたいどこかで詰まってしまい、それらを乗り越えて自分のやりたいようにアウトプットできるようになれば、初めて新しいネタをある程度習得できた状態になるので、継続はとても重要です。 ●当社エンジニアの事例「freecodecampで技術勉強」 Progateと同じようなプログラミング学習サイトfreecodecampでは、6000以上の チュートリアル （すべて無料）が勉強しながら試せるため、フロントエンドからバックエンドまで幅広いカリキュラムから技術力を高めるのにとてもおススメです。 その他、当社エンジニアの事例としては「自作の アプリ開発 をしてみる」「コーディングスキルを向上のため、CodinGameを利用してみる」「 オープンソース を構築してみる」「気になる技術や フレームワーク 、ライブラリを最小構成で使ってみる」などなど、とにかく手を動かすことで勉強する方法をおすすめする声が多かったです。 アウトプットする ベストセラーとなった「アウトプット大全」 https://honto.jp/netstore/pd-book_29100397.html の書籍で紹介された、 コロンビア大学 の実験結果によると、最も効果的な学びができるインプットとアウトプットの 黄金比 は、インプット３割：アウトプット７割だったとの事です。 アウトプットは「書く」と「喋る」の2つに分解でき、エンジニアのケースにおいて、アウトプットは以下のような内容で2分類できるのではないでしょうか。 「書く」アウトプット 仕様書/設計書/プログラムを書く プレゼン資料/Qiita/ブログ/noteを書く 技術論文/技術書/技術系同人誌を書く 「喋る」アウトプット 会議/ミーティング/1on1で喋る LT(ライトニング トーク )で喋る 講演/登壇で喋る インプットで余裕ができた方や、インプットでの勉強が停滞してきた方は、是非アウトプットすることにも挑戦してみて下さい。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「登壇駆動学習」 LT登壇や勉強会で発言することを決めると、インプットとアウトプットが強制されるため、勉強や学習にとても効果的です。 当社 ラク スではLT会など毎週技術イベントを開催しておりますので、アウトプットの機会としてもぜひ活用いただけると幸いです！ 新しい情報の収集 その他、新しい情報収集する事も勉強法の一つとして、以下のような方法も参考に下さい。 公式ドキュメントをみる OSS にかかる最新情報はやはり フレームワーク やライブラリ、言語について、その公式組織が出している文書(公式ドキュメント)をみるにつきます。実装にかかわる OSS のISSUEやPull Requestの現状や今後の状況など1次情報を知ることで、情報の鮮度と正確性が高まります。 勉強会に参加する 勉強会やLT会で紹介される内容の多くは汎用的な例ですが、知らない知識の概要を得たり、参加や発表をするエンジニア達の考えを通した二次情報に触れるにはよい機会です。 Twitter をフォローする 有名エンジニアや インフルエンサー 、気になるカンファレンスや勉強会をフォローするだけで、技術情報を集める事ができます。 GitHub をチェックする GitHub にはどんなプロダクトが開発されているか、スターの多いプロダクトは何かなど、トレンドを見ることができ、技術動向のトレンドが何かを知るにはよい情報ソースだと思います。 プログラミングゲームで学ぶ 最近はプログラミングゲームも充実しておりますので、新しい開発言語を学ぶのにゲームアプリを利用してみることもおすすめします。 プログラミングゲームについての詳しい記事は以下 tech-blog.rakus.co.jp YouTube で学ぶ YouTube にもエンジニア向けコンテンツが充実し始めており、今後益々コンテンツも利用者も増えていきそうですので、チェックをおすすめします。 プログラミングゲームについての詳しい記事は以下 tech-blog.rakus.co.jp さいごに 当社エンジニ アメンバー 達がおすすめする「エンジニアの勉強法」はいかがだったでしょうか？ 本ブログが、エンジニアの勉強法を知りたいという方の一助になれば、幸いです。 当社が開催した「エンジニアの勉強法」イベントで発表された内容をまとめた記事もご覧ください。 tech-blog.rakus.co.jp また当社は「エンジニアの勉強法」について定期的にイベント開催しておりますので、お気軽にご参加下さい！ rakus.connpass.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com