JavaScript

JavaScriptでメモ帳アプリを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでメモ帳アプリを作成する方法について現役エンジニアが解説しています。HTML5で追加されたsessionStorageやlocalStorageのAPIを利用して作成してみます。メソッドには、getItem、setItem、removeItem、clearがあります。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

JavaScriptでメモ帳アプリを作成する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

JavaScriptでメモ帳アプリを作成する方法について詳しく説明していくね！

お願いします！

メモ帳とは

今回は、とてもシンプルなメモアプリを作成したいと思います。初めにメモ帳に必要な機能を考えてみましょう。

メモを書ける
書いた内容を保存出来る
保存した内容をいつでも呼び出せる
書いたメモを検索で出来る
メモのカテゴリー化
メモの共有化

など、色々と思いつくのですが、今回は必要最低限と言うことで

メモを書ける
書いた内容を保存出来る
保存した内容をいつでも呼び出せる

までを実現したいと思います。

JavaScript/HTML/CSSでシンプルなメモ帳アプリを作成してみよう

JavaScriptでメモ帳を考えるうえで幾つかのアイディアがあるかと思います。
書いた内容を保存するには、Data URIを利用しファイル保存する方法が最初に思いつきます。

ただ、これだとファイルを開いたり保存に時間がかかるので、今回の目的である簡単なメモとしてやめておきます。
その代わり、とても簡単な便利なlocalStorage APIを利用したいと思います。

[PR] コーディングで副業する方法とは

メモ帳アプリの作成に役立つライブラリなど

localStorage API

ブラウザー側にkeyごとにデータを保存できるAPIです。各サイトごとに5KBのデータを保存できます。
メソッドとして

setItem(key,data):データの保存を行います。
getItem(key):キーに一致するデータを取得します。
removeItem(key):指定したキーとデータを削除します。
clear():全てのデータを削除します。

sessionStorage API

localStorageとの違いは、ページやタグを閉じた時点でデータが消去されるところです。
その時だけにメモする機能を実現するには、こちらが便利となります。

サンプルコードなど

それではlocalStorageを利用した簡単なメモ帳を作成してみましょう。

<html>
    <head>
        <title>JavaScriptでメモ帳を方法</title>
        <style type="text/css">
            textarea{width:100%;height:30%;}
        </style>
    </head>
    <body>
        <h1>書いたものを保存、読み込みできるメモです。</h1>
        <form name="form1">
            <textarea name="Memo"></textarea>
        </form>
        <p>
            <input type="button" value="保存" onclick=save(); ></input>
            <input type="button" value="読込" onclick=load(); ></input>
        </p>
            <script type="text/javascript">
                // 読込
                function load() {
                    var MemoData = "";
                    if(!localStorage.getItem('MemoData')) {
                        MemoData = "メモは登録されていません。";
                    } else {
                        MemoData = localStorage.getItem('MemoData');
                    }
                    document.form1.Memo.value = MemoData;
                }
                // 保存
                function save() {
                    var MemoData = document.form1.Memo.value;
                    localStorage.setItem('MemoData', MemoData);
                }
            </script>
        </body>
</html>

今回は、localStorageを利用し、便利で簡単なメモ帳を作成してみました。
複数のメモ保存や、内容の検索など追加したい機能はあるかと思いますが、それは、別の機会に挑戦してみたいと思います。

筆者プロフィール

小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エ

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法について、TechAcademyのメンター（現役エンジニア...

JavaScript

JavaScriptでブラウザのリロードを判定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでブラウザのリロードを判定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...

JavaScript

JavaScriptのLocalStrage（ローカルストレージ）の使い方を現役エンジニアが解説【初心者向け

JavaScriptのLocalstrage（ローカルストレージ）の使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていき...

JavaScript

JavaScriptのFormDataオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのFormDataオブジェクトの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、...

JavaScript

JavaScriptでnumberオブジェクトを使う方法【初心者向け】

JavaScriptでnumberの使い方について解説しています。出力する数字を指定することができるので、いくつか書きながら理解していきましょう。 ...

JavaScript

JavaScriptで入力フォームの文字数チェックをする方法を現役エンジニアが解説【初心者向け】

JavaScriptで入力フォームの文字数チェックをする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...

JavaScript

あわせてよく読まれている記事

JavaScriptでlocalStorageを使う方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocalStorageを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでlocalStorageを使う方法について詳しく説明していくね！大石ゆかりお願いします！ localStorageとは localStorageとは、Webブラウザにデータを保存する領域のことです。ブラウザを閉じても保存されたままであることが特徴になります。このlocalStorageを使って、データを保存したり取得したりすることができます。 localStorageはStorageオブジェクトであり、Windowオブジェクトのプロパティとして参照します。localStorageが、どのようなオブジェクトなのかをコンソールに出力して確認しましょう。 console.log(window.localStorage) もしくは console.log(localStorage) 頭のwindow.を取っても大丈夫です。 lengthというプロパティを唯一持つことが分かります。これは、localStorageに保存したデータの数を表します。何も保存していなければ0という値になります。 localStorageにデータを保存する localStorageにデータを保存するには、setItemメソッドを使用します。第1引数にはキーの名称を、第2引数には値をそれぞれ渡します。 localStorage.setItem('key', 'value') ここではキーの名称をkey、値をvalueとしました。このとき、localStorageがどのような状態なのかをコンソールに出力して確認しましょう。データを1つ保存したので、lengthプロパティの値が1増えました。 [PR] コーディングで副業する方法とはlocalStorageからデータを取得して出力する localStorageからデータを取得するには、getItemメソッドを使用します。引数にキーの名称を指定することで、そのキーに応じた値が戻り値として返却されます。 const value = localStorage.getItem('key') これで、変数valueには文字列のvalueが代入されます。この変数valueをコンソールに出力してみます。 console.log(value) コンソールにvalueという文字が出力されます。ちなみに消したいときはどうするのかと言うと、removeItemメソッドを使用します。 localStorage.removeItem('key') localStorageをコンソールに出力して確認しましょう。データを1つ削除したので、lengthプロパティの値が1減りました。筆者プロフィールメンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

JavaScriptのLocalStrage（ローカルストレージ）の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのLocalstrage（ローカルストレージ）の使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのLocalstrage（ローカルストレージ）の使い方について詳しく説明していくね！大石ゆかりお願いします！ LocalStrage（ローカルストレージ）とは LocalStrageとは、JavaScriptでデータをブラウザに保存する仕組みです。同様な仕組みにSessionStrageやcookieがありますが、以下のような違いがあります。名称保持期限利用 LocalStrage 無制限ブラウザ(JavaScript) SessionStrage ブラウザを閉じるまでブラウザ(JavaScript) cookie 指定可能サーバ側 session ブラウザを閉じるまでサーバ側 LocalStrage（ローカルストレージ）の使い方 LocalStrageに値を保存するには以下のように記述します。「キー」には任意の文字列を指定します。 localStorage.setItem('キー', 値) または以下のような記述も可能です。 localStorage.キー = 値 localStorage['キー'] = 値値を読み込むには以下のように記述します。 localStorage.getItem('キー') または以下のような記述も可能です。 localStorage.キー localStorage['キー'] [PR] コーディングで副業する方法とは実際に書いてみよう今回のサンプルプログラムでは、画面で入力した値をLocalStrageに保存、または読込を行います。結果はログにも出力されます。ログはChromeであれば、デベロッパーツールのConsoleで確認できます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script language="javascript" type="text/javascript"> // 読込 function load() { var mydata = ""; if(!localStorage.getItem('mydata'))

JavaScript

JavaScriptのsessionStorageの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのsessionStorageの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次メモ帳とはJavaScript/HTML/CSSでシンプルなメモ帳アプリを作成してみようメモ帳アプリの作成に役立つライブラリなどサンプルコードなど筆者プロフィールそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのsessionStorageの使い方について詳しく説明していくね！大石ゆかりお願いします！ sessionStorageとは sessionStorageは、Webページのセッションが続いている間、情報を保存しておけるブラウザの保存領域のようなものです。通常JavaScriptで保持されている変数などの情報は、ページを再読み込みするとリセットされます。 sessionStorageを使うと、ページを閉じてもそのブラウザウィンドウ、もしくはタブを閉じない限り、情報を保持し続けることができます。 sessionStorageの使い方保存するデータの形式は、JavaScriptのオブジェクトのようにキーと値の組み合わせになっています。言い換えると、「データの名前」と「データ」という形で管理します。今回は、sessionStorageの使い方として「保存する」「取得する」「削除する」の3つを解説します。 sessionStorageにデータを保存する sessionStorage.setItem('キー', '値') sessionStorageはJavaScriptの組み込みオブジェクトであるため、何も定義しなくてもsessionStorageと記述すればアクセスできます。データを保存するには、setItemメソッドにキーと値を指定します。上記のコードを実行した際、指定されたキーが存在しなければ新規に作成し、すでに存在していれば既存の値を上書きします。 sessionStorageのデータの値には文字列しか指定できない点に留意しましょう。 sessionStorageにオブジェクトや配列を保存したい場合の処理は、次の章で解説します。 sessionStorageからデータを取得する sessionStorage.getItem('キー') データを取得するには、getItemメソッドの引数に取得したいデータのキーを指定します。 setItemメソッドと対になるメソッドとして覚えてしまいましょう。 sessionStorageからデータを削除する sessionStorage.removeItem('キー') データの削除にはremoveItemメソッドを使います。 getItemと同様、引数に削除したいデータのキーを指定します。使用しなくなったデータを明示的に削除することで、データの混在を防ぐとともにsessionStorageの領域を無駄にしないようにしましょう。 [PR] コーディングで副業する方法とはsessionStorageにオブジェクトや配列を保存したい場合 sessionStorageは、データの型として文字列のみを認めています。 sessionStorageにオブジェクトや配列などの複数要素を格納したい場合には、文字列として格納したデータを、取得した後にオブジェクトや配列の形に戻すことが必要です。オブジェクトを文字列にして保存し、取得後にオブジェクトに戻す const data = { cat: '猫', dog: '犬' }; //オブジェクトを文字列に変換 const dataStr = JSON.stringify(data); sessionStorage.setItem('animals', dataStr); const animals = sessionStorage.getItem('animals'); //文字列をオブジェクトに変換 const animalsObj = JSON.parse(animals); ポイントは、JSON.stringifyとJSON.parseをセットで使うことです。オブジェクトを一度文字列に変換してからsessionStorageに保存し、取得後にオブジェクトに戻すことで、オブジェクトでのデータのやり取りを実現しています。配列を文字列にして保存し、取得後に配列に戻す const data = ['犬', '猫']; //配列を文字列に変換 const dataStr = data.join(); sessionStorage.setItem('animals', dataStr); const animals = sessionStorage.getItem('animals'); //文字列を配列に変換 const animalsArr = animals.split(','); 配列の場合も、基本的な流れはオブジェクトと同じです。配列の場合はjoinメソッドを使って、配列をカンマ区切りの文字列に変換しています。取得した文字列はカンマ区切りなので、splitメソッドでカンマを区切り文字として配列にすることで、元の配列を復元できます。 sessionStorageとlocalStorageの違い sessionStorageと非常によく似た概念として、localStorageがあります。 localStorageの文法は、先ほど解説したsessionStorageと全く同じです。 sessionStorageとlocalStorageの唯一の違いは、「データの保存期間」です。 sessionStorageの場合、ブラウザのウィンドウやタブを閉じるとデータが破棄されます。一方、localStorageにはデータの保存期限がなく、ブラウザを再起動してもデータが保持されます。データの使用期間に応じて使い分けるとよいでしょう。ブラウザ対応状況 sessionStorageの主要ブラウザ対応状況は以下の通りです。（上段：ブラウザ名 / 下段：バージョン） Google Chrome Safari Firefox Edge Internet Explorer 5 4 2 12 8 現在利用されているブラウザであれば、ほぼ全ての環境で使用できることがわかります。まとめ sessionStorageを使うと、サーバサイドを介さずにちょっとしたデータの保持をすぐに実装することができます。実際のアプリケーションで採用する際は、sessionStorage / localStorage / データベースのどれを使うのが最も適しているかを、データの量や保存期間に応じて判断し、使い分けましょう。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

JavaScript

JavaScriptとデータベースの操作を現役エンジニアが解説【初心者向け】

Webサイトを作っていると、様々な情報を保存したい場合がありますよね。ニックネームや文章、写真などを保存して表示すれば、様々な機能を実現できます。例えばコメントや投稿をして表示すれば、SNSのようなWebサイトを作ることができるでしょう。本記事では、JavaScriptを使ってサーバにデータを保存する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。目次メモ帳とはJavaScript/HTML/CSSでシンプルなメモ帳アプリを作成してみようメモ帳アプリの作成に役立つライブラリなどサンプルコードなど筆者プロフィールそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptとデータベースの操作方法について詳しく説明していくね！大石ゆかりお願いします！ JavaScriptでデータを保存する方法プログラミング言語JavaScriptでデータを保存する方法はいくつかあります。代表的な手法を3つ、それぞれの特徴をまとめました。手法用途例データ保存先注意点ローカルストレージユーザー入力履歴 Webブラウザ保存先がサーバではないデータベース掲示板・SNS・ログインデータベースサーバサーバサイドJavaScript BaaS クラウド掲示板・SNS・ログインクラウドサーバクラウドサービスを利用それでは詳しく見ていきましょう。ローカルストレージ JavaScriptでデータを保存する一番簡単な方法がローカルストレージです。 setItemでデータを保存し、getItemでデータを取り出します。 localStorage.setItem("username", myData.name); const value = localStorage.getItem("username"); See the Pen Local Storage JS by TAKAYOSHI (@lspuwbkv) on CodePen. 詳しい使い方は、こちらの記事やこちらの記事でも解説していますので、ぜひご覧ください。ローカルストレージでは、データが保存されるのはブラウザ内で、サーバではありません。例えばユーザーが入力した名前などを保存しておくことができます。しかし、他のユーザーに保存した情報を公開することはできません。掲示板やSNS、問い合わせフォームなど、「アップロード」はできないのです。アップロードの仕組みを作るには、サーバにデータを保存する必要があります。 [PR] コーディングで副業する方法とはデータベースサーバとバックエンドデータを保存するサーバで、まず思い浮かべるのが、データベースサーバです。 Oracle、MySQL、SQLiteなど様々な種類のデータベースサーバがあります。旧来から、様々なWebサービスのバックエンドでデータを保存するために使われています。ですが一般的なJavaScript、Webブラウザで動作する「フロントエンド」では、データベースサーバに接続できません。 Webブラウザは「http」や「https」という方式で、Webサーバとの接続だけできます。データベースサーバと接続するための方式は、セキュリティ上許されていないのです。データベースサーバと接続できるのは「バックエンド」のみ。つまりPerlやPHPやRubyやJavaやPythonなど、サーバで動くプログラムだけです。そのため、旧来は「サーバ/クライアント構成」という仕組みを作るのが一般的でした。サーバにPHPなどでプログラムをし、HTTPを使ってデータを受け取ります。そして、そのデータをデータベースサーバに保存するのです。すると、表示するHTMLを作るときに、データベースに保存した情報を使えますね。誰かが投稿した文章や写真を使ってHTMLを作れば、掲示板やSNSになるでしょう。つまり、データベースサーバにデータを保存するには、3つの言語を使う必要があったのです。 JavaScriptなどのクライアント言語、PHPなどのサーバ言語、MySQLなどのデータベース言語。少しレベルが高いですね。「NodeJS」バックエンドJavaScript そんな中、2009年にNodeJSが登場し、JavaScript技術が大きく発展します。 NodeJSを使うと、JavaScriptでバックエンドを作ることができます。つまり、JavaScriptでデータベースサーバに接続できるのです。 JavaScriptは、Webブラウザ上で動作するプログラミング言語として生まれました。そのため、できることはブラウザに許可されていることに制限されてしまいます。そこで登場したのがNodeJSです。 NodeJSとは、JavaScriptをブラウザの外で動かすための実行環境です。 WindowsやMac、LinuxなどのOSにインストールして使います。文法はJavaScriptですが、従来のブラウザ上で動くJavaScriptとは全く違う概念です。そこで、NodeJSをサーバにインストールし、バックエンドを作るために使われます。バックエンド/フロントエンドの境目なくプログラミングできます。また、必要な言語も1つ減り、少し敷居が低くなりました。「BaaS」バックエンド as a サービスしかしながら、サーバにデータを保存するためにはバックエンドを作る必要があります。 NodeJSやデータベースのを用意したり、まだまだ気軽ではありません。フロントエンドで簡単にサーバにデータを保存したい、そんな悩みを解決するのが、「BaaS」バースという種類のクラウドサービスです。クラウドとは「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」サービス化することです。何をクラウド化したものかを、 aaS （as a Service）という言葉で表しています。ソフトウェアのクラウドがSaaS (Software as a Service)、プラットフォームのクラウドがPaaS（Platform as a Service）です。そして、バックエンドをクラウド化したものがBaaS（Backend as a Service）です。データ保存やログイン、プッシュ通知といったバックエンド特有の機能を提供するクラウドサービスです。クラウドなので「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」使えるのです。 Amazon AWSや Google Firebase、Microsoft Azureなど様々なクラウド事業者のBaaSがあります。ユーザー登録してログインすれば、JavaScriptからAPIを使って簡単に使えます。豊富なマニュアルやサンプル、安価な料金や無料利用枠も魅力ですね。まとめいかがだったでしょうか。 JavaScriptからデータを保存する3つの方法をご紹介しました。作りたいものやレベルにあった、一番良い方法を選んでみてください。データの保存ができると、高度なWebサービスを作ることができますね。ぜひチャレンジしてみてください！大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

JavaScript

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。本記事ではイベントレポートをお届けします。これからプログラミングの学習を始める方は参考にしてみてください。ゲスト大場光一郎氏（株式会社クラウドワークス執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。堀井雄太氏（株式会社Fablic チーフエンジニア）「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ（現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。クラウドワークス大場氏講演まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。エンジニアになったきっかけ学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。クラウドワークスでの開発体制クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。これからエンジニアを目指す人に期待すること大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。 [PR] コーディングで副業する方法とはFablic堀井雄太氏講演続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。エンジニアになったきっかけもともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。 Frilの開発体制株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。これからエンジニアを目指す人に期待することどんなエンジニアになるかを意識することが大事とのことです。会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。パネルディスカッション「これからのエンジニアに必要なスキルとは」続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。エンジニアになる前の段階エンジニアとして働く段階エンジニアとしてさらにスキルアップする段階エンジニアになる前の段階（村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。（村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？（堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。（村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。（大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。（村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？（大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。（村田）それはありますよね。（大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。（村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？（堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。（大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。（村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。（大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。（村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。（村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？（堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。（大場）個人的には難しいところって技術と技術の境目の部分かなと。例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。（村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。（大場）悟るまでですね（笑）（村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？（大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。（堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。（村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。（大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。エンジニアとして働く段階（村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？（堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。（大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。（村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。（村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？（大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。（堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。（村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。（村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？（堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。（大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。（村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。（村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？（大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。（堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。（村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。エンジニアとしてさらにスキルアップする段階（村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。（大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。（村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。（村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？（堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。（村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？（大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。（堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。会場からの質問（村田）ここからは会場からの質問を受け付けたいと思います。ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。（大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。（村田）他のご質問はいかがでしょうか？ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？（村田）まず育てる側の僕の方から話をさせていただきますね。まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。エンジニアが足りないということに対して、大場さんはいかがでしょうか？（大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。（堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。（村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。（村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。（堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。（大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。（村田）堀井さん、大場さん今日はどうもありがとうございました。イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。

イベントレポート

【開発現場で使える！】Ruby on RailsでのValidationの使い方

普段サイトなどで会員登録をする際に「パスワードは最低8文字以上でなければなりません」といった文言をよく見るかと思います。こういった制約をRubyのフレームワークのRuby on Railsではバリデーション(Validation)という仕組みで用意することができます。ここではValidationの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次メモ帳とはJavaScript/HTML/CSSでシンプルなメモ帳アプリを作成してみようメモ帳アプリの作成に役立つライブラリなどサンプルコードなど筆者プロフィール Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回はバリデーションについて説明するよ。大石ゆかり田島メンター！！バリデーションというのは何ですか〜？田島悠介バリデーションは、ある値に対して指定した条件に当てはまるかどうかというのを検証するものだよ。例えばメールアドレスが正しく入力されているかとか、パスワードの文字は8文字以上であるかとかだね。大石ゆかりなるほど、実際によく見るやつですね。ぜひ覚えておきたいです！バリデーションとは Ruby on Railsには、ユーザが入力した値を検証する為にバリデーション(Validation)という仕組みがあります。例えば入力必須の項目や、最低何文字以上入力必須などの制約を設ける際に利用します。この仕組みを利用すれば、データベースに不正なデータが登録されることを防ぐことができます。例えば、あるWEBサイトで年齢を入力する欄があったとします。何も対策していない状態で-1を入力して登録ボタンを押してしまうと、-1が年齢としてデータベースに登録されてしまいます。このような不正な状態が起きないようにするため、バリデーションを利用します。おかしい値が入力された場合は「年齢に不正な値が入力されています」といったエラーメッセージを表示し、登録されないようにします。これがバリデーションの役割です。バリデーションの構文バリデーションはモデルに対応するファイルに記載していきます。例えばUserモデルのnameに対して、必須入力であることを表すバリデーションを設定する場合は以下のように書きます。 class User < ApplicationRecord validates :name, presence: true end これでnameの入力は必須になりました。 nameの入力がない状態でUserを保存しようとするとこのようなエラーになります。 Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) nameが空白の状態だというメッセージが表示されていますね。バリデーションにはいくつか種類がありますので、のちほど説明します。バリデーションがトリガーされるメソッドバリデーションがトリガー(実行)されるメソッドがいくつかあるので紹介します。 create データベースに登録するときに使用するメソッドです。 User.create(name: "tarou") バリデーションで不正なデータが見つかった場合はデータベースに保存されません。 create! createメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.create!(name: "tarou") createメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。前述でも紹介した Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) このようなエラーが表示され、実行中の処理は止まります。 save データベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save 正常に保存できた場合はtrue、保存できなかった場合はfalseを返します。 save! saveメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save! saveメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。実行中の処理は止まります。 update すでに存在するデータを更新するときに使用するメソッドです。 User.update(name: "tarou") 正常に更新できた場合はtrue、更新できなかった場合はfalseを返します。 update! updateメソッドと同じくデータを更新するときに使用するメソッドです。 User.update!(name: "tarou") updateメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。実行中の処理は止まります。 valid?メソッド valid?メソッドはバリデーションの結果を確認できます。 user = User.first user.name = "tarou" user.valid? valid?メソッドを実行したときのモデルの状態でバリデーションを実行します。不正なデータが見つかった場合はfalseを、問題なければtrueを返します。データベースへの保存はしません。バリデーションがスキップされるメソッド逆にバリデーションがスキップされる(実行されない)メソッドもありますので注意してください。バリデーションはスキップしますが、データベース上の制約に引っかかる場合はデータベース側での保存時にエラーになりますのでご注意ください。 increment! increment!メソッドはある数値項目をいくつか増分して、保存するメソッドになります。以下の例はユーザーのidを1増やして、データベースに保存しています。 user = User.first user.increment!(:id, 1) また増分ではなく減算をするdecrement!メソッドもあります。こちらもバリデーションはスキップします。 increment_counter increment_counterメソッドもある数値項目を増分させるメソッドですが、複数のデータを対象に更新できます。以下の例はユーザーのageが25であるユーザーのageを1増やして、データベースに保存しています。 User.increment_counter(:age, 25) また増分ではなく減算をするdecrement_counterメソッドもあります。こちらもバリデーションはスキップします。 toggle! toggle!メソッドは真偽値(true/false)を反転させて、データベースに保存します。以下の例はユーザーのanswered(アンケートなどの回答有無)を反転させています。 user = User.first user.toggle!(:answered) touch touchメソッドはupdated_at(更新日時)を更新して、データベースに保存します。 user = User.first user.touch update_all update_allメソッドは複数のデータに対して、項目を更新し、データベースに保存します。以下の例はすべてのユーザーのnameをtarouに更新しています。 User.update_all(name: "tarou") update_attribute update_attributeメソッドは指定した項目を更新し、データベースに保存します。以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_attribute(:name, "test") update_column update_columnメソッドは指定した項目のみを更新し、データベースに保存します。 update_attributeメソッドと異なる点は、updated_atの更新はされないということです。以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_column(:name,"test") update_columns update_columnsメソッドは複数項目を更新し、データーベースに保存します updated_atは更新されません。以下の例はユーザーのidを100に、nameをtestに更新しています。 user = User.first user.update_columns(id: 100, name: "test") update_counters update_countersメソッドは条件に合致したユーザーの項目を増分させて、データベースに保存します。以下の例はidが1～100のユーザーのageを1増分しています。 User.where(id:

Ruby

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

JavaScriptでメモ帳アプリを作成する方法を現役エンジニアが解説【初心者向け】

メモ帳とは

JavaScript/HTML/CSSでシンプルなメモ帳アプリを作成してみよう