TECH PLAY

株式会社ラクス

株式会社ラクス の技術ブログ

927

はじめに パクチー が大好きな技術広報の 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 1ページ下へ移動 Ctrl + B 1ページ上へ移動 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には実装している言語によって3つに分かれます。しかしながら公式が推奨しているのは 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を起動したらエディタを自動で起動し、かつローカル環境でもブログが書けるようなシステムを作りました。これによって私はブログを書く事のハードルが下がったことを実感でき、継続してアウトプットに取り組めるようになりました。皆さんもそれぞれに合わせて、まずはとりかかりやすい環境をつくる事をおすすめしたいです! 読書を活用した勉強法 書籍は版元や著者によって情報の信頼性を担保された媒体で、専門書籍の多くは知識を体系的にまとめて書かれているため、読書は体系的な知識や情報の取得に適しています。 また最近は、 電子書籍 やオーディオブックで多くの書籍が取り込まれており、デ バイス さえあれば場所を問わず勉強できる環境も整ってきております。 当社エンジニア達がおすすめする勉強法では読書の事例が多く挙がっており、以下にいくつかの事例を紹介します。 ●当社エンジニアの事例「読書会で勉強する」 本の要約+自分が要約した内容を他の人に説明することで理解が更に深まります。 「ラーニングピラミッド」などではアウトプットすることで学習内容の定着がより高まると言われています。 自分が主催した読書会は、読書箇所を他の人に説明する形式で行っており、自分はもちろん読書はサボれず、人に説明することの学習効果も実感できたため、読書会を活用した勉強方法はおすすめできます。 ●当社エンジニアの事例「図書館を活用する」 私たちエンジニアが参照する技術書をはじめとする専門書籍は値段の高いものが多いため、買うのを躊躇うことがあります。しかし図書館には読みたい書籍がある事も意外に多く、最近はWEB予約も充実しているので、読みたい書籍を無料で学習・勉強するには図書館活用はおすすめです。 ●当社エンジニアの事例「 電子書籍 を活用する」 電子書籍 はハイライトを引いた箇所を参照する機能や単語帳機能もあるので、思い出したい時や調べたい時にはすぐに確認ができる点が便利で、知識の定着には効果を感じているため、 電子書籍 での読書は勉強方法としておすすめです。 ●当社エンジニアの事例「読書にAudibleや読み上げ機能を活用」 本を読むのがツライときは、Audibleや読み上げ機能を使って聞くようにしています。 私は他の作業をしながら聞くことが多いのですが、そんな中でも印象に残る箇所は最低限おさえる事ができるため、おすすめしたいです。 動画を活用した勉強法 動画学習はテレビ・ビデオ教材からe-learnigが一般的となり、現在は YouTube や SNS でも学習用の動画コンテンツが増え、誰でも気軽に動画で勉強できる機会が増えてきました。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「Udemyなど動画で勉強する」 疲れている時でも、動画なら理解がしやすく、動画と一緒に実装を進めていける点で動画学習は優れていると思いました。 読書や講習より動画の方が勉強しやすいという人に向けて、今後は誰でも気軽に利用できる環境でエンジニア向けの学習動画コンテンツが充実してくる事を期待したいですね。 まず手を動かす エンジニアは目の前のシステムを動かすことが仕事で、システムを動かすには、まず触って手を動かすことがとても重要です。エンジニアの中には、体系的な知識を学ぶ勉強よりも手を動かすことをすすめる人もいます。当社のエンジニ アメンバー 達も「まず手を動かす」ことをすすめる事例が多く挙がり、「まず手を動かす」ことはおすすめの勉強法です。 以下は当社エンジニアのすすめる勉強法の事例 ●当社エンジニアの事例「 チュートリアル をやってみる」 チュートリアル は一番手っ取り早く手を動かせ実行結果も見れるため、公式の チュートリアル をやってみる事はおすすめです。 チュートリアル だけだと定着しないこともあるので、 チュートリアル 完走後にボタン1つでも機能追加するなど、不具合が起きない程度に手を加える事で ソースコード が読めるようになり、知識の定着にはさらによいと思います。 ●当社エンジニアの事例「写経の後、ひたすらアレンジ」 写経(サンプルコードになぞって書く)だけだと、定着せずに終わってしまうこともあるため、自分のコードでひたすらアウトプットする。アウトプットする頃になるとだいたいどこかで詰まってしまい、それらを乗り越えて自分のやりたいようにアウトプットできるようになれば、初めて新しいネタをある程度習得できた状態になるので、継続はとても重要です。 ●当社エンジニアの事例「freecodecampで技術勉強」 Progateと同じようなプログラミング学習サイトfreecodecampでは、6000以上の チュートリアル (すべて無料)が勉強しながら試せるため、フロントエンドからバックエンドまで幅広いカリキュラムから技術力を高めるのにとてもおススメです。 その他、当社エンジニアの事例としては「自作の アプリ開発 をしてみる」「コーディングスキルを向上のため、CodinGameを利用してみる」「 オープンソース を構築してみる」「気になる技術や フレームワーク 、ライブラリを最小構成で使ってみる」などなど、とにかく手を動かすことで勉強する方法をおすすめする声が多かったです。 アウトプットする ベストセラーとなった「アウトプット大全」 https://honto.jp/netstore/pd-book_29100397.html の書籍で紹介された、 コロンビア大学 の実験結果によると、最も効果的な学びができるインプットとアウトプットの 黄金比 は、インプット3割:アウトプット7割だったとの事です。 アウトプットは「書く」と「喋る」の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
アバター
こんにちは。開発エンジニアの沼本です。 みなさんはWeb API についてよくご存じでしょうか? 私はこれまでエンジニアとしていくつかのサービス開発に携わってきましたが、Web API と接する機会が非常に増えてきていると感じています。 今回はWeb API について基本的な概念をおさらいし、 PHP を使用してWeb API の開発入門をまとめたいと思います。 Web APIとは Web APIを使ってみる Web APIの開発 作成するもの 言語 エンドポイント(URI) レスポンスデータ データフォーマット ステータスコード エラー表示 セキュリティ 実装 動作確認 おわりに Web API とは そもそもWeb API とはいったい何なのでしょうか。 専門的に言うと、Web API とは「HTTP プロトコル を用いてネットワーク越しに呼び出す API 」のことです。 ( API とは「 Application Programming Interface 」の略で、「ソフトウェア コンポーネント 同士が互いに情報をやりとりするのに使用するインタフェースの仕様」のこと) この説明だとピンとこない方もいるかもしれません。 より簡単に一言で言ってしまうと、Web API とは「 URI にアクセスすることで、特定の情報の取得・操作ができるシステム」のことです。 Web API を使ってみる ここではWeb API の理解を深めるため、実際にWeb API を利用してみます。 世の中には数多くのWeb API が公開されていますが、今回は ビットコイン の販売価格を取得できる API を利用してみたいと思います。 bitflyer.com 以下の URI にアクセスしてみて下さい。 https://bitflyer.jp/api/echo/price コマンドライン だとこうです。 curl -X GET &#39;https://bitflyer.jp/api/echo/price&#39; すると以下のような ビットコイン の価格情報が取得できると思います。 {&#34;ask&#34;:4519932.0,&#34;bid&#34;:4256241.000000000000,&#34;mid&#34;:4388086.500000000000} (ask: bitFlyer の1BTC販売価格、bid: bitFlyer の1BTC買取価格、mid: 仲値) URI にアクセス(リク エス トを送信する)だけで簡単に ビットコイン の価格情報を取得することができました。 例えば、自分の開発しているサービス内でこのWeb API を利用することで、開発コストを抑えつつ ビットコイン 価格の情報を利用した機能を作成することができます。 Web API の開発 今回はWeb API 開発の入門ということで、簡単なWeb API を作成してみます。 作成するもの リク エス トを送ると、登録してあるユーザーを取得できるWeb API を作成します。 ユーザーの一覧を取得できるだけでなく、IDをパラメータとして送ることで、特定のユーザーを取得できるようにします。 本来であればDBにユーザーデータを持たせ、新規登録・更新・削除などもできるようにしますが、今回は簡略化のために省きます。 ユーザーのデータはあらかじめ配列で持たせておくことにします。 言語 Web API を開発するにあたり、スタンダードとなっている言語は特にありません。 今回は私が普段の開発で使用しており、使用者数も多い PHP を使います。 エンドポイント( URI ) Web API は URI にリク エス トを送ることで、データの取得や操作を行います。 そのため、簡潔で、どのような機能を持つのかが分かりやすい URI を設計することが重要です。 一般的に重要だとされる点は以下のようなことです。 短く入力しやすい URI 人間が読んで理解できる URI 大文字小文字が混在していない URI 改造しやすい URI サーバ側の アーキテクチャ が反映されていない URI ルールが統一された URI 今回は以下のように設計します。 本来は URI に拡張子を含めるのはよくありませんが(サーバー側の アーキテクチャ が反映されているため)、今回は簡略化のため表示したままとしています。 目的 エンドポイント HTTPメソッド ユーザーの一覧取得 http://localhost/api/users.php GET 特定のユーザーの情報の取得 http://localhost/api/users.php?id=X GET 今回は実装しませんが、ユーザーの新規登録・更新・削除を行う場合は以下のようになるはずです。 目的 エンドポイント HTTPメソッド ユーザーの新規登録 http://localhost/api/users.php POST ユーザーの情報の更新 http://localhost/api/users.php?id=X PUT/PATCH ユーザーの情報の削除 http://localhost/api/users.php?id=X DELETE HTTPメソッドについて簡単に説明しておきます。 HTTPメソッドとは、HTTPでのアクセス時に指定するもので、GETやPOSTなどが有名です。 URI とHTTPメソッドの関係は、「操作する対象」と「操作方法」の関係にあります。 以下に一覧を示しておきます。 HTTPメソッド名 説明 GET 情報の取得 POST 情報の新規登録 PUT 既存の情報の更新 DELETE 情報の削除 PATCH 情報の一部変更 HEAD 情報のメタ情報の取得 レスポンスデータ Web API の URI にリク エス トを送ると、その結果(レスポンスデータ)が返ってきます。 Web API のレスポンスは他の開発者が利用することが前提なので、なるべくプログラム内部で利用しやすい形式にすることが望ましいです。 データフォーマット まず最初に、レスポンスデータをどのようなデータフォーマットで返すのかを考える必要があります。 現在、Web API で利用されている主なデータフォーマットは大きく分けて以下の2つです。 JSON XML かつては XML がよく使用されていましたが、現在は JSON 形式で返すのが主流になっています。 今回もレスポンスデータは JSON で返すこととします。 { &#34;status&#34;: &#34;OK&#34;, &#34;users&#34;: [ { &#34;name&#34;: &#34;yamada&#34;, &#34;age&#34;: 20 }, { &#34;name&#34;: &#34;suzuki&#34;, &#34;age&#34;: 25 }, { &#34;name&#34;: &#34;matsuda&#34;, &#34;age&#34;: 30 } ] } ステータスコード レスポンスを返す際には、適切な ステータスコード を返します。 ステータスコード とは、「200」や「404」など3桁の数字で表され、HTTPレスポンスヘッダの先頭行に記載されています。 「200 OK」や「 404 Not Found 」などはブラウザ画面にも表示されるため有名です。 以下に ステータスコード の分類を示しておきます。 ステータスコード 意味 100番台 情報 200番台 成功 300番台 リダイレクト 400番台 クライアントサイドに起因するエラー 500番台 サーバーサイドに起因するエラー エラー表示 Web API は様々な要因でエラーを返す可能性があります。 エラーを返す際には ステータスコード を付与しますが、それだけでは不十分です。 Web API を利用している側が、なぜエラーになったのかを具体的に分かるようにしておきます。 エラーを返す際にはエラーの詳細について、レスポンスボディに含めて返すのが一般的ですので今回もそのようにします。 { &#34;status&#34;: &#34;NG&#34;, &#34;message&#34;: &#34;Invalid parameter&#34; } セキュリティ 今回は入門の記事ということで実装は行いませんが、Web API 開発に置いてセキュリティ対策に気を配ることは重要です。 特に機密情報などを扱っている場合、悪意のある利用者から情報を保護するための対策を行っておかなければ大事故に繋がりかねません。 本格的なWeb API の開発・公開を考えておられる方は、別途セキュリティについての情報を確認することをおすすめします。 実装 実装方法は様々ありますが、今回は api ディレクト リ以下にusers. php というファイルを作成し、リク エス トを受けるようにします。 users. php でリク エス トを受けた後はサービスクラスに処理を投げ、返ってきた結果をレスポンスとして返すことにします。 users. php &lt;?php namespace api; require(&#39;UsersApiService.php&#39;); $usersApiService = new UsersApiService(); if (isset($_GET[&#34;id&#34;])) { // IDの指定がある場合 list($statusCode, $res) = $usersApiService-&gt;getUser($_GET[&#34;id&#34;]); } else { //IDの指定がない場合 list($statusCode, $res) = $usersApiService-&gt;getUserList(); } // 文字コード設定 header(&#39;Content-Type: application/json; charset=UTF-8&#39;); // HTTPステータスコード設定 http_response_code($statusCode); // レスポンスをJSON形式で返す print json_encode($res, JSON_PRETTY_PRINT); UsersApiService. php &lt;?php namespace api; class UsersApiService { private $userList = [ [&#34;name&#34; =&gt; &#34;yamada&#34;, &#34;age&#34; =&gt; 20], [&#34;name&#34; =&gt; &#34;suzuki&#34;, &#34;age&#34; =&gt; 25], [&#34;name&#34; =&gt; &#34;matsuda&#34;, &#34;age&#34; =&gt; 30] ]; private $statusCode = 200; private $res = []; /** * ユーザーのリストを取得する * * @return array httpステータスコード,ユーザーのリスト */ public function getUserList() { try { // 全てのUserリストを返す $this-&gt;res[&#34;status&#34;] = &#34;OK&#34;; $this-&gt;res[&#34;users&#34;] = $this-&gt;userList; } catch (Exception $e) { $this-&gt;statusCode = 500; $this-&gt;res[&#34;status&#34;] = &#34;NG&#34;; $this-&gt;res[&#34;message&#34;] = $e-&gt;getMessage(); } return [$this-&gt;statusCode, $this-&gt;res]; } /** * 特定のユーザーを取得する * * @return array httpステータスコード,ユーザーのリスト */ public function getUser($userId) { try { if ($this-&gt;validate($userId)) { // IDで指定されたユーザーを返す $this-&gt;res[&#34;status&#34;] = &#34;OK&#34;; $this-&gt;res[&#34;users&#34;] = $this-&gt;userList[$userId]; } } catch (Exception $e) { $this-&gt;statusCode = 500; $this-&gt;res[&#34;status&#34;] = &#34;NG&#34;; $this-&gt;res[&#34;message&#34;] = $e-&gt;getMessage(); } return [$this-&gt;statusCode, $this-&gt;res]; } /** * パラメーターのバリデーション * * @param int ユーザーID * @return boolean バリデーション結果 */ private function validate($userId) { if (preg_match(&#39;/[^0-9]/&#39;, $userId)) { // パラメーターが不正だった場合 $this-&gt;statusCode = 400; $this-&gt;res[&#34;status&#34;] = &#34;NG&#34;; $this-&gt;res[&#34;message&#34;] = &#39;Invalid parameter&#39;; return false; } elseif (!isset($this-&gt;userList[$userId])) { // 指定されたユーザーが見つからなかった場合 $this-&gt;statusCode = 404; $this-&gt;res[&#34;status&#34;] = &#34;NG&#34;; $this-&gt;res[&#34;message&#34;] = &#39;User not found&#39;; return false; } return true; } } 動作確認 ちゃんと動くか確認しておきます。 ユーザー一覧の取得 http://localhost/api/users.php { &#34;status&#34;: &#34;OK&#34;, &#34;users&#34;: [ { &#34;name&#34;: &#34;yamada&#34;, &#34;age&#34;: 20 }, { &#34;name&#34;: &#34;suzuki&#34;, &#34;age&#34;: 25 }, { &#34;name&#34;: &#34;matsuda&#34;, &#34;age&#34;: 30 } ] } 特定のユーザーの取得 http://localhost/api/users.php?id=2 { &#34;status&#34;: &#34;OK&#34;, &#34;users&#34;: { &#34;name&#34;: &#34;matsuda&#34;, &#34;age&#34;: 30 } } パラメータのフォーマットが不正な場合 http://localhost/api/users.php?id=a { &#34;status&#34;: &#34;NG&#34;, &#34;message&#34;: &#34;Invalid parameter&#34; } ユーザーが存在しない場合 http://localhost/api/users.php?id=99 { &#34;status&#34;: &#34;NG&#34;, &#34;message&#34;: &#34;User not found&#34; } おわりに 今回は入門として簡単なWeb API を作成してみました。 実際に本格的な実装を行う場合は、今回書いた以外にも様々な考慮が必要になります。 今回を機に、さらにWeb API についての知識を深めていきたいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 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
アバター
git commit を取り消したい、元に戻す方法 はじめに こんにちは、新卒2年目のtsudachantanです。 チーム開発にとっても便利な バージョン管理システム 「 Git 」……ですが、 「add して commit して pushして…」そこまではわかるけど、それ以外はいまいちわからない。 そんな状況の、Gitを使い始めたばかりの方が一番最初につまづくのは「commitの取り消し方」ではないでしょうか。 各コマンドがどのような動きをしているのか把握しないまま操作をすると 業務を行う上で、チームの開発ではなおさら支障をきたしかねません。 そこで、初心者の私が混乱しがちだった、「間違えて git commit してしまった場合」の対処法について、 自分自身の学習を兼ねて、Gitに慣れていない方に向けて簡単に説明していきたいと思います。 コミットの修正によく利用するGitコマンドをシーン別に分けて紹介し、それぞれのコマンドでできることをまとめました。 困ったときの参考になると幸いです。 git commit を元に戻すための複数の方法とそれぞれの取り消し方のメリット・デメリットを挙げていくので、 状況に応じて活用してみてください。 Git、git stash、git cloneのやり方を知りたい方は以下ブログもご一読ください。 ・ &#x3010;&#x8D85;&#x5165;&#x9580;&#x3011;&#x521D;&#x5FC3;&#x8005;&#x306E;&#x305F;&#x3081;&#x306E;Git&#x3068;GitHub&#x306E;&#x4F7F;&#x3044;&#x65B9; - RAKUS Developers Blog | &#x30E9;&#x30AF;&#x30B9; &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x30D6;&#x30ED;&#x30B0; ・ &#x3010;Git&#x5165;&#x9580;&#x3011;git stash&#x3067;&#x4F5C;&#x696D;&#x3092;&#x4FBF;&#x5229;&#x306B;&#x9000;&#x907F;&#x3059;&#x308B; - RAKUS Developers Blog | &#x30E9;&#x30AF;&#x30B9; &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x30D6;&#x30ED;&#x30B0; ・ &#x3010;Git&#x5165;&#x9580;&#x3011;git clone&#x3067;&#x65E2;&#x5B58;&#x30EA;&#x30DD;&#x30B8;&#x30C8;&#x30EA;&#x3092;&#x30AF;&#x30ED;&#x30FC;&#x30F3;&#x3057;&#x3088;&#x3046;&#xFF01; - RAKUS Developers Blog | &#x30E9;&#x30AF;&#x30B9; &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x30D6;&#x30ED;&#x30B0; 目次 はじめに 目次 「reset」でコミットを取り消してなかったことする resetのオプション メリット 注意点 「git reflog」で「reset」を取り消す 「revert」でコミットを打ち消す メリット 注意点 「--amend」で直前のコミットを上書き修正する 「直近のコミットメッセージを変更したい」 「コミットの内容を追加したい」 メリット 注意点 現在の状態を確認しよう おわりに 「reset」でコミットを取り消してなかったことする $ git reset [打ち消したいコミットID] git reset を使用すると、特定の時点までファイルを巻き戻すことができます。 ※まだリモー トリポジ トリに push していない場合にのみ使用してください git reset には3種類のオプションがあります。 どのオプションを選ぶかで結果が大きく変わるので、しっかり確認しておきましょう。 resetのオプション git reset --soft   commit のみ取り消し (HEADの位置のみ修正される)  このコマンドを実行すると、まさに「コミットをする直前」の状態に戻ります。  作業 ディレクト リとステージングエリアはそのままです。  まとめてコミットしたかったのに1つしかコミットしていなかった、  まだ作業中なのにコミットしてしまった。といった場合に便利です。   git reset --mixed もしくはオプションなし   commit と add の取り消し(HEADの位置・インデックスが修正される)  HEADと一緒にステージが巻き戻ります。   git add でステージしたけど、やっぱり戻したい。というときに便利です。  作業 ディレクト リのファイルは消えません。 git reset --hard  全部を取り消し(HEADの位置・インデックス・ワーキングツリーが修正される)  もっとも強力なオプションです。  ステージングエリアにも作業 ディレクト リにも残したくないといった場合に使用します。 メリット git reset を使用すると、誤ったコミット自体を削除出来るのでコミットログが見やすくなります。 また、HEADの位置を大幅に移動することができます。 注意点 git reset は「commit を取り消した」というコミット履歴が残りません。 そのため、リモー トリポジ トリで公開されているコミットに対して行うと、不整合が発生してしまいます。 コミットそのものを削除してしまうので、既に他の誰かがコミットを重ねているときに reset してしまうと、 存在するはずの親コミットがなくなってしまいます。 そのため、他のメンバーが push できなくなります。 commit の実行後に push した場合は使用せず、 ローカルな変更を取り消して元に戻したいときに限って、使用するようにしましょう。 「git reflog」で「reset」を取り消す 間違えて git reset --hard して必要なコミットを消してしまった場合は git reflog を使いましょう。 $ git reset --hard HEAD^ # 間違えてresetしてしまった! $ git reflog 04f11b7 HEAD@{0}: reset: moving to 04f11b7 0208e28 HEAD@{1}: merge develop: Merge made by the &#39;recursive&#39; strategy. 6908c20 HEAD@{2}: checkout: moving from develop to master git reflog を使用すると過去の操作履歴(HEADの動き)を確認することができます。 具体的には コミット関連( commit 、 merge 、 pull 、 revert など) ブランチの切り替え( check out ) 履歴の書き換え( reset 、 rebase など) の3点です。 git reflog でミスした時点を数えたら、 git reset で戻したい場所を指定して戻します。 $ git reset --hard HEAD@{1} reset を reset で元に戻すことができます。 手順をまとめると、 1. git reflog で操作履歴を見る 2.戻りたい地点の数字を指定して git reset する 以上で間違えた reset を元に戻すことができます。 「revert」でコミットを打ち消す おすすめの方法は git revert を使って元に戻す方法です。 $git revert [打ち消したいコミットID] revert は指定したコミットと逆の内容をコミットしてくれます。 ちなみに revert は「元に戻す」という意味です。 revert を使うには、打ち消したいコミットの ハッシュ値 を探す必要があります。 git log コマンドを使用して該当コミットの ハッシュ値 を調べましょう。 git revert で指定したコミット時点の状態まで作業ツリーを戻します。 また、 git revert を使用してもコミットはなかったことにならず、「逆向きのコミット」の履歴が残ります。 つまり、歴史を改変することなく、新しく「 revert したコミット」が追加されるので、 push した後でも安心して使用できます。 もし間違えて revert したとしても、もう一度 revert し直せば問題ありません。 メリット revert は push 済みのコミットを打ち消したいときに便利です。 push 済のコミットの上に、新しいコミットを乗せる形でコミットを元に戻すことができるからです。 コミット自体を削除するわけではないので、安全にコミットを元に戻すことができます。 また、誤った履歴も残っているので、 revert 自体の取り消しも簡単に行うことができます。 チーム開発をしている場合は reset よりも revert の方が好ましいでしょう。 注意点 誤った履歴が残ってしまうので、コミットログが複雑になり見づらくなります。 「--amend」で直前のコミットを上書き修正する git commit --amend 「単に直近のコミットメッセージを変更したい」 「コミット内容を後から追加したい」 上記の場合には --amend オプションが便利です。   ※まだリモー トリポジ トリに push していない場合にのみ使用してください。 「直近のコミットメッセージを変更したい」 --amend オプションを追加してコミットします。 実行すると テキストエディタ が開きます。 変更したい箇所を修正してエディタを終了すると、 直近のコミットメッセージをそれで置き換えることができます。 「コミットの内容を追加したい」 コミットしたあとで、そこにさらにファイルを追加したり変更したりしたくなった場合にも、 手順は基本的には同じです。 ファイルを編集して git add したりし、ステージングエリアをお好みの状態にしたら、 続いて git commit --amend を実行します。 メリット コミットを増やさず修正できるので、コミットログが複雑になりません。 注意点 コミットに追加することはできますが、削除することはできません。 直前のコミットではなく、さらに歴史をさかのぼったコミットを変更したい場合は git rebase を使用する必要があります。 push したコミットに対して使用すると、同じ変更が別のバージョンで見えてしまうことになり、 チームの混乱を招くので注意しましょう。 詳しくは こちらの記事 をご覧ください。 現在の状態を確認しよう 間違ったコミットを防ぐためにも、自身の編集が完了したらコミットの前に現在の状態を確認しましょう。 コミット前だけでなく、コミットの修正後にも想定通りの修正が行えているか確認するとよいでしょう。 git status  現在の状態を表示します。変更があったファイルを確認することができます。 git diff  ソース内でどのような変更があったのか、差分を確認することができます。 git log  コミット履歴を確認することができます。 困ったときには、現状を把握するためにまずログやステータスを確認しましょう。 おわりに git commit の取り消し、元に戻す方法について紹介しました。 コミットに対するそれぞれのコマンドの働き方のイメージが掴めたでしょうか。 不慣れなうちは自分がどのような操作を行っているのかを、都度確認しながら利用していくのが良いと思います。 チーム開発をしている場合は、それぞれのコマンドの利用にいっそう注意が必要です。 もしコミットを間違えてしまっても、慌てずに状況に応じたコミットの取り消し方法を選んで、 後から見た人がわかりやすい commit を意識して開発していきましょう。 今回紹介した基本的な内容から、より理解を深めていっていただければ幸いです。 それでは!     エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 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
アバター
こんにちは。インフラエンジニアをしていますknmriiです。 今回は bash の シェルスクリプト について、基本的な書き方やよく使うコマンドなどを紹介していきます。 bash でのプログラミングを学び始めた方や、インフラエンジニアになりたての方のご参考になりましたら幸いです。 また、普段は別の言語に触れられている方についてもサーバサイドではこのような bash の スクリプト が動いていることが多いですので 参考までに一読していただければと思います。 目次 目次 bash・シェルスクリプトとは bashを用いたシェルスクリプトの書き方 シバン シェバング(Shebang) コメント 変数の定義 変数に値を代入する 変数にスペース等が入った文字列を代入する 変数にコマンドの実行結果を代入する スクリプト実行時の引数を変数に代入する 配列の定義 先頭の内容を参照する 任意の配列番号の内容の参照する 配列の内容を全て参照する for文 指定回数を繰り返したい場合 配列の要素数だけ繰り返したい場合 while文 一般的なwhile文 readコマンドを使用したwhile文 if文 case文 終わりに bash ・ シェルスクリプト とは そもそも bash シェルスクリプト とは何ぞやという話からさせて頂きます。 bash bash とは、多くの UNIX系OS で標準的に用いられるシェルプログラムの一つ。標準の実行プログラムファイル名(コマンド名)は「 bash 」だが、「sh」が指定された場合も起動するよう シンボリックリンク が置かれることが多い。 IT用語辞典 e-words bash より引用 シェルスクリプト シェルスクリプト とは、OS( オペレーティングシステム )を操作するためのシェル上で実行できる簡易な プログラミング言語 ( スクリプト言語 )。また、そのような言語によって書かれた、複数のOSコマンドや制御文などを組み合わせた簡易なプログラム。一般的には UNIX系OS のシェルで実行できるものを指す。 IT用語辞典 e-words シェルスクリプト より引用 調べてみたところ上記のような解説がありましたが、入門者にとってはかなり難しく感じると思いますので簡単に言い換えてみるとこのようになります。 bash → Unix 系( Linux 含む)のOSでユーザがコマンドを入力し、それに応じてシステムが処理をしたり応答を返すための仲介をするプログラム(シェル)の一種。 シェルスクリプト → コマンドを組み合わせた簡易的な プログラミング言語 。 bash を用いた シェルスクリプト の書き方 ここからは実際の bash を用いた シェルスクリプト の書き方を紹介します。 シバン シェバング( Shebang ) シェルスクリプト の1行目によく記載されている以下のようなものをシバン シェバング( Shebang )と呼びます。 実行する シェルスクリプト の インタプリタ を指定しています。 シバンを以下のように記載することで、 シェルスクリプト が bash を使用して実行されるようになります。 ついつい忘れがちな1行かもしれませんが、 bash にしかない機能を使用したい場合に、この記載がないと意図したように動かない可能性があります。 bash を用いた シェルスクリプト を作成する際には必ず書くようにしましょう。 #!/bin/bash また、記載するパスを #!/bin/sh としても大抵の場合 /bin/sh は /bin/bash の シンボリックリンク となっているため、動作はしますが一部挙動が変化するようです。 #!/bin/sh 参考:「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 /bin/sh コメント bash の スクリプト 内にコメントを残したい場合には、行の先頭に # を付けましょう。 〇 スクリプト #!/bin/bash # echo &quot;bashでこの行はコメントです&quot; echo &quot; bashでこの行はコメントではありません &quot; 〇実行結果 bashでこの行はコメントではありません 変数の定義 bash での変数は 変数名 と 値 を = でつなげることで定義することができます。 一般的には、変数と定義する際に初期値の代入をすることが多いです。 この際に、 java でいう int や String のような型を指定する必要はありません。 ただし、基本的に bash では変数に代入された値の全てが文字列として扱われます。 また、 = の前後にスペースを入れるとエラーとなりますのでご注意ください。 変数の内容は echo $変数 とすることで出力することができます。 変数に値を代入する bash では変数と値を = で接続するだけで代入が可能です。 〇 スクリプト #!/bin/bash NUM = 8 MESSAGE =Hello_bash echo $NUM echo $MESSAGE 〇実行結果 8 Hello_bash 変数にスペース等が入った文字列を代入する bash では、ダブルクオーテーションで値を囲むとスペースが入った文字列も変数に代入することが可能です。 〇 スクリプト #!/bin/bash MESSAGE = &quot; Hello bash &quot; 〇実行結果 Hello bash &lt;注意点> スペースが入った文字列をダブルクオーテーションで囲まずに代入すると、 bash のルール的にスペース以降の文字列が別コマンドとして認識されてしまいます。 変数にコマンドの実行結果を代入する bash にてコマンドの実行結果を変数に代入したい場面が非常に多いです。 そのような場合は、バッククオートでコマンドを囲みます。 #!/bin/bash HOSTNAME = `hostname` echo $HOSTNAME testhost001 スクリプト 実行時の引数を変数に代入する bash の スクリプト を実行する際、引数を渡すことができます。 一般的な引数は、一度変数に格納して スクリプト 内で使用することが多いです。 また、引数は ${1} ${2} のように、渡した順番を指定して呼び出すことも可能です。 〇 スクリプト #!/bin/bash NUM = ${1} STRING = ${2} echo &quot; 引数1は ${NUM} です &quot; echo &quot; 引数2は ${STRING} です &quot; 〇実行結果 $ sh test.sh 1 bash 引数1は1です 引数2はbashです 配列の定義 bash にて配列の定義をする場合は、変数と同様に 配列名 と 配列 を = でつなげます。 この際、配列に関しては (A B C) のようにかっこで囲み値ごとにスペースを入れます。 #!/bin/bash ARRAY = ( 0 1 2 3 4 5 ) bash で配列の中身を参照するには、以下のようにします。 先頭の内容を参照する 〇 スクリプト #!/bin/bash ARRAY = ( 0 1 2 3 4 5 ) echo $ARRAY 〇実行結果 0 任意の配列番号の内容の参照する 〇 スクリプト #!/bin/bash ARRAY = ( 0 1 2 3 4 5 ) echo &quot; ${ARRAY[ 1 ]} &quot; 〇実行結果 1 配列の内容を全て参照する 〇 スクリプト #!/bin/bash ARRAY = ( 0 1 2 3 4 5 ) echo &quot; ${ARRAY[ @ ]} &quot; 〇実行結果 0 1 2 3 4 5 for文 指定回数を繰り返したい場合 bash でのfor文は以下のようにします。 seq コマンドを使用することで指定の回数を繰り返すことが可能です。 〇 スクリプト #!/bin/bash for i in `seq 0 5 ` do echo $i done 〇実行結果 0 1 2 3 4 5 配列の要 素数 だけ繰り返したい場合 配列の中身を順番に取り出したいケースはかなり多いと思います。 そのような場合、 bash では以下のようにするとfor文で全て取り出せます。 〇 スクリプト #!/bin/bash ARRAY = ( January February March April May June July August September October November December ) for i in ${ARRAY[ @ ]} do echo $i done 〇実行結果 January February March April May June July August September October November December while文 一般的なwhile文 bash での一般的なwhile文は以下のように記載できます。 [] で囲まれている部分については、testコマンドが実行されているのですが、testコマンドについてはif文の項目で解説しようと思います。 〇 スクリプト #!/bin/bash count = 0 while [ $count -lt 5 ] do count = $(( ++count )) echo $count done 〇実行結果 test.txt 1 2 3 4 5 readコマンドを使用したwhile文 テキストファイルの全ての行に対して処理をしたいことが度々あります。 そのような場合に使用するのが、readコマンドを使用したwhile文です。 〇サンプルファイル January February March April May June July August September October November December 〇 スクリプト #!/bin/bash while read line do echo $line done &lt; test .txt 〇実行結果 January February March April May June July August September October November December if文 bash で特定の条件で処理を分岐させたい場合には、if文を使用します。 bash でのif文の多くはtestコマンドを使用します。 また、testコマンドを使用したif文はこのように記載します。 if [ 条件 1 ]; then 処理 1 ## 条件1が真であれば処理1が実行される elif [ 条件 2 ]; then 処理 2 ## 条件を複数使用したい場合は elif を使用する ## 条件2が真であれば処理2が実行される else 処理 3 ## 条件1 2 がどちらでも真でなければ処理3が実行される fi 上記のように [] を使用してその中に条件を記載するのですが、その記載方法は test コマンドに準じています。 testコマンドにて使用できるパラメータの一例として、以下のようなものがあります。 項目 例 説明 -e [ -e /tmp/testfile ] testfileが存在していれば真 -f [ -e /tmp/testfile ] testfile存在していて通常ファイルであれば真 -d [ -d /tmp/testdir] testdirが存在していて ディレクト リであれば真 -z [ -z 文字列 ] 文字列の長さが0であれば真 -n [ -n 文字列 ] 文字列の長さが0でなければ真 -eq [ 数値1 -eq 数値2 ] 数値1と数値2が等しければ真(=) -ne [ 数値1 -ne 数値2 ] 数値1と数値2が等しければ真(!=) -gt [ 数値1 -gt 数値2 ] 数値1が数値2より大きければ真(>) -ge [ 数値1 -ge 数値2 ] 数値1が数値2以上であれば真(>=) -lt [ 数値1 -lt 数値2 ] 数値1が数値2より小さければ真(&lt;) -le [ 数値1 -le 数値2 ] 数値1が数値2以下であれば真(&lt;=) = [ 文字列1 = 文字列2 ] 文字列1と文字列2が等しければ真 != [ 文字列1 != 文字列2 ] 文字列1と文字列2が等しくなければ真 if文の使用例としてのサンプルは以下です。 〇 スクリプト #!/bin/bash NUMS = ( 1 2 3 4 5 6 7 8 9 10 ) STRINGS = ( January February March April May June July August September October November December ) echo &quot; ===========TEST1=========== &quot; for num in ${NUMS[ @ ]} do if [ $num -gt 5 ]; then echo &quot; $num は5より大きいです。 &quot; else echo &quot; $num は5以下です。 &quot; fi done echo &quot; ===========TEST2=========== &quot; for num in ${NUMS[ @ ]} do if [ $num -le 5 ]; then echo &quot; $num は5以下です。 &quot; else echo &quot; $num は5より大きいです。 &quot; fi done echo &quot; ===========TEST3=========== &quot; for str in ${STRINGS[ @ ]} do if [ $str = &quot;January&quot; ];then echo &quot; $str は1月です &quot; touch /tmp/jaunary.txt else echo &quot; $str は1月ではありません。 &quot; fi done echo &quot; =========================== &quot; 〇実行結果 ===========TEST1=========== 1は5以下です。 2は5以下です。 3は5以下です。 4は5以下です。 5は5以下です。 6は5より大きいです。 7は5より大きいです。 8は5より大きいです。 9は5より大きいです。 10は5より大きいです。 ===========TEST2=========== 1は5以下です。 2は5以下です。 3は5以下です。 4は5以下です。 5は5以下です。 6は5より大きいです。 7は5より大きいです。 8は5より大きいです。 9は5より大きいです。 10は5より大きいです。 ===========TEST3=========== January は1月です February は1月ではありません。 March は1月ではありません。 April は1月ではありません。 May は1月ではありません。 June は1月ではありません。 July は1月ではありません。 August は1月ではありません。 September は1月ではありません。 October は1月ではありません。 November は1月ではありません。 December は1月ではありません。 =========================== case文 bash にて特定の条件で処理を分岐させたい場合には、if文ではなくcase文を使用することもできます。 条件分岐が多い場合はこちらの方が便利ですね。 case 値 in 値1 ) 処理1 ;; 値2 ) 処理2 ;; 値3 ) 処理3 ;; * ) 処理4 # 処理1~3のどれとも一致しなかった場合は処理4が実行される esac 使用例としては以下のような感じです。 〇 スクリプト #!/bin/bash STRINGS = ( January February March April May June July August September October November December ) for str in ${STRINGS[ @ ]} do case $str in January ) echo &quot; $str は1月です &quot; ;; February ) echo &quot; $str は2月です &quot; ;; March ) echo &quot; $str は3月です &quot; ;; * ) echo &quot; $str は1~3月ではありません &quot; esac done 〇実行結果 January は1月です February は2月です March は3月です April は1~3月ではありません May は1~3月ではありません June は1~3月ではありません July は1~3月ではありません August は1~3月ではありません September は1~3月ではありません October は1~3月ではありません November は1~3月ではありません December は1~3月ではありません 終わりに 今回は bash による シェルスクリプト の基本的な書き方や、構文についてを紹介しました。 ほかの言語を学習してから bash を使おうとしたり、始めてプログラミングに触れる方にとって戸惑うことも多いかと思いますが、少しでもご参考になれば幸いです。   エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 https://rakus.hubspotpagebuilder.com/visit_engineer/ rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com
アバター
はじめに こんにちは。フロントエンドチーム新卒2年目のhy094です。 Reactでよく使用するJSX。 使ってみると便利なのですが、最初は「 JavaScript 内にHTML?」と混乱の原因になっていると思います。 また、その構文から違和感や気持ち悪さを感じる方もいると聞きます。 そこで、今回はReactで使用するJSXについてまとめます。 少しでも混乱や違和感の解消ができたら幸いです。 目次 はじめに 目次 JSXとは? JSXの記法 JavaScript式を埋め込む コメントアウト タグが空の場合 フラグメント HTMLとの属性の差異 おわりに 参考文献 JSXとは? 一言で表すと「 JavaScript 内でHTMLっぽい表現をする Javascript の拡張構文」です。 具体的には以下のような形です。 const element = ( &lt;h1 className= &quot;greeting&quot; &gt; Hello, world! &lt;/h1&gt; ); ※ React公式サイト より引用 JavaScript の変数宣言にHTMLタグが代入されているように見え、違和感を感じる方もいるかもしれません。 上記の通り拡張構文ですので上の式は以下の式に コンパイル されます。 const element = React.createElement( 'h1' , { className: 'greeting' } , 'Hello, world!' ); ※ React公式サイト より引用 ここまで見て「もしやJSXなくてもReact書けるのでは・・・?」と思った方、正解です。書けます。 ただ、 React.createElement で毎回書くのは非常に手間でコードも煩雑になるため、JSXを利用することを個人的にはお勧めします。 それでもJSXは使いたくない・・という方は 公式サイト - JSX なしで React を使う を参照してください。 JSXの記法 ここからは、JSXの記法についてまとめます。 JavaScript 式を埋め込む JSX内に {} で囲むことで JavaScript の式を埋め込むことができます。 const fruit = 'りんご' ; const price = 100; const quantity = 5; const element = &lt;h1&gt; { fruit } を { quantity } 個買うと { price * quantity } 円です&lt;/h1&gt;; ReactDOM.render( element, document .getElementById( 'root' ) ); もちろん関数も利用可能です。 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper' , lastName: 'Perez' } ; const element = ( &lt;h1&gt; Hello, { formatName(user) } ! &lt;/h1&gt; ); ReactDOM.render( element, document .getElementById( 'root' ) ); ※ React公式サイト より引用 コメントアウト JSX内ではHTML形式でのコメントは利用できません。 代わりに、 JavaScript の式を埋め込んだものと同じ {} 内に JavaScript の コメントアウト を記述します。 const user = 'admin' ; const element = ( &lt;div&gt; { /* コメント */ } { /*  複数行コメントA  複数行コメントB */ } { //コメント user } &lt;/div&gt; ); 最後の例は改行しないと } も コメントアウト されてしまい、エラーとなるので改行はお忘れなく。 タグが空の場合 タグが空の場合は /&gt; で閉じます。 例えば、HTMLで改行タグは &lt;br&gt; ですが、JSXでは &lt;br /&gt; にしないとNGです。 &lt;div&gt; こんにちは &lt;br /&gt; &lt;img src= &quot;example.gif&quot; /&gt; &lt;/div&gt; フラグメント JSXは親要素を1つしか持つことができません。 例えば、以下のようなものはエラーとなります。 const error = ( &lt;div&gt; hoge &lt;/div&gt; &lt;div&gt; fuga &lt;/div&gt;); 簡単な解決方法として、全体をさらに親要素で囲ってしまうというものがあります。 const success = ( &lt;div&gt; &lt;div&gt; hoge &lt;/div&gt; &lt;div&gt; fuga &lt;/div&gt; &lt;/div&gt;); ただ、この方法だと不要なdivがDOMに追加されてしまいます。 この問題は、フラグメント( React.Fragment )を利用することで解決できます。 const fragment = ( &lt;React.Fragment&gt; &lt;div&gt; hoge &lt;/div&gt; &lt;div&gt; fuga &lt;/div&gt; &lt;/React.Fragment&gt;); React.Fragment だと少し長いので、短縮記法も用意されています。 &lt;&gt; , &lt;/&gt; です。 const shrotFragment = ( &lt;&gt; &lt;div&gt; hoge &lt;/div&gt; &lt;div&gt; fuga &lt;/div&gt; &lt;/&gt;); 一見空タグにしか見えませんが、 React.Fragment と同等のフラグメントとして認識されます。 Reactで頻出する記法ですので、覚えておいて損はないと思います。 HTMLとの属性の差異 JSXはあくまでも JavaScript なので、 HTMLの属性はキャメルケースで書きますし、 JavaScript の 予約語 (classなど)は属性として使えません。 以下は一例です。 &lt;&gt; { /* class属性 -&gt; className */ } &lt;div className= &quot;hoge&quot; &gt; { /* for属性 -&gt; htmlFor */ } &lt;label htmlFor= &quot;fuga&quot; &gt;Hello&lt;/label&gt; { /* tabindex属性 -&gt; tabIndex */ } &lt;div tabIndex= &quot;0&quot; &gt;World&lt;/div&gt; &lt;/div&gt; &lt;/&gt; おわりに 今回はJSXについてまとめました。 JSXは React.createElement を見やすく書く記法です。 また、 React.createElement に コンパイル されるので import React from "react"; が必要になるわけです。 JSXはReactの土台なので、初学者の内に抑えておくと後がスムーズになると思います。 参考文献のほか、紹介しているサイトは少なくないのでぜひ他にも調べてみてください。 それでは、ご覧いただきありがとうございました! 参考文献 https://ja.reactjs.org/docs/introducing-jsx.html https://ja.reactjs.org/docs/jsx-in-depth.html https://ja.reactjs.org/docs/fragments.html#short-syntax https://ja.reactjs.org/docs/faq-build.html#gatsby-focus-wrapper https://qiita.com/nabepon/items/87bb3b4f1e7bfa342489 https://www.to-r.net/media/react-tutorial04/ https://note.com/erukiti/n/n6f673021469e エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 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です。 いつも ラク スのエンジニアブログをお読みいただき、またエンジニアイベントへのご参加、ありがとうございます。 今回は、弊社が主催しているイベントの中でも人気の高い「プロジェクトマネジメント Tips LT会」について、まとめさせていただきました! はじめに イベント概要 発表タイトル一覧 発表の紹介 No1. SaaS開発と受託開発におけるプロジェクトマネジメントの違い No4. プロジェクトメンバーのモチベーション No6. メンバーと一緒に進めるマネジメントの学び方と伝え方 当日の様子 おわりに イベント概要 イベント内容 プロジェクトマネジメント をテーマにしたLT会 開催日: 2021/05/12(水) 19:00-21:30 イベントページ rakus.connpass.com 弊社主催イベントでは、LT(ライトニング トーク )形式を採用しております。 LTとは? Lightning Talks(ライトニング トーク )の略 "Lightning"は英語で"稲妻"という意味 つまり 「短いプレゼンテーション」 発表タイトル一覧 今回、LT会に参加された方々の発表タイトルは以下の通りです。 No. 登壇者 タイトル 1 komik さん SaaS 開発と受託開発におけるプロジェクトマネジメントの違い 2 Pep299 さん プレイングマネージャー の葛藤 3 ヒグ! さん 社会人2年目のエンジニアがPMになるとき 4 moriyama_jun さん プロジェクトメンバーのモチベーション 5 面川泰明 さん 性格診断と価値観分析ではじめる1on1 6 Mazawa_Hajime さん メンバーと一緒に進めるマネジメントの学び方と伝え方 7 白柳隆司 さん 「終わらせる」から考えるマネジメント 8 Hiroki_Hachisuka さん あなたはPO?PM?PdM?PjM? 9 sakamoto-k さん アジャイル なチームへの道 はじめの一歩 10 ShoheiKun さん メンバーに任せることについて 11 Cat_Maru さん プロジェクト管理失敗点からの学びTips(仮) 発表の紹介 LT会には、弊社の開発組織からマネージャー3名が登壇しました。 本記事では、その3名の発表内容をご紹介します。 No1. SaaS 開発と受託開発におけるプロジェクトマネジメントの違い speakerdeck.com 現場での開発経験が長い分技術力を背景にしたマネジメントが得意で、困難な状況下でもやりぬく達成志向性が強い、 ラク ス開発マネージャーの発表です。 SaaS 開発と受託開発におけるプロジェクトマネジメントの違いを「品質・コスト・タイム」の観点で分かりやすく解説いただきました。 1本目の発表でしたが、参加者からも共感の声が多く、とても盛り上がっておりました。 No4. プロジェクトメンバーのモチベーション speakerdeck.com 続きまして、テレビCMでも目にする楽楽精算から開発マネージャーの発表です。 メンバーのモチベーションをマネジメントするにあたり、1on1や定期的な面談の場で「幸福度」の点数とその理由を問うとのこと。 参加者からも「これは良い問い」、「大事なのは満点とのギャップと理由」な どコメントが多くよせられました。 No6. メンバーと一緒に進めるマネジメントの学び方と伝え方 speakerdeck.com 最後は、 ラク スのエンジニア リングマ ネージャーからの発表です。 マネージャーとして取り組んでいる工夫をご紹介しました。 共感 業務ではなく研修としてやってみる(時間を分ける) 学ぶ、真似る オレオレ経験より有名書籍のべスプラを紹介してみる 自己達成感 教わる側が話す、当てはめるなど、アクティブラーニングで試す 発表を聞かれた参加者からは、有名書籍をまとめた以下記事に対し、関心が高まっておりました。 tech-blog.rakus.co.jp 当日の様子 Togetterで、当日の様子をまとめております。 雰囲気を見たいという方は、以下をご確認ください。 togetter.com おわりに 本記事では、弊社開発マネジャー達の発表内容をご紹介させていただきました。 他の方の発表資料を見たい!という方は、以下イベントページから、ご確認ください。 rakus.connpass.com プロジェクトマネジメント Tips LT会は、2021年度中にvo3を開催する予定です。 もし、本記事をお読みいただき、興味関心が湧きましたら是非次回イベントに参加/登壇申し込みいただけますと幸いです。 ラク スでは、毎週LT会や勉強会のイベントを開催しております。 我々の取り組みが、皆さまにとって新しい気づきや成長につながる機会となっていますと嬉しい限りです。 今後ともよろしくお願いいたします。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com
アバター
こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課の @t_okkan です。 今回はFlutterの静的解析を紹介します。 Flutterは Dart で実装しているため、静的解析も Dart の仕組みを利用します。 Dart は静的型付け言語と動的型付け言語のどちらにも対応しているため、型チェックが比較的ゆるい プログラミング言語 です。 そのため、静的解析のルールを定めることで型チェックを厳密にしたり、コードのバグを未然に防ぐことが必要になります。 また、 ソースコード に強制的に統一されたコーディングスタイルを適用できます。 Flutterの静的解析の仕組みからできることを紹介しています。 Flutterの静的解析の構成要素 静的解析の導入 includeの設定 analyzerの設定 厳密な型チェックを有効にする 一部のファイルを解析の対象から除外する 特定のルールをプロジェクトで無効にする 解析のルールの重要度を変更する linterの設定 ファイルや特定のコードを静的解析の対象から除外する 静的解析の実行 エディタで静的解析を有効にする コマンドラインで静的解析を実行する まとめ Flutterの静的解析の構成要素 Flutterの実装言語である Dart の静的解析はAnalyzerとLinterから構成されます。 Analyzer ソースコード に Dartの言語仕様 で指定されているエラーや警告などの 潜在的 なバグがないかを解析します。 Linter ソースコード が Dartのスタイルガイドライン や設定した他の ガイドライン に準拠しているかを解析します。 Flutterではこの Dart の静的解析の仕組みを利用して、 ソースコード の静的解析を行います。 静的解析の導入 Flutterのプロジェクトに静的解析を導入するには、 analysis_optins.yaml ファイルを pubsepc.yaml ファイルと同じ ディレクト リに配置します。 ./ sample |- android |- ios |- lib | |- main.dart |- analysis_options.yaml ← ファイルを追加 |- pubspec.yaml Flutterの新規プロジェクトを作成した時に、プロジェクトのルートに analysis_options.yaml ファイルを追加することをお勧めします。 analysis_options.yaml は以下のような実装になります。 include : package:pedantic/analysis_options.yaml analyzer : exclude : [ build/** ] strong-mode : implicit-casts : false linter : rules : - camel_case_types analysis_options.yaml では以下の設定が可能です。 inculde 他の analysis_options.yaml ファイルを取り込むことで、定義されている静的解析のルールを取り込む。 analyzer Analyzerや静的解析全体のカスタマイズを設定する。 linter Linterのルールをカスタマイズを設定する。 それぞれの設定でできることを詳しく説明していきます。 includeの設定 include にはすでに定義済みの外部の analysis_options.yaml ファイルをプロジェクトに取り込むことができます。 これにより静的解析を手軽に導入することができます。 また、 analyzer や linter を独自で設定して1から静的解析のルールを構築することも可能ですが、Flutterの プラグイン として定義済みのルールを適用することができます。 主な プラグイン には以下のようなものがあります。 effective_ dart Dart を効率的に実装するために定めたルールである Effective Dart に準拠したLinterのルールを適用できる。 pub.dev lint effective_dart プラグイン と同様にEffective Dart に準拠したLinterのルールを適用できる。 pub.dev pedantic Google が内部で使用している静的解析のルールを取り込むことができる。Flutter SDK を実装するプロジェクトで利用されているルール。Effective Dart よりもより厳密なルールが設定がされている。 pub.dev それぞれの プラグイン の リポジトリ の analysis_options.yaml から、どのようなルールが設定されているのか確認できます。 静的解析の プラグイン を導入する場合は、 pubspec.yaml に プラグイン を追加し、 analysis_options.yaml の include に プラグイン で定義されている analysis_options.yaml を設定します。 例えば、 pedantic を導入する場合は以下のようになります。 pubspec. yaml dev_dependencies : flutter_test : sdk : flutter # プラグインを追加 pedantic : ^1.11.0 analysis_options. yaml # pedanticのanalysis_options.yamlを設定 include : package:pedantic/analysis_options.yaml analyzerの設定 analyzer では Dart の型システムのカスタマイズや、静的解析を適用する範囲の設定などができます。 厳密な型チェックを有効にする Dart は部分的に動的片付け言語になるため、デフォルトでは暗黙的型変換が有効であったり、比較的ゆるめの型チェックになります。 Dart のデフォルトの型チェックよりも厳密な型チェックが必要な場合は、 analyzer のオプションで strong-mode を指定することで有効にできます。 strong-mode では以下のような設定が可能です。 implicit-casts false にすることで暗黙的型変換の実装を禁止できます。 implicit-dynamic false にすることで動的な型宣言で使用する dynamic 型の使用を禁止できます。 analysis_options.yaml は以下のように設定します。 analyzer : strong-mode : implicit-casts : false implicit-dynamic : false コンパイル 時の型チェックが厳密になり、より堅牢なコードになるので、できるだけ厳密な型チェックは有効にすることをおすすめします。 一部のファイルを解析の対象から除外する Flutterの実装をしていると、immutableなクラスを自動生成する freezed パッケージなどで自動生成されたファイルは、静的解析の対象から除外したい場合があります。 また、一部のファイルを解析から除外したい場合は、 analyzer のオプションの exclude に除外するファイルを設定できます。 以下に analysis_options.yaml の設定の一例を載せておきます。 analyzer : exclude : # ファイルを直接指定 - lib/client.dart # フォルダ内の特定の拡張子を指定 - lib/data/model/*.freezed.dart # フォルダ内の全てのファイルを指定 - test/_data/** 特定のルールをプロジェクトで無効にする 前述した静的解析用の プラグイン を導入した際に、特定のルールだけは無効にしたい場合があります。 特定のルールをプロジェクトで無効にするには、 analyzer のオプションの errors に設定し、 errors のオプションに無視したいルール名、 ignore を設定すると、プロジェクト全体で指定したルールを無効にできます。 なお、AnalyzerとLinterのどちらのルールも無効にできます。 参考として、以下に analysis_options.yaml 設定の一例を載せておきます。 analyzer : errors : # ルール名:ignore # Analyzerの無効化:TODO表記を無視する todo : ignore # Linterの無効化 avoid_empty_else : ignore 解析のルールの重要度を変更する Flutterの静的解析には info 、 warning 、 error の3種類の重要度があります。 info と warning :静的解析には失敗しないが、警告されるレベル error :違反していると静的解析が失敗するレベル Flutterの静的解析では、特定の解析ルールの重要度をプロジェクト全体で変更することができます。 例えば、Linterルールはデフォルトで info レベルに設定されていますが、 warning や error レベルに引き上げることが可能です。 重要度を変更するには analyzer の errors オプションに、変更したいルール名と重要度( info 、 warning 、 error )を設定します。 以下に、 analysis_options.yaml 設定の一例を載せておきます。 analyzer : errors : # ルール名:重要度(info、warning、error) # Analyzerの変更:returnの省略を警告する missing_return : warning # Linterの変更 prefer_contains : error linterの設定 プラグイン である pedantic や effective_dart を導入することで、Linterを手軽に設定できましたが、もちろん開発者が個別でLinterをカスタマイズすることも可能です。 カスタマイズする項目を linter の rules に設定します。 Linterで設定できるルールの一覧は、以下で公開されています。 dart-lang.github.io pedantic と effective_dart 、Flutterでデフォルトで適用されている設定はそれぞれマークされており、設定されているルールを上書きして無効にすることもできます。 例えば、ローカル変数で 型推論 を使用するようにします。 omit_local_variable_types を無効にする場合は、以下のように false を設定します。 include : package:pedantic/analysis_options.yaml linter : rules : omit_local_variable_types : false ファイルや特定のコードを静的解析の対象から除外する analyzer の設定で、特定のファイルを静的解析の対象から除外することができました。 それに加え、 ソースコード の特定の1行だけ特別に静的解析の対象から除外することができます。 また、ファイル内にそのファイルを静的解析の対象から除外する設定ができます。 1行のコードで特定のルールを除外する 特定の1行のコードでルールを除外するにはコードの1行上に ignore: linterのルール を コメントアウト で追加します。複数のルールを除外する場合はコンマ区切りで指定します。 // ignore: linterのルール名 // 以下実装例 class Point { int x, y; // ignore: empty_constructor_bodies Point ( this .x, this .y) {} // 空のコンストラクタが警告されない } ファイル内で特定のルールを除外する ファイル内で特定のルールが適用されないように設定できます。ファイルのどこか(できればパッケージのimportの直下)に ignore_for_file: linterのルール を コメントアウト で追加します。複数のルールを除外する場合はコンマ区切りで指定します。 // ignore_for_file: linterのルール名 // 以下実装例 // ignore_for_file: omit_local_variable_types, empty_constructor_bodies class Point { int x, y; Point ( this .x, this .y) {} // 空のコンストラクタが警告されない } 静的解析の実行 静的解析を実行する方法には、エディタで実行する方法と、 コマンドライン で実行する方法があります。 静的解析の実行については、Flutterの リポジトリ の Wiki に詳しく記載されていますので、合わせてご確認ください。 github.com エディタで静的解析を有効にする Flutterの開発に対応しているエディタや IDE を使用している場合、各環境のFlutterと Dart の拡張 プラグイン をインストールしていればプロジェクトの analysis_options.yaml を認識して、ファイル保存時などおいて、自動で静的解析を実行します。 各エディタのセットアップ方法は、以下に紹介されています。 手順に沿って拡張 プラグイン をインストールしてください。 flutter.dev コマンドライン で静的解析を実行する コマンドライン からでも静的解析を実行できます。 プロジェクトのルートで flutter analyze を実行します。 $ flutter analyze Analyzing flutter_analyzer... info • Avoid types as parameter names • lib/main.dart:39:16 • avoid_types_as_parameter_names 1 issue found. (ran in 4.2s) まとめ Flutterの静的解析についてまとめました。 Lintルールなど設定値が多く、いきなり一つ一つを自分で設定するのハードルが高いかと思います。 ですのでまずは、 pedantic や effective_dart などの プラグイン を導入することをお勧めします。 また、別の方法としてはFlutterの リポジトリ にある analysis_options.yaml ファイルをコピーする方法もお勧めです。 あとは、 Effective Dart をしっかり読み、Flutterの実装を進めて気になることがあれば個別でルールを追加していくと良いかと思います。 そして、ある程度ルールが固まってきたらテンプレート化し、複数のプロジェクトで使いまわせるようになるかと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 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です。 Google スプレッドシート を皆様ご存じでしょうか? 「あー、 Google 版 Excel かな?」と思う方もいると思いますが、実は Microsoft 社の Excel と違いが多くあります。 今回は、初心者の方向けに Google スプレッドシート の使い方 や、ビジネスシーンで多く利用されている Microsoft 社の Excel との違い などをご紹介します。 また、このブログをご確認いただくことで、 Google スプレッドシート の理解を深めていただき、業務効率を上げていきましょう。 なお、 Excel 初心者の方向けに「 Excel(エクセル) IF関数 使い方【まとめ】 」もございますので、是非ご参考ください。 はじめに Google スプレッドシートとは Google スプレッドシートの使い方 Google スプレッドシートとExcelの違いと特徴 Google スプレッドシートのインストール有無 編集方法 保存方法 処理スピード Google スプレッドシートの関数 代表的な関数 便利な関数 おすすめ関数 Google スプレッドシートのマクロ マクロの記憶 マクロの実行 マクロの確認 マクロの編集 Google スプレッドシート 使い方 まとめ Google スプレッドシート とは まず初めに、 Google スプレッドシート とは何なのかを簡単にお話しさせていただきます。 Google スプレッドシート とは、 ググる でお馴染の 検索エンジン Google が提供している 表計算 ソフトのことです。 後程詳しくご説明しますが、ソフトをパソコンにインストールする必要がなく、インターネットを介して使用するWebアプリケーションの一種です。 Google スプレッドシート を使うにあたり、ずばり必要なものは「 Google アカウント 」だけになります。 よって、誰でも簡単に利用することができる優れものです。 また、費用も一切かからず、 無料で利用 できます。 この通り、メリットがいっぱいに見える Google スプレッドシート ですが、本当にそうなの?と、疑問に思われた方も多いはずです。 その疑問を解消すべく、 Google スプレッドシート と Excel の比較をして確認していきましょう。 Google スプレッドシート の使い方 では、早速 スプレッドシート を作っていこうと思うのですが、まずは Google アカウントの作成が必要です。 Google アカウントを作成するにあたり、費用はかかりませんのでご安心を。 Google アカウント作成方法 Google アカウント作成ページにアクセス 氏名・パスワードを入力 画面の指示通りに進む Google アカウント作成完了 とても簡単な作業で、数分で完了できるかと思います。 Google スプレッドシート と Excel の違いと特徴 Excel と見た目はほぼ変わりません。 Google アカウント作成後、ログインして スプレッドシート をご確認ください。 では、 Google スプレッドシート と Excel では何が異なるのかをご説明します。 Google スプレッドシート のインストール有無 比較 Google スプレッドシート Excel インストール有無 × ○ Google スプレッドシート と Excel との大きな違いは、インストールの有無です。 Google スプレッドシート は、WEB上のアプリケーションであるため、パソコンや スマホ への インストール作業は不要 です。 要するに、ブラウザとインターネット環境が整っていれば、パソコンや スマホ 、 タブレット からも編集や閲覧ができます。 Google アカウントをお持ちであれば、どこにいても スプレッドシート を利用することができます。 Excel は、パソコンや スマホ にアプリケーションのインストールが必要です。 アプリケーションのインストールをするにしても、 サブスクリプション サービスを契約しなくてはならず、コストと手間を考えると Google スプレッドシート のが断然便利です。 編集方法 比較 Google スプレッドシート Excel 複数人での同時編集有無 ○ ○ Google スプレッドシート は、 複数人による同時編集が可能 です。 1つの スプレッドシート を複数人で同時に編集することができ、変更履歴も自動で取ってくれますので、作業効率が格段に上がります。 また同時編集をするには、 スプレッドシート 毎にアクセス制限の設定を行う必要がありますので、ご注意ください。 Excel は、ファイルを共有設定しておくことで同時編集は可能です。 では何が異なるのか疑問ですよね? Google スプレッドシート は、同時編集だけでなく、リアルタイムで編集している人の編集箇所を表示してくれる機能や、同時編集者とのチャット機能があります。 そのため、同時編集をしている上でのミス(同じ箇所を編集したり、他の人が編集した箇所を間違って削除)が軽減されます。 Google スプレッドシート と Excel ともに、複数人での同時編集ができますが、上記の通りの編集方法の違いを確認した上で、どちらを利用するか決めても良いと思います。 保存方法 比較 Google スプレッドシート Excel 自動保存有無 ○ × 変更履歴保存有無 ○ △ Google スプレッドシート は、シート上で1つでも編集を加えると、その変更内容を自動保存してくれます。 そのため、手動で保存をする必要がありません。 また、変更履歴を自動保存してくれますので、前バージョンの確認や、データの復元もできます。 Excel のように、毎回保存ボタンを押す必要がありません。 処理スピード 比較 Google スプレッドシート Excel 複雑な計算無:処理スピード ○ ○ 複雑な計算有:処理スピード × ○ Google スプレッドシート はWebアプリケーションであるため、 Google のサーバー上でプログラムが稼働しております。 そのため、PCや スマホ にアプリケーションをインストールしている Excel と比較すると、関数を利用した計算や大量データの処理を行う場合は、処理スピードが落ちてしまいます。 複雑な計算であれば、 Excel と大して変わりはありませんが、PCや スマホ に負荷のかかるような処理を行う際は、 Google スプレッドシート よりも Excel のほうが適していますね。 Google スプレッドシート の関数 Excel と同様、 Google スプレッドシート でも関数を利用できます。 Google スプレッドシート で利用できる全関数リストは、以下の公式ページが一番わかりやすくまとまっていますのでそちらをご確認ください。 support.google.com いくつかの関数を抜粋し、私の方でもまとめてみましたのでご参考いただけますと幸いです。 代表的な関数 関数名 構文 説明 SUM SUM(値1, 値2) 一連の数値またはセルの合計を返す。 AVERAGE AVERAGE(値1, 値2) デー タセット 内の値の平均値を返す。 MAX MAX(値1, 値2) 数値のデー タセット における最大値を返す。 MIN MIN(値1, 値2) 数値のデー タセット における最小値を返す。 MEDIAN MEDIAN(値1, 値2) 数値のデー タセット における中央値を返す。 便利な関数 関数名 構文 説明 COUNTIF COUNTIF(範囲, 条件) 範囲内で条件に一致する要素の個数を返す。 SUMIFS SUMIF(範囲, 条件, 合計範囲) 範囲内の条件に一致するセルの合計を返す。 AVERAGEIF AVERAGEIF(条件範囲, 条件, [平均範囲]) 条件に基づいて範囲の平均値を返す。 MAXIFS MAXIFS(範囲, 条件範囲1, 条件1, [条件範囲2, 条件2], …) セル範囲を一連の条件で絞り込み、その最大値を返す。 MINIFS MINIFS(範囲, 条件範囲1, 条件1, [条件範囲2, 条件2], …) セル範囲を一連の条件で絞り込み、その最小値を返す。 おすすめ関数 関数名 構文 説明 UNIQUE UNIQUE(範囲) 重複する行を破棄して、指定したソース範囲内の一意の行を返す。行はソース範囲内の先頭から順に返す。 SPLIT SPLIT(テキスト, 区切り文字, [各文字での分割], [空のテキストを削除]) 指定した文字または文字列の前後でテキストを分割し、各部分を同じ行の別のセルに表示する。 CONCATENATE CONCATENATE(文字列1, 文字列2) 文字列を別の文字列に結合する。 JOIN JOIN(区切り文字, 値または配列1, 値または配列2) 指定した区切り文字を使用して、1 つ以上の 1 次元配列の要素を結合する。 TEXTJOIN TEXTJOIN(区切り文字, 空のセルを無視, テキスト1, [テキスト2], …) 複数の文字列または配列からのテキストを結合し、異なるテキスト間に指定された区切り文字を挿入する。 Google スプレッドシート のマクロ Google スプレッドシート には Excel と同様、マクロ機能があります。 VBA の代わりに Google Apps Scriptを使うことで、マクロの編集や、ユーザー操作を記録してマクロを作成することも可能です。 今回は、 Google スプレッドシート でのマクロの使い方についてご紹介いたします。 マクロの記憶 1. 新規の スプレッドシート を開く。 2. セルA1に「テスト」と入力する。 3. ユーザ操作を「Apps Script 1 」の スクリプト として記録する。 [ツール]→[マクロ]→[マクロの記録]を選択する。 4. 下部に「新しいマクロを記録しています」のバーが現れたことを確認し、ユーザー操作の記録を開始する。 絶対参照:マクロの適用時、記録時と同じセルを使用する設定 相対参照:マクロの適用時、選択中のセルを使用する設定 ※今回は、絶対参照を例として使います。 5. 「テスト」を太字に変更する。 6. 「テスト」のフォントの色を変更する。 7. マクロの記録を停止する。 下部バーの「保存」を押下 8. マクロ名とショートカットキーを設定し、保存する。 マクロ名:「マクロ_テスト1」 ショートカットキー Windows :[ctrl]+[alt]+[Shift]+[1] MAC :[command]+[option]+[Shift]+[1] 9. 以下のメッセージが表示されることを確認する。 マクロの実行 1. セルA1に「こんにちは」と入力し、書式設定をリセットする。 書式設定をクリア:ショートカットキー Ctrl+\ 2. 先ほど作成した「マクロ_テスト1」を実行する。 スクリプト 実行の承認を行う。 ※初めてマクロを実行する場合のみ [続行]を押下する。 アカウントの紐づける。 アカウントへのアクセスを許可する。 「マクロ_テスト1」を実行する。 ショートカットキーで実行する。 マクロ実行後、書式が変更される。 マクロの確認 1. 登録したマクロを確認する。 [ツール]→[マクロ]→[マクロを管理] 2. 登録したマクロの一覧が表示される。 マクロの編集 1. 登録したマクロ一覧を開く。 [ツール]→[マクロ]→[マクロを管理]を選択する。 2. 修正するマクロの[︙]を選択する。 3. [ スクリプト を編集]を押下する。 4. Google Apps Scriptのエディタを開き、コードを編集する。 Google Apps Scriptのエディタ画面が開く。 マクロの修正を行う。 修正内容 マクロ実行セル:A1→C1 フォントの書式:太字(bold)→斜体(italic) フォントの色 :赤(#ff0000)→黄緑(#00ff00) 修正したマクロの保存する。 [command]+[s]で保存する。 5. 修正したマクロの実行 「マクロ_テスト1」を実行する。 ショートカットキーで実行する。 マクロ実行後、書式が変更される。 以上、マクロの作成~実行までの流れでした。 今回、 Google Apps Scriptのご紹介をさせていただきましたが、とても便利だと思いませんか? ビジネスシーンでも多く利用されるマクロ機能ですが、 Google Apps Scriptと合わせることでより便利になることを実感できるのではないでしょうか。 Google Apps Scriptは覚えておいて損はありません。 私はもっと業務効率を上げれるような仕組みが作れれば良いな、と思っていますので引き続き学習をしたいと思いました。 Google スプレッドシート 使い方 まとめ 今回は Google スプレッドシート の活用法について、 Excel と比較をしながらご紹介させていただきました。 ラク スに入社してから本格的に Google スプレッドシート を利用していますが、率直に とても便利 です! また、今回本ブログとして活用法をまとめたことで、もっと効率的な利用方法があることを学びなおしました。 特にマクロ機能は、すぐにでも業務に取り入れようと思っております。 最後にはなりますが、本内容が1つでも皆様のお役に立てていれば幸いです! 今後とも、 ラク スを宜しくお願い致します。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com Apps Script &#8617;
アバター
こんにちは。エンジニアのrs_shoです。 投稿は5回目になります。今回は初心者向けの SQL について説明しようと思います。 はじめに SQLとは 各SQLの命令文 データの検索(閲覧) SELECT文の書き方 SELECT文の使用方法 データの登録(挿入) INSERT文の書き方 INSERT文の使用方法 データの更新(編集) UPDATE文の書き方 UPDATE文の使用方法 データの削除 DELETE文の書き方 DELETE文の使用方法 条件指定 WHERE句の書き方 WHERE句の使用方法 SELECT文のWHERE句の使い方 UPDATE文のWHERE句の使い方 DELETE文のWHERE句の使い方 まとめ 参考文献 ◆ 関連記事 ・ 【SQL入門】INSERT まとめ ・ 【SQL入門】UPDATE まとめ ・ 【SQL入門】DISTINCT 使い方 ・ RDBMSとDBMSについて【初心者向け】 ・ 【RDBMS】PostgreSQLインストール・コマンド入門編 はじめに この記事では SQL を学び始めの方向けに、 SQL 文の書き方やどういった役割があるかを主に説明しています。 初心者の方に限らず、これどう書くっけ?ってなった人や、初心に帰って1から勉強している方の手助けにもなれましたら幸いです。 SQL とは SQL について軽く説明します。 SQL とはデータベース言語と言われるもので、 データを検索(閲覧)、追加(保存)、更新、削除などを行うことができる言語です。 各 SQL の命令文 データの検索(閲覧) データの検索(閲覧)はSELECT文を使用します。SELECTは「選択する」という意味になるので、 欲しいデータを選択(抽出)するという単語の意味と一緒に覚えていただければ良いと思います。 SELECT文の書き方 SELECT文は以下のように記述します。 SELECT [カラム 1 ], [カラム 2 ], ... FROM [テーブル名]; SELECT文の使用方法 SELECT文の使用例は以下です。 抽出対象のテーブル 社員テーブル(employee) employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 全件検索を行う SQL (テーブルのすべてのデータを抽出) SELECT employee_id, employee_name, age FROM employee; 全件検索 SQL で抽出できる社員の結果 employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 また、上記の SQL では カラム名 を指定していますが、 カラム名 を指定せず、すべてのカラムを検索(抽出)する方法があります。 カラム名 が多く列挙するのが大変、 カラム名 をぱっと思い出せない場合に有効です。 全件検索を行う SQL (テーブルのすべてのデータを抽出, カラムは指定しない) SELECT * FROM employee; 全件検索 SQL (カラム指定なし)で抽出できる社員の結果 employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 データの登録(挿入) データの登録(挿入)はINSERT文を使用します。INSERTは「挿入する」という意味になるので、 こちらもSELECT文同様に単語の意味と一緒に覚えると覚えやすいと思います。 INSERT文の書き方 INSERT文は以下のように記述します。 INSERT INTO [テーブル名] ([カラム 1 ], [カラム 2 ], ...) VALUES ([カラム 1 にいれる値], [カラム 2 にいれる値], ...); INSERT文の使用方法 INSERT文の使用例は以下です。 挿入対象のテーブル 社員テーブル(employee) employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 社員コード 00004 , 社員名 楽楽三郎 , 年齢 22歳 のデータを登録する SQL (挿入) INSERT INTO employee (employee_id, employee_name, age) VALUES ( ' 00004 ' , ' 楽楽三郎 ' , 22 ); データ挿入 SQL で1件挿入した社員テーブルのデータ employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 00004 楽楽三郎 22 また、複数データを1つの SQL 文で一括で登録することも可能です。 書き方としてはVALUESのカッコをカンマで区切って複数記載します。 社員コード 00004 , 社員名 楽楽三郎 , 年齢 22歳 と、 社員コード 00006 , 社員名 楽楽部長 , 年齢 31歳 のデータを登録する SQL (挿入) INSERT INTO employee (employee_id, employee_name, age) VALUES ( ' 00004 ' , ' 楽楽三郎 ' , 22 ), ( ' 00006 ' , ' 楽楽部長 ' , 31 ); データ挿入 SQL で2件挿入した社員テーブルのデータ employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 00004 楽楽三郎 22 00006 楽楽部長 31 SELECT文の * のように、 カラム名 を指定せずに登録することも可能です。 書き方としてはINTO [テーブル名] の後に カラム名 をカッコに列挙する箇所を記載しないようにするだけです。 ( ※意図しないカラムにデータが入ることを防ぐために、INSERTではカラムを指定することを強くオススメします! ) 社員コード 00004 , 社員名 楽楽三郎 , 年齢 22歳 のデータを登録する SQL (挿入) INSERT INTO employee VALUES ( ' 00004 ' , ' 楽楽三郎 ' , 22 ); データ挿入 SQL (カラム指定なし)で1件挿入した社員テーブルのデータ employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 00004 楽楽三郎 22 データの更新(編集) データの更新(編集)はUPDATE文を使用します。UPDATEも「更新する」という意味になるので、 こちらも他の SQL の命令文同様に単語の意味と一緒に覚えてください! UPDATE文の書き方 UPDATE文は以下のように記述します。 UPDATE [テーブル名] SET [カラム 1 ] = [値], [カラム 2 ] = [値], ...; UPDATE文の使用方法 UPDATE文の使用例は以下です。 更新対象のテーブル 社員テーブル(employee) employee_id employee_name age employment_status 00001 楽楽太郎 30 正社員 00002 楽楽次郎 24 正社員 00003 楽楽花子 22 契約社員 社員全員の雇用形態を正社員に更新する SQL (編集) UPDATE employee employment_status = ' 正社員 ' ; データ更新 SQL で更新した社員テーブルのデータ employee_id employee_name age employment_status 00001 楽楽太郎 30 正社員 00002 楽楽次郎 24 正社員 00003 楽楽花子 22 正社員 UPDATE文はSET後に記載されたカラムのみを更新するため、更新したくないカラムがある場合は記載しないようにしてください。 また、UPDATE文は条件指定をしない場合、テーブル全体に更新がかかってしまうため、 特定のデータのみ更新したい場合は、後述する WHERE句 についての説明をご確認ください。 (※(厳密に言うと方法はありますが) カラム名 は必ず指定する必要があるので、SELECT文やINSERT文の SQL のように省略はできません) データの削除 データの削除はDELETE文を使用します。DELETEは「削除する」という意味なので、 こちらも他の SQL の命令文同様、単語の意味と一緒に覚えてください! DELETE文の書き方 DELETE文は以下のように記述します。 DELETE FROM [テーブル名]; DELETE文の使用方法 DELETE文の使用例は以下です。 削除対象のテーブル 社員テーブル(employee) employee_id employee_name age 00001 楽楽太郎 30 00002 楽楽次郎 24 00003 楽楽花子 22 社員テーブルのデータを全削除する SQL DELETE FROM employee; データ削除 SQL で削除した社員テーブルのデータ employee_id employee_name age DELETE文はUPDATE文同様、そのまま実行するだけではテーブルの全データを削除してしまうため、 特定のデータだけを削除したい場合は、後述する WHERE句 についての説明をご確認ください。 条件指定 SELECT, UPDATE, DELETEは、条件を満たすデータにのみ実行したくなることが多々あります。 そういった時には SQL のWHERE句と呼ばれるものを使用します。 WHERE句の書き方 WHERE句は以下のように記述します。 {SQLの命令文} WHERE [カラム 1 ] = [値]; WHERE句は条件指定でデータを選択することができます。 上記で記載した比較 演算子 = 以外にも、様々な 演算子 を使用することができます。 演算子 の記号 意味 用途 = 等しい 記載した値と等しいデータにのみ &lt;= 以下 記載した値以下のデータにのみ >= 以上 記載した値以上のデータにのみ &lt; より小さい(未満) 記載した値より小さい値のデータにのみ > より大きい 記載した値より大きい値のデータのみ WHERE句の使用方法 WHERE句の使用例は以下です。 操作対象のテーブル 社員テーブル(employee) employee_id employee_name age employment_status 00001 楽楽太郎 30 正社員 00002 楽楽次郎 24 正社員 00003 楽楽花子 22 契約社員 SELECT文のWHERE句の使い方 SELECT文(employee_idが 00002 と等しいデータのみ抽出する SQL ) SELECT employee_id, employee_name, age FROM employee WHERE employee_id = ' 00002 ' ; employee_idが 00002 と等しいデータの抽出結果 employee_id employee_name age employment_status 00002 楽楽次郎 24 正社員 SELECT文(ageが24歳以下のデータのみ抽出する SQL ) SELECT employee_id, employee_name, age FROM employee WHERE age &lt;= 24 ; ageが24歳以下のデータの抽出結果 employee_id employee_name age employment_status 00002 楽楽次郎 24 正社員 00003 楽楽花子 22 契約社員 UPDATE文のWHERE句の使い方 UPDATE文(ageが24歳以上のデータのみ管理職に更新) UPDATE employee employment_status = ' 管理職 ' WHERE age &gt;= 24 ; ageが24歳のデータを管理職に更新したテーブルのデータ employee_id employee_name age employment_status 00001 楽楽太郎 30 管理職 00002 楽楽次郎 24 管理職 00003 楽楽花子 22 契約社員 DELETE文のWHERE句の使い方 DELETE文(employment_statusが 契約社員 の人のみ削除) DELETE FROM employee WHERE employment_status = ' 契約社員 ' ; employee_statusが 契約社員 のデータを削除したテーブルのデータ employee_id employee_name age employment_status 00001 楽楽太郎 30 正社員 00002 楽楽次郎 24 正社員 まとめ いかがだったでしょうか。久しぶりに事細かく SQL について書いたので、僕自身も勉強になりました。 初めて SQL を触る方、まだ使い方に慣れていない方など、これから SQL を学んでいく人の手助けになりましたら幸いです。 参考文献 SQLをはじめよう - 初心者でもわかる、構文とデータ取得の基本 SQLの基本を覚える【初心者向け】 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com
アバター