エンジニアの仕事紹介＆プログラミング体験

freee株式会社 @ymrl
https://ymrl.github.io/hands_on_for_junior_high/

自己紹介

freee株式会社について

freeeのエンジニアの1日

いろいろなエンジニア

サーバーサイドエンジニア
サーバー（freeeのコンピューター）で動くプログラムを作る人
フロントエンドエンジニア
クライアント（お客さんのコンピューター）で動くプログラムを作る人
モバイルエンジニア
スマートフォンで動くプログラムを作る人
インフラエンジニア
サーバーやネットワークを構築・運用する人
QAエンジニア
プログラムにバグがないかをテストするためのプログラムを作成・運用する人

エンジニアの仕事

企画
誰のために何をするべきかを考えたり話し合ったりする
設計
企画で決めたことをどうやって実現するかを考える
実装
機能が実際に動くようにコードを書く（コーディング）
運用
書いたコードをユーザーに提供して、必要に応じて修正したりもする

コーディング

プログラミング言語

コードを書く道具

キーボードへのこだわり

カスタムHHKB Pro 左右分割キーボード エルゴノミクスキーボード + 飾り付け

コーディングしてみよう！

そのまえに

Webページを作る

<html lang="ja">
  <head>
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <p>こんにちは、世界！</p>
  </body>
</html>

HTML

ちょっと派手にしてみる

<html lang="ja">
  <head>
    <title>はじめてのWebページ</title>
    <style>
      .title {
        font-size: 24px;
        font-weight: bold;
        color: #333333;
      }
      .greetings {
        font-size: 18px;
      }
      .name {
        color: #FF6666;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 class="title">ごあいさつ</h1>
    <p class="greetings">こんにちは、<span class="name">世界</span>！</p>
  </body>
</html>

CSS

プログラミングしてみよう

<script>
  var yourName = window.prompt('あなたのお名前は？');
  var nameElement = document.querySelector('.name');
  nameElement.innerText = yourName;
</script>

JavaScript

コードの解説

数学っぽい言葉が多いのに気づきましたか？

おみくじを作ろう(1)

<html lang="ja">
  <head>
    <title>おみくじ</title>
  </head>
  <body>
    <button class="omikuji-button">おみくじを引く</button>
    <div class="result">ここに結果が表示されます</div>
  </body>
</html>

おみくじを作ろう(1)

<script>
  var omikujiButton = document.querySelector('.omikuji-button');
  var resultElement = document.querySelector('.result');
  omikujiButton.addEventListener('click', function(){
    // おみくじボタンをクリックするとここが実行される
    var score = Math.floor(Math.random() * 10); // scoreに0から9の整数が代入される
    var result = '';
    if (score === 9) {
      result = '大吉です';
    } else if (score > 2) {
      result = '吉です';
    } else {
      result = '凶です';
    }
    resultElement.innerText = result;
  });
</script>

おみくじをつくろう(3)

HTMLタグのヒント

JavaScriptで計算

// 足し算
5 + 4 + 3 + 2 + 1 // 15
// かけ算
5 * 4 * 3 * 2 * 1 // 120
// 引き算
10 - 7 // 3
// 割り算
17 / 4 // 4.25
// 割り算のあまり
17 % 4 // 1

JavaSciptで時刻を扱う

var time = new Date();
time.getFullYear(); // 2016
time.getMonth(); // 11 (0から11の数字)
time.getDate(); // 10
time.getHours(); // 14
time.getMinutes(); // 30
time.getSeconds(); // 22

(おまけ) PPAP

<div>I have...</div>
<div>
  <label>
    <input type="checkbox" class="have-pen"> ペン(pen)
  </label>
</div>
<div>
  <label>
    <input type="checkbox" class="have-apple"> アッポー(apple)
  </label>
</div>
<div>
  <label>
    <input type="checkbox" class="have-pineapple"> パイナッポー(pineapple)
  </label>
</div>
<div>
  <button class="ummm">Ummm!!</button>
</div>
<div class="result"></div>
<div class="result-en"></div>

おわりに

クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 継承 3.0 非移植 ライセンスの下に提供されています。