弊社で毎月開催し、 PHP エンジニアの間で好評いただいている PHP TechCafe。2021年8月のイベントでは社外でご活躍されている PHP エンジニアにもご参加いただいて「PHP8.1の新機能」について語り合いました。 rakus.connpass.com PHP8.1の新機能は8.0に比べれば少ないとはいえ、順番に追いかけてみると思ったより大きなボリュームになったためイベント内容を2回に分けてレポートします。今回は後編として後半の半分をご紹介します。 前編はこちら。 tech-blog.rakus.co.jp PHP8.1 新機能について Pure intersection Types 他の言語ではあまりない機能 New never type 静的解析などで役立つ期待あり New array_is_list function ネーミングに関する議論 Final class constants New fsync function エラーで落ちても書き込みは保証 Explisit octal integerliteral notation 利用シーンは少ないが事故を防げそう Restrict $GLOBALS usage パフォーマンス向上のための使用制限 Deprecate passing null to non-nullable arguments of internal functions nullが入りうるパターンに要注意 その他の変更点 今後はPHPUnitやLaravelをテーマに開催予定 PHP8.1 新機能について PHP8.1の新機能は弊社のメンバーが事前にShowNoteにまとめています。今回はこの後半部分の新機能をみていきました。 hackmd.io Pure intersection Types 交差型 と呼ばれ、型AとBがあるときに、AでありかつBの（両方の性質をもつ）型を表すときに A&B のように記述します。 「AまたはB」のような表現は8.0で Union Type という型が導入されており、 縦棒で A|B のように記述します。 「それの逆版が8.1で入ります。」と紹介されました。 ※参考：PHP8.0で導入されたUnion Type wiki.php.net この交差型に対しては次のような意見が出ました。 新しく型を定義しなくても良くなる インターフェース名から両方の特性を持っているっていうのがひと目でわかるので、意図が分かりやすくなるし、管理もしやすくなるのかな？ 色々と賛否や考え方が出るかもしれません 交差型のサンプルコード（ ShowNote より抜粋） <?php class A { private Traversable & Countable $ countableIterator ; public function setIterator ( Traversable & Countable $ countableIterator ) : void { $ this -> countableIterator = $ countableIterator ; } public function getIterator () : Traversable & Countable { return $ this -> countableIterator; } } ※参考：サンプルコードで使われている Traversable と Countable インターフェースについて www.php.net www.php.net 上記のコードを元に詳しく解説されました。今までは Traversable と Countable という2つの振る舞いを持つオブジェクトを作るようなケースでは両方を継承する新しいインターフェースを作る必要がありました。バリエーションが増えてくると、この振る舞いとこの振る舞いとこの振る舞いの組み合わせで…というように、どんどん複雑な インターフェイス が増えてきます。交差型を使うことで新しく型を定義しなくても良くなり、上記のように Traversable と Countable の両方を持っているというのがひと目でわかりやすくなります。 ただし、使う上では注意も必要です。 ループできる Traversable とカウントできる Countable はセットになりがちと思えますが、全然関係ないAとBという属性が Traversable でくっつけると密結合になるのかなと思うので、気をつけないと変な設計になる。 実は嬉しいところがあんまりない。 あまり使いすぎると複雑な設計になるので注意が必要です。交差型が必要になるようなシーンでは以下のような疑問を持ってみるのも良さそうです。 そもそもここまで細分化していることがおかしいのでは 連想できない無関係なものが一つのオブジェクトにまとまっているのがうまく ドメイン を分解できていないって事なのでは 他の言語ではあまりない機能 また、 PHP 以外の プログラミング言語 にも目を向けた議論がありました。 普通の静的型付言語でもあまりない機能。 どちらかといえば動的型付言語に拡張で導入される例が多い気がします。 多重継承が前提の機能なのでいきなり使うようなものじゃないですが、使えると便利。 正直ここまでやるなら Haskell 系の言語や Scala とか、多重継承が普通にできる設計かつ強い静的型付の言語を使うほうが良い気もしますが、TypeScriptでも導入されているので動的型付言語ならではの使いどころがあるのではないでしょうか？ 「便利だけど、あまり使うシーンはない？」という、やや消極的な意見が多かったものの、 RFC をみてみると賛成意見がほとんどで採択されていました。 RFC では賛成30で採択 交差型は「もともとPhpStormやPHPDocでサポートされていたもの」とのことで、交差型が導入されることで何かを壊すということもなく、「表現の幅が広がる」ということから受け入れられやすかったのではないか？とのことでした。 ※参考：PHPStanの作者のブログ（PHP8.1の機能ではできないが多重継承的なことができる事例も紹介されている） medium.com New never type 常に例外出したり、exitで終わってしまうような処理の返り値に never と書いて表せるようになります。「レガシーなコードであればあり得る話だよなあと思うので、かなり使い所が多いんじゃないか」とのことです。 <?php function redirect ( string $ uri ) : never { header ( 'Location: ' . $ uri ) ; exit () ; } RFC 段階では never と noreturn の二案があったそうですが、最終的に never になりました。参加者からも「 noreturn のほうがわかりやすい気もするんですけどね。」という意見がありました。「悪くなかったと思うんですけど、二語になるからややこしいって話があった」「（noとreturnの）間にハイフン入れるのか、アンダーバー入れるのか？ってなって一語にしようって話になったようです。」とのことです。「静的解析などをするうえでは never は別の目的で使いたいので noreturn を推していたみたいです」という背景もあったようです。 静的解析などで役立つ期待あり 上記のサンプルコードのように、リダイレクトしたり exit() で終わってしまうときに書いておけば「静的解析とかでもうまく使えそうな気がしますね。」とのことです。PhpStormで「 redirect を呼んだ次の行とかに違う処理があると実行されない ステートメント という警告が出せる。」という実現イメージです。 最終的に never が採用されましたが、静的解析に関しては役立つ期待が持てそうです。「個人的にはReadonlyに並んで期待している機能ですね。」とのことでした。 New array_is_list function 配列のキーが0番目からスタートする配列なのか 連想配列 なのかを判定する機能です。 array_is_list という関数を使うことで、0番目から始まる配列なら true 、それ以外は false が返ります。 <?php $ list = [ "a" , "b" , "c" ] ; array_is_list ( $ list ) ; // true $ notAList = [ 1 => "a" , 2 => "b" , 3 => "c" ] ; array_is_list ( $ notAList ) ; // false 参加者から質問がありましたが、 [0=>"A", 2=>"B", 3=>"C"] という 連想配列 でも false が返るようです。 ネーミングに関する議論 array_is_list というネーミングに関しては様々な議論があったようです。 RFC の議論を読むと is_list という候補もあったことが書かれています。 wiki.php.net 参加者からも「名前がすごいですよね。」「何だろう？同じことを言っている感じがする。」「名前を見れば見るほどモヤモヤしますね。」という声があがっていました。 ここで議論しているものは「 コンピュータサイエンス でいう連結Listとは違う」「これまでList構造というのは分割代入のために使われていた」が、そうではなく「純粋な配列」とのことです。「静的解析などではlistという型が使えるようになっていて連番で表す」ということで、そういう経緯もあってこういう名前になったのではないか？、「奇跡的なバランスでできた名前ですね。」と解説されました。 Final class constants 継承したclassの定数をオーバーライドすることを禁止することが出来るようになります。これまではclass間で定数を書き換えることができたため、親classの設計者の意図に反して「一定ではない」状態が起こりうるようになっていました。 <?php class Foo { final public const X = "foo" ; } class Bar extends Foo { public const X = "bar" ; } // Fatal error: Bar::X cannot override final constant Foo::X 前編の「 Readonly Properties 」で final の使い方との違いが紹介されましたが、「 Readonly とはまた使い所が違う」とのことです。 New fsync function ファイルの書き込み内容をメモリから実際にファイルへ書き込む機能です。 これは内部実装が変わって、「細かく言うとI/Oの順番が変わった」ことで、「途中で処理が止まっても書き込みをちゃんとしてくれる」とのことです。 エラーで落ちても書き込みは保証 ここでは「趣味で PHP でDBを作っている」という参加者から利用シーンの一例が紹介されました。 キャッシュメモリ からディスクに書き込むところでエラーハンドリングとかで fsync が使えたらな、と思っていた そういう用途でしかあまり使わない たしかに用途は少なそうですが、使い方がイメージできて他の参加者も納得していました。 Explisit octal integerliteral notation 0o （ゼロ・オー）という接頭詞を置くことで8進数と明示できるようになりました。 元々、 0 で始まる場合は8進数として扱われ、例えば 16 == 016 の 016 は8進数と解釈されるためfalseになります。 0o が使えるようになり視覚的にわかりやすく表記できます。 利用シーンは少ないが事故を防げそう 8進数を使う場所は限られるのでいつ使うのだろう？という疑問もありますが、一例として chmod の利用シーンが紹介されました。 chmod でファイルの パーミッション を設定するとき 0755 と書くと正しく パーミッション を設定できますが、間違えて 755 と書くと意図しない動作になります。 「誰かが 0755 の 0 が邪魔じゃない？と思って消したら事故になる、というケースを防げるんじゃないかと思います。」と、 0o と明記することで事故が防ぎやすくなるメリットの一例が紹介されました。 ※参考： chmod 関数 PHP: chmod - Manual また、他にも「 PHP のバージョンアップしようとした時に、8進数や16進数の振る舞いが変わりますとなった時にどうやって探せば良いんだと思ったんですが、接頭詞を置けば探しやすくなりますね。」という意見もありました。 そのほか、なぜ 0 と o という見間違えやすい文字を連続して使うのか？という意見もありましたが、8進数＝octaという意味から来ていることが解説されました。16進数はHexの x を使って 0x です。このあたりは PHP 以外の言語でも採用されている表記法でもあります。 Restrict $GLOBALS usage ここからは仕様変更の機能についての紹介です。スーパーグローバルの $GLOBALS で他の変数にアクセスできる特殊な変数ですが、一部の使い方ができなくなります。 <?php $ a = 1 ; $ GLOBALS [ 'a' ] = 2 ; var_dump （ $ a ）; // int（2） // Generates compile-time error: $ GLOBALS = [] ; $ GLOBALS += [] ; $ GLOBALS =& $ x ; $ x =& $ GLOBALS ; unset ( $ GLOBALS ) ; パフォーマンス向上のための使用制限 なぜこのような変更が行われたのかについて、次のように解説されました。 他の変数にはない特殊な使い方が出来るようにしていたことで、 PHP 全体の配列アクセスへの ボトルネック になっていた 見るからに誰も使わなさそうな処理が PHP ユーザー全体の処理の足かせになっていた 世に転がっているライブラリを覗くとそんな使い方しているやつほとんど無いやとなった じゃあ消しちゃおうということで使えなくしようとなった PHP 全体の配列アクセスのパフォーマンス向上のため、「元々はできていたんだけど今後はできなくなります。」とのことです。誰も使わなそうではありますが、「ある種便利な機能だったと思うんですよね。 $GLOBALS 経由でなんでもアクセスできましたし。テストで変数全部吹っ飛ばすとか。」「無理やりいじるとかはあるのかなと。 WordPress のカスタマイズ案件とかで、ベース部分はさわれないけどどうにかこうにかしたいみたいなケースとか。」という意見もあり、使わないだろうと決めつけるのも危険かもしれません。 なお、「 PHP8.1でいきなりエラーになります 」とのことで、非推奨化による警告などではない点も注意が必要です。 なお、 $GLOBALS の使用については上記のような特殊なケースで使用することはあるかもしれませんが、本来は「これ自体使うべきではないですね。」という意見も出ていました。今回の変更の影響にかかわらず、 なるべく $GLOBALS を使わず別の方法を検討するほうが良さそうです。 Deprecate passing null to non-nullable arguments of internal functions str_contents という標準関数の第2引数に null を指定することが非推奨化されます。 <?php // PHP8.1 では非推奨、PHP9 では警告が出力される str_contains ( "string" , null ) ; str_contents はPHP8.0から導入された標準関数で、第1引数の文字列中に第2引数の文字列が存在する場合にtrueが返されます。 PHP: str_contains - Manual PHP8.0では第2引数にnullを指定するとtrueが返されていましたが、これ自体が不具合だったようです。「 PHP のユーザー定義関数とかだと普通はStringって型宣言しているので通らないんですが、 PHP のネイティブな関数だからこそ入っちゃったバグですね。」とのことです。内部的にnullをキャストしたことで空文字列として処理され、「空文字列はあらゆる文字列の部分集合なのでtrueになる」ようです。 nullが入りうるパターンに要注意 str_contents に対して直接的にnullを指定するケースはあまりなさそうですが、参加者からは以下のような注意点も共有されました。 未定義変数とかがnullが入りうるパターンなので要注意ですね （PHP8.0から導入されたので）そんなに使っていないと思いますが、便利な関数なので発生しうるかな？ だから（PHP8.1で）一回警告を挟むんでしょうね PHP8.0で早速使い始めたけど、特定のパターンで未定義変数が紛れ込むことはありそうです。万が一そのようなパターンがあってもPHP8.1の間は警告が出るので見つけたらすぐに対処しておくと良さそうです。 その他の変更点 時間の関係ですべては紹介できませんでしたが、これ以外の変更点も以下にまとめられているのでご確認ください。また、機会があれば次回以降のPHPTechCafeで話題にあがるかもしれません。 hackmd.io 今後は PHPUnit やLaravelをテーマに開催予定 次回以降は9月と10月のテーマと開催日が既に決まっており参加者を募集中です。参加頂くとブログには掲載しきれない細かい情報や、 PHP の最新動向のニュースの紹介などもありますのでぜひご参加ください。 rakus.connpass.com rakus.connpass.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに おすすめの読者層 要件定義とは よくある問題 要求が不足している 要求が曖昧 そもそも要求を叶えるのが不可能 要件定義の始め方 おわりに はじめに こんにちは。rs_chankoです。 最近はもっぱらオフショア管理の業務をしています。 最初は納品物のチェックがメインだったんですが、ここ数か月、案件の依頼を出すことが増えました。 最初は見様見真似でリーダーのやっていることをやってみてはいろいろ指摘を受けていたのですが、 自分の持っている技法や観点では思うように内容を拾いきれず、依頼内容がいまいちになってしまうことが多いことに気付きました。 「このままではだめだ！」と思いいったん本を読んでみようということで要件定義についての本に手を出してみました。 作業依頼って要件定義の簡易版って感じなんですよね。体感的にですが。 そこで今回はその本がなかなか初級者に易しく、さっそく実践しているので記事にしてみようかなと思い書いているといったところです。 今回読んだ本はこちらです。(これもリーダーのお勧めで決めたのは秘密です。) www.amazon.co.jp 表紙の通り、前半は目玉焼きを作る工程で要件定義とは何ぞやという説明がされている本です。(とってもとっつきやすい) ◆ 関連ブログも合わせてご参考ください。 ・ 要件定義 とは【まとめ】 ・ プロジェクトマネジメントTips 20選　～現場から語るプロマネの極意～ おすすめの読者層 これから要件定義に参画する人 要件定義をするメンバーに教育する人 ふわっとしている案件を形にして依頼する人(私はこれです) 要件定義とは そのまま要件を定義することなんですが、実際その「要件」を「定義する」とは何なんでしょうか。 ■要件=注文 依頼する人(ユーザーや企画部など)が開発に対して「こういうものを作ってほしい」「こんな機能があったら便利」というところから、プロダクトの開発は始まると思います。 個人であればそのふわっとしたものからあれやこれやとつけたい機能をつけてアプリなりなんなりを作成しますよね。 ただグループや企業だと最初に認識を合わせておかないと大きな齟齬が起きたり、大量のバグの温床になりかねません。 そういったことを避けるために 作ってほしい人が作る人に出す要望 が要件になります。 例えばの話にはなりますが、なんでもできる万能な車を作ろうと考えています。 依頼主からの要望は * 空を10m飛びたい * ベースは日本製の一般車にしたい * 陸上は通常通り走れるようにする * ガソリンが燃料 これらの要望が 要件 です。 ただ、お客さんが要件を並べたらすべてが叶うというわけではありません。 魔法の力で何とか空を飛ぶ車は作ることができるとします。 日本製の車に空を飛ぶ 拡張機能 を付けました。 余分なパーツをつける場所もなくなり、完璧な形に仕上げることができました！ しかし、あとから依頼主が「水上も走れるようにできないかな」と言い出しました。 事前に決まっていればそれ用に作ることもできましたが、 空陸用に作り上げてしまったため、水上を走れるようにというのは叶えられませんでした。 このため、こちらの要望は諦めてもらうことにしました。 本来であれば、水上も走れるようにしたいと言うのは、要望をまとめる段階で出しておいてもらうべきです。 ただ、その部分を完璧に詰めずに車を作ってしまったため、依頼主は渋々諦めることになりました。 このような「できること」「してほしいこと」「できないこと」をはっきりとしておくことが 要件定義 なんですね。 よくある問題 現実的な開発の話に戻します。 事業部や取引先などから新しい製品や、新しい機能を作る話が開発に降りてくるでしょう。 要件定義の場を設けて、仕様についてまぁまぁ詰めた状態まで持っていったかなというところで、 「これやってください」が決まったとします。 開発者はそれを実現するために動くと思います。 ただ、次のような問題が往々にしてあるはずです。 要求が不足している 実際に作ってみたものはいいものの、既存の機能の考慮が足りていませんでした。 「あれ、この既存機能も新機能反映しないといけないんだっけ？」「え、無視していいんじゃないの？」 といった具合に後から要件の見直しをすることもあるんじゃないでしょうか 要求が曖昧 どんなものを作るかイメージはつきました。 イメージはついたものの、仕様が虫穴で「この条件は付けるべきなのか」「この時の動作はこれでいいのか」が分からず、設計段階で詰みますね。 もっと酷ければ実装してテストしているときに気付いたりすることもあります。 そもそも要求を叶えるのが不可能 要件定義の時点で不可能やないかーい！といった事態。 技術的な物だったり、既存機能を壊してしまったりなど、様々な理由でできないことがあったり。 基本はスタートの段階で気づくとは思いますが、作ってみて気づくなんてことも現場では起きますね。 要件定義ではじゃあいざ設計だ！実装だ！より前に今あるものに対してどのように対応していくのか、そこまで考える必要が出てきます。 今ある機能や実現したい機能と、バッティングする場合どちらを生かすか、どう共生させるか 実現したい機能が今の製品や機能に与える影響はどの程度がいいのか そもそも実現したい機能の細かなつくりはどこまで考慮すればいいのか これでいいのでは？で進めてしまうことで、正しく作ったつもりが依頼主との間で出来上がりに乖離が出てしまいますよね。 依頼主からの要求が足りていないのであれば要件定義の段階ですり合わせていくというフェーズが必要です。 各会社や個人で流儀や手法はあると思いますが、 画面のモックなどのイメージや、システム部分の仮設計を使いながら、不足している要求を引き出すことが開発側の要件定義です。 要件定義の始め方 まずは実現したいことを一覧にしてわかりやすくする必要があります。 書籍では企画書の作り方として書かれていましたが、ユーザーや事業部の望んでいるものがふわっとしているときには開発側でそこまでまとめる場合もあると思います。 書籍で書かれているような技法を、アレンジして業務に取り入れたりもしているため、 ブログ用にさらにアレンジして、書籍の技法を簡単にまとめてみました。 今回は記事用に遠い昔にアルバイト時代の店長にアプリを作って！と言われた際の要求をまとめてみます。( アプリ制作 自体は諸事情あってやっていませんが。。。) その時に店長が作ってくれといったアプリの要求は以下のようなものです。 外国人メンバーのためのマニュアルアプリ メンバー同士で注意点を共有できるように、記事を投稿できる いいねボタンみたいに参考になったよボタンを設置してポイント制にする 当時こんなふわっとしたオーダーだけでアプリ作って！と言われ困惑しましたが、それは置いておきます。 これだけ聞いた際にどんなことが実現できればいいかなと思って ヒアリ ングをしたので、そこから要求をまとめてみました。 概要 外国人・新人メンバーのための手順書・注意事項共有アプリ 目的 ・会社から提供される手順書はつぶれた写真だったり、白黒で分かりにくい ・文字での説明はついているけど、外国人にはニュアンスで伝わりにくい ・上位メンバーが知ってるコツを集約してどのメンバーでもわかるように動画などで共有したい 現状 ・紙のマニュアルのみで、上位メンバーがつきっきりで教える必要がある ・複数のメンバーに手順書には書いていない同じ注意をしたことがある ・メモを自発的にするメンバーと全くしないメンバーがいる あるべき姿 ・上位メンバーでない人でも教育ができるようになる ・誰かに一度説明したら、メンバー同士にその内容が共有される ・メモをしないメンバーでも手元に情報が残っている 目標達成に必要な要素 ・ twitter などのように各メンバーが記事を投稿できるアプリ ・動画付きで投稿ができる ・参考になる度合いでソートすることができる(必要性の高いものから見ることができる) 無視していい要素 ・投稿に対するコメント機能は必要ない 例なのでかなり荒いですがこんな感じで「できること」「してほしいこと」「できないこと(厳密にいえばしなくていいことですが)」を並べました。 視覚的に何をすればいいのかがわかるため、実現したいこと／実現できないことを早い段階で拾うことができるようになります。 これが要件定義の第一歩、スタートです。 こちらを元に実装や設計をする開発側と依頼主側で、実際に出来上がるもののイメージをすり合わせていきます。 出来上がってから「あれはできないの？」「これはできないの？」となってしまうと、最悪一から作り直して倍の 工数 がかかって納品が大幅に遅れてしまうと言うこともありますね。 そういうことを避けるためにも、じっくり要件定義で時間をかけて、設計、実装はすんなり、サクサク進めて後から余計な工程が起きないようにすることを心がけることが大事です。 そのためにも要件定義のスキルを習得して、確実な状態でのスタートを切れるようにすることが上手な開発の第一歩です！ おわりに 最近はあまり大きな機能を扱っていないので、例で程度示した程度の粒度のものを複数打っています。 仕事でもオフショア先に依頼する際にも上記のように文面を組み立ててパターン化して以来前の確認もしやすいようにしています。 なのであんまりテクいこと書けてないんですが、要件定義や作業の依頼に重要なのは上記の表みたいな内容だということが本を読んで確信を持てた、といった感じです。(やっていることが、世間的に使われるような技法だったと言う裏どり、心強く感じて大事だと思います。) 目的(何がしたいのか、) 現状(問題点、不足しているところ) あるべき姿(問題が解消された状態、できるようになること) 必要な要素(あるべき姿にするためにすべきこと、付随してできるべきであること) 不要な要素(考慮する必要のないこと、対応できるけどしなくてよいこと) この辺をはっきりしておくことでいざ設計だ！実装だ！ってなった時に迷うことも減りますし、 納品だ！って時に「いやそれは要件として提示されていないので」という材料になるんですね。 逆に言えばですが、はっきりしていないと「え、これは当然じゃないの？」と押し切られ、ネットでよく見るn次受けの地獄現場みたいなことが起こるんですよね。。。 自分の身を守るため、クライアントと良好な関係を築くためにも、要件定義の技法は自分の物にしていきたいと思いました。 皆さんも気持ちよく、無駄のないスマートな開発をするためにも、こちらの本読んでみてください。 使える技法から徐々に取り込んでいくことで現状を打破するきっかけになるかもしれませんね。。。 さらに細かいこと、設計チックな話は紹介した書籍に細かに書いてあるのでぜひ読んでみてください。 内容的にも読みやすいのでどんな方にもおすすめです。 まず第一に抑えるところ！的な記事になってしまいました。 あまり細かく書きすぎると盗作になってしまいそうなのでこんな感じで悪しからず…。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

技術広報の yayawowo です。 iPhone や iPod のモバイルデ バイス をお持ちの皆様、 「 Podcast（ポッドキャスト） 」という無料のアプリをご存知でしょうか？ 是非ご自身のモバイルデ バイス をご確認ください。 Podcast （ ポッドキャスト ）がデフォルトで既にインストールされているはずです。 インターネットを通じて配信された音声や動画を無料で視聴できるサービスとなっており、暇つぶしや勉強にも役立つ 最強アプリ なんです！ 今回は、エンジニアやデザイナーの皆様向けにTech系の Podcast （ ポッドキャスト ）番組をにまとめてみました。 本ブログを通して、是非おうち時間を有効活用する一つの手段に Podcast （ ポッドキャスト ）を追加していただけますと幸いです。 国内外のTech系 Youtube チャンネルをまとめた記事は以下になります！ 【2021年版】国内外Tech系YouTubeチャンネル10選 - 登録者数順まとめ！ - - RAKUS Developers Blog | ラクス エンジニアブログ Podcast（ポッドキャスト）を始めてみよう！ Tech系Podcast人気番組 Apple Events Rebuild Apple Events (video) Apple News Radio ワンボタンの声 backspace.fm Image Cast texta.fm TEDTalks テクノロジー TED Radio Hourt 電脳タイガー飯店 Off Topic // オフトピック 石川温のスマホNo.1メディア 弊社エンジニアおすすめ番組 fukabori.fm UIT INSIDE EM . FM #EMFM PHPの現場 ajitofm 終わりに Podcast （ ポッドキャスト ）を始めてみよう！ Podcast （ ポッドキャスト ）は Apple 社が提供しているアプリケーションとなります。 名前の由来は、ポータブルマルチ メディアプレーヤー である iPod （ アイポッド ）と、放送を意味するbroadcast（ブロードキャスト）を組み合わせた造語とのことです。 最近では、 Apple 社だけでなくGoolgeや Spotify でも Podcast がでております。 Google Podcasts Spotify for Podcasters 今回は、 Apple 社が提供している Podcast の始め方をご説明します。 1. Apple Store で「 Podcast （ ポッドキャスト ）」を検索し、アプリを開く 図１： Apple Store 画面 2. Podcast （ ポッドキャスト ）のアプリが起動する 図２： Podcast 起動画面 3. 見たいカテゴリ or キーワードを検索する 図３： Podcast 検索画面 たったこれだけです。簡単ですよね。 次にエンジニアやデザイナーの皆様に見ていただきたい、Tech系 Podcast （ ポッドキャスト ）の番組をご紹介します！ Tech系 Podcast 人気番組 Podcast の「テク ノロ ジー 」人気番組ランキングは以下の通りです。 順位 番組名 1 Apple Event 2 Rebuild 3 Apple Events (video) 4 Apple News Radio ワンボタンの声 5 backspace.fm 6 Image Cast 7 texta.fm 8 TEDTalks テク ノロ ジー 9 TED Radio Hour 10 電脳タイガー飯店 11 Off Topic 12 石川温の スマホ No.1メディア ※2021/9/17時点での情報です。 では、早速番組ごとに紹介していきます！ Apple Events Apple Events (audio) Apple テク ノロ ジー ¥0 podcasts.apple.com 秋の新製品を発表した Apple 社が配信する番組「 Apple Events」が堂々の1位！ 番組説明 The Apple Events podcast is home to the latest keynote addresses. Listen to announcements of new products and services and browse the archive of past events to relive revolutionary moments in the history of personal technology. 引用元： Podcast 配信先リンク Apple Podcast 作成者 配信開始 エピソード Webサイト 更新タイミング Apple Inc. 2019年 8 Apple Events 不定 期（新製品が発表された時） ※2021/9/17時点での情報です。 人気のエピソードはこちら！ 最新エピソード １． ‎Apple Events (audio)：Apple Podcast内のApple Event, September 2021 ２． ‎Apple Events (audio)：Apple Podcast内のWWDC21 Keynote ３． ‎Apple Events (audio)：Apple Podcast内のApple Event, April 2021 ※2021/9/17時点での情報です。 こちらの番組は音声のみの配信となっています。 もし動画、日本語字幕と合わせて視聴したい場合は、これからご紹介する「 Apple Events (video)」番組をご確認ください！ Rebuild Rebuild Tatsuhiko Miyagawa テク ノロ ジー ¥0 podcasts.apple.com Tech系番組の日本で一番有名と言われているのが、「Rebuild」です！ 番組説明 ウェブ開発、プログラミング、モバイル、ガジェットなどにフォーカスしたテク ノロ ジー 系 ポッドキャスト です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Tatsuhiko Miyagawa 2013年 441 rebuild.fm 不定 期(月に3回くらい) ※2021/9/17時点での情報です。 rebulid.fmの中で最新のエピソードは以下になります。 最新エピソード １． ‎Rebuild：Apple Podcast内の316: Domestic Violence Camcorder (N) ２． ‎Rebuild：Apple Podcast内の315: Our Bank Doesn't Like Your Voice Service (higepon) ３． ‎Rebuild：Apple Podcast内の314: Takeda Shingen of Silicon Valley (hak) ※2021/9/17時点での情報です。 rebuild.fmは、色々なジャンルのゲストを交えた トーク が聞けるのでどのエピソードも楽しく聞くことができる番組となっております！ 9/14に最新エポソードも上がっていますので、こちらも見逃せませんね！ Apple Events (video) Apple Events (video) Apple テク ノロ ジー ¥0 podcasts.apple.com 1位に続き、 Apple 社の新製品や新サービスの発表を アーカイブ 動画として配信している Podcast の番組が「 Apple Events (video) 」です！ Apple 製品好きの方には有難い番組ですね。 番組説明 The Apple Events podcast is home to the latest keynote addresses. Watch announcements of new products and services and browse the archive of past events to relive revolutionary moments in the history of personal technology. 引用元： Podcast 配信先リンク Apple Podcast 作成者 配信開始 エピソード Webサイト 更新タイミング Apple Inc. 2008年 53 Apple Events (video) 不定 期（新製品が発表された時） ※2021/9/17時点での情報です。 最新エピソード １． ‎Apple Events (video)：Apple Podcast内のApple Event, September 2021 ２． ‎Apple Events (video)：Apple Podcast内のWWDC21 Keynote ３． ‎Apple Events (video)：Apple Podcast内のApple Event, April 2021 ※2021/9/17時点での情報です。 こちらの番組は前述した通り音源だけでなく、動画の配信も行っております。 また、 スマートフォン で視聴すると字幕もついてみれますので英語の解説でも問題なく理解できます！ Apple 製品だけでなく、英語学習にも使える良い番組です！ Apple News Radio ワンボタンの声 Apple News Radio ワンボタンの声 ワンボタンの声制作委員会 テク ノロ ジー ¥0 podcasts.apple.com Apple 関連のニュースを中心にユーザー目線で紹介している Podcast が「 Apple News Radio ワンボタンの声」という番組です！ やはりどの番組も、話題は Apple の新商品についてばかりですね。 番組説明 Mac , iPod , iPhone , iPad , Apple watch , Apple TVなど Apple にまつわるニュースをもとにリスナーと一緒に楽しむ podcast です。Old Mac ユーザーには懐かしい往年の Apple 製品を振り返る"Time machine radio"も好評です。30分間の番組を火・木・土の早朝に配信していますので通勤、通学のお供にお楽しみください。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング ワンボタンの声制作委員会 2009年 15 Apple News Radio ワンボタンの声 火・木・土の早朝 ※2021/9/17時点での情報です。 最新エピソード １． ‎Apple Podcast内のApple News Radio ワンボタンの声 ２． ‎Apple Podcast内のApple News Radio ワンボタンの声 ３． ‎Apple Podcast内のApple News Radio ワンボタンの声 ※2021/9/17時点での情報です。 30分という尺で配信を行っていますので、通勤・通学期間にぴったしのコンテンツとなっております。 Apple ユーザの皆様、是非ご視聴ください！ backspace.fm backspace.fm backspace.fm テク ノロ ジー ¥0 podcasts.apple.com 続きまして、 フェンリル 株式会社さんが提供している「backspace.fm」です！ 番組説明 一週間分のテック・ガジェットニュースを配信する ポッドキャスト 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Koichi Aoki 2014年 664 backspace.fm 不定 期(3日に1回くらい) ※2021/9/17時点での情報です。 以下が最新エピソードになります。 最新エピソード １． ‎backspace.fm：Apple Podcast内の#411:【後編】次が人生最後のクルマなら、あなたは何を買いますか？ ２． ‎backspace.fm：Apple Podcast内の#411:【前編】次が人生最後のクルマなら、あなたは何を買いますか？ ３． ‎backspace.fm：Apple Podcast内の#410:【お便りコーナー】転職ホヤホヤの山川記者と議論する最近のカメラ事情とコロナ禍での働き方 ※2021/9/17時点での情報です。 1週間分のテック・ガジェットニュースを配信していると記載がありますが、更新頻度を見ると3日に1回くらいと頻度は高めです。 つまり、最新情報がすぐに入ってくる良いコンテンツということになりますので是非ご興味あればご視聴ください！ Image Cast Image Cast Image Club テク ノロ ジー ¥0 podcasts.apple.com クリエイティブな話を聞きたい方におすすめなのが、「Image Cast」です！ 番組説明 Image Castは、個人でものを作る人の集まりImage Clubとして活動しているあずまと鉄塔が自宅からお送りする30分ほどの Podcast です。技術・デザイン・制作・表現などに関係のあるような無いようなトピックを中心に、毎週二人が気になったもの、発見したことをそれぞれ持ち寄っておしゃべりします。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Image Club 2020年 52 Image Club 毎週土曜日朝 ※2021/9/17時点での情報です。 人気のエピソードはこちら！ 最新エピソード １． ‎Image Cast：Apple Podcast内の#49 うまくいかないのが自分のせいか世界のせいかは気分で決めていい ２． ‎Image Cast：Apple Podcast内の#48 全ての道はマリオペイントに通ず ３． ‎Image Cast：Apple Podcast内の#47 ポイントカードお持ちですか？ ※2021/9/17時点での情報です。 制作、表現、技術、デザインなどに関係のある話が30分～1時間くらいで聞けるので通勤やお昼休憩の際に最適なコンテンツとなっております。 毎週土曜日に更新されるそうですので、気になった方はフォローしてみてくださいね！ texta.fm texta.fm Design and Engineering team at PIXTA テク ノロ ジー ¥0 podcasts.apple.com 動画・動画の素材サイトを運営しているピクスタ株式会社さんの「texta.fm」です！ Podcast で配信しているなんてすごいですね…。 番組説明 texta.fmは、ピクスタで働くデザイナー・エンジニアによる技術ブログ「てくすた」の ポッドキャスト 版です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Design and Engineering team at PIXTA 2020年 11 texta.fm 不定 期(2か月に1回くらい) ※2021/9/17時点での情報です。 最新エピソードはこちら！ 最新エピソード １． ‎texta.fm：Apple Podcast内のSideshow 7. Jbuilder was Right ２． ‎texta.fm：Apple Podcast内の7. Fat Controllers and Models ３． ‎texta.fm：Apple Podcast内の6. 1on1 in Public ※2021/9/17時点での情報です。 テスト駆動開発 （TDD）の スペシャ リストとして知られる和田卓人さんとの トーク が聞けます。 ラジオ感覚で学習ができるとても良いコンテンツです！ TEDTalks テク ノロ ジー TEDTalks テクノロジー TED テク ノロ ジー ¥0 podcasts.apple.com 世界中の発明家や研究者たちが技術発信をしている番組が「TEDTalks テク ノロ ジー 」です！ 番組説明 TEDカンファレンス、TEDxイベント、世界中の提携イベントのステージから、世界最先端の発明家、研究者たちが、デモや発見やビジョンを披露してくれます。これらに加え、たくさんのビデオが、英語の スクリプト や最大80の言語から選んだ字幕を付けてTED.comから無料でダウンロードできます。TEDは「広める価値のあるア イデア 」を追い求める非営利組織です。 引用元： Podcast 配信先リンク Apple Podcast 作成者 配信開始 エピソード Webサイト 更新タイミング TED Talks 2012年 120 TEDTalks テクノロジー 不定 期 ※2021/9/17時点での情報です。 人気のエピソードはこちら！ 最新エピソード １． ‎TEDTalks テクノロジー：Apple Podcast内の電化による素晴らしい未来の空の移動 | コリー・コウムズ ２． ‎TEDTalks テクノロジー：Apple Podcast内の都市が交通機関をデトックスする | モニカ・アラヤ ３． ‎TEDTalks テクノロジー：Apple Podcast内のパンデミックを乗り越え、公衆衛生を再考する上でテック企業にできること | カレン・デサルヴォ、ホイットニー・ペニントン・ロジャース、クリス・アンダーソン ※2021/9/17時点での情報です。 5分程で終わる内容や、1時間語り続けているものまでエポソードは様々あります。 ご興味のある分野から是非ご視聴ください！ なお、日本語の字幕も設定できますのでご活用ください。 TED Radio Hourt TED Radio Hour NPR テク ノロ ジー ¥0 podcasts.apple.com アメリ カで放送しているラジオの Podcast 「TED Radio Hourt」です！ 番組説明 Exploring the biggest questions of our time with the help of the world's greatest thinkers. Host Manoush Zomorodi inspires us to learn more about the world, our communities, and most importantly, ourselves. 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング NPR 2012年 150 TED Radio Hour 毎週金曜日 ※2021/9/17時点での情報です。 最新のエピソードはこちら。 最新エピソード １． ‎TED Radio Hour：Apple Podcast内のListen Again: The Gratitude Chain: A.J. Jacobs ２． ‎TED Radio Hour：Apple Podcast内のThe Food Connection ３． ‎TED Radio Hour：Apple Podcast内のListen Again — Esther Perel: Building Resilient Relationships (2020) ※2021/9/17時点での情報です。 アメリ カのラジオ局が配信しているということもあり、全エピソード英語となっております。 英語が得意な方にとっては面白い番組なのではないでしょうか？ 電脳タイガー飯店 秘密結社 電脳タイガー飯店 dentora テク ノロ ジー ¥0 podcasts.apple.com 次はなんと2021/8月から配信を開始したばかりの「電脳タイガー飯店」という番組です！ 始めたばかりにも関わらず、Tech系ランキングで上位にきている番組となっております。 番組説明 毎回、テク ノロ ジー ×何かで世界征服が実現できないかをテーマに語る世界征服系 Podcast 番組です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング 電脳タイガー 2021年 5 電脳タイガー飯店 毎週火曜20時 ※2021/9/17時点での情報です。 最新エピソード １． ‎秘密結社 電脳タイガー飯店：Apple Podcast内の#05 全人類をテックで秘密結社に入社させる方法（前編） ２． ‎秘密結社 電脳タイガー飯店：Apple Podcast内の#04 テック×占いで世界征服できるのか（後編） ３． ‎秘密結社 電脳タイガー飯店：Apple Podcast内の#03 テック×占いで世界征服できるのか（前編） ※2021/9/17時点での情報です。 前述にも記載しましたが、配信を開始したばかりの番組となっておりますのでエピソード数もまだまだ一桁です。 これから話題となってきそうな番組となっておりますので、是非ご確認ください！ Off Topic // オフトピック Off Topic // オフトピック Off Topic テク ノロ ジー ¥0 podcasts.apple.com アメリ カスタートアップに詳しい「Off Topic // オフトピック」番組です！ 番組説明 Off Topicは、米国を中心に最新テックニュースやスタートアップ、ビジネス情報、たまにカルチャーをゆるーく深堀りしながら解説する番組です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Off Topic 2018年 84 Off Topic // オフトピック 毎週木曜 ※2021/9/17時点での情報です。 では、最新エピソードです！ 最新エピソード １． ‎Off Topic // オフトピック：Apple Podcast内の#83 Bored ApesやCryptoPunksに秘めたNFTアバターの可能性 ２． ‎Off Topic // オフトピック：Apple Podcast内の#82 NFTとオーナーシップ経済 ３． ‎Off Topic // オフトピック：Apple Podcast内の#81 注目のクリエイターたちに学ぶ ファンとの向き合い方 ※2021/9/17時点での情報です。 注目は米国の最新テックニュースを分かりやすく解説してくれるところだと思います。 海外のトレンドやニュースを知りたい方におすすめの番組です！ 石川温の スマホ No.1メディア 石川温のスマホNo.1メディア ラジオNIKKEI テク ノロ ジー ¥0 podcasts.apple.com ラジオNIKKEI がお送りする番組が「石川温の スマホ No.1メディア」です！ スマホ に関する最新情報を発信しております！ 番組説明 世界中を飛び回って取材する スマホ ／ケータイジャーナリストの石川温さんをパーソナリティに迎えてお送りする スマホ 情報番組。最新情報からお役立ち情報まで、 スマートフォン に関連する幅広い情報をお届けします。 ラジオNIKKEI 第1で毎週木曜日20:20～20:50放送中！ 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング ラジオNIKKEI 2014年 364 石川温のスマホNo.1メディア 毎週木曜日 ※2021/9/17時点での情報です。 最新エピソード １． ‎石川温のスマホNo.1メディア：Apple Podcast内の2021.9.16・第364回「iPhone 13発表。Apple秋のスペシャルイベント」 ２． ‎石川温のスマホNo.1メディア：Apple Podcast内の2021.9.9・第363回「片手に収まるハイスペック。ASUS『Zenfone 8』」 ３． ‎石川温のスマホNo.1メディア：Apple Podcast内の2021.9.2・第362回「PayPay、これからのスマホ決済」 ※2021/9/17時点での情報です。 毎週放送＝毎週更新される Podcast のため最新情報をすぐにインプットできるコンテンツです！ スマホ にご興味がある方は是非ご視聴ください！ 弊社エンジニアおすすめ番組 fukabori.fm fukabori.fm iwashi テク ノロ ジー ¥0 podcasts.apple.com アジャイル / スクラム /デザイン/マネジメント/コンテナ/ 自然言語 など様々な技術を深堀して発信しているのが「fukabori.fm」です！ 番組説明 技術などを深掘りして楽しむ Podcast です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング iwashi 2018年 57 fukabori.fm 不定 期（月1程度） ※2021/9/17時点での情報です。 最新エピソード １． ‎fukabori.fm：Apple Podcast内の56. 自然言語処理(NLP)の歴史、BERT w/ Takahiro Omi ２． ‎fukabori.fm：Apple Podcast内の55. コンテナランタイム(後編) w/ TokunagaKohei ３． ‎fukabori.fm：Apple Podcast内の54. コンテナランタイム(前編) w/ TokunagaKohei ※2021/9/17時点での情報です。 更新頻度は低いですが、1コンテンツの配信内容はとても濃いです。 約40分程で1技術を学べるとなれば聞くしかないですよね？ UIT INSIDE UIT INSIDE UIT テク ノロ ジー ¥0 podcasts.apple.com 人気のフロントエンドに関する技術をLINE株式会社のエンジニアが配信している番組、「UIT INSIDE」！ UITとは、 User Interface + Technology の頭文字を取っているとのこと。 番組説明 LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング UIT 2019年 94 UIT INSIDE 金曜日（月3回くらい） ※2021/9/17時点での情報です。 最新エピソード １． ‎UIT INSIDE：Apple Podcast内のep.97『フロントエンドに詳しい CTO がいてよかったことは？heyのフロントエンド事情を聞いてみた』 ２． ‎UIT INSIDE：Apple Podcast内のep.96 『Shell scriptがもっと身近に！ zx活用術』 ３． ‎UIT INSIDE：Apple Podcast内のep.95 Front-End Tooling 実践！最新のツールチェインで長大なビルド時間の改善に挑む ※2021/9/17時点での情報です。 変化が速いフロントエンド技術に注目し、配信してくれるのはとても有難いです。 約30分で最新のフロントエンドの知識をインプットできる優れたコンテンツとなっております！ EM . FM #EMFM EM . FM #EMFM EM.FM テク ノロ ジー ¥0 podcasts.apple.com エンジニア リングマ ネージャー（EM）のための番組、「EM . FM」！ （名前のまんまです） 番組説明 Engineering ManagerによるEngineering Managerのための Podcast 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング EM.FM 2018年 50 EM . FM #EMFM 不定 期（2か月に1回くらい） ※2021/9/17時点での情報です。 最新エピソード １． ‎EM . FM #EMFM：Apple Podcast内のlv12. ユニークなキャリアは代替ができない ２． ‎EM . FM #EMFM：Apple Podcast内のlv11. 「自分で考える」ことの脆弱性 ３． ‎EM . FM #EMFM：Apple Podcast内のlv10. 『EMが必要だからやる』から『EMになりたい』へ ※2021/9/17時点での情報です。 マネジメント向けの内容を1時間ほど語っている番組となりますが、聞いといて損はないと思います！ ご興味ありましたら是非！ PHP の現場 PHPの現場 Masashi Shinbara テク ノロ ジー ¥0 podcasts.apple.com PHP コミュニティの中では有名な番組、「 PHP の現場」！ PHP の現場で開発してる中級者以上向けの内容となっております。 番組説明 PHP の現場にいる人と話す ポッドキャスト です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts Spotify 作成者 配信開始 エピソード Webサイト 更新タイミング Masashi Shinbara 2017年 44 PHPの現場 不定 期（2か月に1回くらい ※2021/9/17時点での情報です。 最新エピソード １． ‎PHPの現場：Apple Podcast内の44. ちゃんとしなきゃいけない呪い（hanhan1978） ２． ‎PHPの現場：Apple Podcast内の43. ゲーム開発での DDD 実装パターンの活用（n_1215） ３． ‎PHPの現場：Apple Podcast内の42. Laravel 本と開発現場（ytake / kurikazu / omoon） ※2021/9/17時点での情報です。 開発現場で活躍する現役 PHP エンジニアの皆様が出演しているため、エピソード毎に雰囲気が異なり面白く視聴できます！ PHPerの皆様、お時間ある際にご視聴ください！ ajitofm ajitofm Kenta Suzuki テク ノロ ジー ¥0 podcasts.apple.com 続いて、VOYAGE GROUPの社内バーでの語りを収録している「ajitofm」です！ 更新頻度は低めですが、ゲスト参加するエンジニアの皆さんのレベルが高いためアップされると注目される番組となっております。 番組説明 技術・ガジェット・エンジニアリング・組織などに関する ポッドキャスト です。 引用元： Podcast 配信先リンク Apple Podcast Google Podcasts 作成者 配信開始 エピソード Webサイト 更新タイミング Kenta Suzuki 2017年 58 ajitofm 不定 期（1年に3本くらい） ※2021/9/17時点での情報です。 最新エピソード １． ‎ajitofm：Apple Podcast内のajitofm 58: Engineer in VOYAGE 出版しました #voyagebook ２． ‎ajitofm：Apple Podcast内のajitofm 57: Nature Remoのシステムの裏側をsongmuさんに聞いてみた ３． ‎ajitofm：Apple Podcast内のajitofm 56: DX Criteriaやってみた ※2021/9/17時点での情報です。 エンジニアの皆様におすすめの番組です！ 最新がアップされる前にまずは過去のエピソードをご視聴ください！ 終わりに Tech系 Podcast はいかがでしたでしょうか？ 今回は Podcast 内の「テク ノロ ジー 」で人気の番組だけでなく、弊社エンジニアおすすめの番組も紹介させていただきました。 おうち時間が増えている今、 Podcast は技術の情報収集を行うにあたりとても便利なコンテンツです！ 無料且つ、最新トレンドをいち早く収集するのに最適な Podcast …是非本日からお楽しみいただければと思います。 最後までお読みいただきありがとうございました！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

こんにちは。west-cです。 オブジェクト指向 を意識した開発を行うようになって からし ばらく経ちました。 当初に比べると手続き的な考え方からいくらかは脱却できたかと思いますが、 オブジェクト指向 的な設計手法やコーディング方法が完璧に身に付いたと言える自信はまだありません。 そこで今回は、 オブジェクト指向 的な考え方を鍛えることができると言われている「 オブジェクト指向 エクササイズ 」を試してみることにしました。 オブジェクト指向とは オブジェクト指向エクササイズとは オブジェクト指向エクササイズをやってみた ・すべてのプリミティブ型と文字列型をラップすること ・ファーストクラスコレクションを使用すること ・Getter、Setter、プロパティを使用しないこと ・else句を使用しないこと ・名前を省略しないこと ・1行につきドットは1つまでにすること おわりに 参考文献・参考資料 オブジェクト指向 とは オブジェクト指向 とは、システムで扱う事柄をオブジェクトとして捉える技法と言えます。 オブジェクト指向 が普及する以前に用いられていた手続き型の設計の場合、システムの機能全体の手順を徐々に分解して小さな部品を作り上げていくような、いわゆる トップダウン 的なアプローチとなります。 手続き型での開発手法の場合、改修時の影響範囲が広くなると一般に言われています。 一方、 オブジェクト指向 では部品（オブジェクト）を中心に考えます。 まず、システムの実現を担う個々の部品を定義し、その部品自身に振る舞いをもたせます。 そして、定義した部品同士を組み合わせることでシステムを実現します。 手続き型とは正反対の、 ボトムアップ のアプローチを取ることが特徴的です。 個々の部品の独立性が高いため、改修時の影響範囲も限られ、コードの保守性や再利用性が高まることが期待できます。 オブジェクト指向 エクササイズとは オブジェクト指向 エクササイズとは、書籍『 ThoughtWorksアンソロジー 』で紹介されている オブジェクト指向設計 を理解し実際に使えるようになるためのエクササイズです。 オブジェクト指向 エクササイズの具体的な方法は、以下に定められた9つのルールを適用してコードを書く、というものになります。 1つのメソッドにつきインデントは1段階までにすること else句を使用しないこと すべてのプリミティブ型と文字列型をラップすること 1行につきドットは1つまでにすること 名前を省略しないこと すべてのエンティティを小さくすること 1つのクラスにつき インスタンス 変数は2つまでにすること ファーストクラスコレクションを使用すること Getter、Setter、プロパティを使用しないこと オブジェクト指向 エクササイズをやってみた お題には「 チケット料金モデリング 」を利用し、映画のチケットとその料金を決定するコードを、 オブジェクト指向 エクササイズの9つのルールを守った上で書いてみました。なお使用言語は Java です。 作成したコードは以下に置いてあります。 github.com 以下、ルールのうちいくつかをコードを交えて紹介します。 ・すべてのプリミティブ型と文字列型をラップすること いわゆる Value Object の考え方です。 今回の場合、チケット料金の決定には上映日（平日か・土日祝か・ 映画の日 か）や上映時間（レイトショーかどうか）が必要になります。 そこで、 LocalDate や LocalTime をそのまま利用するのではなく、これらをラップした ScreenTime オブジェクトを作成しました。 これにより上映日時にまつわる必要な振る舞いを ScreenTime に閉じ込めることができ、「 映画の日 かどうか」や「レイトショーかどうか」といった業務固有の振る舞いもオブジェクト内で表現することができました。 public class ScreenTime { private final LocalDate date; private final LocalTime time; // 略 /** * 映画の日かどうか. */ public boolean isCinemaDay() { return date.getDayOfMonth() == 1 ; } /** * レイトショーかどうか. */ public boolean isLateShow() { return time.getHour() >= 20 ; } } ・ファーストクラスコレクションを使用すること ファーストクラスコレクションとは、 Java でいう java.util.List のようなプリミティブなコレクション型をラップしたクラスのことを指します。 ファーストクラスコレクションを作成しシステムに必要な振る舞いに限定したメソッドを提供することで、このコレクションの意図を明確にすることができます。 チケットの種類の決定には年齢・学生かどうかに加えて、各種会員か・ 障がい者 かなども関係します。 今回は、「各種会員か」「 障がい者 か」といった割引要素を Discount という Enum で定義することにしました。 public enum Discount { CINEMA_CITIZEN, HANDICAPPED, MICARD } 1人で複数の割引要素を持つことも考えられるためファーストクラスコレクション DiscountList を作成し、チケット種類の決定にはこのモデルを利用するようにしました。 今回は各種要素が含まれているかどうか程度でしか利用していないため恩恵は少ないですが、外部からの意図せぬコレクション操作を防ぐことができるという点は保守性の向上にも繋がると思います。 public class DiscountList { private final List<Discount> discounts; public DiscountList(Discount ... discounts) { this .discounts = Arrays.asList(discounts); } /** * シネマシティズン会員かどうか. */ public boolean isCinemaCitizen() { return contains(Discount.CINEMA_CITIZEN); } /** * 障がい者かどうか. */ public boolean isHandicapped() { return contains(Discount.HANDICAPPED); } /** * エムアイカード会員かどうか. */ public boolean isMicard() { return contains(Discount.MICARD); } private boolean contains(Discount type) { return discounts.contains(type); } } ・Getter、Setter、プロパティを使用しないこと 今回、観客を表す Audience モデルに Age という名前で年齢を持たせることにしました。 このAgeを利用して「70才以上か」「幼児か」といった判定を行いたいのですが、 Audience には Age を取得するようなgetterメソッドは作成せず、 Audience 経由で年齢にまつわる必要な振る舞いを提供するようにしました。 前述の「すべてのプリミティブ型と文字列型をラップすること」「ファーストクラスコレクションを使用すること」のルールとセットで、Tell, Don’t Ask の原則に沿ったコードとするために押さえておきたい考え方だと思いました。 public class Audience { private final Age age; private final StudentType studentType; public Audience(Age age, StudentType studentType) { this .age = age; this .studentType = studentType; } /** * 指定した年齢以上かどうか. */ public boolean isYearsAndOver( int other) { return age.isYearsAndOver(other); } /** * 幼児かどうか. */ public boolean isInfant() { return age.isInfant(); } // 略 } ・else句を使用しないこと 上映日時（ ScreenTime ）からどの日時・時間帯の料金を適用すべきかを決定するために、料金のタイプを表す PriceType という Enum を定義しました。 ScreenTime をもとに PriceType を適用するファクトリメソッドは分岐が多くなってしまいましたが、else句を利用せず、かつなるべく可読性が高くなるよう早期returnやprivateメソッドへの抽出を行うようにしました。 ただ、 Enum で定義している定数自体が多くなってしまったこともあり、工夫したところでやはり可読性が低いことには変わりない点は課題に感じています。 改善の余地ありと感じている部分です。 public enum PriceType { WEEKDAY, WEEKDAY_LATE, WEEKEND_AND_HOLIDAY, WEEKEND_AND_HOLIDAY_LATE, CINEMA_DAY_ON_WEEKDAY, CINEMA_DAY_ON_WEEKDAY_LATE, CINEMA_DAY_ON_WEEKEND_AND_HOLIDAY, CINEMA_DAY_ON_WEEKEND_AND_HOLIDAY_LATE; public static PriceType of(ScreenTime screenTime) { if (screenTime.isCinemaDay()) { return priceTypeOfCinemaDay(screenTime); } if (screenTime.isWeekDay()) { return priceTypeOfWeekDay(screenTime); } return priceTypeOfWeekend(screenTime); } private static PriceType priceTypeOfCinemaDay(ScreenTime screenTime) { if (!screenTime.isLateShow()) { return screenTime.isWeekDay() ? CINEMA_DAY_ON_WEEKDAY : CINEMA_DAY_ON_WEEKEND_AND_HOLIDAY; } return screenTime.isWeekDay() ? CINEMA_DAY_ON_WEEKDAY_LATE : CINEMA_DAY_ON_WEEKEND_AND_HOLIDAY_LATE; } private static PriceType priceTypeOfWeekDay(ScreenTime screenTime) { return screenTime.isLateShow() ? WEEKDAY_LATE : WEEKDAY; } private static PriceType priceTypeOfWeekend(ScreenTime screenTime) { return screenTime.isLateShow() ? WEEKEND_AND_HOLIDAY_LATE : WEEKEND_AND_HOLIDAY; } } ・名前を省略しないこと 「名前を省略しないこと」とありますが、このルールの本来の趣旨は「省略したくなるような長い名前を付けないこと」と言えると思います。 『すべてのエンティティの名前には1つか2つの単語だけを使い、省略しないでください』とありますが、今回は厳守はできませんでした。 例えば、チケット種別「中・高生」を表すクラスでは JuniorAndHighSchool という名前を利用してしまっています。 もしかすると Teenager などでの言い換えが可能かもしれないですが、本当にイコールとして扱って良いのかの判別がつかなかったため、一旦このままとしました。 たかが 命名 されど 命名 ということで、実際の開発時にはより良い 命名 をチーム内で模索していく活動が必要なのだと感じました。 ・1行につきドットは1つまでにすること このルールでは「複数のドットを使っているコードは責務の配置を間違っているはず」ということに基づいていると言えると思います。 一方、このルールを文字通りに受け取ると、以下のようなStream処理もルール違反とみなされてしまいます。 private List<TicketPlan> sortByPrice(PriceType priceType) { return plans.stream() .sorted(Comparator.comparing(plan -> plan.price(priceType))) .collect(Collectors.toList()); } 今回はルールに従うため、Streamは利用せず以下のようにComparatorを別途作成したうえでソートを行うようにしました。 ただ、メソッド名等からその操作の意図が分かるようであれば、盲目的にルールに従うのではなくある程度許容するのもアリなのではと感じた部分です。 private List<TicketPlan> sortByPrice(PriceType priceType) { Comparator<TicketPlan> ticketPriceComparator = TicketPriceComparatorFactory.create(priceType); List<TicketPlan> sortedList = new ArrayList<>(plans); sortedList.sort(ticketPriceComparator); return sortedList; } おわりに 今回 オブジェクト指向 エクササイズを実践したことで、今まで以上にモデルの責務等について思考を巡らせることができました。 エクササイズ実践後の自身の考え方にも変化があったと思っており、たとえば実務のコードでプリミティブ型をメソッド間で引き回しているようなコードを見かけると違和感を覚えるようになり、よりよい概念で モデリング ができるのではないかといった考えが生まれるようになりました。 一方で、「 オブジェクト指向 エクササイズのルールを守ったからといって必ずしも オブジェクト指向設計 ができるとは限らない」ということも同時に感じました。 出来上がったモデルを見直してみるとぎこちなさや違和感を覚えるものも多くあり、自身の モデリング 力の不足を痛感しています。 今回は自身の未知の ドメイン 領域ということで、余計にぎこちなさを感じる モデリング になってしまったと思います。 実務においては担当領域の ドメイン 知識習得に励むとともに、 オブジェクト指向 エクササイズのルールを頭の片隅に入れながら モデリング 力の向上にも努めていきたいです。 皆さんもぜひ、 オブジェクト指向 エクササイズを試してみてはいかがでしょうか。 参考文献・参考資料 ThoughtWorksアンソロジー オブジェクト指向エクササイズのススメ オブジェクト指向でなぜつくるのか 第2版 （ 新版 が出ているようです） エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

弊社で毎月開催し、 PHP エンジニアの間で好評いただいている PHP TechCafe。2021年8月のイベントでは社外でご活躍されている PHP エンジニアにもご参加いただいて「PHP8.1の新機能」について語り合いました。 rakus.connpass.com PHP8.1の新機能は8.0に比べれば少ないとはいえ、順番に追いかけてみると思ったより大きなボリュームになったためイベント内容を2回に分けてレポートします。今回は前編として前半の半分をご紹介します。 PHP8.1 新機能について Enums Enumの実現は10年以上かかった Fibers 恩恵を受けるのはまだ先 Performance improvements パフォーマンスが約20%向上 Array Unpacking with string keys 覚えておけば得することもある書き方 new in initializer PHP8.0から拡張されて進化している Readonly Properties 今まではPHPDocなどに頼っていた First-class Callable Syntax 静的解析が可能になる 後編へ続く PHP8.1 新機能について PHP8.1の新機能は弊社のメンバーが事前にShowNoteにまとめていました。今回はこれに従って新機能をみていきました。 hackmd.io Enums 複数の定数をまとめる「列挙型」がサポートされるようになりました。「昔から話としては上がっていたが、ついに正式に実装されます。」と紹介されて、8.1の中でも特に大きく取り上げられています。 ここではまず以下のようなコードを使って解説されました。 Enum の書き方 <?php enum CardsMark { case DIAMOND; case HEART; case SPADE; case CLOVER; } Enum の実装例 <?php class Card { public function __construct ( public CardsMark $ mark , ) {} } $ card = new Card ( CardsMark :: DIAMOND ) ; この例をもとに、 Enum を使うことで以下のような実装ができると説明がありました。 コンスト ラク タで引数を持つときに Enum のカードマークに適しているものしか受け付けないようなクラスをつくることが出来る オブジェクト作るときにはカードマークを付けてオブジェクトを作る形にできる （上記の例のCardクラスのように）入ってくる値が Enum で列挙されたものに固定されるので、意図しないものが入ってくることを防げる また、以下のような特徴も紹介されました。 定数をまとめるだけじゃなくて、メソッドも定義できる インターフェイス を実装することもできる （上記のCardsMarkのような）存在するパターンを実装した Enum ですよという書き方ができる 意図しない実装を防ぎ、意図が伝わりやすい実装になるというコメントが紹介されました。 Enum の実現は10年以上かかった 基礎知識の解説のあとは Enum が PHP の機能に追加されるまでの歴史的背景の話題で盛り上がりました。 Enum は2010年頃から提案されていた ずっと提案されていたし、ユーザからも色々あった どの Enum 実装にするかは数あるライブラリのどれを使うか議論があった PHP の内部実装的に実現が難しかった 「 Java とかには普通にある機能なんですよね。はるか昔からある機能で、 Effective Java みたいな『とりあえずこれ読んどけ』みたいな本には『有限要素の表現をするときにはまず Enum 使え』とか書いてありましたね。」というコメントもあり、他の言語では早くから取り入れられた Enum が PHP でもやっと使えるようになったことは、参加したPHPerにとっては感慨深いものがあるようでした。 ※各言語で採用されている Enum （残念ながら Wikipedia の列挙型のページにはまだ PHP の例が掲載されていない） ja.wikipedia.org オフショア開発を担当しているエンジニアからは、「日本人で、しかもその時いたメンバーなら『あのときあの経緯で作ったから、ここにはこの値しか入れないよね』という暗黙の了解がいつの間にか新しいメンバーや国境を超えたメンバーには伝わってなくて、いつの間にか全く知らない値が入るようになっちゃったりして。そういう使い方のつもりじゃなかったんだ！？ってことが防げますね。」という意見もありました。 一方で、他の言語に似てきていることから「 PHP らしくない」という意見もありました。 Enum が導入されたことで「他の言語へ乗り換えも検討するレベルかな？」という意見も出てきましたが、大半の意見は「 PHP の中で出来る方が絶対いい」「今から新しい言語に乗り換えるってなったら…」と、他の言語へ乗り換えるのは別の懸念も多く予想され消極的な様子でした。 ただし、もともと PHP で書いてたものを Scala にリプレイスしたサービスの事例が取り上げられ、「（可能性は）0%ではない」「 PHP だとパフォーマンスが出しにくいので、他の言語のほうがパフォーマンスも出る」などのニーズにもよるという意見がありました。 ※ PHP から Scala へ乗り換えたチャットワークさんの事例 チャットワークがScalaを採用する理由、これからのチャレンジ。 | チャットワーククリエーターズブログ いずれにしても、 Enum が導入されたことで「安全にかつ意図を表現できるようになった。」「喜ばしい変更ですね。」「 PHP の流れに沿っていますね。」「まず使ってみて、身体を慣らしてもらえれば。」という前向きな意見が大半でした。 Fibers Fibersという非同期処理を実行するための仕組みが導入されます。ただし、この機能によって PHP で非同期処理ができて、処理パフォーマンスが向上するかというとまだそうではないようです。1つのプロセスの中で処理を切り替えているだけなので、他の処理をブロックしてしまう機能がまだあり、同時並行で重い処理をこなすというのは現時点ではまだ難しいと RFC には書かれているようです。このあたりも、そのうちブロックされないライブラリを使ったり、コアの方もどんどん解消されていくことで理想に近づいていくのではないか、ということが RFC に書かれているようです。 これで夢が開けるかっていうとまだちょっと早い。もうちょっと先かな。 実際に同時並列でっていうのはまだ実現できない。 ずっと試しているんですけどめちゃくちゃセグフォ（セグメンテーション違反）が出てですね…… 人によると思うんですけどいわゆる普通レベルの恩恵に預かるにはライブラリ経由で預かることになるかなと。 恩恵を受けるのはまだ先 ライブラリなどの開発向けの機能であり、一般のPHPerが恩恵を受けるにはまだ先になりそうです。 また、Fiberという名前の由来についても紹介されました。「軽量スレッドと言われていて、スレッドより細いからFiberだそうです。」とのことで、「縫い糸」という意味のスレッドより細いものということで「細長い糸」という意味のFiberが採用されたようです。 Performance improvements パフォーマンスが約20%向上 ZendEngineのパフォーマンス向上により、 ベンチマーク 結果では約20%向上したそうです。大幅な進化というわけではありませんが、参加者からは以下のような意見がありました。 正直天井、 PHP の限界みたいなことを聞いてましたが、まだ20%上がる余地があったんですね。 ZendEngine自体の高速化だからなんにもしなくても恩恵を得られますよね。 PHP は遅い言語ではない、ということですね。 ただし、特定の ベンチマーク の結果なので、「全部のシチュエーションで20%向上ってわけではない」とのことです。 wiki.php.net Array Unpacking with string keys PHP 8.1 では文字列のキーでも配列のマージができるようになりました。書き方が変わったよという機能です。 <?php $ array1 = [ "a" => 1 ] ; $ array2 = [ "a" => 2 ] ; $ array = [ "a" => 0 , ...$ array1 , ...$ array2 ] ; var_dump ( $ array ) ; // ["a" => 2] 覚えておけば得することもある書き方 ここでは今回のような「こんな書き方できたんだったな」という機能がいくつかあるよね、という話題で盛り上がりました。「こういうの出てくるたびに、覚えとかないとってなりますね。」とのことですが、一方で「どう調べたら良いかわからないですね。これはどういう意味なの？っていう。」という意見もありました。「名前が分からないとググれないですね。点々でつなげているのでググりようがない。」ということで、検索するのは難しいですが、 PHP のマニュアルが親切なので配列のマニュアルをしっかり読めばわかるとのことなので、まずはマニュアルを熟読したいところです。 www.php.net new in initializer デフォルト引数はもともと PHP にある機能で、引数を渡されていない場合のデフォルト値を指定できますが、これまではオブジェクト指定することができませんでした。8.1からはデフォルト値に新しいオブジェクトの インスタンス を持たせることが出来るようになります。 <?php class Test { public function __construct ( private Logger $ logger = new NullLogger, ) {} } 「これまでは便宜的にnullとかにしておいて、nullだったらこのデフォルトのオブジェクト入れる、みたいなちょっと冗長な書き方をしていたけど、もう少し意図が分かる形で表現できるようになるし、簡潔に書けるようになる。」と、この新機能のメリットが説明されました。 一方で、上記の例では「Testクラスが NullLogger と密結合してしまうので、そういう 疎結合 にできなくなって無意識に結合しちゃうっていうのはあると思います。」というデメリットも紹介されました。 PHP8.0から拡張されて進化している コンスト ラク タのProperty設定を引数のところで書けるというのがPHP8.0から出来るようになっています。とはいえ、このオブジェクトを初期化することができなかった課題から今回の拡張が取り入れられたようです。 「単発でも使えるけれど、Attributeの拡張みたいな側面もあって、今までAttributeの中では定数式、文字列とか、配列の中にさらに文字列等しか入っていないものしか入れてられなかったけれど、そこにオブジェクトの初期化も入れられるようになった。Attributeの 入れ子 みたいなことも出来るようになりますね。」と具体的な活用方法の例が紹介されました。 「PHP8でできたばかりの機能がどんどん拡張されていくスタイルなんですね。進化が目覚ましい。」と期待の声もあがっていました。 Readonly Properties 宣言後に一度だけ初期化出来るプロパティを追加できる機能です。読み取りだけ出来るプロパティを作るというのが今までなかったため、「かゆいところに手が届く」と紹介されました。ただし、型付のプロパティのみ使用可能という条件付きです。型がついていないプロパティの初期値がNullになってそこから変更できないため、それはできないとのことです。 ここでは「もとからfinalを使ったら駄目なのか？」という疑問点もあがりました。これに対しては、「finalはメソッドでも使えるもので、上書きできないという意味なので、final使うとプロパティの定義を上書きできないというふうに誤読できてしまう。」と、finalの使い方とreadonlyの使い方の違いが解説されました。 今まではPHPDocなどに頼っていた Readonly Propertiesは「8.1の変更の中で使い所の多そうなものの一つ」と活用シーンが多そうな期待の声があがっていました。 「今まではPHPDocに @property-read って書くことで読み取る専用というのを書いたりしてましたね。」と過去のやりかたが紹介されました。これまではPHPDocなどの別の方法で実現していたことが、 PHP の言語仕様で実現できるようになります。「自分のプロパティ内でも書き込みができない、上書きができないってことなのでimmutableなClassが作りやすくなります。」と活用シーンの期待が説明されました。 First-class Callable Syntax クロージャ ーを作るときに ... を書くだけで作れるようになります。 <?php function foo ( int $ a , int $ b ) { /* … */ } $ foo = foo ( ... ) ; $ foo ( a : 1 , b : 2 ) ; 引数を受け取るようになっていたときに クロージャ ーが作れるようになります。 前述のArray Unpackingの書き方と似ているので、「読み慣れないうちは見間違えるんじゃないかという意見もあるようです。」と懸念が紹介されました。 静的解析が可能になる 読みづらそうだし、使い方がイメージしづらい懸念の声がありましたが、メリットとして上記のコードの例をもとに次のように解説されました。 今までは文字列のfooっていうのを書いたりしなきゃいけなかったけど、野暮ったいし静的解析できない ちゃんと静的に書けるようになったのが嬉しいですね。 例えばArrayマップとかで助かる 静的解析が可能な書き方になるのがポイントのようです。 後編へ続く PHP8.1の新機能はまだまだあります。後編では以下についてご紹介していますので是非ご確認ください！ Pure intersection Types New never type New Array_is_list_function final class constants New fsync function Explisit octal integerliteral notation Restrict $GLOBALS usage 後編の記事は以下になります。 PHP8.1 の新機能について語り合う・後編【PHP TechCafe イベントレポート】 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは、takaramです。 突然ですが、 OSS へコントリビュートした経験はありますか？ 今回は主に、 OSS （ オープンソース ソフトウェア）へのコントリビュートに興味はあるけどまだしたことがない、という人へ向けて、まず第一歩を踏み出してみよう！というお話をしたいと思います。 OSS（オープンソースソフトウェア）について オープンソースソフトウェアとは？ オープンソースソフトウェアのメリット OSSコントリビュート ドキュメントの修正 ケース1：誤記修正 ケース2：ドキュメントページの表示改善 最後に OSS （ オープンソース ソフトウェア）について オープンソース ソフトウェアとは？ ソフトウェアのうち、 ソースコード が一般に公開されていなかったり、利用が有償であるものを「 プロプライエタリ ソフトウェア」と呼びます。有名なところでは Windows や macOS 、 Oracle database、 Adobe Photoshop なども プロプライエタリ ソフトウェアです。 それらに対し、利用者が ソースコード の入手、利用、修正、再配布等を自由に行えるソフトウェアを「 オープンソース ソフトウェア ( Open Source Software )」と言い、一般的に頭文字を取って OSS と呼びます。単に ソースコード が公開されているだけでなく、その改変なども自由に行えるところが特徴です。 PHP や Ruby などの プログラミング言語 の処理系、 MySQL や PostgreSQL などの DBMS 、 Firefox のような Webブラウザ も OSS （ オープンソース ソフトウェア）です。 厳密には、 オープンソース イニシアティブという団体によって オープンソース の定義が決められており、これら10の条件に当てはまるものが OSS （ オープンソース ソフトウェア）ということになります。 The Open Source Definition | Open Source Initiative 逆に言えば、この定義に沿うように公開すれば先述したような大規模なものでなくとも、一個人が開発したものでも OSS （ オープンソース ソフトウェア）にすることができます。 オープンソース ソフトウェアのメリット OSS （ オープンソース ソフトウェア）を利用するメリットとしては、以下のようなものがあると言われています。 基本的に無償のためコストを抑えられる 問題があっても自分で修正できる 提供元の倒産、買収で突然使えなくなる心配がない 今や様々な種類のソフトウェアが オープンソース になっており、 OSS （ オープンソース ソフトウェア）を使ったことのないエンジニアはいないと言っても過言ではないほどに普及しています。 OSS コントリビュート OSS の開発に関わることを OSS 活動といいます。自分で開発したソフトウェアを公開することもそうですし、既存の OSS にバグ報告や機能追加の提案、修正パッチを送ることで貢献（コントリビュート）することも OSS 活動になります。 自分が利用している OSS に対してコントリビュートすれば、そのまま自分たちの利益になるのはもちろんですが、その他にも OSS 活動を行うことで、 自分の技術力の向上につながる 就職・転職の際に評価してもらえる などのメリットがあります。そのため最近では自社のエンジニアに対し OSS 活動を推奨するIT企業も増えてきています。（弊社 ラク スの開発部でも、社員の自己研鑽の一環として OSS 活動が推奨されています！） とはいえ、「なんだか難しそう」と漠然とハードルの高さを感じている人も多いのではないでしょうか。確かにいきなりバグ修正などに挑むのは少し難易度が高いかもしれません。 そこで、 OSS 活動の第一歩としてドキュメント修正から始めてみる ことをオススメしたいと思います。 ドキュメントの修正 仕事・趣味を問わず、コーディングを行う際は利用する プログラミング言語 やライブラリの公式ドキュメントを参照することが多いのではないでしょうか？ OSS の場合、そのドキュメントもまた オープンソース としてメンテナンスされている場合が多いです。小、中規模の OSS であれば ソースコード とドキュメントが同じ リポジトリ にあることが多いですが、大規模なライブラリや プログラミング言語 であれば、ドキュメントが別 リポジトリ になっているパターンもよくあります。 ドキュメントも当然人が作っているものですので、間違いや抜けがあることもあります。普段からドキュメントを読んでいる中で、そうしたミスや改善点を見つけることができれば、それが OSS ドキュメントへのコントリビュートチャンスです！ コードの修正に比べれば難易度、 心理的 なハードルとも幾分か低いのではないでしょうか。それでもその OSS の利用者にとっては役に立つ、立派なコントリビュートと言えるはずです。 ここからは、筆者が実際に OSS のドキュメントを修正しプルリク エス トを送った実際の事例を紹介したいと思います。 ケース1：誤記修正 筆者は普段の仕事では PHP を使っているのですが、 PHP のマニュアルは英語版を元として日本語を含む複数の言語に翻訳されています。ある時日本語版マニュアルを読んでいると、誤った説明になっている箇所があることに気が付きました。英語版を確認してみると正しい記述になっていて、翻訳時のミスのようだったので、修正のプルリク エス トを送ってみることにしました。 PHP 日本語版マニュアルは PHP: PHP マニュアル - Manual にありますが、これはDocBookという XML の一種で書かれた文書をHTMLに変換したもので、DocBookファイル自体は GitHub で管理されています。修正するためにはまずその リポジトリ を探さなければいけないわけですが、たいていの場合ドキュメントのどこかに リポジトリ へのリンクが存在します PHP の場合、ページの右上の Submit a Pull Request というリンクをクリックすると、該当のファイルを GitHub で閲覧することができます。 日本語版なら php/doc-ja リポジトリ の該当ファイルが開きます。 PHP マニュアルの"Submit a Pull Requst"リンク バグ修正などであれば、ここで リポジトリ をforkしてローカルにcloneして……などを行うのですが *1 、今回は一文程度の修正なので、 GitHub 上で修正してしまうことにしました。 詳しいやり方は GitHubの公式ドキュメント に載っているためそちらをご確認いただければと思いますが、 Webブラウザ 上で手軽に修正からプルリク エス トの送信まで済ませてしまうことができます。 なお、 リポジトリ によってはプルリク エス トを送る際の作法や注意点を記載している場合があります。 PHP 日本語版マニュアルの場合は README.md に記載がありましたが、他のプロジェクトだと CONTRIBUTING.md のような名前のファイルに書かれていたり、 GitHub の Wiki に記載されていたりというパターンもあります。 プルリク エス トを送る前には一度確認しておいて方がいいでしょう。 さて、プルリク エス トの送信まで完了すれば、あとは リポジトリ へのコミット権限を持つメンテナが修正内容を確認してくれるのを待ちます。どのくらいで確認してもらえるかは一概には言えませんが、今回送ったプルリク エス トは半日程度で見ていただき、そのまま問題なくマージされました。 github.com このような大規模 OSS の日本語版ドキュメントの場合、 リポジトリ の管理者も基本的に日本語が通じるので、プルリク エス ト等でのやり取りも日本語で行えます。 英語に苦手意識がある人でも問題ありません。 ケース2：ドキュメントページの表示改善 こちらは Ruby の日本語版リファレンスにプルリク エス トを送った事例です。 Ruby は日本生まれの言語ということもあってか、日本語の公式リファレンスが英語版とは独立して存在しています。 docs.ruby-lang.org このリファレンスを参照している際に、一部のページで若干表示が崩れる箇所があるのを発見しました。よくよく見たところ、 Chrome では発生せず、 IE と Firefox でのみ起こるようでしたが、HTMLと CSS をいじれば対応できそうだということがわかったため、プルリク エス トを送ることにしました。 Ruby のリファレンスも PHP と同様、別形式（ Ruby リファレンスの場合は RD 形式）で書かれたファイルをプログラムでHTMLに変換しています。今回はHTMLを修正する必要があったため、この変換プログラム側に手を加える必要がありました。調べたところ、このプログラムはドキュメント ( rurema/doctree ) とは別の リポジトリ ( rurema/bitclust )になっているようです *2 。 今回は GitHub でブラウザ上で修正、とはいかなかったので、ローカルにcloneしてきて修正を行いました。初めて見る リポジトリ で多数のファイルがありましたが、今回は出力されるHTMLと CSS さえ変更できればよかったので、全部を把握する必要はないと判断し、それっぽい箇所を検索で探し当てながら修正を行いました。 そうして修正を終え、手元で実際に試して問題ないことを確認してプルリク エス トを作成しました。 github.com すると3日後にコメントが付き、少し違った修正方法の提案を頂くことができました。確かにそちらの修正のほうが良さそうだと考えたため、コミットの修正を行いました *3 。その後少し時間は空きましたが、無事にマージされました！ この事例ではプログラムの修正を行っているので、1つ目の誤記修正に比べればハードルが高そうにも思えますが、万が一自分の修正に問題があった場合でも言語やライブラリ本体の修正ほどは影響が大きくないはずです。そう考えれば少し手を出しやすいのではないでしょうか？ 最後に OSS へのコントリビュートの第一歩として、まずドキュメントの修正から入ることのメリットをお伝えしました。普段使っている言語やライブラリのマニュアルに間違いや誤字脱字を見つけたら、「そのうち誰かが直すだろう」ではなく自分で修正してみるのはいかがでしょう？ そうして OSS にプルリク エス トを送ることに慣れてくれば、次のステップとして ソースコード の機能追加やバグ修正にも踏み出しやすくなることと思います。 ちなみに、先日弊社で開催した OSS LT会 vol.2 でも同じテーマでお話ししましたので、よければこちらのスライドも合わせてご覧ください。 www.docswell.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com *1 : もっとも最近は GitHub Codespacesを利用すれば、ローカルへのcloneは必須ではないかもしれませんが *2 : PHP マニュアルの場合もやはりHTMLへの変換プログラムは別 リポジトリ になっています *3 : 個人的な印象ですが、 OSS ではコミット履歴をきれいにするためこうしたレビュー後の修正は 別コミ ットにせず1コミットにまとめてforce pushすることが多い気がします

こんにちは！社会人4年目のaa-cryingです。 現在は開発チームの小チームのリーダーとしてチーム内のプロジェクトマネジメントを行っています。 あらすじ プロジェクトマネジメントとは PMBOK 10個の知識エリア 統合マネジメント スコープマネジメント リスクマネジメント コミュニケーションマネジメント ステークホルダーマネジメント スケジュールマネジメント コストマネジメント 品質マネジメント 資源マネジメント 調達マネジメント PMBOK 5つのプロセス 立ち上げプロセス 計画プロセス 実行プロセス 監視・コントロールプロセス 終結プロセス 初めてのプロジェクトマネジメント スケジュール・タスク管理(下流以降) リーダーへの報連相 チームマネジメント フワっと概算で算出し、スケジュールを組んだ 書籍を読んで得たエッセンス 担当になったら知っておきたい「プロジェクトマネジメント」実践講座 スケジュールの建て方 まとめ あらすじ まず、私がプロジェクトマネジメント業務に携わるようになった経緯をご説明します。 昨年度11月より、新機能の上流工程に携わりました。 下流 工程に入るタイミングでチームの再編があり、 3人チームのリーダーとして、新機能のプロジェクトリーダーに任命されプロジェクトマネジメント業務にあたることになりました。 急に任されたこともあり、そもそもプロジェクトマネジメントの知識が乏しかった私は、基本の基から学んでみることにしました。 プロジェクトマネジメントとは プロジェクトマネジメントとは、その字の如く「プロジェクトをマネジメント（管理）すること」を意味します。 もう少し噛み砕くと、「計画、進捗、作業系統化、コスト、リソース（人、物）、時間、リスクといった制約条件を管理しながら、プロジェクト完了までチームを効率的にリードしていくこと」です。 現在は PMBOK （Project Management Body of Knowledge・プロジェクトマネジメント知識体系ガイド）」という、プロジェクトマネジメントの知識を体系的にまとめた参考書のようなものが定義されています。 PMBOK は「QCD」（品質・コスト・納期）の管理のため「立上げ」「計画」「遂行」「コンロール」「集結」の「５つのプロセス」を敷き、 その為に必要な知識を「10個の知識エリア」として分類しています。 PMBOK 10個の知識エリア 統合マネジメント プロジェクト全体の方針を決めて、目標やプロセスを調整したり管理したりする分野です。 他の9つの知識エリアをその名の通り統合して、全体をマネジメントする位置づけとされています。 スコープマネジメント スコープとはプロジェクトの範囲を意味し、プロジェクトを成功させるために必要な作成物とタスクを定義して、目標の達成する確率を高めるために行う分野です。その定義は必要に応じて常に見直されます。 ここを的確に定めることがプロジェクトの成否に大きく影響するため、10個の中でも 最重要項目 ともいわれています。 リスクマネジメント プロジェクトを進めていく中で発生する可能性があるリスクを管理する分野です。 リスクはチャンスも包括することが多いため、避けてばかりいるのではなく上手くコン トロール しながら管理・調整しなければなりません。 また、想定できるリスクを事前に予防することも重要です。 コミュニケーションマネジメント ステークホルダー （利害関係者）とのスムーズなコミュニケーションを行うために管理する分野です。 プロジェクトマネジメントでは、相手にただ状況伝達するだけでなく、相手の理解を得ることができるレベルのコミュニケーションスキルが求められます。 ステークホルダー マネジメント ステークホルダー （利害関係者）にとって必要な情報を収集し、保管・伝達を管理する分野です。 プロジェクトでは、社内・社外問わずさまざまな ステークホルダー が存在します。 2012年に公表された PMBOK ガイド第5版により、「 ステークホルダー マネジメント」は「コミュニケージョンマネジメント」から独立して新しく設定された知識エリアです。 スケジュールマネジメント プロジェクト成功させるためのスケジュール管理や生産性を向上させるために時間の使い方を管理する分野です。 スケジュール管理を行うだけではなく、時間あたりの成果を高めるためのマネジメントでもあるのがポイントです。 なお、2017年に PMBOK 第6版のリリースに伴い、「 タイムマネジメント 」から「スケジュールマネジメント」に名称が変わりました。 コストマネジメント プロジェクトにかかる費用を適切に見積り・予算を設定して管理する分野です。 現実的な予算を設定することが重要であり、予算を超えないようにマネジメントを実施します。 品質マネジメント プロジェクトのプロセスやプロジェクトの作成物における品質の管理を実施する分野です。 プロジェクトにおける品質とは、作成物がクライアントが求めているものと合致しており、使用するのに適していることを指します。 資源マネジメント プロジェクトを成功させるために人材(リソース)だけでなく物的資源の調達および管理を実施して、プロジェクトを遂行できるチーム編成を行う分野です。 2017年の PMBOK 第6版のリリースに伴い、「人的資源マネジメント」から「資源マネジメント」に名称と内容が変わりました。 調達マネジメント 調達マネジメントは、プロジェクトの業務を進めていく中で必要なサービスやプロダクトの調達を管理する分野です。 調達の多くは契約が必要ですが、契約のみが目的ではありません。 調達先の選定から、納品の 進捗管理 ・ 検収 まで調達に関する全ての管理を行います。 PMBOK 5つのプロセス PMBOK では、プロジェクトの開始から終了までの流れを 立ち上げ 計画 実行 監視・コン トロール 終結 という5つのプロセスに分類して定義しています。 ここでは、それぞれのプロセスについて詳しく紹介します。 立ち上げプロセス プロジェクトを発足する前に許可を得るプロセスのことです。 立ち上げプロセスの段階では、プロジェクトを始める際に必要な情報である目的・目標・予算・成果などを定義します。 また、プロジェクト憲章の作成や ステークホルダー の特定も行います。 計画プロセス プロジェクトを成功させるための作業計画を企画して実際に設計するプロセスです。 計画プロセスの中に、20の詳細なプロセスが定義されています。 計画プロセスの段階では、目標の定義や、プロジェクトを進める際の一連の行動の流れも規定します。 実行プロセス 企画・設計した計画に基づいて人材と資源の調達を行い、プロジェクトを実際に実行するプロセスです。 5つのプロセスの中で最もリソースを消費するプロセスであり、進捗状況次第では計画の練り直しや更新を行ってベースラインを再度設定する必要があります。 監視・コン トロール プロセス プロジェクトを進めていく中の作業で計画との差異が発生していないかについて継続的にチェックを行います。 差異が検出された場合は、その改正を実施します。 終結 プロセス 規定のプロセスがきちんと完了していることを検証して、プロジェクトや工程を正式に完了させるプロセスです。 ただプロジェクトや工程を終了させるだけではなく、プロジェクトの中で獲得したノウハウを保管して、次のプロジェクトに役立たせることが大切とされています。 初めてのプロジェクトマネジメント プロジェクトマネジメントの基本をおさらいしたところで、私の 経験談 についてお話させていただければと思います。 私が今回実施した内容はプロジェクトマネジメントと言っても 下流 工程のみのため、5つのプロセスの中で言うと 「実行プロセス」以降 になります。 知識エリアで言うと 「スケジュールマネジメント」「コミュニケーションマネジメント(開発内)」「資源マネジメント(一部)」 になりますね。 具体的な業務内容をあげると、以下の3つになります。 スケジュール・タスク管理( 下流 以降) スケジュールを策定し、チームメンバーにタスクを采配 タスクの進捗をウォッチし、進捗が芳しくないようなら適宜フォローをし、原因を取り除く 原因について自チーム内での完結が難しい場合は上のリーダー層へ相談 リーダーへの 報連相 日々の進捗を報告 タスクや進捗に問題がある場合は整理した上で相談し、解決を図る。 チームマネジメント チームメンバーの開発歴や得意分野を考慮してタスクを アサイ ン 当然機能開発以外にもやることはあるため、それらについてもタスクの アサイ ンや進捗の管理を行う 機能開発以外にもチームメンバーの困っていることや問題の解決 他チームの方やリーダーに助けられ、最終的にはスケジュールから何とか遅れずに開発完了できましたが、その中で 失敗 もありました。 フワっと概算で算出し、スケジュールを組んだ 一番にあげるならこれです。 スケジュールを立てる方法が分からず、過去の似たような箇所を改修している案件から概算でおおまかなスケジュールを組んでしまいました。 その後、いざ実装に入るタイミングで見積もりを見直したところ、見立ての2倍くらいの 工数 に跳ね上がりました。 当然リスケをすることに... 書籍を読んで得たエッセンス スケジュールマネジメントには課題感が大きく、どうすれば良いか悩んでいました。 上長やリーダーの方の勧めもあって書籍を読んでみることに... 担当になったら知っておきたい「プロジェクトマネジメント」実践講座 読んでみた書籍はこちら。 選んだ理由は Amazon で検索して1番左上に出てきたのと、 担当になったばかりだったのでタイトルと自分の状況があってそうだなと思ったことです。 全部読んだわけではなく、課題に感じていたスケジュールや見積もりに関する箇所を中心に読んでみました。 以降は書籍に記載されていたエッセンスとそれに基づいた失敗の分析等をまとめています。 スケジュールの建て方 まず、書籍にて紹介されていたスケジュールの建て方を紹介します。 WBS の構成要素・最終目標を書き出す 要素を出し終わったら各要素の成果物を書き出す 各要素の成果物を更に分割し、要素成果物(ワーク・パッケージ)を書き出す その要素成果物(ワーク・パッケージ)を生み出すための活動(アクティビティ)を書き出す 活動の順序付けを行う 順序付けを行ったアクティビティ一つ一つについて 工数 見積もりを行う アクティビティの単位で開始日と終了日を決める アクティビティ⇒ワーク・パッケージ⇒成果物⇒最終目標と 工数 を積み上げていき、全体の完了日を設定する 参考文献：「プロジェクトマネジメント」実践講座の3章 ...と結構多く段階を踏む必要があるそうです。 ここで気づいたのが、 私達のチームでは、 開発の工程を細かくタスクに分割した一覧として Redmine のチケットテンプレートが存在する こと。 基本的に機能開発の 下流 工程を開始する際は、そのテンプレートからチケットを登録しています。 100%達成すれば、基本的に開発工程が漏れなく完了できるというものです。 なんと、開発準備の段階で既にアクティビティまで分割と順序付けまで出来ていました。 先の機能開発でも使用はしていたのですが、 WBS の構成要素について過去の案件からおおよそのスケジュールを定め、 それをもとに Redmine チケットの1つ1つの開始日・期限を設定していくという方法を取ってしまっていました。 上記書籍の手法の逆をやっていることになるので、そりゃあ見積もり精度に問題が出るわけですね。 まとめ 今回はプロジェクトマネジメントの基本の基として PMBOK の「10個の知識エリア」「5つのプロセス」を紹介し、その上でスケジュールマネジメント(主にスケジュール策定)の手法について経験を交えながら少し掘り下げてみました。 本来なら書籍に記載の手法に則って策定したスケジュールに沿って進めて実際にどうだったかまで記載できれば良かったのですが、プロジェクトは現在進行中なので、プロジェクトが完了した際に振り返ってみて、また記事にしたいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは技術広報の syoneshin です。 最近「Notion」を利用した情報収集や管理を聞く機会が増え 個人的に興味の沸いた「Notion」について基本情報や使い方を調べまとめました。 本記事は Notionをはじめて知った方 Notionのを使い方を知りたい方 向けにNotionの基本的な使い方と事例をご紹介します。 Notionとは Sign upしよう Step1.メールアドレス入力 Step2.ログイン Step3.アカウント情報入力・パスワード Step4.利用プランの選択 Step5.Notionの登録完了 Notion基本の使い方 ドキュメント/メモ作成 タスク管理 データ管理 情報共有 Notionの使い方事例 事例① 事例② 事例③ 事例④ さいごに Notionとは Notionは、2018年に アメリ カのNotion Labsによって開発された情報管理・共有アプリケーションです。 メモなどのドキュメント作成 タスクやデータの管理 チームでのマニュアルやナレッジ共有 などなど、多く機能を備えており これまで複数のツールやアプリで管理・共有していた情報を まとめて一元管理・共有できる優れたサービスです。 Notionはオールインワンの情報共有ツールを掲げているだけあって、具体的には以下のような機能と利便性が評価されて利用ユーザーは既に全世界で1000万人を超えています。 ■具体的な機能例 ドキュメント管理・編集機能（ Google ドキュメント） ファイル保存機能（ Google ドライブ、 Dropbox ） データベース管理機能（ Excel 、 Access ） タスク管理機能（Trello、Asana） To Doリスト作成管理機能 メモ作成機能 カレンダー登録管理機能 マークダウン記法機能 各種コードの埋め込み機能 Webクリップ機能 画像ギャラリー 2021年9月現在、残念ながらNotionの日本語版はございません。 今後は、日本版リリースにも期待したいところです。 Sign upしよう ここからはNotionの使い方を具体的な利用手順に沿って紹介します。 初めて利用される方は、Notionに Sign upする必要があります。 普段利用しているメールアドレスがあれば、 Sign upできます。 ※ Gmail アカウントなら簡単です。 Step1.メールアドレス入力 アカウントを新規作成される方は、上記で入力したメールアドレスに自動メールが届きます。 Step2.ログイン メールに届いたURLをクリック、もしくはパスコードをsing up画面で入力すると Notionにログインでき、アカウント情報入力画面に遷移します。 Step3.アカウント情報入力・パスワード ご自身のアカウント情報を所定箇所に入力し、ログ インパス ワードを設定します。 Step4.利用プランの選択 以下利用プランから1つを選択します。 With my team :　複数名のグループで使用する場合に選択　※無料トライアルは1週間、その後は有料 For myself　:　個人から2~3人に共有する場合に選択 Step5.Notionの登録完了 以下、Notion管理画面でGetting Startedページが出れば サインアップ(登録)は完了となり、Notionを使う事ができます。 Notion基本の使い方 ここからはNotionの基本的な使い方を紹介します。 「Notion」はマルチブラウザ対応で、アプリでも利用できます。 ※本記事では Google Chrome での使い方をご紹介。 ドキュメント/メモ作成 Notionの使い方、まずはドキュメント/メモの作成です。 Notionのドキュメント/メモの大きな魅力は、カスタマイズの自由度が高いことです。 では、ドキュメント/メモの使い方を説明します。 ページを新規作成する Notion管理画面左のサイドバーにページ一覧があり、ドキュメント/メモを追加作成するには「＋Add a page」、もしくは「＋New page」をクリックするとドキュメント/メモ作成ができます。 白紙でドキュメントを作成したければ、表示されたページにある「Empty」を選択すればOKです。 「Enpty」を選択すると以下のようなページが生成されます。 「Untitled」にドキュメント/メモのタイトルを、テキスト箇所にテキストを入力すればOKです。 テキストの入力方法にはマークダウン記法が使えます。 ※マークダウン記法について知りたい方は以下記事も参考にしてみて下さい。 tech-blog.rakus.co.jp ドキュメント内のタイトル上部にカーソルを合わせると、アイコン、カバー画像、コメントを設定できるメニューが表示され、クリックするとドキュメント/メモの装飾もできます。 ドキュメント/メモの装飾例 またNotionは各ドキュメントをツリー構造で管理できるのが大きな特色です。 その他、URLのブックマーク保存、Googlemap、 YouTube やgsuiteのドキュメント・スライド・スプレットシート、PDF、などの埋め込みもできます。 タスク管理 Notionはタスク管理ツールとしても利用可能です。 それでは使い方を紹介します。 ページを新規作成する まずはドキュメント/メモ作成と同じく、以下の手順でページを新規作成します。 「+New Page」をクリック ページのタイトルを入力 ページテキスト内のメニューから「Table」をクリック すると以下の様なテーブルが生成されます。 表の項目を作成する Table（表）が表示されたら、Name、Tags、Filesの名前を変更して、項目を作成します。 Property Typeは、その項目の入力規制(例えば締切ならDate、テキストならTextなど）を設定します。 以下のようなイメージになります。 また表示タイプはテーブル表示ではなく 1: カンバン方式 型 2:カレンダー型 3:ギャラリー型 4:リスト型 などにしたい場合は 「+Add a View」から追加できますのでお試し下さい。 以下は各表示形式のイメージです。 データ管理 Notionの使い方でも、コア機能であるデータベース機能を使ったデータ管理はとても人気です。 情報の蓄積と検索を可視化でき、必要な情報を取り出しやすくできます。 例えばデータベース機能を使って 読書リスト ニュースリスト 顧客管理リスト などが作れ、情報管理と引出しが容易にできます。 データベースをカスタマイズできる自由度が高いため、さまざまな利用用途で使え、自分だけの独自なデータ管理ができるので便利です。 私は読みたい本や読了した本の要約メモをリスト化して、読書リストとして利用しております。 情報共有 Notionで作ったドキュメントやデータは他者やチームへの情報共有、またWEB上での公開も可能です。 Notionを既に利用している人であれば、複数人でどんなページでもすぐに共有が可能です。 まず共有メンバーの追加方法は以下 Workspace全体を共有したい場合 サイドバーの Settings & Members をクリック Add a Member ボタンをクリック 追加したいメンバーのメールアドレスを入力し enter をクリック 追加したいメンバーにNotionへの招待メールが届く 特定のページのみ共有したい場合 ページ右上の Share をクリック Invite a Person ボタンをクリック 追加したいメンバーのメールアドレスを入力し、ドロップダウンから権限(full access , can comment, can read)を選択して Invite をクリック 追加したいメンバーにNotionへの招待メールが届く ページ共有を一人に、複数人に、WEB上で共有・公開する方法や編集・閲覧権限は以下に詳しい記載がございますので、ご確認下さい。 extns.notion.site チームでのタスク・ナレッジ共有だけでなく 最近ではサービスページやFAQとして WEB公開している事例もございます。 Notionの使い方事例 ここではNotionの使い方について 個人や法人ではどのように使われているのか？ いくつか事例をご紹介します。 事例① こちらは当社主催イベント「情報収集ハックLT会」で紹介されたNotionの使い方事例です。 情報をどう集め、どう整理するか？ 特に情報どう活かすのか までご紹介されている事例で大変参考になります。 speakerdeck.com 事例② こちらは当社開発メンバーがNotionの使い方を紹介した事例になります。 RSSリーダー 「Inoreader」とNotionを組み合わせたニュースや技術情報の クリッピング と整理方法を紹介しております。 speakerdeck.com 事例③ 最近ではNotionを使った採用ページやFAQサイト、コーポレートサイト、サービスサイトなども出始めております。 以下ではNotionで作られたサイトやページ情報を集約されております。 こちらをみるとNotionは、改めて自由度が高いと感じます。 www.notion.so また法人企業での利用例で以下も参考になる記事です。 seleck.cc 事例④ こちらは YouTube で紹介されていたNotionの使い方事例です。 こちらのチャンネルではNotionの使い方事例が多く取り上げられており参考になります。 www.youtube.com さいごに ご紹介の「Notionの使い方 まとめ」は、いかがだったでしょうか？ Notionの使い方を詳しく知るには以下 『公式ヘルプ 日本語版 | Npedia』 が参考になります。 extns.notion.site 本ブログが、これからNotionを使いたいという方のお役にななれば、幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに Twitter API Twitter API利用申請 アプリケーション作成 データの取得 タイムラインのツイートを取得 ツイートIDを指定して検索 キーワード検索 地域のトレンド取得 まとめ 参考 はじめに こんにちは。taku_76です。 前回は API について記事作成し 食べログ API を使ってみましたが、他の API も触れてみたいと思い、 今回は Twitter API を使ってみました。本記事では Twitter API の利用申請から Twitter API を使用したデータ取得方法を紹介したいと思います。 Twitter API Twitter API を使用することで、ツイートの取得であったり、投稿、フォローなど行うことができます。また、自動でフォローやいいねもすることができます。 今回は Python で Twitter API を利用する際に使える、Tweepyを使用して主にデータの取得を例に紹介します。 Twitter API 利用申請 以下からDeveloperサイトにアクセスして、「Create an app」ボタンを押下します。 次の画面で デベロッパ ーツールの利用目的を聞かれます。 私の場合は Twitter API を使用したかったので、「Hobbyist > Exploring the API 」を選択しました。 選択肢はいろいろありますので自分の目的に応じて選択してください。 ただ他のサイトでも確認しましたが、厳密でなくてもよいみたいです。 選択できましたら、画面下部の「Get started」ボタンを押下して次に進みます。 この画面では以下について確認します。 ・アカウント ・メールアドレス ・個人開発者アカウント or チーム開発者アカウント ・ニックネーム ・住んでいる国 ・自身のコーディングスキルレベル 5つの質問に英語で回答します。 ・ Twitter API または Twitter データをどのように使用しますか？ 私の場合は、トレンドのツイートを取得して分析するであったり、 Python の学習のためといった内容を英語に翻訳しました。 ・ Twitter のデータを分析する予定はありますか？ YESと回答すると、データを分析する方法を説明する必要があります。 トレンドのツイートやそれに含まれているキーワードを分析して特徴を調べるといった内容を記載しました。 残り以下の質問がありますが、今回使用する予定がなかったのでNoとしました。 ・アプリはツイート、 リツイート 、いいね、フォロー、ダイレクトメッセージ機能を使用しますか？ ・ Twitter 以外の Twitter コンテンツに関するツイートや集計データを表示する予定はありますか？ ・あなたの製品、サービス、または分析により、 Twitter のコンテンツまたは派生情報を政府機関が利用できるようになりますか？ 全て入力が完了したら「Next」ボタンを押下します。 入力内容の確認をします。問題なければ「Next」ボタンから次に進みます。 最後に 利用規約 の確認を行い、「Submit Application」ボタンを押下して申請は完了です。 アプリケーション作成 Twitter API の利用申請が完了すると、 Twitter アカウントのメールアドレス宛にメールが届いていますので 「Confirm your email」ボタンを押下して デベロッパ ーサイトにアクセスします。 「Create project」ボタンを押下してプロジェクト作成画面に進みます。 プロジェクトの名前を入力して次に進みます。 Twitter 開発者プラットフォームを使用する方法を選択します。 今回は Twitter API を使用するので「Exploring the API 」を選択しました。 プロジェクトについて説明します。 Twitter API 利用申請時の目的と同じような内容で良いと思います。 最後にアプリ名を入力します。 次の画面で Twitter API キーと API シークレットキーが表示され、それらを使用することで Twitter API を利用することができます。 データの取得 Twitter API ではアカウントをフォローしたり、ツイートを投稿したり様々な機能を利用できますが、今回はデータの取得に絞って例を紹介します。 Twitter API を使用するためのコードですが、まずはTweepyを利用するために以下の設定を行います。 import tweepy # 取得したキーを格納 CK = "APIキー" CS = "APIシークレットキー" AT = "アクセストークン" AS = "アクセストークンシークレットキー" # Tweepy設定 auth = tweepy.OAuthHandler(CK, CS) # Twitter API認証 auth.set_access_token(AT, AS) # アクセストークン設定 api = tweepy.API(auth) # オブジェクト設定 これで設定が完了しましたので、実際に Twitter API を使用していきます。 タイムラインのツイートを取得 タイムラインの取得には以下の３つのメソッドがあります。 ・ API .home_timeline：自分自身のタイムライン ・ API .user_timeline：指定したユーザのタイムライン ・ API .mentions_timeline：自分へのリプライのタイムライン API .home_timelineメソッドの引数としては以下があります。 ・since_id：指定したIDより最近のツイートが取得される（IDは最近のものほど大きくなる） ・max_id：指定したIDよりも古いツイートが取得される ・count：取得件数指定 ・page：取得する結果のページを指定 API .home_timelineを使用した例が以下となります。 #タイムライン取得 result = api.home_timeline(count=1) for tweet in result: print('='*80) print('ツイートID : ', tweet.id) print('ツイート時間 : ', tweet.created_at) print('ツイート本文 : ', tweet.text) print('ユーザ名 : ', tweet.user.name) print('スクリーンネーム : ', tweet.user.screen_name) print('フォロー数 : ', tweet.user.friends_count) print('フォロワー数 : ', tweet.user.followers_count) print('概要 : ', tweet.user.description) print('='*80) ツイートIDを指定して検索 API .get_statusメソッドを使用することでツイートIDからツイートの情報を取得できます。 以下が例となっています。（TWEETIDを検索したいツイートIDに指定してください） #ツイートIDを指定 TWEETID = 'xxxxxxxxxxxxxxxxx' #ツイートの取得 tweet = api.get_status(TWEETID) #JSON形式に変換 result = tweet._json #表示 print('作成日 : ', result["created_at"]) print('スクリーンネーム : ', result['user']['screen_name']) print('ツイートテキスト : ', result['text']) キーワード検索 検索を行うには API .searchメソッドを使用します。引数は以下のようになっています。 ・q：検索するキーワード ・geocode：ツイートした場所 ・lang；言語指定 ・locale：クエリの言語指定 ・result_type：取得ツイートの種類指定 ・count：取得件数指定 ・until：ツイート時期の指定 ・since_id：指定したIDより最近のツイートが取得される ・max_id：指定したIDよりも古いツイートが取得される ・include_entities：entitiesの有無 以下が例となります。 tweet _mode = 'extended'とありますが、これを指定することで140字を超えた場合でもツイートの本文全て取得できます。 tweets = api.search(q = "Twitter API", include_entities = True, tweet_mode = 'extended', lang = 'ja', count = 1) for tweet in tweets: print('='*80) print('ツイートID : ', tweet.id) print('ユーザ名 : ', tweet.user.screen_name) print('日時 : ', tweet.created_at) print(tweet.full_text) print('いいね数 : ', tweet.favorite_count) print('リツイート数 : ', tweet.retweet_count) print('='*80) 地域のトレンド取得 地域のトレンドを取得するには、 API .trends_placeメソッドを使用します。引数としてはwoeidと呼ばれるidを指定します。 これはYahooから提供されているIDを指します。 以下が例となっています。検索結果を少なくするためにwoeidを日本だけにしています。 woeid = { "日本": 23424856 } for area, wid in woeid.items(): print("--" + area + "--") trends = api.trends_place(wid)[0] for i, content in enumerate(trends["trends"]): print(i+1, content['name']) 出力結果は以下になります。 --日本-- 1 #佐久間宣行ANN0 2 #乃木坂46ANN 3 #CRWIN 4 #寝ローンズ 5 打順と守備位置 6 #SMAP30YEARS 7 香山リカ 8 津田大介 9 署名運動 10 愛知県知事 11 PS5pro 12 えむちゃん 13 中京テレビＮＥＷＳ 14 記述削除 15 中京テレビNEWS 16 アナスタシア 17 膳場貴子アナ戦闘態勢 18 相田さん 19 レジライリリィ 20 インターバル 21 高市早苗氏笑顔 22 HO診断 23 痛烈質問 24 コルデー 25 他人のそら似 26 従軍慰安婦 27 テイルズ 28 まいちゅん 29 両刃の剣 30 閣議決定 31 沖田オルタ 32 中村悠一 33 アクシア 34 なぎこさん 35 オツカレサマデシタ 36 レザーくん 37 通信障害 38 ちゃん誕生日 39 まじんさん 40 万里くん 41 世界大会 42 書類送検 43 守護のため 44 教科書会社5社 45 久保ちゃん 46 最新研究 47 スペースおつこれ 48 カイニス 49 沖田さん 50 記述削除 まとめ いかがだったでしょうか。今回は Twitter API の利用申請からデータ取得までを紹介させていただきました。 Twitter API の利用申請は入力事項が多く苦労しましたが、以前は審査が厳しくもっと苦労することがあったみたいです。 Twitter API についてまだ簡単な部分しか触れられていないため、他の使い方も試していこうかと思います。 参考 Twitter APIで遊んでみた ~1. 各種キーの申請と取得~ | SIOS Tech. Lab APIリファレンス — tweepy 3.6.0 ドキュメント 2021年度版 Twitter API利用申請の例文からAPIキーの取得まで詳しく解説 | 新宿のホームページ制作会社 ITTI（イッティ） エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 目標 前提条件 雛形作成 APIモック作成 Vuex導入 コンポーネント作成 アイテム追加機能作成 おわりに はじめに こんにちは。新卒１年目のrksmskです。本記事はVue.jsを学び始めたばかりで実際に手を動かして簡単なアプリケーションを作成してみたい方のためのハンズオン チュートリアル となっております。 是非手を動かしながら本記事をお読みください。なお、本記事はVue3でコードを記述しています。Vue.jsはVue2とVue3で記述方法が大きく異なるため、ご留意ください。 目標 Vue.jsを使ってTodoListの表示と追加が出来る簡単なTodoListアプリケーションが作れるようになること。 前提条件 Node.jsがインストールされていること(Node.jsの説明やインストール方法については以下の記事に詳しく記載されています) 雛形作成 まず、Vueの環境を作成して雛形の画面を表示します。 TodoList作業用 ディレクト リを作成します。 ここからはターミナル上で作業を行います。TodoList作業用 ディレクト リ下でターミナルから npm install -g @vue/cli@next を実行し、Vueをインストールします(インストールが上手くいかない場合にはNode.jsのバージョン等をご確認ください)。 vue create todo-list を実行し、Vueの環境を作成します。その際にVueのバージョンを確認されるので、Vue3を選択します。パッケージマネージャはnpmを選択します。 環境作成が完了しましたら、 cd todo-list を実行してVueの環境に移った後、 npm run serve を実行してローカルのテストサーバを起動します。 立ち上がったサーバにブラウザからアクセスします。基本的には http://localhost:8080/ にサーバが立ち上がります。 下記のような雛形の画面が表示されることを確認します。 雛形画面 これで雛形画面の作成が完了しました。 API モック作成 続いて、TodoListのアイテムを作成します。今回は JSON Serverを使用して API モックを作成し、作成した API モックを通じてアイテムの CRUD (Create、Read、Update、Delete)操作を行います。 ここからはターミナル上で作業を行います。 npm i json-server を実行し、 json -serverをインストールします。 mkdir webapi を実行し *1 、webapi ディレクト リを作成します。 cd ./webapi を実行した後、 touch db.json を実行し *2 、db. json ファイルを作成します。 db. json ファイルに以下を記入します。 { " todos ": [ { " id ": 1 , " text ": " 働く ", " categoryId ": 1 } , { " id ": 2 , " text ": " 寝る ", " categoryId ": 1 } , { " id ": 3 , " text ": " 起きる ", " categoryId ": 2 } ] , " categories ": [ { " id ": 1 , " title ": " やること " } , { " id ": 2 , " title ": " やったこと " } ] } webapi下で npx json-server --watch db.json を実行し、 API モックサーバーを起動します。 立ち上がったサーバにアクセスします。基本的には http://localhost:3000/ にサーバが立ち上がります。 下記のような JSON Serverの起動画面が表示されることを確認します。 JSON Server起動画面 これで API モックの起動が完了しました。 Vuex導入 ここまでで、雛形画面の作成と API モックの起動が完了しました。ですので、ここからは API モックを通じてTodoListを取得し、雛形画面に表示することを行います。その際に、後々状態管理を行う上で便利になるため、Vuexを導入したいと思います。Vuexは共有状態の管理を行うライブラリで、異なる コンポーネント 間で同一のデータを共有する際に重宝します。 ここからはターミナル上で作業を行います。現在の ディレクト リをtodo-listに変更した後、 npm install vuex@next --save を実行し、Vuexライブラリをインストールします。 cd ./src を実行した後、 mkdir store を実行し、todo-list/src ディレクト リ下にstore ディレクト リを作成します。 touch store.js を実行し、store.jsファイルを作成します。本ファイルがVuexで共有状態を管理するコードを記述するファイルとなります。 store.jsを以下のように書き換えます。 import { createStore } from "vuex" ; export default createStore( { state() { return { categoryList: [] , cardList: [] } } , mutations: { setCategoryList(state, categoryList) { state.categoryList = categoryList; } , setCardList(state, cardList) { state.cardList = cardList; } } , actions: { async fetchCategoryList(context) { const categoryList = await fetchItems( "http://localhost:3000/categories" ); context.commit( "setCategoryList" , categoryList); } , async fetchCardList(context) { const cardList = await fetchItems( "http://localhost:3000/todos" ); context.commit( "setCardList" , cardList); } , } } ); actionsに記載されているfetchXXXメソッドでは API から情報を取得し、取得した情報を引数にmutationsのメソッドを呼び出しています。mutationsではstateの変更を行っています。 ここで注意したいこととして、mutationsでは非同期処理を行わないこと、actionsではstateの更新を直接行わないことです。これらの注意点の詳しい説明は以下の記事に詳しく記載されているため、そちらも併せてご覧ください。 Vuexの設定をアプリケーションに反映させるため、main.jsファイルを以下のように書き換えます。 import { createApp } from 'vue' import Store from './store/store.js' ; import App from './App.vue' createApp(App).use(Store).mount( '#app' ) これでVuexでTodoListの状態管理をする仕組みが出来たため、後は API からデータを取得するfetchXXXメソッドを作成し、雛形画面に表示させます。 現在の ディレクト リをtodo-listに変更した後、 mkdir utils を実行し、todo-list下にutils ディレクト リを作成します。 *3 cd ./utils を実行した後、 touch http.js を実行し、todo-list/utils ディレクト リ下にhttp.jsファイルを作成します。 http.jsを以下のように書き換えます。 export const fetchItems = async (url) => { try { // API通信でデータを取得する const response = await fetch(url); // 取得したデータをjson形式で返す return await response.json(); } catch (error) { // API通信でデータを上手く取得できなかった場合、コンソールにエラーを表示 console.error( "データを取得出来ませんでした" ); console.error(error); } } ; store.jsにhttp.jsをインポートするため、store.jsの二行目に以下を追加します。 import { fetchItems } from "../../utils/http" ; App.vueを以下のように書き換えます。 <template> <div> カード一覧： {{ cardList }} <br /> カテゴリ一覧： {{ categoryList }} </div> </template> <script> import { computed, onMounted } from "vue" ; import { useStore } from "vuex" ; export default { name: "App" , components: {} , setup() { // Vuexを使う設定 const store = useStore(); // コンポーネントがマウントされた時にcategoryListとcardListをAPIから取得 onMounted(store.dispatch( "fetchCategoryList" )); onMounted(store.dispatch( "fetchCardList" )); return { cardList: computed(() => store.state.cardList), categoryList: computed(() => store.state.categoryList) } ; } } ; </script> <style></style> 上記の記法は単一ファイル コンポーネント と呼ばれる記述方法で、 templateタグ内に画面に表示するHTMLを記述する。 scriptタグ内にデータの定義や処理を記述する。 styleタグ内に css でスタイルを記述する。 といったようにHTML、 JavaScript 、 CSS の処理をまとめて一つのファイルに記述することが出来ます。これにより、一つ一つの コンポーネント の保守がし易くなっています。 ローカルのテストサーバを再起動し、下記のようなデータが画面に表示されることを確認します。 カード一覧：[ { "id": 1, "text": "働く", "categoryId": 1 }, { "id": 2, "text": "寝る", "categoryId": 1 }, { "id": 3, "text": "起きる", "categoryId": 2 } ] カテゴリ一覧：[ { "id": 1, "title": "やること" }, { "id": 2, "title": "やったこと" } ] これでTodoListの表示が完了しました。 コンポーネント 作成 ここまででTodoListの表示は出来ましたが、現状はデータがそのまま表示されているだけで、非常に見づらいです。 ですので、ここからはTodoListをカード形式で表示するように変更していきたいと思います。その際に、Vueに備わっている一つ一つの部品を コンポーネント として切り出すことで管理し易くする機能を利用します。 今回の コンポーネント は以下のようにボード、リスト、カードで分割を行います。 コンポーネント 分割例 components下のHelloWorld.vueを削除します。 components下にBoard.vue、List.vue、Card.vueを作成します。 App.vueを以下のように書き換えます。 <template> <div> <board></board> </div> </template> <script> import Board from "./components/Board.vue" ; export default { name: "App" , components: { Board } } ; </script> <style></style> 少しだけVue2とVue3の違いを説明すると、Vue2では値はdataプロパティに、関数はmethodsにといったようにプロパティ毎に役割を分けていましたが、Vue3では新しく追加されたComposition API の機能によってsetup関数にこれらの処理をまとめて記述することが出来ます。 そのsetup関数内ではVuexで定義したactions内のメソッドをstore.dispatch("メソッド名")によって呼び出します。その結果、VuexのcardListとcategoryListの状態が変化するため、その状態変化をcomputed関数によって検知し、データの反映を行っています。 Board.vueを以下のように書き換えます。 <template> <div class = "board-style" > <list v- for = "category in categoryList" :key= "category.id" :category= "category" ></list> </div> </template> <script> import { computed, onMounted } from "vue" ; import { useStore } from "vuex" ; import List from "./List.vue" ; export default { components: { List } , setup() { const store = useStore(); onMounted(store.dispatch( "fetchCategoryList" )); return { categoryList: computed(() => store.state.categoryList) } ; } } ; </script> <style scoped> .board-style { display: flex; gap: 10px; } </style> Board.vueではv-forディレクティブによってカテゴリ毎にList コンポーネント を生成しています。その際にList コンポーネント にはカテゴリの情報を渡しています。 List.vueを以下のように書き換えます。 <template> <div class = "list-style" > {{ category.title }} <card v- for = "card in cardList" :key= "card.id" :card= "card" ></card> </div> </template> <script> import { computed, onMounted } from "vue" ; import { useStore } from "vuex" ; import Card from "./Card.vue" ; export default { components: { Card } , props: { category: Object } , setup(props) { const store = useStore(); onMounted(store.dispatch( "fetchCardList" )); const cardList = computed(() => store.state.cardList.filter(card => card.categoryId === props.category.id) ); return { cardList, } ; } } ; </script> <style scoped> .list-style { display: inline-flex; flex-direction: column; text-align: center; background-color: silver; min-width: 200px; min-height: 400px; } </style> List コンポーネント はBoard コンポーネント から渡ってきたカテゴリの情報をもとに、カテゴリIDと一致するカードをArrayオブジェクトの標準ライブラリであるfilterを用いて抽出し、v-forディレクティブによって抽出したカード毎にCard コンポーネント を生成しています。 Card.vueを以下のように書き換えます。 <template> <div class = "card-style" > {{ card.text }} </div> </template> <script> export default { props: { card: Object , } } ; </script> <style scoped> .card-style { display: flex; flex-direction: column; background-color: yellowgreen; margin: 10px; height: 10vh; align-items: center; justify-content: center; border-radius: 10px; } </style> Card コンポーネント はList コンポーネント から渡ってきたカードのテキストを表示しています。 ローカルのテストサーバを再起動し、下記のような完成画面が表示されることを確認します。 完成画面 これで、 コンポーネント 分割が完了し、TodoListが見やすくなりました。 アイテム追加機能作成 現状、アイテムの追加はwebapi下のdb. json をエディタ等で直接書き換えるか、POSTメソッドでHttpRequestを送る必要があり、少々手間がかかります。 そこで、空のカードを用意し、そのカードにテキストを入力して追加ボタンを押したら新しいカードが追加されるようにして利便性を上げたいと思います。 http.jsを以下のように書き換えます。 export const fetchItems = async (url) => { try { // API通信でデータを取得する const response = await fetch(url); // 取得したデータをjson形式で返す return await response.json(); } catch (error) { // API通信でデータを上手く取得できなかった場合、コンソールにエラーを表示 console.error("データを取得出来ませんでした"); console.error(error); } }; +export const insertItems = async (url, data) => { + const response = await fetch(url, { + // json形式でPOSTでデータを送る + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8' + }, + body: JSON.stringify(data) + }).catch(() => { + // 上手くいかなかった場合、コンソールにエラーを表示 + console.error(response.json()) + return; + }) +}; store.jsを以下のように書き換えます。 import { createStore } from "vuex"; -import { fetchItems } from "../../utils/http"; +import { fetchItems, insertItems } from "../../utils/http"; export default createStore({ state() { return { categoryList: [], cardList: [] } }, mutations: { setCategoryList(state, categoryList) { state.categoryList = categoryList; }, setCardList(state, cardList) { state.cardList = cardList; }, }, actions: { async fetchCategoryList(context) { const categoryList = await fetchItems("http://localhost:3000/categories"); context.commit("setCategoryList", categoryList); }, async fetchCardList(context) { const cardList = await fetchItems("http://localhost:3000/todos"); context.commit("setCardList", cardList); }, + async addCard(context, data) { + await insertItems("http://localhost:3000/todos", data); + } } }); List.vueを以下のように書き換えます。 <template> <div class="list-style"> {{ category.title }} - <card v-for="card in cardList" :key="card.id" :card="card"></card> + <card + v-for="card in cardList" + :key="card.id" + :card="card" + :isNew="false" + ></card> + <card :card="newCard" :isNew="true"></card> </div> </template> <script> import { computed, onMounted } from "vue"; import { useStore } from "vuex"; import Card from "./Card.vue"; export default { components: { Card }, props: { category: Object }, setup(props) { const store = useStore(); onMounted(store.dispatch("fetchCardList")); const cardList = computed(() => store.state.cardList.filter(card => card.categoryId === props.category.id) ); + const newCard = { + id: -1, + text: "", + categoryId: props.category.id + }; return { cardList, + newCard }; } }; </script> <style scoped> .list-style { display: inline-flex; flex-direction: column; text-align: center; background-color: silver; min-width: 200px; min-height: 400px; } </style> List コンポーネント では、新しく追加するカードの雛形オブジェクトであるnewCardを定義し、Card コンポーネント に渡しています。また、Card コンポーネント には対象のカードが新しく追加するカードなのか否かを識別できるようにboolean型の変数isNewも渡しています。 Card.vueを以下のように書き換えます。 <template> <div class="card-style"> + <input type="text" v-if="isNew" v-model="text" /> + <button @click="addCard" v-if="isNew">追加</button> + <span v-else> {{ card.text }} + </span> </div> </template> <script> +import { ref } from "@vue/reactivity"; +import { useStore } from "vuex"; export default { props: { card: Object, + isNew: Boolean + }, + setup(props) { + const store = useStore(); + let text = ref(""); + const addCard = async () => { + const data = { + text: text.value, + categoryId: props.card.categoryId + }; + await store.dispatch("addCard", data); + await store.dispatch("fetchCardList"); + text.value = ""; + }; + return { + text, + addCard + }; } }; </script> <style scoped> .card-style { display: flex; flex-direction: column; background-color: yellowgreen; margin: 10px; height: 10vh; align-items: center; justify-content: center; border-radius: 10px; } </style> Card コンポーネント のtemplateタグ内では、isNewがTrueの場合に【追加】ボタンが表示されるようにしています。 scriptタグ内では、【追加】ボタンが押された場合にaddCardメソッドを実行する処理を記述しています。addCardメソッドではカードの情報をdataオブジェクトに格納し、Vuexのactionsをdisptach関数によって呼び出しています。 なお、dataオブジェクトのidプロパティについては、 json -serverでは自動で割り振られるようになっているため追加していません。 ローカルのテストサーバを再起動し、下記のように新しいカードの追加が出来ることを確認します。 *4 カード追加前 カード追加後 これで、カードの追加機能が完成しました。 おわりに 今回はVue.jsを使ったTodoList チュートリアル を紹介しました。本記事ではTodoListの表示とアイテムの追加という基本機能だけでしたが、その他にも カードの更新、削除機能 カテゴリ追加機能 カードが API を通じて読み込まれるまでの間のロード画面 カード移動機能( ドラッグ&ドロップ 可能だとより良いと思います) タイトルの色変更機能 デザイン変更(Vuetify等の マテリアルデザイン フレームワーク を利用するだけでもリッチになります) 等々様々な拡張が可能だと思うので、是非拡張してみてください。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com *1 : ディレクト リが作成出来ればmkdirコマンドでなくても問題ありません。 *2 : ファイルが作成出来ればtouchコマンドでなくても問題ありません。 *3 : API 通信のような汎用的に使われるメソッドはutils ディレクト リ下に配置することが多いです。 *4 : Board.vueには変更はありません。

こんにちは、技術広報の yayawowo です。 皆様、お気に入りの技術書はありますか？ 今回は、弊社主催で開催している「おすすめの技術書LT会」にて、エンジニア/デザイナーの皆さんに紹介いただいた技術書を一挙公開します！ おすすめの技術書 LT会 - vol.1 おすすめの技術書 LT会 - vol.2 積読 が増える可能性がある、エンジニア/デザイナーが厳選した技術書が盛り沢山…お読みになる際は覚悟ください！ ラク ス開発メンバーが選んだ技術書は以下をご確認ください。 ・ 開発メンバーが選ぶ、おすすめの技術書【2020年度】 - RAKUS Developers Blog | ラクス エンジニアブログ 入門シリーズ 『C++プログラミング入門（湯田幸八）』 『ドメイン駆動設計入門』 『実践SQL教科書』 『ソフトウェアデザイン 2021年3月号』 『独習C 新版』 『PHPの絵本 第2版 Webアプリ作りが楽しくなる新しい9つの扉』 『コンピュータシステムの理論と実装』 『初めてのPHP』 『Vue.js3超入門』 『リファクタリング(第2版)』 『「実践ドメイン駆動設計」から学ぶDDDの実装入門』 『テスト駆動開発』 『ふつうのLinuxプログラミング 第2版』 『エキスパートPythonプログラミング 改訂3版』 『Go言語による並行処理』 『Linuxによる並行プログラミング入門』 『Goならわかるシステムプログラミング』 『Linuxシステムプログラミング』 『CPUの気持ちが知りたいですか？』 『n月刊ラムダノート Vol.3, No.1(2021)』 『Webを支える技術』 『フロントエンド開発入門: プロフェッショナルな開発ツールと設計・実装』 『プリンシプル オブ プログラミング』 『CSS設計完全ガイド』 応用シリーズ 『体系的に学ぶ安全なWebアプリケーションの作り方』 『デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ』 『インターフェースデザインの心理学』 『なぜ重大な問題を見逃すのか？間違いだらけの設計レビュー』 『OSS-DB Silver Ver.2.0対応』 『SQLアンチパターン』 『Joel on Software』 『文芸的プログラミング』 『機械学習を解釈する技術』 『プログラマの数学』 『GPT-3 完全初心者への徹底解説: 最強の文章生成AIの実像』 『進化的アーキテクチャ』 『計算できるもの、計算できないもの』 『エクストリームプログラミング』と『組織パターン』 『UNIX A History and a Memoir』 終わりに 入門シリーズ 『 C++ プログラミング入門（湯田幸八）』 図解や例題を多く取り入れ、入門者向けに分かりやすく解説している技術書です。 オブジェクト指向 を意識しない初歩的な解説から、 オブジェクト指向 の概念を導入した本格的なプログラミングを解説しています。 発表者からは、 発表者厳選ポイント！ ・VisualStudioの VC++ を使い、簡単に実行環境の構築ができる ・Cで構造プログラミング、 C++ で オブジェクト指向 プログラミング ・ステップアップしながら学習できる1冊 とのコメントをいただきました！ 『 ドメイン 駆動設計入門』 ドメイン 駆動設計をやさしく学べる入門書です。 まず、 こんな方におすすめ！ ・『エリック・ エヴァ ンスの ドメイン 駆動設計』や『実践 ドメイン 駆動設計』をこれから読もうとしている方 ・少しやさしい入門書を読みたいと感じている方 発表者厳選ポイント！ ・現場で働くエンジニアが理解しやすい ・実践的なDDD解説本 ・貴重な C# での解説本 Web版もあるとのことですので、まずは試し読み からし てみませんか？ 『実践 SQL 教科書』 データベース言語 SQL の基礎・歴史を解説している書籍。 また、 SQL に纏わる内容をわかりやすく解説しています。 発表者厳選ポイント！ ・古い本だが時代を超えた説得力がある本 ・ SQL の仕組みを丁寧に解説 と、発表者からおすすめポイントをいただきました！ 『ソフトウェアデザイン 2021年3月号』 Software Design (ソフトウェアデザイン) とは、ITエンジニアの スキルアップ 総合情報誌です。 その2021年3月号の特集ページ「 Java でもう一度学びなおす オブジェクト指向 プログラミング」を紹介いただきました。 コメントは以下の通り。 発表者厳選ポイント！ ・全 プログラマー は読むべき特集 ・使っている言語、関数型は関係なく、必読書レベルの内容がここに！ ・まずは雑誌を買って読んで！ と、熱いコメントをいただきました。 記載の通り、皆さんまずは雑誌を買ってみましょう！ ◆ 『 C++ プログラミング入門』・『 ドメイン 駆動設計入門』・『実践 SQL 教科書』・『ソフトウェアデザイン』 　の発表資料 speakerdeck.com 『独習C 新版』 独習Ｃの完全新作。 早速発表者からのコメントです。 こんな方におすすめ！ ・独学で C言語 について学びたい方 ・学生や社会人1年目の方 発表者厳選ポイント！ ・古くからある定番書籍 ・体系化された章立て ・「やりたいことを探せる」 ・ 言語の仕様が載っている ・ 手元に一冊あると安心感がある 『 PHP の絵本 第2版 Webアプリ作りが楽しくなる新しい9つの扉』 Web開発言語 PHP の解説書『 PHP の絵本』は、プログラム経験のない人でも勉強が始められるように考えられた、とてもやさしい入門書です。 こんな方におすすめ！ ・ PHP を学びたい方 ・Web開発を始めてみたい方 発表者厳選ポイント！ ・手順を追って言語の気を学べる ・基本的に「やさしい」本 ・XAMPPの説明がある 弊社イベントではお馴染の白柳さんおすすめの2冊です！ Youtube でほぼ毎日（平日のみ）世間のニュースを、エンジニアとしての経験・視点で解説しているそうなのでご興味ありましたら是非ご確認ください。 エンジニアカウンセラーが教える合わないカウンセリングを避けるコツ - YouTube ◆ 『独習C 新版』・『 PHP の絵本 第2版』の発表資料 speakerdeck.com 『コンピュータシステムの理論と実装』 次は、技術書でお馴染みO'REILLY社が出している書籍です。 本書では、コンピュータの構成要素であるハードウェア、ソフトウェア、 コンパイラ 、OSをひとつずつ組み立てることでコンピュータ アーキテクチャ の概要を理解できます。 早速、発表者からのコメントを見てましょう。 こんな方におすすめ！ ・初心者（駆け出し）から中級車にステップアップしたい方 ・これから コンピュータサイエンス を勉強したい方 ・優れた開発者になりたい方 発表者厳選ポイント！ ・コンピュータ アーキテクチャ の全体概要を理解できる ・各章に実装演習があるため、初心者でも脱落しにくい ・アプリケーション開発者がコンピュータ アーキテクチャ を学びやすい構成となっている 　① ボトムアップ と トップダウン を組み合わせた学び方ができる 　②ハードウェアは基礎からの ボトムアップ 、ソフトウェアは トップダウン で学習できる より詳細を知りたい方は、以下の発表資料をご確認ください。 ◆ 『コンピュータシステムの理論と実装』の発表資料 speakerdeck.com 『初めての PHP 』 動的なWebサイトを構築するための PHP プログラミングの基本を解説しています。 また、サンプルコードや演習問題もついているのが特徴です。 発表者からのコメントは以下の通り。 こんな方におすすめ！ ・実務が不安な新人エンジニア ・新人に何を教えれば良いか不安な教育担当社員 発表者厳選ポイント！ ・配列の解説が丁寧 ・ファイル処理を解説 ・クッキー、セッションの解説が充実 ◆ 『初めての PHP 』の発表資料 speakerdeck.com どんどんいきます。 『Vue.js3超入門』 フロントエンジニアにとってはお馴染のMVVMと呼ばれる設計パターンを採用している フレームワーク 、「Vue.js」について書かれています。 また本書を読むことで、簡単なWebアプリの開発ができるようになる優れた書籍です。 こんな方におすすめ！ ・初心者の方 ・既存の入門書に挫折した方 発表者厳選ポイント！ ・プロジェクト作成の段階から解説が丁寧 ・サンプルコードを都度、全行見せてくれる ・ コンポーネント 作成の従来式と新式(Composition API )について、どう付き合うべきか解説がある ・一緒に利用するライブラリ(Vue-Router、Vuex）の解説がある 発表を聞いていた方からも「コードを都度見せてくれるのは嬉しい！」や「過去にお世話になりました」とのコメントも飛び交いました。 ◆ 『Vue.js3超入門』の発表資料 speakerdeck.com 『 リファクタリング (第2版)』 ソフトウェア開発の名著、第2版となります。 約20年前のオリジナル原稿の構成は変わらないものの、現代的にアレンジされている書籍です。 こんな方におすすめ！ ・ リファクタリング の基礎を学びたい方 ・ リファクタリング を行っているエンジニア 発表者厳選ポイント！ ・関数 命名 のセオリーが学べる ・イマイチなコードに気づくための知識がつく ・良いコードを書くための知識がつく こちらは弊社エンジニア2名がおすすめしている書籍です。 リファクタリング に悩まれている方は、是非ご参考いただけますと幸いです。 ◆ 『 リファクタリング (第2版)』の発表資料 speakerdeck.com speakerdeck.com 『「実践 ドメイン 駆動設計」から学ぶDDDの実装入門』 普段の開発においてDDDで実装を始める方法を、分かりやすく解説している書籍。 電子書籍 とWeb版もあるとのことです。 こんな方におすすめ！ ・ ドメイン 駆動開発を学びたい方 ・輪読会を社内でされたい方 発表者厳選ポイント！ ・1章、10分～20分で一読できる ・1時間ほどで資料にまとめられる 発表者の方は本書を使い、輪読会を行ったところ ドメイン マスターの悩みが聞けて良い取り組みとなったそうです。 おすすめポイントにもあります通り、輪読会向けの書籍となりますので是非お試しください！ ※本発表の発表資料はありません。 『 テスト駆動開発 』 テスト駆動開発 (TDD)の実践方法を解説した書籍。 ユニットテスト と リファクタリング を何回も繰り返してプロダクトを成長させていく開発手法の1つである テスト駆動開発 の実例を通して、学ぶことができます。 発表者からのコメントは以下の通りです。 こんな方におすすめ！ ・ テスト駆動開発 未経験の人 ・ビギナーの開発エンジニア 発表者厳選ポイント！ ・テストコードを書くメリットが分かる ・ デザインパターン を学べる ・コツコツとコードを良くする過程を学べる ・汚いコードから洗練されたコードへ書き換えるノウハウがある ・章が短いため、少しずつ進めていける ・ ソースコード を少しずつ書いていくので間違いにくい ・優れたエンジニアの振る舞い、思考を学べる おすすめポイントが盛り沢山ですね。 発表者は、本書を読んだ後「テストコードがあると安心なんだ」と実感したそうです。 テスト駆動開発 に対する認識を変えてくれる良本、読みましょう！ ◆ 『 テスト駆動開発 』の発表資料 speakerdeck.com 『ふつうの Linux プログラミング 第2版』 Linux プログラミングの入門書。 本書は、「 Linux 世界が何によってできているのか」を教えることを目標にしているのこと。 おすすめポイントは以下の通りです。 こんな方におすすめ！ ・ Linux 触ったけどよくわからない人 ・現場で何となく Linux 触っている人 発表者厳選ポイント！ ・ Linux を構成する三大概念を学べる 　①プロセス 　② ファイルシステム 　③ストリーム ・コマンドを自作しながら概念の理解を深める ・学んだ内容と自身の経験が繋げやすくなる 　→三大概念とそれを裏付ける演習があり、丁寧な構造となっているため 発表内容からも伝わる熱いコメント…！ Linux を触っている方でピンっときた方は是非ご一読を！ ◆ 『ふつうの Linux プログラミング 第2版』の発表資料 speakerdeck.com 『エキスパート Python プログラミング 改訂3版』 ここからは、 いろんなレイヤーを学習ための書籍を7冊一気にご紹介します。 まずは、 Python プログラマ になるためには必読の書籍！ 最新の Python 環境に合わせて改訂され、更に読みやすくなりました。 発表者厳選ポイント！ ・15章と16章が並列/並行処理の内容 　- マルチプロセル/マルチスレッド 　- イベント駆動プログラミング ・実装例がバッチリ載っているので学習に最適 ・2021年7月に出版されたので情報鮮度が高い PDFが欲しい方は 達人出版会 にてご購入ください！ 『Go言語による並行処理』 昨今、サーバーサイドでのプログラミングやコンテナツールの実装言語など、多種多様な分野で活用されているGo言語。 発表者厳選ポイント！ ・GOの並行処理に対するアプローチがわかる ・並行処理のパターンもまとめられている ・第1章、第2章の理論も良い！ ・訳注が豊富 PDFや EPUB 版は、 O'REILLY でお得に買えるそうです！ 『 Linux による並行プログラミング入門』 続いておすすめするのが、『 Linux による並行プログラミング入門』です。 Linux をベースとしたOSの概念を解説し,演習によって並行プログラミングの感覚を体得することを目標しているとのこと。 発表者厳選ポイント！ ・章ごとのボリュームが小さいので進めやすい ・第1章から並行処理が体験できる 　- プロセスのfork システムコール ・ システムプロ グラミング的要素もある ・ C言語 のライブラリpthreadを利用した並行プログラミングを体験できる 悩むなら購入し、読みましょう！ 『Goならわかる システムプロ グラミング』 低レイヤであるOSの世界をGo言語を使って解説している書籍です。 様々なライブラリを利用しているコンピュータシステムの基本的概念や、アプリケーション開発者の視点で低レイヤの仕組み内容となっております！ 発表者厳選ポイント！ ・ システムプロ グラミングをGo視点で理解する ・ C言語 じゃなてもわかるが、 C言語 もやりたくなる ・プログラミングを支えるている下位のレイヤーを プログラマー 視点で学べる Lambda Note なら、紙本とPDFがセットでお得とのことです！ 『 Linux システムプロ グラミング』 本書は、 プログラマ の観点から実践的なトピック（Lnuxの概要、 カーネル 、Cライブラリ、ファイルI/Oなど）が多く含まれている1冊です。 発表者厳選ポイント！ ・サンプルコードは多くはない ・辞書的に持っておくと何かと便利！ ・ 英語版 は2nd Edtionがある 『CPUの気持ちが知りたいですか？』 タイトルがキャッチーでつい読みたくなる書籍です。 本書では、CPUの気持ちを知るために押さえておくべき技術を解説しています。 発表者厳選ポイント！ ・カジュアルな語り口でCPUの説明をしてくれる ・ アセンブリ の解説があるのも嬉しい ・背景や歴史的な話もあるのがGreat ・ページ量がコンパクトなのも魅力 「第3回 刺され！技術書アワード大賞」を受賞した書籍だそうです。 Amazon には売っていない商品となります。 ご購入は BOOTH からどうぞ！ 『n月刊ラムダノート Vol.3, No.1(2021)』 計算機好きのための技術解説情報誌が「n月刊ラムダノート」。 発表者が厳選したのは、Vol.3になります！ 発表者厳選ポイント！ ・3章がCPUの話 ・CPUの動作原理だけでなく、いかにして効率良くするかが丁寧に解説されている ・ システムプロ グラミングを学ぶ上でも有用 こちらも Amazon で購入できない商品となりますので、ご興味ある方は Lambda Note よりお願いいたします！ ◆ 『エキスパート Python プログラミング』・『Go言語による並行処理』 　・『 Linux による並行プログラミング入門』・『Goならわかる システムプロ グラミング』 　・『 Linux システムプロ グラミング』・『CPUの気持ちが知りたいですか？』 　・『n月刊ラムダノート Vol.3, No.1(2021)』の発表資料 docs.google.com 『Webを支える技術』 Webサービス の実践的な設計をテーマにした書籍です。 RESTとRESTfulの違いやWebAPI設計において重要なことなどを整理できる良本となっております！ こんな方におすすめ！ ・ Webサービス の開発に関わる方で、実業務に取り組んで数か月～1年など比較的経験の浅い方 ・新規 Webサービス の開発に携わる方 ・WebAPIを新規に作成する方 発表者厳選ポイント！ ・普遍的なWeb構造、設計思想（HTTP、 URI 、HTML、Restなど）が分かりやすい言葉で説明されている 　- 普段何となく使っているWebの言葉や知識の基礎を学べる 　- 技術者は日々新しいことを学ぶ必要があり、知識のアップデートも非常に多い、本書の知識は長持ちする ・ Webサービス 開発の設計に役立つ 　- 例） URI 名どうしよう？、WebAPIのWebらしい良い設計って？ Webサービス の開発に携わる方は、早めに読むことをおすすめします！ ◆ 『Webを支える技術』の発表資料 speakerdeck.com 『フロントエンド開発入門: プロフェッショナルな開発ツールと設計・実装』 Web開発で必須となるフロントエンド技術ですが、年々アップデートされていく新しい要素や属性などを拾い、自身の知識もアップデートする必要があります。 本書では、初心者向けにフロントエンド開発を行う上で便利なツールの選び方や、その使いこなし方を身に着けるノウハウを集約しております！ 発表者厳選ポイント！ ・ツールを紹介する時に必ず「そのツールが解決してくれること」のセクションが設けられている ・歴史、周辺環境、コミュニケーション、情報キャッチアップ、フロントエンドエンジニアとしての姿勢など、幅広く触れている ・「最近のフロントエンド開発はどんな感じですか？」という質問に、ツール技術に留まらず答えてくれる 支援ツールを有効的に使いこなし、効率的に実装するためにも本書は一度読むべきだと思いました！ ◆ 『フロントエンド開発入門: プロフェッショナルな開発ツールと設計・実装』の発表資料 speakerdeck.com 『プリンシプル オブ プログラミング』 日本語訳だと「プログラミングの原理」となる書籍。 よいコードを書く上で指針となる前提・原則・思想を解説しています。 こんな方におすすめ！ ・学習を始めたばかりの初心者の方 ・知識の再確認をされたい中堅以上の方 発表者厳選ポイント！ ・網羅性が高い！ 　- 一般的な原理・原則はほとんど網羅されている 　- 見出しが細かく、辞書的に使える ・書籍の紹介が豊富 　- セクションごとに最低2,3冊紹介されている 　- 例）エリック・ エヴァ ンスの ドメイン 駆動設計、達人 プログラマー など 注意点！ ・「この1冊あれば完璧！」とはならない 　- 網羅性が高い＝1つ1つは深堀りしていない 　- コード例が出ていない 厳選したポイントもあれば、注意点も紹介いただきました。 この点を踏まえ、購入するか否かをご検討いただけますと幸いです！ ◆ 『プリンシプル オブ プログラミング』の発表資料 speakerdeck.com 『 CSS 設計完全ガイド』 悩みが尽きないCCS設計を丁寧に解説している書籍です。 様々な設計手法や考え方、実践する上でのポイントだけでなく実践的なコードも紹介しています！ こんな方におすすめ！ ・ CSS 設計本で挫折した方 ・ CSS 初心者の方 ・コーダー教育する方 発表者厳選ポイント！ ・ CSS 設計について理解を深めることができる 　- OOCSS、SMACSS、BEM 　- モジュール（ボタン、ラベル、見出しなど） 　- レイアウト（ヘッダー、フッターなど） ・社内の輪読会に適している 　- 意見の共有を行うことで、より理解を深めることができる 　- 過去の課題を参考に具体的な解決方法を見つけることができる CSS 設計に悩まれるフロントエンドエンジニアや Webデザイナー は、是非ご一読ください！ ◆ 『 CSS 設計完全ガイド』の発表資料 speakerdeck.com 応用シリーズ 『体系的に学ぶ安全なWebアプリケーションの作り方』 Webアプリケーションを開発する上で必要なセキュリティに関する基礎知識や、代表的なセキュリティ対策の知識を学習できる書籍です！ こんな方におすすめ！ ・これからWebセキュリティを学ぼうと考えている方 ・Webアプリケーションの基礎的な開発技術を学びたい方 ・改めて 脆弱性 について復習したいと考えている方 発表者厳選ポイント！ ・具体的な 脆弱性 への攻撃の例と対策があるため、理解しやすい！ ・約650Pと量が多いですが、基本的なWebアプリケーション開発の実務に必要なセキュリティ知識が学習できる！ これからWebアプリケーション開発の実務に携われる方、セキュリティ意識を高めたい方は是非！ ◆ 『体系的に学ぶ安全なWebアプリケーションの作り方』の発表資料 speakerdeck.com 『デザイニング Webアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ』 Webコンテンツを作るうえで必要な アクセシビリティ について、要件定義～実装でつまづく疑問や解決手段を解説している書籍です。 発表者厳選ポイント！ ・ アクセシビリティ と ユーザビリティ の違いが分かる ・ Webアクセシビリティ の今を海外と日本を比べて説明している ・ Webアクセシビリティ を取り組む前の心構えが分かる ・意識を変える初めの一歩となる書籍！ 928ページとまぁまぁの量ではありますが、デザイナー以外にも読んでもらいたい、良本となっています！ ◆ 『デザイニング Webアクセシビリティ 』の発表資料 speakerdeck.com 『インターフェースデザインの心理学』 本書は、人間の思考や行動、遊び方にマッチした直感的で人を引き付けるプロダクトをデザインするための必読書です！ 発表者厳選ポイント！ ・人間の行動原理を100個にまとめたTips集 ・読んだ上で重要となるポイントは以下の通り 　① 人はどう考えるか 　② 間違えない人はいない 　③ 人はどう決断するのか 相手から無意識の反応を誘い出すための大事な要素であるデザインについて、再度学びなおしてみませんか？ ◆ 『インターフェースデザインの心理学』の発表資料 speakerdeck.com 『なぜ重大な問題を見逃すのか？間違いだらけの設計レビュー』 間違ったレビューをされていませんか？ 本書は、誰にでもできる効果的なレビューの手順や、成果が上がらないれby－の共通点を解説しています！ 発表者厳選ポイント！ ・陥りやすいミスが学べる ・ アンチパターン が学べる ・設計レビューの本質が学べる ・心構えが学べる ・設計レビューのノウハウが学べる 　1. 優先度をつける 　2. 1種類の検出に集中する 　3. 時間を決める 　4. 幻のレビューアー 　5. 「あえての見逃し」をしない 　6. 段取りと仕切りを大切に 　7. テクニカルレビューとウォークスルー 発表者から最後に、「良い設計レビューにするために協力が大事」というコメントがありました。 昨日より今日、今日より明日のレビューをより良いものにするために、本書の購読をおすすめします！ ◆ 『なぜ重大な問題を見逃すのか？間違いだらけの設計レビュー』の発表資料 speakerdeck.com 『 OSS -DB Silver Ver.2.0対応』 OSS -DB Silverは、LPI-Japanが主催するデータベース資格の1つです。 PostgreSQL の使い方に重きが置かれているので、実務にも直結する内容となっています！ こんな方におすすめ！ ・データベース（ SQL ）の基本を学べる ・資格を取りたい方 ・資格を取られない方も是非！ 発表者厳選ポイント！ ・ PostgreSQL の基本仕様が網羅されており、業務の流れを知ることができる ・重要な部分がまとまっているので、本書で大枠を知り、公式ドキュメントで詳細を学ぶという学習方法がおすすめ 資格勉強で培った知識を業務で活かせるのは、とても効率が良い勉強法だと思いました。 Silverに合格された方は、ワンランク上のGoldにもチャレンジされてみてはいかがでしょうか？ ◆ 『 OSS -DB Silver Ver.2.0対応』の発表資料 speakerdeck.com 『 SQL アンチパターン 』 本書は、DB設計や SQL 記述の避けるべき事柄を25個紹介している書籍です。 気になる章だけ読み返すのに便利な構成となっております！ こんな方におすすめ！ ・DBや SQL に関わる方 発表者厳選ポイント！ ・先人たちの失敗から学ぶことができる！ ・本の構成が分かりやすい 　- 以下のような構成で「 アンチパターン 」を紹介している 　　1.目的 　　2. アンチパターン 　　3. アンチパターン の見つけ方 　　4. アンチパターン を用いても良い例外 　　5.解決策 本書を読むことで、常に アンチパターン に陥っていないかを考えるこができ、より品質の良い SQL を実装することができるようになるとのことです。 是非ご参考ください！ ◆ 『 SQL アンチパターン 』の発表資料 SQLで陥りがちなアンチパターンを知ろう「SQLアンチパターン」 from Tomotaka Suzuki(御成門プログラマー) www.slideshare.net 『Joel on Software』 システム開発 にまつわるTipsが45個集約された書籍です。 元ネタは著者であるJoelさんのブログだとか。 発表者厳選ポイント！ ・1冊で45個ものTipsを学べる ・以下のような面白いTipsが盛り沢山！ 　① 射撃しつつ前進 　② ビックマック 対 裸のシェフ 　③ 下っ端でも何かを成し遂げる方法 　④ Microsoft はいかにして API 戦争に負けたのか　　などなど 上記のタイトルをみるだけでも面白そうなTipsが多いです。 1,000円ちょっとの書籍で45個のTipsが学べる…もう、買うしかないですね！ ◆ 『joel on software』の発表資料 speakerdeck.com 『文芸的プログラミング』 「プログラミングは、芸術であり、文学である」と言っている書籍。 今だからこそ読んで欲しいとっておきの1冊です！ 発表者厳選ポイント！ ・ドナルド・E. クヌース の論文集 ・誰にとっての「分かりやすさ」なのかを考えるきっかけとなる ・アートとサイエンスは一見相反するような立場に見えるが、コンピュータプログラミングにとって大切であることが分かる 本書は、とても深い内容となってますが、「分かりやすさ」を考える良いきっかけになると思います！ ◆ 『文芸的プログラミング』の発表資料 speakerdeck.com 『 機械学習 を解釈する技術』 予測精度は高いものの、モデルの解釈性が低いという欠点がある 機械学習 モデル。 どのような予測を行っているかを探ろうとしても、 ブラックボックス モデルとなっているため解読は困難です。 本書では、上記の予測精度と解釈性の トレードオフ を克服する手法を厳選し紹介しています！ 発表者厳選ポイント！ ・ 機械学習 モデルを説明できるようになる ・有用な解釈性が分かる ・ ブラックボックス モデルに解釈性を与える手法が紹介されている 注意点！ ・以下については本書に書かれていないので注意が必要 　- PFI 、PD、ICE、SHAP以外の機会学習の手法 　- 画像認識や 自然言語処理 　- 統計学 や 機械学習 の理論面 　- 予測精度を向上させるためのテクニック 　- 因果推論 個人的には予測精度を向上させるためのテクニックを知りたいと思いましたが、本書には書かれていないようです。 注意点を確認いただいた上で、購入を検討ください！ ◆ 『 機械学習 を解釈する技術』の発表資料 t.co 『 プログラマ の数学』 プログラミングをする上で必要となる「数学的な考え方」を身につけることができる1冊です。 こんな方におすすめ！ ・プログラミング初心者の方 ・数学が苦手な方 ・ 機械学習 を学び始めた方 発表者厳選ポイント！ ・数式はほとんど出てこないので、数学アレルギーの人でも読めるはず ・付録の「読書案内」がとても良い 数学が苦手な方でも読みやすいというのは、とても興味が湧きます。 機械学習 を学び始めたいけど、数学が苦手…という方は是非是非ご参考ください！ 『GPT-3 完全初心者への徹底解説: 最強の文章生成AIの実像』 GPT-3は、文章を自動生成できる 人工知能 のことを言います。 そのGPTについて解説しているのが本書です。 発表者厳選ポイント！ ・易しすぎず詳しすぎず、ちょうどよい温度感 ・今世間を賑わせているGPTという技術について一気にキャッチアップできる ・実例が載っているのも良い！ お恥ずかしながらGPTという言葉を初めて聞きましたが、そんな私でも読んでみたいと思える一冊でした。 丁度良い温度感、惹かれます！ 『進化的 アーキテクチャ 』 本書は、 アーキテクチャ を「進化的 アーキテクチャ 」と名付け、その構築に必要な考え方や技術、実践方法などについて解説しています。 発表者厳選ポイント！ ・構築したシステムをどうやって「成長」させていくかが学べる ・「継続的」ではなく「進化的」 アーキテクチャ が学べる ・サービス運用をしているエンジニアは必読かも？ ・ アンチパターン が掲載されているも良い 是非サービス運用をされているエンジニアの皆様、ご参考ください！ 『計算できるもの、計算できないもの』 本書では、 アラン・チューリング とリチャード・ カープ の論文を基に計算理論を学べます。 こんな方におすすめ！ ・ コンピュータサイエンス を学びたいエンジニアの方 発表者厳選ポイント！ ・既存のシステム、ツールなどで計算理論は広く使われていることが分かる ・ コンピュータサイエンス 、計算理論の知識が学べる 昨今、 コンピュータサイエンス を学ばれている方は多いのではないのでしょうか？ 少しでも興味持たれましたら、是非ご一読ください！ ◆ 『 プログラマ の数学』・『GPT-3 完全初心者への徹底解説: 最強の文章生成AIの実像』・ 　『進化的 アーキテクチャ 』・『計算できるもの、計算できないもの』の発表資料 t.co 『 エクストリームプログラミング 』と『組織パターン』 本を読むことで仕事に活かしていますか？ と、始まった発表。 今回は、「ケント ベック」と 「ジム・コピリエン」が執筆した書籍を読み比べながら、ソフトウェア開発の論点を探っていきます。 　 発表者厳選ポイント！ ・書籍を読み比べるのにおすすめ ・現代のソフトウェア開発の重要な開拓者である2人の考えが強く異なっていることが分かる 　①コードの所有権 　　ケント ベック　　：あらゆる部分をいつでも改善できる 　　ジム・コピリエン ：修正するのはその所有者だけにする 　②テスト 　　ケント ベック　　：プログラムを変更するたび 　　ジム・コピリエン ： ユースケース が変わった部分だけ ◆ 『 エクストリームプログラミング 』・『組織パターン』の発表資料 speakerdeck.com 『 UNIX A History and a Memoir』 Kindle Unlimitedで無料で読める書籍です。 英語の書籍となりますので、英語学習とともにいかがでしょうか？ 発表者厳選ポイント！ ・ Unix の歴史が書かれている ・ ブライアン・カー ニハンや ベル研究所 の雰囲気がつかめる ・The Soul of a New Machineもおすすめ ※本発表の発表資料はありません。 終わりに エンジニアとデザイナーが厳選した技術書はいかがでしたでしょうか？ 今回、40冊もの技術書を紹介させていただきましたが、技術書の相性や好みはその方によって異なります。 40冊の内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

はじめに こんにちは！楽楽精算開発チームのnkumaです。 今回は 「初心者」におすすめのカンファレンスの聴講の仕方 をご紹介いたします。 はじめに 初心者なりのマインド カンファレンスへのハードル 「分からないことを恥じない」 初心者なりの方法 知らない単語を回収する ■メリット①：昨今の流れが分かる ■メリット②：知識が蓄えられる ■メリット③：知らない分野でもとっつきやすい 注意点 単語をメモするときの工夫 1. 自分のPCにマークを「単語の追加」する。 2.カンファレンスに参加し、マークをつけつつ分からない単語をメモする 3.聴講終了後、ctrl + fでマークを検索して単語を振り返りつつ、調べる。 まとめ 初心者なりのマインド カンファレンスへのハードル カンファレンスに参加しようとする初心者の不安あるあるとして、 「何を言っているかさっぱり」 初心者がカンファレンスについていくのは多くの場合困難です。 それ故、尻込みしてしまいます。 しかし、ついていけないなりの聴講の仕方があります。 ついていけないから参加してはいけないということはありません！ その方法については、下記にてご紹介いたします。 「分からないなら時間の無駄ではないのか」 参加しても分からないなら、その時間で勉強した方がよいのでは？という意見は大いにあります。 しかし、自分一人だと見えない分野があります。 知見を広げるためにはカンファレンスが有用です。 下記の方法なら、前提知識がなくとも知見を広げることができます。 「何のために参加するのか？」 個々人で様々な理由がありますが、初心者にとっては２つの大きな理由が考えられます。 初心者でも、初心者だからこそ参加した方が良いといえます。 モチベーション 自分以上に頑張っているひとがいることを知り、また、その世界の深さを垣間見ることで、モチベーションが上がります。 知見を広げる 一人で学習しているだけでは見えない分野を知ることができます。 「分からないことを恥じない」 初心者がカンファレンスに参加しない根底には「理解できないだろう」という考えがあると予想できます。 しかし、私は 理解できなければそれでいいじゃないか 、と思います。 「最初は分からない」というのは誰しもあることで自明の理です。 分からないことは当たり前と考えましょう。 分からないなりに参加するというのが大事です。 分からないから参加しない、は勿体ない！まずは参加してみましょう！ 初心者なりの方法 しかし、せっかく参加するなら少しでも多く成長したいと思うものです。 では何をすればいいのでしょうか？ 知らない単語を回収する これに尽きます。 知らない単語を聞いたら確実にメモをして、後で調べましょう。 スライドにある単語だけではなく、話者の話す言葉にも注意しましょう！ むしろ、初心者にとっては書くまでもない当たり前の単語こそ知りたいことだったりします。 当然のことかもしれませんが、意識しなければ内容理解に重きを置いて、おろそかにしがちなところです。 もちろん初めて聞く単語だけという縛りはないです。 １度聞いただけで定着することは中々ありません。 「分からないことを恥じず」に、同じ言葉だとしてもピンと来なければ、繰り返しメモしていきましょう。 以下は「知らない単語を回収する」ことのメリットと注意点です。 ■メリット①：昨今の流れが分かる キーワードを回収するだけでも今のトレンドは分かるものです。 「この単語はよく聞くから覚えたよ」というのがあるかもしれません。 そうしたら、それが現在のトレンドです。 知らない単語を回収することを意識してIT業界の流れを掴みましょう！ ■メリット②：知識が蓄えられる IT業界では一見、想像もつかないような専門用語が数多くあります。 単語が分からなければ、内容を推測しても前提が違うかもしれません。 1つ知らない単語を知れば、以前よりも少しだけ話を理解することができ、分からないことがまた増えます。 それを繰り返すことで知識が蓄えられていくことでしょう。 ■メリット③：知らない分野でもとっつきやすい 知らない分野の話を初っ端から理解するというのは苦戦するものです。 心が折れる かもしれません。 特にIT業界に慣れていない初心者なら尚更です。 いっそのこと話を理解することを放棄しましょう！ 単語だけに注目して、分からない単語を確実にメモします。 知らない単語を回収するだけなら知らない分野でもとっつきやすいでしょう。 注意点 正直なことを言うと、上記の方法では 表面的な理解しかできません。 しかしながら、何事も表面から少しずつ知ることで、気づいたら深く理解していたということは皆さんも経験があると思います。 最初の一歩として「単語を回収する」ということを意識してみてください。 単語をメモするときの工夫 分からない単語をメモする際に、私がしている工夫を紹介いたします。 これまた当たり前のことかもしれませんが、「あとで振り返りやすいようにマークをつける」ことです。 検索しやすいよう普段使わないようなマークにしましょう。（例：🏁[ハタ]） しかし、メモする際に毎回「はた」と打って変換していたら、面倒ですし、次の単語聞き逃すかもしれないし、マークを変換ミスして後で検索できないかもしれません。 また、初心者ならあとでマークを検索する方法も分からないかもしれません。 そのための工夫があります！ 具体的な手順としては以下の通りです。 自分のPCにマークを「単語の追加」する。 カンファレンスに参加し、マークをつけつつ分からない単語をメモする 聴講終了後、 ctrl + f でマークを検索して単語を振り返りつつ、調べる。 1. 自分のPCにマークを「単語の追加」する。 1-1.タスクバーの IME で右クリック（画面右下に常にある「A」または「あ」と表示されている箇所） 1-2.メニューから「単語の追加」を選択 1-3.以下の該当箇所を記入し、登録をクリック ・単語：使いたいマークを記入（例：🚩） ・よみ：変換元の文字を記入（例：ｔ） ・※ユーザーコメント：変換の一覧に補足説明として見えるもの（分からない単語のマークとしてもいいかも） ・品詞：短縮よみを選択 以上のようにすれば、どこでもマークのショートカットができるようになっています！ *1 (上記の例では、ｔで変換するとすぐに🚩となる) 2.カンファレンスに参加し、マークをつけつつ分からない単語をメモする エディタは何を使ってもＯＫです。 とにかくカンファレンスに参加して、分からない単語にマークをつけながらメモしましょう。 文中の単語でも、単語単体でも関係なくマークをつけてください。 単語だけでなく文章でも、あとで調べたいことにはマークをするのが良いです。 3.聴講終了後、 ctrl + f でマークを検索して単語を振り返りつつ、調べる。 メモしたエディタで、マークを検索して振り返りましょう！ メモしたことに満足して、放置しないよう注意です！ エディタを開き、文章にカーソルしてから ctrl + f を押すと検索することができます。 これでマークを検索して効率よく振り返ることができます。 まとめ 前述の内容を意識し、繰り返し参加することによって段々とカンファレンスについていけるようになります。 私は学生時代から「単語を回収すること」を意識して参加していますが、少しずつ分かるようなっていることを実感しています。（それでもまだまだで、精進の日々ですが…） 初心者なりのマインド「分からないことを恥じない」と方法「単語を回収する」ことでカンファレンスに参加しましょう！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com *1 : 他の使い方も可能です。「大事なところには★をつける」など、自分なりの工夫を考えてみてください！

技術広報の yayawowo です。 エンジニアの皆さん、プログラミングの勉強は捗っていますか？ 効率的な学習ができていますか？ 本記事では、昨今盛り上がり続けている YouTube 市場で、 プログラミング学習をメインで配信している国内・国外のチャンネルをご紹介します。 動画を見ながらコーディング学習もできるので、一石二鳥？いや、三鳥なレベルで効率的な学習ができますよ。 また、 YouTube の高度な検索方法にも触れていますので是非最後までお読みいただけますと幸いです！ では、スタート！ 国内チャンネル プログラミング全般を学習するなら？ たにぐち まことのともすたチャンネル フロントエンドを学習するなら？ しまぶーのIT大学 【とらゼミ】トラハックのエンジニア学習講座 バックエンドを学習するなら？ キノコード / プログラミング学習チャンネル プログラミングアカデミー 渋谷で働くエンジニア福の「実践で学ぶプログラミング入門」 コンピュータサイエンスの基礎を学習するなら？ 早稲田大学 早水桃子研究室 海外チャンネル 英語が苦手な方へ freeCodeCamp.org CS Dojo Derek Banas 当社ラクスのチャンネル YouTubeの高度な検索方法 検索演算子を使う方法 OR検索 除外検索 タイトル検索 ハッシュタグ検索 まとめ 国内チャンネル 国内外問わず YouTube 上には、数多くあるプログラミング学習を配信しているチャンネルがあります。 まずは、国内の YouTube チャンネルを厳選しました！ ・キノコード / プログラミング学習チャンネル ・ しまぶー のIT大学 ・たにぐち まことのともすたチャンネル ・ 早稲田大学 早水桃子研究室 ・プログラミングアカデミー ・【とらゼミ】トラハックのエンジニア学習講座 ・渋谷で働くエンジニア福の「実践で学ぶプログラミング入門」 上記は、2021/9/3時点でのチャンネル登録が多い順で並べております。 ではチャンネルの詳細を見ていきましょう。 プログラミング全般を学習するなら？ まずは、エンジニアや プログラマー になるために見ておくと良い おすすめのチャンネル をご紹介！ たにぐち まことのともすたチャンネル youtu.be まずおすすめしたいのが、チャンネル登録者数3.98万の 『たにぐち まことのともすたチャンネル』 です。 ※チャンネル登録者数は、2021/9/3時点の情報です。 おすすめポイントは以下の通り。 ◆本チャンネルのおすすめポイント ・プログラミングの基礎/入門を学べる ・コーディングしながら学べる ・開発環境の設定方法も学べる 以下の動画視聴数ランキングを見てわかる通り、 Visual Studio Code やBootstrap、 WordPress など様々な分野を学べることが分かります。 順位 タイトル 視聴数 1 Visual Studio Code入門 #01：環境設定と、VSCodeの起動方法いろいろ - YouTube 25万回 2 Bootstrap 4入門 #01：コンテナとスペーシング - YouTube 10万回 3 WordPress開発講座 #01：WordPressの開発環境と最小テーマをつくろう - YouTube 7.6万回 4 Vue.js入門 #01： 一番最初のプログラム - YouTube 7万回 5 AWS EC2入門 #01： AWSを始めよう - YouTube 5.9万回 ※視聴数は、2021/9/3時点の情報です。 プログラミングを始めたばかりの方にとっては、とても参考になる動画だと思いました。 他にも、 オブジェクト指向 の簡単な解説やLaravel、Reactの内容もありましたので是非ご確認ください！ フロントエンドを学習するなら？ 続いて、フロントエンド技術を学習するのにあたり見ておきたい おすすめのチャンネル3選 をご紹介！ しまぶー のIT大学 youtu.be 現時点でのチャンネル登録者数は9.75万人ですが、年々人気を高めているのが『 しまぶー のIT大学 』です。 大手IT企業で プログラマー を経験後、起業。 自身の経験と知識をもとにIT関係の情報を発信しています。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・HTML、 CSS 、 JavaScript 、Webデザインの基礎を学べる ・コーディングしながら学べる ・短い時間（10分～30分ほど）で要点がまとめられている こちらのチャンネルも、人気の高い動画を以下にまとめました。 今回は、プログラミング学習に特化した動画のTOP5です！ 順位 タイトル 視聴数 1 【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 - YouTube 30万回 2 【HTML #1】基礎からちゃんと学ぶ HTML 入門！タグの要素を理解してコーディングしよう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 - YouTube 21万回 3 【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 - YouTube 11万回 4 【基礎から学ぶ JavaScript 入門 #2】Twitterを例にJavaScriptがどんな働きをするのか理解しよう【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 - YouTube 11万回 5 【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解説【ヤフー出身エンジニアの初心者向けプログラミング講座】 - YouTube 11万回 ※視聴数は、2021/9/3時点の情報です。 独学でフロントエンド領域を学ばれる方は、書籍を読みながらコーディングされる方が多いのではないでしょうか？ 本チャネルの動画では、実際にコーディングをしている様子を見つつ学習することができますので学習意欲がとても高まります。 また、各動画コンテンツの時間が短いのにも関わらず、ポイントを押さえた解説をしているのもおすすめできる点だと思いました！ 【とらゼミ】トラハックのエンジニア学習講座 youtu.be フロントエンド技術の学習コンテンツを中心に配信しているのが、『 【とらゼミ】トラハックのエンジニア学習講座 』です。 配信者であるトラハックさんは、 ベンチャー企業 に勤めている現役フロントエンドエンジニア。 TypeScript, React, Next.js, Firebaseでの開発がメインとのことです。 配信を開始したのは2019年からで、チャンネル登録者数は1.23万人とこちらも年々数を増やしてきているチャンネルになります！ ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・フロントエンド開発の技術を学べる ・TypeScript、React、Next.js、Firebaseの基礎を学べる ・コーディングしながら学べる 視聴数が多い人気の動画を以下の通り並べてみましたが、React入門がほぼ占めていますね。 順位 タイトル 視聴数 1 日本一わかりやすいReact入門#1...Reactの基礎知識 - YouTube 4.3万回 2 日本一わかりやすいReact入門#4...コンポーネント間でデータの受け渡しと再利用をしよう - YouTube 2.4万回 3 日本一わかりやすいReact入門#3...create-react-appで環境構築しよう - YouTube 2.3万回 4 【ガジェット好き集合】現役エンジニアのデスク周り紹介 - YouTube 2.1万回 5 日本一わかりやすいReact入門#2...Reactに欠かせないJSXの解説 - YouTube 2万回 ※視聴数は、2021/9/3時点の情報です。 フロントエンドの3大 フレームワーク であるAngular、React、Vueの中でも、採用ニーズの高いのがReactと言われています。 駆け出しのフロントエンドエンジニアにとっては、とても有難いコンテンツ内容ではないのでしょうか。 私も時間を作って視聴してみようと思いました！ バックエンドを学習するなら？ どんどんいきます！ 次は、バックエンド技術を学習するのにあたり見ておきたい おすすめのチャンネル3選 です！ キノコード / プログラミング学習チャンネル youtu.be 「 YouTube プログラミング」 ググる と上位にもでてくるのが、『 キノコード / プログラミング学習チャンネル 』。 チャンネル登録者数は、今回ご紹介するチャンネルの中で一番多い12.5万人。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・ Python 、 Ruby 、 PHP 、 Java などの基礎を学べる ・特に Python を学びたい方におすすめ ・IT用語を学べる ・コーディングしながら学べる おすすめポイントにも記載しましたが、 Python を学びたい方にとっては嬉しい学習コンテンツが盛り沢山です。 視聴数TOP5を一通り見るだけでも Python の知識がつきそうです。 順位 タイトル 視聴数 1 Python超入門コース 合併版｜Pythonの超基本的な部分をたった1時間で学べます【プログラミング初心者向け入門講座】 - YouTube 101万回 2 Pythonで面倒なExcelの仕事を自動化しよう( 第一弾 )｜一瞬で仕事がおわるプログラミング活用術 - YouTube 56万回 3 Pythonで面倒な「ブラウザ操作」や「データ収集」の作業を自動化しよう｜Webスクレイピングの基本的な内容をわかりやすく解説｜PythonでWebスクレイピング第01回 - YouTube 27万回 4 Pythonの便利ライブラリ「Pandas入門講座」合併版｜Pandasの基本的なこと3時間で学べます【Python超入門コースの次におすすめの入門講座】 - YouTube 20万回 5 【Python超入門コース】03.環境構築 for Windows｜プログラミングをする準備をしよう！【プログラミング初心者向け入門講座】 - YouTube 13万回 ※視聴数は、2021/9/3時点の情報です。 Python は プログラミング言語 の中でも学びやすい言語の1つとされており、学生の方が多く学習されている印象が強いです。 また、昨今近年注目を集めている「Infrastructure as Code」という考え方でもインフラエンジニアが業務効率化という観点で物事をプログラム化（ツール化）する際に利用しています。 今後も、 Python の需要は高まり続けると思いますのでこの機会に本チャンネルで学習されてみてはいかがでしょうか。 プログラミングアカデミー youtu.be 次におすすめしたいのが、現役ITエンジニアが運営する 『プログラミングアカデミー』 。 チャンネル登録者数1.22万人で、こちらも今後期待のチャンネルです。 Webに関する様々なことを動画にして発信しています。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・Web アプリ開発 の入門を学べる ・ PHP 、 MySQL 、 JavaScript など基礎を学べる ・コーディングしながら学べる 視聴率が上位の動画は、2時間～4時間と超大作となるコンテンツではありますがとても分かりやすい内容となっています！ 特に配信者である、おさないさんがあげてくれる"例え"が分かりやすいです。 順位 タイトル 視聴数 1 【PHP入門決定版】4時間で学ぶ初心者向けPHPプログラミングチュートリアル【PHPの基礎を徹底的にマスター】 - YouTube 9.1万回 2 【MySQL入門決定版】2時間半で学ぶ初心者向けMySQLデータベースチュートリアル【MySQLの基本とSQLの基礎文法の徹底的にマスター】 - YouTube 2.9万回 3 PHPってそもそも何が出来るの？PHPとは？【PHPによるWebアプリケーション開発講座#1】 - YouTube 1.8万回 4 JSONについてわかりやすく説明します - YouTube 1.4万回 5 初心者こそ競技プログラミングで勉強することをオススメします【競プロ】 - YouTube 1.2万回 ※視聴数は、2021/9/3時点の情報です。 Webアプリを開発を勉強する際、結構詰まりがちな知識を本チャンネルの動画では丁寧に説明しております。 また、駆け出しエンジニアの方でWeb アプリ開発 をしてみたいという方は、是非視聴数1位、2位の動画を見て学ばれてはいかがでしょうか。 Web アプリ開発 の基本のきが、6時間半で学べる良いコンテンツだと思いますよ！ 渋谷で働くエンジニア福の「実践で学ぶプログラミング入門」 youtu.be バックエンドを学習するにあたり、最後におすすめしたいのが『 渋谷で働くエンジニア福の「実践で学ぶプログラミング入門」 』チャンネルです。 チャンネル登録者数は5270人と少なく感じられると思いますが、駆け出しエンジニアの中では話題のチャンネルとなっています。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・ PHP 、 MySQL 、Laravelの基礎を学べる ・特に、 PHP 初心者の方におすすめ ・短時間で学べる ・コーディングしながら実践的に学べる 本チャンネルは2020年から配信を開始し、多くても週1ペースで更新されています。 その中でも人気の動画が以下の通り。 順位 タイトル 視聴数 1 【Laravel入門・準備編】LaravelインストールとComposer #01 - YouTube 2.1万回 2 【PHP初級】ログイン機能作成手順とユーザテーブル作成 ~ログイン機能をつくろう！~ #01 - YouTube 1.8万回 3 【Laravel入門・準備編】PHPフレームワークの種類と人気を紹介 #00 - YouTube 1.7万回 4 【PHP/MySQL入門】MAMPのphpMyAdminでデータベースを使う準備 ~ブログアプリ作成~ #01 - YouTube 1.7万回 5 【PHP/MySQL入門】PDOを使ってMySQLデータベースに接続しよう！ ~ブログアプリ作成~ #03 - YouTube 1.7万回 ※視聴数は、2021/9/3時点の情報です。 チャンネル名の通り、 PHP を 実践で学ぶ ことができる動画コンテンツが盛り沢山です。 また、質問があるときは動画のコメント欄に記載すると、配信者の福さんからご丁寧に返信が返ってくるようです。 1人だと挫けそうになるときがありますが、この仕組みでしたら学習意欲も上がりますね。 もし PHP を学習し始めたい方がいましたら、是非ご参考ください！ コンピュータサイエンス の基礎を学習するなら？ プログラミングを始めたら、理論や数学に興味が向く方も多いのではないでしょうか。 そんな方に おすすめのチャンネル をご紹介！ 早稲田大学 早水桃子研究室 youtu.be 早稲田大学 の専任講師が コンピュータサイエンス の注目トピックの一つ「 離散数学 」を中心に配信を行っているのが、 『 早稲田大学 早水桃子研究室』 です。 ここで扱われている数学はレコメンドエンジンやWebクローリングなど幅広く応用されています。 チャンネル登録者数は2.84万人ですが、これから伸びてきそうなチャンネルです！ ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・ 離散数学 の入門が学べる ・ グラフ理論 やグラフ アルゴリズム の初歩を学べる ・データサイエンス、データ分析、 機械学習 に必要な基礎知識が学べる ・ 早稲田大学 の授業が無料で受けられる 本チャンネルの視聴数TOP5は以下の通りです。 順位 タイトル 視聴数 1 Lecture 1: Combinatorial problems on trees inside phylogenetic networks - YouTube 31万回 2 離散数学入門#0: グラフ理論へのイントロダクション，授業ガイダンス・基本的な用語の準備 - YouTube 18万回 3 早稲田大学 生医＆建築(1) 数学B1(微分積分) 第1回・第2回 学習の道案内（担当教員：早水 桃子）【日本語字幕有り】 - YouTube 6.3万回 4 早稲田大学 生医＆建築(1) 数学B1(微分積分) 2020年度オンライン授業ガイダンス（担当教員：早水 桃子）【日本語字幕有り】 - YouTube 5.6万回 5 離散数学入門#1: グラフの基礎知識（前編），握手補題の証明と応用 - YouTube 5.5万回 ※視聴数は、2021/9/3時点の情報です。 エンジニア、 プログラマ の思考で重要となる 離散数学 を、無料且つ、学校や専門スクールに通わずに学べるのは驚きました。 しかも、各動画のコメントにもありますが、解説がとても分かりやすいです。 昨今、ビジネスシーンで重要となってきているデータ分析領域にも必要な知識となりますので、今後注目のチャンネルです！ 海外チャンネル 続きまして、海外のおすすめチャンネルをご紹介します！ ・freeCodeCamp.org ・CS Dojo ・CS Dojo 上記は、2021/9/3時点でのチャンネル登録が多い順で並べております。 早速、チャンネルの詳細を見ていきたいのですが海外のチャンネルだと英語が…と抵抗を持つ方も多いはず。 まずは、英語が苦手な方向けの対策をお伝えします！ 英語が苦手な方へ 海外のチャンネルを見たいけど英語が苦手… そんな方は、 YouTube の字幕機能を利用し、日本語で学習をしてみてはいかがでしょうか。 設定方法方は以下の通りです。 見たい動画をクリック 字幕をオン 設定→字幕をクリック 英語→日本語をクリック Learn Python - Full Course for Beginners [Tutorial]の字幕画像　出典： YouTube より引用 正確な翻訳とまではいきませんが、少しでも理解が進むと思います。 是非お試しください。 freeCodeCamp.org youtu.be 日本でいうProgate似たようなプログラミング学習サイト「 freeCodeCamp 」の講座を YouTube にて配信しているのが『 freeCodeCamp.org 』です。 チャンネル登録者数は、412万人と驚異の数字となっています。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・HTML、 CSS 、 JavaScript 、Node.js、 Python 、React、 PHP が学べる ・データサイエンス、大学レベルの 線形代数 なども学べる ・他チャンネルに比べて、圧倒的な量の動画コンテンツがある ・初心者～上級者までレベルが幅広い 本チャンネルは記載の通り、超大型チャンネルです。 では、視聴数はどうなっているでしょうか？ 順位 タイトル 視聴数 1 Learn Python - Full Course for Beginners [Tutorial] - YouTube 2663万回 2 SQL Tutorial - Full Database Course for Beginners - YouTube 783万回 3 Learn JavaScript - Full Course for Beginners - YouTube 696万回 4 C++ Tutorial for Beginners - Full Course - YouTube 681万回 5 C Programming Tutorial for Beginners - YouTube 485万回 ※視聴数は、2021/9/3時点の情報です。 TOP5の視聴数が日本の YouTube チャンネルと比べて、圧倒的な数字ですね…。 また海外のチャンネルではありますが、英語の発音も比較的聞き取りやすいのも特徴ですのでご興味ありました是非ご視聴ください！ CS Dojo youtu.be 次は元 Google エンジニアのYK Sugishitaさんが配信を行っている『 CS Dojo 』チャンネルです。 チャンネル登録者数は171万人とやはり多いですね。 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・ Python を学べる ・特に、 Python の フレームワーク Django の アプリ開発 が学べる ・ アルゴリズム とデータ構造が学べる ・ 動的計画法 が学べる 人気の動画は以下の通り。 順位 タイトル 視聴数 1 Python Tutorial for Absolute Beginners #1 - What Are Variables? - YouTube 701万回 2 Why I Left My $100,000+ Job at Google - YouTube 582万回 3 How I Learned to Code - and Got a Job at Google! - YouTube 444万回 4 What Can You Do with Python? - The 3 Main Applications - YouTube 297万回 5 Top 5 Programming Languages to Learn to Get a Job at Google, Facebook, Microsoft, etc. - YouTube 274万回 ※視聴数は、2021/9/3時点の情報です。 海外では Python をメインで学ばれている方が多いようですね。 前述したfreeCodeCamp.orgチャンネルと同様、本チャンネルも比較的聞き取りやすい英語ですので、是非 Python を学びたい方はご視聴されてみてはいかがでしょうか？ Derek Banas youtu.be チャンネル概要 チャンネル登録者数：114万人 ※チャンネル登録者数は、2021/9/3時点の情報です。 ◆本チャンネルのおすすめポイント ・ Python 、 Java 、 C++ 、 PHP 、HTML、 CSS 、 MySQL などが学べる ・Git、 GitHub 、 Android , iOS などが学べる ・デザイン知識（ デザインパターン 、 WordPress 、WebDesign）が学べる ・コーディングしながら学べる ・ゲームの作り方も学べる おすすめポイントが多すぎて書ききれないほどです…。 ではこちらの視聴数も見てみましょう。 順位 タイトル 視聴数 1 Python Programming - YouTube 536万人 2 Java Programming - YouTube 482万人 3 C++ Programming - YouTube 467万人 4 PHP Programming - YouTube 189万人 5 Visual Basic Tutorial 2017 - YouTube 172万人 ※視聴数は、2021/9/3時点の情報です。 配信者であるDerek Banasさんは、現在データサイエンスと 機械学習 に関するシリーズをメインで配信しているそうです。 しかし…ほぼ全てプログラム言語をマスターしていると言っても過言ではないですね。驚きです。 動画コンテンツが多いので、まずは学ばれている言語の チュートリアル からご確認いただくと良いかもしれません！ 当社 ラク スのチャンネル 当社では、定期的に SaaS 領域で培った知見や先端技術の研究成果をConnpass上で開催しております。 イベント当日の様子を アーカイブ 動画として残し、 メール会員（ ラク スDevelopers会員） 限定で無償提供しています。 ご興味ある方は是非イベントへ参加の上、 メール会員（ ラク スDevelopers会員） へご登録をお願いします。 rakus.connpass.com そんな アーカイブ 動画ですが、実は YouTube の ラク スチャンネルで一部公開しています。 現在人気の動画は・・・ 20/10/28 SaaS プロダクトのフロントエンド／Vue.js、React、TypeScript、E2Eテスト youtu.be 本イベントでは、 ラク スの現役フロンエンドエンジニアが登壇 チャットディーラー 楽楽勤怠 楽楽明細 発表タイトル テスト稼働の削減とフロントエンドの品質担保を行うE2Eテスト Vue.js + TypeScriptによる新規サービス開発ふりかえり 息の長いサービスのフロントエンドを少しずつ改善していく営み を、フロントエンド技術をどのように活用しながらサービスを成長させているか、またモダンなフロントエンド技術をどのように大規模 SaaS に取り入れていくかをメインテーマとし、発表しております。 こちらの発表内容の詳細は、別のブログでも紹介しております。 【Meetup】SaaSプロダクトのフロントエンド／Vue.js、React、TypeScript、E2Eテスト - RAKUS Developers Blog | ラクス エンジニアブログ 前述しました通り、最新の アーカイブ 動画を見たい場合は メール会員（ ラク スDevelopers会員） に登録することをおすすめします！ YouTube の高度な検索方法 YouTube を検索する際のちょっとしたテクニックをご紹介します。 検索 演算子 を使う方法 YouTube を利用する際、見たい動画コンテンツのキーボードを検索ボックスに入力するのがオーソドックスな検索方法です。 フィルタを使うことで、アップロード日・タイプ・時間・特徴・並び替えも一般的に使われていると思います。 ここでは、検索 演算子 を使うことによってより便利な YouTube ライフを充実させる方法をご紹介します。 まず、 YouTube で使える検索 演算子 は以下の通りです。 OR検索 除外検索 タイトル検索 ハッシュタグ 検索 OR検索 複数キーワードのどちらか1つに一致する動画を検索したい際に使用します。 OR検索をする場合、検索ボックスに「 キーワード OR キーワード 」と入力してください。 YouTube の検索方法（OR検索） 出典： YouTube より引用 「楽楽精算」又は「楽楽明細」のどちらかが含まれる動画が表示されました。 YouTube の検索結果（OR検索）　出典： YouTube より引用 是非機会があれば活用してみてください。 除外検索 見たい動画を検索したけど、検索結果に別のキーボードが含まれてしまうことありませんか？ そんな時は、除外検索方法をご活用下さい。 除外検索をする場合、検索ボックスに「 検索したいキーワード -除外したいキーワード 」と入力してください。 YouTube の検索方法（除外検索）　出典： YouTube より引用 検索結果から「楽楽明細」が除外され、表示されました。 YouTube の検索結果（除外検索）　出典： YouTube より引用 YouTube は、膨大な動画コンテンツ量があるため除外検索は覚えておいて損はないと思いました。 タイトル検索 検索ボックスにキーボードを入れた際は、タイトル以外の箇所も見たうえで検索結果に表示しています。 動画コンテンツのタイトルのみで検索したい場合は、タイトル検索が便利です。 タイトル検索をする場合、検索ボックスに「 intitle:キーワード 」と入力してください。 YouTube の検索方法（タイトル検索）　出典： YouTube より引用 タイトルに「楽楽精算」が含まれているもののみ、表示されました。 YouTube の検索結果（タイトル検索）　出典： YouTube より引用 このタイトル検索を使うことにより、説明文に含まれるキーワードは拾ってきません。 検索結果の量が多い場合は、是非お試しください。 ハッシュタグ 検索 YouTube の動画に ハッシュタグ # を含めることができることをご存知でしょうか？ ハッシュタグ # を使ってグループ化されたコンテンツを検索できます。 ハッシュタグ 検索をする場合、検索ボックスに「 #キーワード 」と入力してください。 YouTube の検索方法（ ハッシュタグ 検索）　出典： YouTube より引用 以下のような検索結果が表示されます。 YouTube の検索結果（ ハッシュタグ 検索①）　出典： YouTube より引用 「# ラク ス」のような ハッシュタグ は、動画クリエイターが動画を公開する際に設定を行っていれば使える検索機能です。 設定された ハッシュタグ は、動画コンテンツタイトルの上に表示されています。 YouTube の検索結果 （ ハッシュタグ 検索②）　出典： YouTube より引用 本ブログにて紹介させていただいた動画コンテンツには、 ハッシュタグ の設定が多くされていました。 以下の「# PHP 」のように、学びたい言語の ハッシュタグ を検索し、絞り込みをすることで、ご自身にあった動画コンテンツを見つけてみてください！ YouTube の検索結果（ ハッシュタグ 検索③）　出典： YouTube より引用 まとめ 今回プログラミング学習をするにあたって、おすすめの国内外 YouTube チャンネルをご紹介させていただきました。 多くの動画コンテンツの中でもコーディングしながら学習できるものに多くフォーカスをあてましたがいかがでしたでしょうか？ 本ブログがエンジニア、 プログラマー 、デザイナーを目指している方の一助となれば幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

はじめに 主に2通りのやり方がある 想定している読者 Class Styleの書き方 Class Styleの特徴 Object Styleの書き方 Object Styleの特徴 どっちで書く？ 見やすさ・馴染みやすさ 利用者の多さ 公式のサポート まとめ 参考 はじめに こんにちは。フロントエンドチームのayoshです。 この記事では、TypeScriptとVue.jsで開発を行う方法について紹介していきたいと思います。 自分の参加しているプロダクトでもTypeScriptとVue.jsを用いた開発をしていますが、最近のWebアプリケーションのフロントエンド開発ではTypeScriptとReact、もしくはTypeScriptとVue.jsで開発をしている現場は多いのではないでしょうか？ 主に2通りのやり方がある 様々な記事でも紹介されていますが、Vue.jsとTypeScriptで開発をする方法は多く分けると 2つ あると言われています（今回は触れませんが、 composition API も含めて3通りある、という見方もあるようです）。 Vue.extend() を用いた書き方（いわゆる Object Style ） class MyComponent extends Vue とする書き方（いわゆる Class Style ） 書き方にかなりの違いがありそれぞれ特徴があるので、比較をされている記事も結構ありますが、ここ数年で状況が結構流動的だったようなので改めてまとめてみたいと思います。 想定している読者 読み手として下記のような方を想定しています。 Vue.js + JavaScript で開発をしたことがある TypeScriptはなんとなくわかるが、Vue.jsのプロジェクトに導入したことはない 要するに、 Vue + JS = 🙆‍♂️ Vue + TS = これから という方（ ＝ ちょっと前の自分）です。 ではまずClass Styleから紹介します。 Class Styleの書き方 こちらは名前の通り、 コンポーネント をクラスとして宣言します。 Vue.js公式よってメンテナンスされている vue-class-component に加え、デコレータによってより見易く書ける vue-property-decorator を使用する書き方で、Vue CLI を用いて vue create や vue add typescript した際、 Use class-style component syntax? の質問に yes とした場合に構成されるのがこのスタイルです。 import { Component , Prop , Vue } from "vue-property-decorator" ; interface ComplexMessage { title: string , okMessage: string , cancelMessage: string } @Component ( { // conponentsは@Componentデコレータの引数に渡す components: { MyComponent , } , } ) export default class HelloWorld extends Vue { // propsはそれぞれ@Propデコレータを使って定義する @Prop () public message: string ; @Prop ( { required: true } ) public complexMessage ! : ComplexMessage ; // dataはクラスのプロパティとして定義する private name: string = 'Example Name' ; private count: number = 0 ; // computedはクラスのgetterメソッドとして実装する get isZero () : boolean { return this .count === 0 ; } // methodsはクラスのメソッドとして実装する public outputMessage () : string { return this .message ; } // watchは@Watchデコレータの引数にwatchする対象を渡す @Watch ( 'count' ) public doSomething ( c: number ) { // ...do something } } Class Styleの特徴 それぞれのOptionをオブジェクトでまとめて記述する基本のVue.jsの書き方と違って、クラス構文を用いて記述する為、 少しスッキリして見えます 。よりTypeScriptっぽい書き方という表現もできそうです。 ただ、 JavaScript + Vue.jsでの書き方に慣れている方であれば、 書き方が大きく変わる 事で少し困惑することもあるかもしれません。 その他にも以下のような特徴があげられるようです。 利用者が多い vue-class-componentは 公式にメンテナンスされている Vue.js初期からある為資料が豊富 利用者が多く資料が豊富 、というのは結構惹かれるポイントです。 では続いてObject Styleを見てみましょう。 Object Styleの書き方 Vue.js公式の TypeScriptのサポートの ページでも主に紹介されているのがこのスタイルです。Vue.js + JavaScript で開発をしたことがある方は見慣れた形ではないでしょうか。 Vue CLI を用いて vue create や vue add typescript した際、 Use class-style component syntax? の質問に no とした場合はこのように記述されています。 import Vue from "vue" ; // dataオブジェクトのそれぞれのプロパティの型をまとめて定義し、dataの返り値の型として注釈する export type DataType = { name: string ; count: number ; } // Object型のpropの型を定義、PropType<>に型引数として渡す interface ComplexMessage { title: string , okMessage: string , cancelMessage: string } export default Vue.extend ( { name: "HelloWorld" , components: { // JavaScript + Vue.js同様の記述 MyComponent , } , props: { // プリミティブな型は普通に型注釈する message: String , // Objectなどの場合はPropType<>の型引数に定義した型を渡してキャストする complexMessage: { type : Object as PropType < ComplexMessage >, required: true } } , data () : DataType { // dataオブジェクトの返り値を型注釈 return { name: 'Example Name' , count: 0 , } } , methods: { // それぞれの返り値を型注釈する outputMessage () : string { return this .message ; } } , computed: { // それぞれの返り値を型注釈する isZero () : boolean { return this .count === 0 ; } } , watch: { // 引数・返り値に型注釈する count ( c: number ) : void { // ...do something } } } ); Object Styleの特徴 こちらは import Vue from "vue"; としている事からわかるように、 本体に追加されている 機能です。 大枠は ほとんど JavaScript の書き方と変わらず 、TypeScriptの基本的な型注釈ができれば JavaScript からの移行も容易にできそうです。 一方、 それぞれのOptionはオブジェクトとして区切られる為、懸念ごとが区切られてしまう という弱点は JavaScript での書き方でのデメリットをそのまま受け継いでいるともいえます。 どっちで書く？ 簡単に両方の特徴をまとめてみましたが、どちらで書くのが良いのでしょうか。 見やすさ・馴染みやすさ これは 好みが分かれる ところかもしれません。TypeScriptでクラスを積極的に使った書き方に慣れていればClass Styleの書き方はスッキリとしていて見やすいと感じるでしょうし、 JavaScript でVue.jsを書いていた人からするとObject Styleの書き方は馴染みがあって移行もスムーズでしょう。 利用者の多さ これはClass Styleに軍配が上がっているようです。Vue.jsの初期からあることに加え、v2.5以前のObject Styleでは this や Props の型注釈・ 型推論 に難があったこともあり、 Class Styleで開発をする人の方が多い 様子。利用者が多ければ 記事などで情報も見つかり易い といったメリットもあります。 公式のサポート 長く運用するプロジェクトであれば公式のサポートもきになるところです。 利用者の多さで優っていたClass Styleですが、Vue3では RFCで廃案（Abandoned） となっています（サポートは続けられるとの事）。対して Object StyleはVue本体の機能 なので、この面ではメリットになりそうです。 まとめ Object Styleにあった this や props の型の問題もあり、一昔前まではClass Style一択の風潮が見られたものの、v2.5でこれらが改善されてからはObject Styleを推す記事もよく見つかります。また、今回は触れなかったVue3系のcomposition API を使うとObject Styleにある「 関心ごとの分離 」などの弱点を補える事もあり、情勢の逆転もあり得るかもしれません。 実際にはVue3系の導入や周辺ライブラリなど考慮すべき点はまだまだありますが、この記事では簡単にですがClass StyleとObject Styleの特徴をまとめてきました。 これからVueプロジェクトにTypeScriptを導入しようとしている方の助けになれば幸いです。 参考 Vue.js TypeScriptのサポート Vue 2.5 released Upcoming TypeScript Changes in Vue 2.5 [Abandoned] Class API proposal デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン このタイミングで Vue.js に TypeScript を導入するには？ VueにTypeScriptを導入する3つのやり方を比較してみた 最小限の構成でVue.extendとクラスコンポーネントを比べてみる エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 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

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

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

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

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

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

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