はじめに こんにちは。楽楽精算開発チームの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

はじめに 技術広報のyayawowoです。 Webサイトを作成する上で欠かせないのがHTMLのスキルです。 エンジニアの皆様にとっては、必ずと言っていいほど学習はされてきた方が多いのではないのでしょうか？ 今回以下の方向けに、HTMLの基本からHTMLで改行する方法をご紹介したく、ブログにまとめさせていただきました。 ◆ HTMLを初めて触る方 ◆ HTMLにこれからチャレンジしたい方 ◆ HTMLの基本を見直したい方 本ブログをご確認いただくだけで、基本を振り返る内容としていますので是非ご参考いただけますと幸いです！ はじめに HTMLとは HTMLのタグとは Webページの構成 !DOCTYPE html html lang=”ja” head meta charset=”UTF-8″ body HTMLで改行する方法 ① brタグ ② pタグ ③ preタグ HTMLで改行する際の注意点 ① 改行タグはバージョンによって異なる ② 改行タグを連続利用しない ③ 改行タグはデバイスによって表示範囲が異なる まとめ HTMLとは HTMLとは、 Hyper Text Markup Language（ハイパー テキスト マークアップ ランゲージ） の略称です。 HTMLの言語は、Webページを作成するために開発されました。 皆さんが利用しているWebページのほとんどが、HTMLと CSS で見た目や色等を構成していると言っても過言ではありません。 え？本当にHTMLで構成されてるの？と、疑問に思った方は皆さんが利用しているWebページ上でソースを表示し、確認してみてください。 HTMLのタグとは Webページを作成するために開発された言語であるHTMLは、コンピュータに理解するための言語でもあります。 ただし、コンピュータに理解してもうためには文章構造を作ってあげないといけません。 そこで、登場するのがHTMLタグです。 HTMLタグは、&lt; >（大なり小なり）の記号で、文章をその意味ごとに囲んで作成します。 基礎的なの書き方は以下の通りです。 HTMLタグ &lt;タグ名 属性名=”属性値”>記述内容&lt;/タグ名> ＜タグ名＞は開始タグ ＜/タグ名＞は終了タグ HTMLタグを駆使することで、コンピュータに文章構造を理解させ、Webページを作成していきます。 Webページの構成 HTMLのWebページのタグ構成をご紹介します。 基礎的な構成は以下の通りです。 See the Pen ExWrLog by yasuko ( @yayafu_ ) on CodePen . 上記に記載したHTMLタグについて解説します。 !DOCTYPE html &lt;!DOCTYPE html&gt; とは、文書の解釈に使う文書型の定義をするものです。 簡単に言えば、「このテキストファイルにHTMLを書いていくよー！」ということ。 &lt;!DOCTYPE html&gt; は、正確に言えばHTMLのタグではないのですが、HTMLを作成するとき、HTMLタグよりもまず書くべきものですので忘れないようにしてください。 また、記述しているテキストファイルは、拡張子をHTML（.html）にして「HTMLファイル」にすることも忘れてはいけません。 html lang=”ja” &lt;html lang=”ja”&gt; とは、言語の指定を行う定義です。 上記の場合、"ja"としまいますので日本語のWebページであると定義しています。 主な言語のコードは以下の通りです。 コード 言語 ja 日本語 en 英語 zh 中国語 ko 韓国語 it イタリア語 es スペイン語 fr フランス語 de ドイツ語 pt ポルトガル語 head &lt;head&gt; とは、文書のヘッダ部分を指定するタグです。 &lt;head&gt; タグで囲まれた内容は、Webサイトには表示されません。 &lt;head&gt; 内では、 文字コード 指定、 &lt;title&gt; タグ、 &lt;meta&gt; タグ、 &lt;link&gt; タグなど、HTMLファイルのさまざまな情報を記載します。 外部ファイル化した CSS や JavaScript を、 &lt;head&gt; タグの中に記述して読み込ませることもあります。 meta charset=” UTF-8 ″ &lt;meta charset=”UTF-8″&gt; とは、 文字コード の指定です。 一般的に使われている 文字コード は、” UTF-8 ”が多い印象です。 UTF-8 Shift_JIS EUC -JP body &lt;body&gt; とは、実際にブラウザの画面上に表示される内容を指定するタグです。 &lt;body&gt; タグの中に書かれたテキストや画像などがブラウザの画面上に表示されます。 簡単ではありますが、HTMLのタグ構成について解説させていただきました。 では、ここからはHTMLでの改行方法に特化し、ご説明したいと思います。 HTMLで改行する方法 HTMLで改行する方法として、以下3種類のタグを利用します。 &lt;br&gt; タグ &lt;p&gt; タグ &lt;pre&gt; タグ まずは、上記3種類について解説します。 ① brタグ &lt;br&gt; とは、BReak（改行）の略です。 テキストの改行したい位置で &lt;br&gt; を記載すると、改行します。 また、 &lt;br&gt; タグに &lt;/br&gt; （終了）タグは必要ありません。 活用例は以下の通りです。 改行前 See the Pen GRWzwzE by yasuko ( @yayafu_ ) on CodePen . 改行後 See the Pen GRWzwLv by yasuko ( @yayafu_ ) on CodePen . ② pタグ &lt;p&gt; とは、Paragraph（段落）の略です。 &lt;p&gt; で囲まれた内容は、1つの段落扱いとなります。 段落をいくつか作成することにより、改行と同じ扱いをすることができます。 改行前 See the Pen vYxbvEZ by yasuko ( @yayafu_ ) on CodePen . 改行後 See the Pen RwpvEGj by yasuko ( @yayafu_ ) on CodePen . ③ preタグ &lt;pre&gt; とは、preformatted text（整形済みテキスト）の略です。 &lt;pre&gt; で囲まれた内容は、整形済みテキストとして表示されます。 整形済みテキストとは、その名の通り整形してあるテキストのことで、ソース中のスペースや改行などをそのまま 等幅フォント で表示します。 ただし、以下のような文字は 特殊文字 として認識されてしまいますので実態参照に置き換えるのをお忘れなく。 「&lt;」： &amp;lt; 「>」： &amp;gt; 「&amp;」 ： &amp;amp; 改行前 See the Pen OJpdrxo by yasuko ( @yayafu_ ) on CodePen . 改行後 See the Pen RwpvExM by yasuko ( @yayafu_ ) on CodePen . HTMLで改行する際の注意点 HTMLで改行するにあたり、3種類のタグを説明させていただきました。 ただし、注意しなくてはならに点もありますので以下をご参考いただけますと幸いです。 ① 改行タグはバージョンによって異なる どの言語にも共通していますが、HTMLも時代の変化に合わせバージョンアップされています。 以前までは、HTML4や XHTML が使われてきましたが、現在は HTML5 が主流となっています。 例えば、 &lt;br&gt; は、 &lt;br /&gt; を使うことがあります。 HTML4と HTML5 では &lt;br&gt; を使うことができますが、 XHTML は &lt;br&gt; ではなく &lt;br /&gt; を使うので気を付けましょう。 また、brと/の間には半角空白が必要なのでこちらもお忘れなく。 ② 改行タグを連続利用しない 私も初めの頃やりがちだったのが、 &lt;br&gt; の連続利用です。 もし、連続で &lt;br&gt; を利用すると、Webページ上では1行分の空白行ができたような表示になります。 これは上述した &lt;p&gt; （段落）を使用した際と見た目は同じです。 段落分けをしたい箇所には &lt;p&gt; を、改行したい箇所には &lt;br&gt; をと、目的に合わせて使い分けするようにしましょう。 ③ 改行タグはデ バイス によって表示範囲が異なる &lt;br&gt; は、単純に改行を目的しているタグです。 そのため、閲覧者が使用しているブラウザによってはおかしな箇所で改行されることになってしまい、かなり読みにくい文章になってしまいます。 もし、主題毎に文章をまとめたい場合は &lt;p&gt; （段落）を利用することで、自然な折り返しを実現することができますので、目的に合わせてタグを使い分けましょう。 まとめ 今回は、初心者向けにHMTLの基本から、改行タグに絞って解説させていただきました。 HTMLは、 テキストエディタ があれば簡単に実践ができるものでもありますので、本内容を見ながら是非実践してみてください。 また、デザイン性のある動的なWebページを作成するには CSS と JavaScript の知識も必要ですので日々学習に努めていただければと思います。 最後ではありますが、本内容が皆様にとって1つでもお役に立てていれば幸いです。 最後までお読みいただきありがとうございました。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに みなさんこんにちはa_renrenです。 Linux を学習し始めた時は、コマンドやオプションの多さに挫折しかけてしまうかと思います。 そんな方に向けて Linux を扱う上で避けては通れない、 Linux ファイル操作でよく使用する基本的なコマンドとオプションに絞って紹介していきます。 実際の使用例なども載せていますので、 Linux コマンドを実行できる環境をお持ちでしたら試しながら読み進めていただくと、コマンドの苦手意識が減ってくるかと思います。 ぜひ操作しながら読み進めてみてください。 はじめに Linuxファイル作成 touchコマンド viコマンド Linuxファイル削除 rmコマンド Linuxファイルのコピー、移動 cpコマンド mvコマンド Linuxファイル閲覧・テキスト処理 catコマンド tailコマンド grepコマンド おわりに Linux ファイル作成 touchコマンド 指定したファイルのタイムスタンプを更新する Linux コマンドですが、存在しないファイルを指定すると空のファイルが作成されます。 空のファイルを手っ取り早く作成する際によく使用します。 # touch ファイル名 実際にコマンドを実行してみます。 [root@ren test]# ls [root@ren test]# touch sample.txt [root@ren test]# ls sample.txt lsコマンドで ディレクト リの中身を確認しています。 はじめは何もありませんでしたが、touchコマンドによってファイルが作成されていることが確認することができます。 また、以下のようにファイル名を半角スペースで区切ると一気に複数のファイルを作成することが可能です。 [root@ren test]# touch sample2.txt sample3.txt [root@ren test]# ls sample.txt sample2.txt sample3.txt viコマンド Linux 標準の テキストエディタ を起動するコマンドで、指定したファイルがあればそのファイルがviエディタで開かれ、指定したファイルがなければ新規作成します。 新しくファイルを作成しつつ、そのファイルに何か書き込みたい際は、touchコマンドよりviコマンドの方が便利です。 # vi ファイル名 viはコマンドモードと入力モードの二つがあり、コマンドモードでカーソルの移動ができ、入力モードでないと文字入力できないようになっています。 はじめは少しややこしいかと思いますが、慣れると高速にファイルの操作が行えるようになります。 実際に新規ファイルを作成しつつ、ファイルに文字を記述する流れは以下のようになります。 「i」を入力して入力モードに変更 ※空のファイルが開いた際はコマンドモードになっています 好きなように編集 入力が完了したらEscキーを押して、コマンドモードに戻す [:wq]を入力すると保存されてviを終了 vi コマンドや Linux の理解をより深めたい方へ以下関連おすすめブログ - vi コマンド【使い方まとめ】 - よく使うLinuxコマンド一覧【最新版】 - 初心者のためのawkコマンド - 実務で使える！基本的なシェル（Linux）コマンドの話 ～forとsed～ - 【Linux】今振り返りたい、プロセスって何？ Linux ファイル削除 rmコマンド 指定したファイルや ディレクト リを削除できます。 # rm ファイル名 実際にファイルが削除されるか確認してみます。 touchコマンドの際に作成したsamle.txtを削除します。 [root@ren test]# rm sample.txt rm: 通常の空ファイル &#39;sample.txt&#39; を削除しますか? y [root@ren test]# ls sample2.txt sample3.txt 削除時、上記のように確認されるので、対象ファイルに間違いがなければ「y」を入力します。 対象ファイルを間違えた場合は「n」を押せばキャンセルされます。 また、ファイルのみだけでなく ディレクト リも削除することが可能です。 以下のように、mkdirコマンドでtest ディレクト リを作成して、削除してみます。 オプションなしでは削除はできていませんが、-rオプションを付けることで削除することができていることがわかります。 [root@ren test]# mkdir test [root@ren test]# ls -l 合計 0 -rw-r--r-- 1 root root 0 5月 27 19:21 sample2.txt -rw-r--r-- 1 root root 0 5月 27 19:21 sample3.txt drwxr-xr-x 2 root root 6 5月 27 19:47 test [root@ren test]# rm test rm: &#39;test&#39; を削除できません: ディレクトリです [root@ren test]# rm -r test rm: ディレクトリ &#39;test&#39; を削除しますか? y [root@ren test]# ls -l 合計 0 -rw-r--r-- 1 root root 0 5月 27 19:21 sample2.txt -rw-r--r-- 1 root root 0 5月 27 19:21 sample3.txt 基本的に、ファイルや ディレクト リを削除するときは上記のように削除するか問われますが、-fオプションを付けるとこの確認がなくなります。 わずらわしさはなくなりますが、気づかないうちに自分の意図しない大切な Linux ファイルを削除してしまい、最悪 Linux が起動できない事態にも陥る可能性があるので、-fオプションは使用しないことをおすすめします。 Linux ファイルのコピー、移動 cpコマンド ファイルや ディレクト リのコピーを作成する際に使用します。 # cp コピー元 コピー先 testdir ディレクト リにsample2.txtファイルのコピーを作成してみます。 treeコマンドで ディレクト リやファイルをツリー状に表示しています。 [root@ren test]# tree . ├── sample2.txt ├── sample3.txt └── testdir 1 directory, 2 files [root@ren test]# cp sample2.txt testdir [root@ren test]# tree . ├── sample2.txt ├── sample3.txt └── testdir └── sample2.txt 1 directory, 3 files また、以下のようにコピー先のファイル名を指定することで名前を変更しつつ対象の ディレクト リにコピーすることもできます。 [root@ren test]# tree . ├── sample2.txt ├── sample3.txt └── testdir └── sample2.txt 1 directory, 3 files [root@ren test]# cp sample2.txt testdir/rename-sample2.txt [root@ren test]# tree . ├── sample2.txt ├── sample3.txt └── testdir ├── rename-sample2.txt └── sample2.txt 1 directory, 4 files -pオプションでコピー元の パーミッション (ファイルを閲覧したり実行したりする権限)の設定を保持したままコピーを作成できます。 そのため、基本的に-pを付けてコピーしたファイルの操作ができなくなることを防ぐことをおすすめします。 mvコマンド ファイルや ディレクト リを移動させる際に使用します。 cpコマンドと似ている点がありますが、コピーと違いファイルは移動元からはなくなります。 # mv 移動元 移動先 [root@ren test]# tree . ├── sample2.txt ├── sample3.txt └── testdir ├── rename-sample2.txt └── sample2.txt 1 directory, 4 files [root@ren test]# mv sample3.txt testdir [root@ren test]# tree . ├── sample2.txt └── testdir ├── rename-sample2.txt ├── sample2.txt └── sample3.txt 1 directory, 4 files cpコマンドと同様に名前を変更しつつ、ファイルの移動をすることもできます。 Linux ファイル閲覧・テキスト処理 catコマンド ファイルの中身を簡単に確認する際によく使用します。 # cat ファイル名 [root@ren test]# cat sample2.txt 1 2 3 4 5 tailコマンド catコマンドと同様に、ファイルの中身を簡単に確認する際に使用します。 tailコマンドでは、ファイルの中身をすべて表示せずに最終行から指定された行数分表示します。(デフォルトでは10行) ログの監視の際などによく使用します。 # tail ファイル名 1行目のコマンドでsample2.txtに、1から20の数字を20行分書き込んでからtailコマンドで実際に見てみます。 [root@ren test]# for i in `seq 20`; do echo $i &gt;&gt; sample2.txt; done [root@ren test]# tail sample2.txt 11 12 13 14 15 16 17 18 19 20 行数をしていないため、最終行から10行分表示されています。 行数を指定するには以下のように指定します。 [root@ren test]# tail -n 4 sample2.txt 17 18 19 20 指定された行数分表示されているのが確認できます。 -fオプションを付けると対象のファイルを監視して、ファイルを閉じたり再度開いたりせずに追記された内容を表示します。 [root@ren test]# tail -f -n 4 sample2.txt 17 18 19 20 この状態のまま、別ターミナルでsample2.txtに21、22を追記してみます。 [root@ren test]# tail -f -n 4 sample2.txt 17 18 19 20 21 22 追記した内容がしっかりと更新されているのがわかります。 このため、ログが正常に取れているかの確認やログの内容を監視したい際にとても便利な Linux コマンドです。 grep コマンド ファイルの中身を簡単に確認する際によく使用します。 grep 検索したい文字列 ファイル名 指定したファイルから特定の文字が含まれている行を抽出する Linux コマンドです。 samloe2.txtファイルから5が記載されている行を抽出してみます。 [root@ren test]# grep 5 sample2.txt 5 15 5または6が記載されている行を抽出するような、複数条件を指定する場合には以下のように-eオプションを使用します。 [root@ren test]# grep -e 5 -e 6 sample2.txt 5 6 15 16 逆に指定した文字列以外を抽出するには、-vオプションを使用します。 [root@ren test]# grep -v 1 sample2.txt 2 3 4 5 6 7 8 9 20 おわりに いかがでしたでしょうか。 Linux ファイル操作でよく使うような基本的な Linux コマンドを中心に紹介しましたが、実際にコマンド操作をしないとなかなか覚えられないかと思います。 まずは、基本的な Linux コマンドの操作に慣れることを優先し、ほかにも様々な便利コマンドが Linux にはあるので、慣れてきたら徐々にほかのコマンドを試していきながら Linux の学習を進めることをおすすめします。 ちなみに、「 よく使うLinuxコマンド一覧【最新版】 」も別にまとめておりますのでご参考ください。 Linux の理解をより深めたい方へ以下関連おすすめブログ ・ ls コマンド 【使い方 まとめ】 ・ find コマンド 【使い方 まとめ】 ・ iptables まとめ【Linux ファイアウォール】 ・ sed コマンド【使い方 まとめ】 ・ vi コマンド【使い方まとめ】 ・ 初心者のための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

はじめに 皆さん初めましてseahoseTです。 今回は自分のパソコンからサーバーを操作する時に使うリモートアクセスツール、 『Rlogin』 について紹介していきたいと思います。 目次 はじめに Rloginとは Rloginのインストール Rloginを使ってサーバに接続してみる 接続先の登録 接続先の登録 サーバへ接続 Rloginの基本機能 画面分割機能 ファイル転送機能 Rloginのオプション ログファイルの出力 ショートカットキー オプションを標準設定にする 他のターミナルソフトとの比較 RloginとTeraTerm RloginとPoderosa RloginとMobaXterm おわりに Rloginとは Rloginとは自分のパソコンからサーバーを操作する時に使うリモートアクセスツールです。ターミナルソフト、もしくは SSH ク アイアント なんて呼びます。 Mac には「ターミナル」というそのままの名前のソフトが標準で入っています。Rloginとはターミナルソフトの中の一種です。 Windows で使えるターミナルソフトとしては、Tera Termや PuTTY などが有名です。私の所属するインフラ開発課では主にTera Term、 Poderosa Terminal、MobaXterm、Rlogin、この四種類のターミナルソフトが使用されています。この記事では主題にもあるようにシンプルで使いやすく、動作も軽快なRloginを紹介していきます。 Rloginのインストール 今回紹介するRloginは フリーソフト なので誰でも無料で使用することが出来ます。Rloginダウンロードは下記のリンクからできます。 kmiya-culti.github.io Rloginの起動に必要なファイルのダウンロード リンク(Rlogin公式サイト)から進んだ先から、インストール・アンインストール欄のインストール・アンインストールを選択。 インストール・アンインストール Github を選択 Rloginをダウンロードする手法はいくつかありますが、今回は Github からダウンロードを選択します。 ※Rlogin公式サイトのリンクが古い物のようであり、現在リンクが切れています。 Github を選択 Rlogin最新の実行ファイルを選択 Rloginのバージョンが最新の物をダウンロード。今回は現時点での最新であるRLogin-2.26.1、実行プログラム64bit版のRloginをダウンロードします。 github のダウンロードリンク 上記の手順3つでRloginのインストール作業は完了です。Rloginをダウンロードしたフォルダの中にはRloginの実行ファイルが入っているので、Rlogin実行ファイルを起動するだけで使用することが出来ます。ここからRloginのランチャーを起動して追加の作業を行う必要はありません。 実行ファイル Rloginを使ってサーバに接続してみる 接続先の登録 Rloginの実行ファイルを起動すると以下の画像のような画面が出てきます。Rlogin上の「新規」の項目を選択することで接続先の追加を行うことが出来ます。 ※黒いところは筆者のRloginで使用している物が記載されていたので消してあります。 新規追加 接続先の情報設定 設定 ①エントリー(上)：見出し。わかりやすい名前を付けましょう。 ②コメント(下)：エントリーの説明を記載します。 ③ プロトコル ：Rloginで接続する際の プロトコル を設定します。デフォルトで ssh に設定されています。基本的には ssh でOK。 ④ホスト名：Rloginからの接続先のホスト名を記載します。 IPアドレス でも、 DNS の設定が為されていれば ドメイン 名でも良いです。 ⑤ログインユーザ名：「root」などRloginでログインしたいユーザの名前を入力します。 ⑥パスワード認証の方式によりパスワード or パスフレーズ ：ログインユーザ名に対するパスワード、あるいは パスフレーズ を入力します。 ⑦ SSH 認証鍵：認証鍵が必要な場合はここで認識キーのファイルを選択します。 上記項目の記入完了後、「OK」を選択することで接続先の追加は完了です。 サーバへ接続 Rloginで今まで接続をしたことがないサーバに対して接続を行うと画像のような確認が出ます。「OK」を選択して次に進みましょう。 公開鍵を信頼する 「OK」を選択するとリストの更新の確認が出るので、ここも「はい」を選択しましょう。 信頼するホスト鍵のリスト ログインが完了すると以下の画像のような画面が表示がされます。これにてサーバ接続の一連の流れは完了です。 SSH 成功 Rloginの基本機能 画面分割機能 Rlogin上上部のアイコン(画像)を選択することで、画面を分割することができます。 画面分割 分割した枠内でそれぞれサーバとの接続を行うことが出来るので、並列で作業を進めたいときなどに役立ちます。分割数に際限は無いので自由に枠を増やすことも出来ます。 2画面分割 画面4分割 ファイル転送機能 実行環境(今回は windows )と SSH 先(今回 Linux )でファイルの転送を行う機能がRloginには備わっています。赤枠が windows 、青枠が接続先の Linux 側のフォルダになっています。 ファイル転送機能 Rloginのオプション ログファイルの出力 Rloginでは、接続先の設定を行う画面で様々なオプションを設定することが出来ます。 オプション 一覧の中から、ヒストリーを選択しログを出力したいフォルダを選択することでRlogin上で操作ログのファイル出力が可能になります。 ログ出力の設定 ショートカットキー Rloginではショートカットキーを追加することも可能です。オプションの画面からキーボードを選択することでショートカットキーの設定が行えます。「新規」を選択すれば、任意のショートカットキーを設定できますし、既存のショートカットキーを編集して自分の使いやすいキーに変更することなどもできます。 ショートカットキーの設定 オプションを標準設定にする Rloginでは設定したオプションのデフォルトが各接続先に紐づいたものになります。しかし、接続先毎にオプションを設定しなおすのは面倒くさいですよね。そこでオプションの標準設定化を行います。Rloginではオプションを全体の共通設定にすることが可能です。全体に反映させたいオプションを持つ設定先に対し、標準の設定にするを選択すれば完了です。 ※オプションを標準設定にする場合、接続先のポート フォワ ードなどの情報も共有されてしまうため、接続情報などを設定せずにオプションのみを設定した接続先を準備することがおすすめです。 標準設定 Rloginと他のターミナルソフトとの比較 Rloginと TeraTerm ウィンドウ分割機能 TeraTerm ではウィンドウを分割する機能がありません。Rloginでは標準で備わっているので並列で作業が行いやすいですね。 接続先名が自由 TeraTerm が接続名が IPアドレス 固定なのに対し、Rloginでは任意の接続名を設定できます。視覚的に管理が行いやすいですよね。 ファイル転送機能 Rloginではファイルを転送する機能が備わっています。これも TeraTerm と比較した時に使いやすいポイントですね。 Rloginと Poderosa 動作関係 Rloginは Poderosa の要素を取り入れており、機能が他のソフトと比較してあまり差がありません。起動が遅い、動作が安定しないなどの声が見られますが、コマンドインクジェクションが強固であるなどメリットも多く存在します。差別化点を図るならば、ウィークポイントとしてよく挙げられる動作関連を意識してRloginとどちらを使用するか選択するとよいと思います。 RloginとMobaXterm 文字関係 MobaXtermと比較した時、基本的にはRloginよりMobaXtermの方が機能は優れています。Rloginに備わっている機能はほぼ、MobaXtermにも備わっていますし、追加の機能も豊富です。差別化できる点としては、言語関係になります。MobaXtermではUIなどの日本語化はできず、日本語の入力を行うこともできません(読み込みは可能)。また、 文字コード は UTF-8 のみしか使用できないものとなっています。機能だけみたらMobaXtermに軍配が上がりますが、文字に関する扱いやすさを取るならRloginを使用する利点が有ります。 おわりに 今回はターミナルソフトのRloginについての解説を執筆させていただきました。 AWS の普及などでサーバに対して触れる機会が増えた昨今、この記事が誰かの助けになれば良いなと思います。ご高覧ありがとうございました。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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 です。 いつも ラク スのエンジニアブログをお読みいただき、またエンジニアイベントへのご参加、ありがとうございます。 今回は、6月に開催した ラク スMeetupの発表内容をご紹介させていただきます。 rakus.connpass.com はじめに イベントテーマ概要 発表の紹介 新機能開発のアーキテクチャ選定 初コミットから3年たったので、負債について少し本気出して考えてみた 新規SaaSを創る際にインフラが考えること おわりに イベントテーマ概要 今回のテーマは、 『新規 SaaS プロダクト』 です。 大規模な SaaS サービス開発と20年以上向き合っている ラク スの中でも新しい、以下プロダクトの開発と運用の最前線で関わるメンバー達が登壇しました。 楽楽勤怠 楽楽労務 開発の裏側や、新規開発中の機能について具体的な内容と共に紹介させていただきました。 発表の紹介 それではここから各発表内容と資料を共有させていただきます！ 新機能開発の アーキテクチャ 選定 まずは、楽楽勤怠の実装担当である今野からご紹介させていただきました。 楽楽勤怠は2020年10月にリリースしたばかりの、楽楽シリーズで最も若いプロダクトです。 開発チームでは現在精力的に新機能の開発強化に取り組んでいます。 そんな中、機能開発強化のひとつとして、今年の2月16日にリリースした ICカード 打刻機能を以下のポイントにまとめ発表しました。 ICカード 打刻機能実現のための アーキテクチャ データ損失を回避するための仕組み 苦労したポイント speakerdeck.com ログミー掲載記事は以下をご確認ください。 logmi.jp 初コミットから3年たったので、負債について少し本気出して考えてみた 次に、楽楽 労務 の設計〜実装を担当している岡本からの発表です。 ラク スのサービスではまだまだ若輩の楽楽 労務 ですが、早いもので開発開始から今年で丸3年になりました。 負債量ゼロから始まった楽楽 労務 もバージョンアップを重ねる度に少しづつ負債が積み残されていき、今では少なくない量を抱え込むようになってしまいました。 今回は、以下をポイントに積み残してきた負債を紹介しつつ、楽楽 労務 開発チームの負債への対処方についてお話させていただきました。 許容した／しなかった負債は何か そう判断した基準は何か その基準を見直すのはいつか speakerdeck.com ログミー掲載記事は以下をご確認ください。 logmi.jp 新規 SaaS を創る際にインフラが考えること 最後に、楽楽 労務 のインフラを担当している柏木からの発表です。 SaaS を自分たちで創り提供し続けていくことは、作りきりの システム開発 とは違う観点が求められます。 それをインフラエンジニアとしてどうするのが全体的に「楽」なのか？を、 ラク スが2019年に AWS 上にローンチした「楽楽 労務 」の事例をベースにご紹介しました。 speakerdeck.com ログミー掲載記事は以下をご確認ください。 logmi.jp おわりに 新規プロダクトにおける ラク スの取り組み、いかがでしたでしょうか？ 新たなプロダクトの開発に奮闘するエンジニアの皆様に、参考となる情報があれば幸いです。 さて、次回Meetupは8月では『開発戦略・マネジメント』をテーマに紹介する予定です。 皆様のご参加をお待ちしています！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに 技術広報の yayawowo です。 2021年度3本目のブログ投稿となります。 システム構築だけでなく、保守から運用に至るまで Linux コマンドを使う機会は多いのではないのでしょうか。 ただ、頻繁に Linux コマンドに触れていないと忘れてしまう方も多いはず…。（私は良く忘れます。笑） そこで今回は、 よく使う Linux コマンド を操作別に一覧表にまとめました。 このブログを見れば基本的なことも解決できるよう、 Linux コマンドのオプションや便利機能も紹介しておりますので、是非ご参考いただけますと幸いです！ はじめに Linuxとは よく使うLinuxコマンド一覧 ディレクトリ操作 ディレクトリ操作の使用例 ディレクトリ移動・ファイル操作 ディレクトリ移動・ファイル操作の使用例 ユーザ管理操作 システム管理操作 ネットワーク関連操作 たまに使うLinuxコマンド一覧 覚えておくと良いLinuxコマンドの知識 便利なLinuxショートカットキー Linux系システムのディレクトリ構造 Linuxコマンド - 初心者おすすめ書籍 - Linuxコマンド まとめ Linux関連の参考文献 　 Linux とは まず初めに、 Linux についてご説明いたします。 Linux は、皆さんが日常的に利用している Windows 10、 Mac OS と同じ OS です。 ただし、 オープンソース であるため基本無料で利用できます。。 またOSとは、 オペレーティングシステム と言い、コンピュータ全体を制御することで、ユーザーが使いやすくするためのシステムのことを言います。 簡単に言えば、「ソフトウェアとハードウェアの仲介役」です。 そんな Linux ですが、主にサーバー用のOSとして使われること多いです。 Windows などと異なる点としては、 Linux は多様な種類があります。 例えば以下の通りです。 Linux カーネル リーナス・トーバルズ 氏が開発したOS Linuxディストリビューション Linux カーネル と区別するための呼称 RedHat 系 Debian 系 Slackware 系 その他ソースベース なお、 Linux を操作するには Linux コマンドを覚える必要があります。 Windows や Mac のように、マウスで操作する GUI 形式とは異なり、 Linux コマンドから操作をする CUI 形式だからです。 本記事では、種類が多い Linux コマンドの中から、よく使う Linux コマンドをいくつか抜粋し、 Linux コマンド集としてまとめております。 是非ご参考いただけますと幸いです。 Linux の理解をより深めたい方へ以下関連おすすめブログ 　・ ls コマンド 【使い方 まとめ】 ・ iptables まとめ【Linux ファイアウォール】 ・ sed コマンド【使い方 まとめ】 ・ vi コマンド【使い方まとめ】 ・ Linuxのファイル操作でよく使うLinuxコマンド ・ 初心者のためのawkコマンド ・ 実務で使える！基本的なシェル（Linux）コマンドの話 ～forとsed～ ・ 【Linux】今振り返りたい、プロセスって何？ よく使う Linux コマンド一覧 Linux コマンドをまとめるにあたり、一般的な Linux のコマンドオプションも一緒にまとめております。 本記事にない Linux のコマンドオプションにつきましては、別途調べていただけますと幸いです。 ディレクト リ操作 Linux コマンド 説明 Linux コマンドオプション ls ・ ディレクト リ情報の一覧表示 -a ：すべて表示 -l ：ファイル詳細の表示 -1 ：リストを縦にソート -r ：逆順で表示 -t ：更新時間順にソート -m ：ファイル名をカンマ区切り表示 -h ：単位を読みやすい形式で表示 -k ： キロバイト 単位の表示 -i ：ファイル名の左にi-node番号を表示 -S ：ファイルサイズ順にソート -X ：ファイルを拡張子毎に集約 -R ： ディレクト リ内容を 再帰 的に表示 -F ：情報の付加 --full-time ：タイムスタンプ詳細を表示 --help ：ヘルプの表示 pwd ・現在の ディレクト リ表示 -L ： 論理的な ディレクト リ名を表示 -P ：物理的な ディレクト リ名を表示 ディレクト リ操作の使用例 ls [ root@localhost user ] # ls dev2 dev1 [ root@localhost user ] ~ ] # [ root@localhost user ] # ls -al 合計 5 drwx------. 17 user user 4096 6 月 3 20:21 . drwxr-xr-x. 3 root root 21 5 月 8 2020 .. drwxr-xr-x. 2 root root 6 6 月 3 20:20 dev1 drwxr-xr-x. 2 root root 6 6 月 3 20:21 dev2 drwxr-xr-x. 2 user user [ root@localhost user ] # pwd [ root@localhost user ] # pwd /home/user [ root@localhost user ] ディレクト リ移動・ファイル操作 Linux コマンド 説明 Linux コマンドオプション cd ・ ディレクト リ移動 ・カレント ディレクト リ変更 -L ：論理的な ディレクト リへ移動 -P ：移動先が シンボリックリンク の場合、物理的な ディレクト リへ移動 mkdir ・フォルダ作成 -m ：作成する ディレクト リの パーミッション を設定 -p ：必要に応じて親 ディレクト リも作成 -v ：経過表示 touch ・ファイルの作成 ・ファイルのタイムスタンプの変更 -t スタンプ ： [[CC]YY]MMDDhhmm[.ss] 形式で指定した日時に変更 -d ：文字列で指定した日時に変更 -r ：指定したファイルのタイムスタンプと同じ日時に変更 -a ：最終アクセス日時のみ変更 -m ：最終更新日時のみ変更 -c ：ファイル作成不可 -h ： シンボリックリンク の場合、リンク先ではなくシンボリックのタイムスタンプを変更 cp ・ファイルのコピー -i ：上書前に確認 -v ：実行内容の表示 -n ：存在するファイルの上書き制御 -f ：強制的に上書き -b ：上書きファイルのバックアップ生成 -S 接尾辞 ：バックアップファイル生成時、ファイル名末尾に付ける文字 mv ・ファイルの移動 ・ファイル( ディレクト リ名)の変更 -b ：上書き・削除されるファイルのバックアップ -f ：上書き時、確認メッセージ非表示 -i ：上書き時、確認メッセージ表示 -n ：移動先に同名ファイル・ ディレクト リが存在時、移動不可 -v ：詳細を表示 rm ・ファイルの削除 -f ：存在しないファイルを無視 -i ： 削除前に確認 -v ：経過を表示 -d ：unlinkで ディレクト リを削除 -r ： ディレクト リを 再帰 的に削除 cat ・テキストファイルの内容を表示 -n ：行番号を追加 -b ：行番号を追加するが、空白行には追加無 -s ：連続した空行を1行に変更 -v ：TAB、改行、改ページ以外の非表示文字を表示 -t ：非表示文字を表示 -E ：行の最後に"$"を表示 -A ：全ての非表示文字を表示 -e ：TABを除く全ての非表示文字を表示 chmod ・ファイルやフォルダのアクセス権限を変更 -f ：エラーメッセージ表示不可 -c ：コマンド実行時、変更があったときのみ結果表示 -v ：コマンド実行時、詳細表示 -R ：変更対象は ディレクト リ内の複数ファイル tar ・ファイルの圧縮、展開 -c ：新規 アーカイブ 作成 -r ： アーカイブ 最後にファイル追加 -A ： アーカイブ にtar アーカイブ を追加 -u ： アーカイブ のファイル更新 -d ： アーカイブ と ファイルシステム を比較 -t ： アーカイブ 内容の一覧表示 -x ： アーカイブ からファイル抽出 ディレクト リ移動・ファイル操作の使用例 cd [ root@localhost user ] # ls dev1 dev2 [ root@localhost user ] # cd dev1 [ root@localhost dev1 ] # mkdir [ root@localhost user ] # ls dev2 dev1 [ root@localhost user ] # mkdir dev3 [ root@localhost user ] # ls 合計 0 dev2 dev1 dev3 [ root@localhost user ] # touch [ root@localhost user ] # ls dev1 dev2 dev3 [ root@localhost user ] # cd dev1 [ root@localhost dev1 ] # ls [ root@localhost dev1 ] # touch dev1_1.txt [ root@localhost dev1 ] # ls dev1_1.txt [ root@localhost dev1 ] # cp [ root@localhost dev1 ] # ls dev1_1.txt [ root@localhost dev1 ] # cp dev1_1.txt dev1_2.txt [ root@localhost dev1 ] # ls dev1_1.txt dev1_2.txt mv [ root@localhost dev1 ] # ls dev1_1.txt dev1_2.txt dev1_3.txt [ root@localhost dev1 ] # mv dev1_3.txt dev2_1.txt [ root@localhost dev1 ] # ls dev1_1.txt dev1_2.txt dev2_1.txt [ root@localhost dev1 ] # mv dev2_1.txt ../dev2/. [ root@localhost dev1 ] # ls dev1_1.txt dev1_2.txt [ root@localhost dev1 ] # cd .. [ root@localhost user ] # ls dev1 dev2 dev3 [ root@localhost user ] # cd dev2 [ root@localhost dev2 ] # ls dev2_1.txt rm [ root@localhost dev2 ] # ls dev2_1.txt [ root@localhost dev2 ] # rm -i dev2_1.txt rm: 通常の空ファイル `dev2_1.txt ' を削除しますか? y [root@localhost dev2]# ls [root@localhost dev2]# cat [ root@localhost dev1 ] # ls dev1_1.txt dev1_2.txt [ root@localhost dev1 ] # cat dev1_1.txt hello world [ root@localhost dev1 ] # ユーザ管理操作 Linux コマンド 説明 Linux コマンドオプション useradd/adduser ・ユーザーの新規作成 -m ：ユーザーのホーム ディレクト リが存在しない場合に作成 -M ：ユーザーのホーム ディレクト リ作成不要 -b ：ホームディクトリの作成 -d ディレクトリ ：ユーザーのホーム ディレクト リ作成 deluser ・ユーザの削除 -r ：ユーザのホーム ディレクト とメールスプールを同時に削除 groupadd ・グループの新規作成 -g グループID ：新規作成するグループのグループIDを指定 -o ：グループIDが同じグループの作成を許可 -f ：グループが既に存在していた場合、終了 -p パスワード ：cryptで暗号化されたログ インパス ワードを利用 -r ：システムアカウントを作成 groupdel ・グループの削除 -R ディレクト ： chroot する ディレクト リ -r ：既存ユーザーのプライマリグループでも削除 chfn ・ユーザ情報の変更 -f ：ユーザの名前を設定 -o ：オプションを設定 -r ：オフィスの部屋番号を設定 -p ：オフィスの電話番号を設定 -h ：自宅の電話番号を設定 システム管理操作 Linux コマンド 説明 Linux コマンドオプション free ・メモリの空き容量、使用容量を表示 -b ：バイト単位表示 -k ：KB単位表示 -m ：MB単位表示 -g ：GB単位表示 -h ：読みやすい単位で表示 last ・ ログイン履歴の一覧表示 -t 日時 ：指定した日時より前のログイン情報を表示 -x ：システムのシャットダウンと ランレベル 変更の記録を表示 -a ：ホスト名を最後の欄に表示 -R ：hostname欄の表示不要 -d ：リモートログイン時、ログイン元の IPアドレス をホスト名に変換して表示 -i ：リモートログイン時、ログイン元の IPアドレス のまま表示 finger ・ユーザー情報を表示 -m ：ユーザ検索時、ユーザのフルネームとの比較不要 -l ：ログイン名、ユーザ名、ホーム ディレクト リ、シェル、メールを表示 -s ：ログイン名、ユーザ名、端末名、アイドル時間、ログイン時間、オフィス、オフィスの電話番号を表示 ネットワーク関連操作 Linux コマンド 説明 Linux コマンドオプション route ・ ルーティングの表示や設定 -A ファミリー ：アドレスファミリーを指定 -4 ： IPv4 の情報を表示/操作 -6 ： IPv6 の情報を表示/操作 -n ：名前解決不要 -e ：テーブルの表示に netstat のフォーマットを使用 -ee ：すべての情報を1行表示 -F ： カーネル が管理しているテーブルを表示、操作 -C ：FIBの代わりにキャッシュを表示、操作 ftp ・ファイルを FTP で転送 -p ：パッシブモードで ftpクライアント を起動 -i ：確認プロンプトの非表示 -n ：自動ログイン実行を抑止 -e ：コマンド編集・コマンド実行履歴機能を無効化 -g ：ファイル名の展開不可 -v ：応答情報を表示 -d ：デバックモードの有効化 ssh ・ ssh でログイン -p ポート番号 ：接続に使用するポート番号を指定 -l ユーザー名 ：接続に使用するユーザー名を指定 -i IDファイル ：接続に使用する公開鍵ファイルを指 -C ：全通信を圧縮 -c 暗号化方法 ：通信を暗号化する方法を指定 -1 ：SSHv1のみを使用 -2 ：SSHv2のみを使用 -4 ： IPv4 のみを使用 -6 ： IPv6 のみを使用 -K ：GSSAPIによる認証を許可 -k ：GSSAPIによる認証を不許可 -A ：認証エージェントを転送 -a ：認証エージェントを転送不可 -X ： X11 のポート フォワ ーディングを有効 -x ： X11 のポート フォワ ーディングを無効 -Y ：信頼された X11 転送を有効 -f ：コマンド実行時、 ssh をバックグラウンド化 -F 設定ファイル ：設定ファイルを指定 -o 設定パラメータ ：設定パラメータを指定 -E ログファイル名 ：エラーを指定したファイルに記録 -q ログファイル名 ：エラーメッセージや診断メッセージを非表示 -v ： デバッグ メッセージを表示 たまに使う Linux コマンド一覧 Linux コマンド 説明 Linux コマンドオプション which ・コマンドの保存先の調査 -a ： 環境変数 PATHにある全ての実行ファイルを表示 -i ：標準入力から エイリアス を読み込み、合致したものを表示 type ・コマンドの保存先を調査 -a ：実行可能コマンドの全表示 -f ：シェル関数を除外 -P ：実行コマンドのディスク上ファイル名の表示 -t ： 実行コマンドに応じて「alias」「keyword」「function」「builtin」「file」を表示 whatis ・コマンドの簡単な説明を表示 ・単語単位の完全一致検索 -c ：設定ファイルを指定 -M パス ：「man」ファイルの検索パスを指定 -L ロケール ：検索時の言語を指定 -r ：検索に 正規表現 を使用 -w ：検索に ワイルドカード を使用 -l ：検索結果を折り返して表示 -s リスト ：検索対象の章番号を指定 -d ： デバッグ 情報を表示 -v ：警告メッセージの詳細表示 apropos ・コマンドをキーワードで検索 ・部分一致検索 -C ：設定ファイルを指定 -M パス ：「man」ファイルの検索パスを指定 -L ロケール ：検索時の言語を指定 -r ：検索に 正規表現 を使用 -w ：検索に ワイルドカード を使用 -l ：検索結果を折り返して表示 -s リスト ：検索対象の章番号を指定 -d ： デバッグ 情報を表示 -v ：警告メッセージの詳細表示 find ・ファイルの検索 -P ： シンボリックリンク を追跡 -L ：すべての シンボリックリンク を追跡 -H ：指定した シンボリックリンク を追跡 -name パターン ：ファイル名がパターンと一致するファイルを検索 -path パターン ：パスがパターンと一致するファイルを検索 -type タイプ ：ファイルタイプ検索 -mmin 分数 ：指定した分数より前に更新されたファイル -mtime 日数 ：指定日数より前に更新されたファイル -newer ファイル ：指定ファイルの更新時刻以降に更新されたファイル -amin 分数 ：指定した分数より前にアクセスされたファイル -atime 日数 ：指定日数より前にアクセスされたファイル -anewer ファイル ：指定ファイルのアクセス時刻以降にアクセスされたファイル -size サイズ ：ファイルサイズが指定したサイズに一致したファイル cal ・カレンダーの表示 -1 ：今月のカレンダーを表示 -3 ：先月、今月、来月のカレンダーを表示 -y ：今年の1年分のカレンダーを表示 -s ：日曜日を週の先頭に表示 -m ：月曜日を週の先頭に表示 -j ：1月1日を第1日とする年間通算日を表示 date ・日付の表示 -d 日時 ：現在ではなく、文字列で指定した日時を表示 -R ：日時をRFC2822形式で表示 -rファイル ：ファイルの最終変更時刻を表示 -s 日時 ：システム時刻を指定した日時に変更表示 -u ：協定標準時（ UTC ）を表示、設定 以下も是非ご参考ください！ tech-blog.rakus.co.jp 覚えておくと良い Linux コマンドの知識 Linux コマンドを使う場合、覚えておくと良い知識がいくつかあります。 業務効率を上げるために、是非使いこなしてみてください。 便利な Linux ショートカットキー Linux 利用時の業務効率をあげるため、とても便利なショートカットキーをご紹介します。 何度も利用し、指に慣れさせましょう。 Linux ショートカットキー 説明 ↑ ↓ コマンド履歴を順に表示 tabキー フォルダやファイル名の予測変換 Ctr(control) + a カーソルを先頭に Ctr + e カーソルを終端に Ctr + b カーソルを一文字戻す Ctr + f カーソルを一文字進める Ctr + d カーソル位置の文字を消す Ctr + h カーソル位置の左側の文字を消す Ctr + w カーソル位置の左側の単語を消す Ctr + r コマンド履歴の中で検索する Linux 系システムの ディレクト リ構造 Linux コマンドを覚えるなら、 Linux 系システムの ディレクト リ構造を理解しておくと何か困った際に、役に立ちます。 一般的な Linux の ディレクト リ構造をまとめましたのでご参考ください。 Linux ディレクト リ 説明 / (root) ・最上の ディレクト リであるルート ディレクト リ /bin ・バイナリ（Binary Folder）の略 ・ユーザーが使用する実行ファイルが入っている ディレクト リ ・ cat 、 chmod 、 chown 、 cp 、 date 、 echo 、 ln 、 ls 、 mkdir などのプログラム /boot ・システム起動に必要なファイルが入っている ディレクト リ /dev ・デ バイス （device）の略 ・ハードウェア機器を表すファイルが保存される ディレクト リ ・ キーボード、マウス、プリンターなどのデ バイス をファイル /etc ・ Linux 設定のファイルが保存されている ディレクト リ /home ・ユーザーホーム ディレクト リ ・ Mac ではUsers /usr ・各種コマンドやドキュメント /lib ・ カーネル モジュールファイルとプログラムに必要な各種ライブラリファイルを保存している ディレクト リ /sbin ・ システム管理者が使用するシステム管理者用コマンドを保存している ディレクト リ /var ・ヴァリアブル（Variable）の略 ・システム運用中に生成されて削除されるデータを保存するための ディレクト リ ・ログファイル、データベースキャッシングファイルなど /media ・リムーバブルメディアのマウントポイント ・/mnt ディレクト リと区別必要 /mnt ・マウントポイント ・ Mac の場合Volumes ・/media ディレクト リと区別必要 Linux コマンド - 初心者おすすめ書籍 - Linux コマンドを学ぶにあたり、初心者向けの書籍をまとめました。 新しいLinuxの教科書 Linux をはじめて学ぶ人におすすめ Linux の機能だけでなく、 シェルスクリプト を使ったプログラミングや、Gitによるソフトウェア開発のバージョン管理などを学べる ゼロからはじめるLinuxサーバー構築・運用ガイド 動かしながら学ぶWebサーバーの作り方 Linux の基礎～セキュリティまで、Webサーバーを運用するために身に付けるべき知識をまとめた書籍 Linux の基礎を学ぶにあたり、 VPS （バーチャルプライベートサーバー）を使用して、実際に手を動かしながらWebサーバーを構築・運用が学べる まんがでわかるLinux　シス管系女子 まんがで学べる Linux サーバー管理と シェルスクリプト の書籍 漫画の登場人物のやり取りを通して、すぐに役立つ Linux 情報を分かりやすく解説 1週間で LPIC の基礎が学べる本 Linux の資格でお馴染みの LPIC ( Linux 技術者認定)の資格取得向けに発行されている書籍 資格を習得するだけでなく、 Linux 初心者の方にも分かりやすくまとめられている Linux教科書 LPICレベル1 Version5.0対応 こちらも、 Linux の資格でお馴染みの LPIC ( Linux 技術者認定)の資格取得向けに発行されている書籍 Linux の基礎的なコマンドや知識がまとまっている Linux コマンド まとめ 今回の Linux コマンドをまとめた内容は、いかがでしたしょうか。 Linux のコマンドは、 慣れる ・ 覚える がポイントです。 ネットで調べなくともすらすら Linux コマンドが打てるようになれば、仕事の効率的をあげるだけでなく、気持ちも楽しくなります。 今回は初心者向けに Linux コマンド一覧とざっくりとまとめさせていただきました。 一緒に Linux マスターになりましょう！ 最後までお読みいただきありがとうございました。 Linux 関連の参考文献 Linux コマンドを調べるにあたり、以下文献を参考にさせていただきました。 Linux に関する情報がまとめられており、とても良い内容です。 よく使うLinuxコマンド 初心者のためのよく使うLinuxコマンド一覧 　 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 https://rakus.hubspotpagebuilder.com/visit_engineer/ rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに ラク スのメールディーラーを開発している、neroblubrosです。 2021年5月29日（土）に PHPカンファレンス 沖縄が開催されました。 当初はオンラインとオフライン（会場での参加）を予定されていましたが、沖縄が緊急事態宣言下となり急遽オンラインのみの開催となりました。 弊社から6名のエンジニアが参加いたしましたので、参加したセッションのレポートをご紹介いたします！ では、レポートスタート！ なお、レポートはRoomAからBの順で開始時間順に記載しています。 はじめに Room A プログラミング言語に依存しない、質の高いコードを書く技術 PHPでCSVのインポート/エクスポートに立ち向かう 3年規模のモバイル開発(Flutter)のバックエンドにLaravelを採用したお話 PHPでthrowしない例外ハンドリング リーダブルコミットのすゝめ 今日からできる安心型付け入門 Room B 技術的負債を返し続ける取り組み ~ あなたのPHPのバージョンいくつですか？~ 理解しておくべき PHP のバリデーション 数値のバリデーション メールアドレスのバリデーション たまには PHP で、パーサ(構文解析器)を書いていこう 実践！PHPWebアプリケーション パフォーマンスチューニング まとめ Room A プログラミング言語 に依存しない、質の高いコードを書く技術 report by id:Jazuma speakerdeck.com CBcloud&#x682A;&#x5F0F;&#x4F1A;&#x793E; 所属のあらかき ゆうじ さんの(@arakaji)セッションです。 「コードの品質」と「プロダクトの開発速度」は トレードオフ ではないという話から始まりました。 質の高いコードを書くことでバグを減らしたり、影響範囲の調査がスムーズに進むため、開発速度も上がるとのことです。 セッションでは、保守性の高いコードを書くための具体的な手法が紹介されました。 1. モジュール性 2. 再利用性 〇 モジュール性 依存関係や変更の影響範囲が適切にコン トロール されていること。 「モジュールを変更する理由はたった1つであるべきである」という単一責任の原則が強調されていました。 例えば、従業員情報を保持するクラスに「給与計算」「 労務管理 」「個人情報」の3つのメソッドが配置されているのは望ましくありません。 1つのメソッドに対する変更が他のメソッドに影響を与える可能性があるためです。 似たようなメソッドでも使われ方が異なるものは別々のモジュールに切り出すべきという部分が参考になりました。 〇 再利用性 あるモジュールが1つ以上のクラスやシステムに利用できること。 再利用しやすいコードを書くことで同じ変更を何回もすることがなくなるため、開発速度を上げることができます。 他のメンバーだけでなく、未来の自分も恩恵を受けられるというのが印象的でした。 再利用しやすいコードを書くには「小さいものは美しい」という UNIX の設計思想が役に立ちます。 多くの機能を盛り込んだ大きなモジュールではなく、1つの機能に特化した小さなモジュールを組み合わせることが重要だと思いました。 PHP で CSV のインポート/エクスポートに立ち向かう report by id:Y-Kanoh speakerdeck.com Webサービス 開発において、 CSV のインポートやエクスポートは、避けては通れない機能だと思いますが、文字化けや エス ケープなど、考慮点が多いのが現実です。 しかし、よく使うということは、当然ライブラリも用意されております。 本発表では、league/ csv というライブラリを用いることで、fgetcsvなどを使った独自実装なしでも、 イテレータ による行データの取得や、 CSV でのダウンロード機能などの実装方法を紹介しておりました。 また、発表者自信が作成された CSV インポート/エクスポートライブラリも紹介されていました。 CSV の操作は確かに自分で実装しようとすると、考えることが多く、悩みどころです。 私個人としては、 UTF-8 で記述された CSV ファイルでも、BOM付きにすることで、 Excel でも文字化けせず開くことができることが、初耳だったため驚きでした。 3年規模のモバイル開発(Flutter)のバックエンドにLaravelを採用したお話 report by id:richardwagner youtu.be モバイル開発（Flutter）のバックエンドにLaravelを採用したというお話です。 モバイルのバックエンドもSPAの API 開発と一緒でしょう、ということであえてLaravelを採用されたそうですが、大きく支障もなく導入できたという心強い内容です。 個人的に気になったのは以下のポイントでした。 リアルタイム更新には弱い。特にPush通知は PHP では事例が少なくやりにくい。結局Firebaseと併用。 Laravel技術者がとても多く、開発リソース確保の面で悩まなくていいのは大きなメリット。 WebでもFlutter×Laravelの事例は圧倒的に少なかった。 事例の少ない中でも果敢に挑戦し、貴重な経験値を積まれた向江さんのチャレンジ精神をぜひ見習いたいと思いました。 PHP でthrowしない例外ハンドリング report by id:Y-Kanoh speakerdeck.com "例外"とは何かと考えると、一言では説明しづらいものです。 こちらの発表では、概念としての"例外"を「どのように処理すべきか織り込まれていないイベント」、 プログラミング言語 としての”例外”を「どのように処理すべきか織り込まれていない状態になったことを外部に伝える手段」として定義し、 PHP の基本的な例外処理である throw try-catch-finally が抱える難しさについて説明されておりました。 また、他の言語での例外処理を参考に、 PHP で throw を使わない例外処理についても解説されていました。 今までふんわりと行っていた例外処理について、さまざまな視点から考えさせられる内容でした。 リーダブルコミットのすゝめ report by id:Y-Kanoh speakerdeck.com コミットメッセージは、他人、つまり同僚やコントリビュータ、未来の自分が読んで、内容を理解できるものである必要があります。 これは、コードを読むだけではわからない背景や、意図をコードの読み手に伝えることによって、コードレビューの負担を減らしたり、忘れていたコードの意図を思い出すために必要です。 そのためには、コメントに決められた プレフィックス をつけることや、内容はできるだけ「Why（コードを変更した理由）」を書くことを意識する必要があり、さらに読み手が読みやすいよう、フォーマットの工夫や、チケットやIssueへのリンクを設置することも効果があります。 アンチパターン として用意されていたコミットコメントが紹介されるたびに、耳が痛くなる内容でした。 気を抜くとどうもおざなりになるコミットコメントを、書き手と読み手のコミュニケーションのために、真面目に考えるべきだなと改めて考えさせられた発表でした。 今日からできる安心型付け入門 report by id:radiocat youtu.be プログラミング言語 において避けて通れない「型」という概念ですが、その制約が比較的緩いところから生まれた PHP では進化の過程でその立ち位置を変化せざるを得ないことが多々あり、我々はその変化にある意味振り回されてきました。 そんな PHP プログラマー が受け入れるべき「型」という概念を、基本的な考え方から、なぜそのように扱うべきなのかという背景も含めて丁寧に解説し、型を正しく扱う方法を学ぶことができる内容でした。 弊社が開催している PHP TechCafe にもたびたび参加して頂き、いつもわかりやすい解説をして頂いてるうさみさんならではの PHP エンジニアにとってためになる講義でした。 Room B 技術的負債を返し続ける取り組み ~ あなたの PHP のバージョンいくつですか？~ report by id:neroblubros youtu.be 開発をしているとOSや ミドルウェア などのバージョンアップを行わなければなりません。 また、非推奨の API を使っていたり、 リファクタリング が必要なコードなど、それらをひっくるめて技術的負債と呼ばれています。 一方で技術的負債は費用対効果が見えにくいことが多く、その結果、プロダクト開発が優先され技術的負債が負債のまま取り残されるケースもあります。 当セッションではプロダクト開発をしながらどうやって技術的負債を返済していくか？を紹介されました。 私が「なるほどな」と思ったのは「開発とは別軸の優先順」でやるということで、プロダクト開発とは切り離して技術的負債の解消に取り組めば、放ったらかしにならないのか！と納得しました。 セッションの時間が10分と短かったのですが、弊社のような クラウド ベンダーに有意義なセッションだったと思います。 理解しておくべき PHP のバリデーション report by Jazuma speakerdeck.com Torana, Inc - &#x682A;&#x5F0F;&#x4F1A;&#x793E;&#x30C8;&#x30E9;&#x30FC;&#x30CA; |  所属 めもりーさん(@m3m0r7) によるセッションです。 PHP におけるユーザ入力値のバリデーション実装方法について豊富な具体例を交えながら説明されていました。 登壇者によるセッション内容のまとめは以下の通りです。 バリデーションをちゃんとやろうとするとしんどい プロダクトの要件に合わせて妥協するのも1つの手 バリデーションのロジックを自前で実装すると保守コストがかかる   続いてバリデーションの悪い例と良い例が紹介されました。 一部を抜粋します。 数値のバリデーション ○ 悪い例 is_numeric($number) : 1e10のような入力値が通ってしまう is_int($number) : 数値型だと通らない。 intに変換するとバリデーションの意味がない。 ctype_digit($number) : 入力値が負の数だと通らない。 正の数しか受け付けないという要件ならok ○ 良い例 filter_var($number , FILTER_VALIDATE_INT) !== false : PHP の組み込み関数で実装するのが手っ取り早くて楽 メールアドレスのバリデーション ○ 悪い例 正規表現 でバリデーション： 漏れが発生しやすい＋ 可読性が低くなる ○ 良い例 filter_var($email , FILTER_VALIDATE_EMAIL):  下手に自前で実装するよりも組み込みのfilter_var関数を使うほうが良い場合が多いようです。 PHP に限らずバリデーションについては一般的に以下のようなことが言えるように思いました。 独自でバリデーションロジックを実装すると考慮漏れが起こりやすい したがって、言語の標準関数を利用すると良い場合が多い 正規表現 は可読性が落ちるのでできれば避けたい たまには PHP で、パーサ( 構文解析 器)を書いていこう report by takaram docs.google.com PHP の パーサライブラリ " Parsica " を使った 構文解析 のお話でした。 私は 構文解析 というと、 PHP 本体（Zendエンジン）がやっているように、 C言語 で yacc /lexなどを使ってやるもので「難しそう……」というイメージでした。 このセッションでは URI のパースを題材に、スキーム・ホスト・パスなどURLの各パーツの構造を PHP コードに落とし込み、最後に組み合わせて URI パーサを完成させる過程が紹介されました。 「小さいパーツを作って組み合わせる」やり方は非常にわかりやすかったですし、 Twitter での反応にあったように UNIX哲学 にも通ずるものがありそうです。 &gt; 小さな部品を作って合成できる UNIX 哲学じゃん #phpcon_okinawa #track_b &mdash; おかしょい (@okashoi) 2021年5月29日 個人的には、 正規表現 では難しいメールアドレスのバリデーションもこれを使えばできるのでは？と期待しています。 実践！PHPWebアプリケーション パフォーマンスチューニング report by takaram speakerdeck.com PHP 製Webアプリケーションのパフォーマンスチューニングに関する発表です。 Webサービス チューニングのコンテストである ISUCON の過去問を題材に、実際のチューニングの例を見ることができました。 「推測するな、計測せよ」 これが今回の発表のキーワードでした。 いかにスピードアップするか？の手法も大切ですが、それ以前にどこが ボトルネック か？を正確に把握しなければパフォーマンス改善はできません。 勘に頼るのではなく、計測→原因特定→改善のサイクルを愚直に実行せよ、というのが発表の趣旨でした。 私自身、パフォーマンスチューニングには「経験がないから」と苦手意識がありましたが、大事なのは経験や勘ではなく愚直な計測だとわかったので、今後は苦手意識もなくしていけそうです！ あとPHP8+ JIT すごい（小並感） まとめ 前述の通り、沖縄に緊急事態宣言が発出され開催自体どうなるのかな？と思っていましたが、オンラインのみではありますが開催されてよかったです。 逆に全国各地にいてもオンラインで参加できるので、他社の事例など有用なセッションを気軽に見られるようになり、有意義なカンファレンスだったと思います。 まだまだ、セッションの動画は公開されていますので、折を見て気になるセッションを見てみようと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com