はじめに 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

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

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

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

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

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

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

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

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