ミトコンドリオン雑記

本の感想、日頃思ったことを書き綴ります

定時で帰れて成果UP②

どうもミトコンドリオンです。

 

定時で帰れて成果UP

絶対に残業しない人の時短(しごと)のワザ

伊庭正康

 

 

2

「やらない」人になる

 

・「やったほうがいい」ことを、やめてみる

残業がやめられない人に共通することは、「時間の許す限りは、やらねばならない」と考えてしまうことです。これでは早く帰れるはずがありません。

そこで「成果に影響しないこと」はやめる。と決めることです。

やった方が良いが、効果が不明確→勇気をもって、ここをやめることで一気に成果が上がる

やった方が良くて、効果が明確→上記の余ったエネルギーをここに絞る

やらない方が良いが、効果が明確→あれもこれも手を出さない。次の一手として温めておく。

効果が明確

次の一手

ここに絞る

効果が不明確

 

×やめる

 

やらない方が良い

やった方が良い

 

私も「やったほうが良いことはやってしまう」人でした。しかし、よくよく考えてみれ、「やったほうが良いこと」は無限にあります。「やったほうが良いこと」はどんどん増えていきます。なんかそういう時だけ見つける能力って高くなりますよね(笑)

時間は有限なので、効率よく成果を出すために選別することは重要だと思いました。なので、私も納期や重要度を見極めて優先順位を決めています。また、どうしても優先順位がつけれない場合は、上司の意見も聞いています。この時にやらなくてもよいことを確認しています。

 

 

 

・人のペースに振りまわされない

急な仕事や打ち合わせを打診されることがあると思います。もちろん、緊急事態であれば、最優先に対応することが正解です。振り回されないためにも、上手な断り方を身につけておきましょう。

断ることは難しいことです。そこでコツがあります。

ウソでも「すみません。所用が入っているのです。でも、どんなお話ですか?」と聞き返してください。決して「無理です」とは言わないこと。相手のメンツをつぶすことになりかねませんからね。

また、その時に「断る理由」を説明しないことです。「所用がある」とだけ伝えましょう。

「飲みに行かない?」と誘われたとき、「嫁さんが夕食を用意していて」と断ったとしましょう。すると「嫁さんの料理に劣る」という構図になるわけです。

断る理由を言わないことも相手への心配りです。断る理由を詳細に言ってしまうと、「それより軽い誘い」となるので、要注意です。

 

これは私自身まだできていないです。断りたいのですが、断り方がマスターできていません。「う~~~~~~~ん」と言いながら迷いますが、結局引き受けてしまいます。断ると今後の仕事の進め方に支障が出てきてしまうかもと心配してしまいます。

でも、よくよく考えてみると、自分が仕事を頼んで断られても、「これからあの人の頼み事はやってあげない」とは思わないなと思っています。これはこれからの大きな課題になりそうです。

 

 

 

・“ゼロ”からつくらない

毎回、企画書をゼロから作成していたら、時間がいくらあっても足りません。まして、デザインまで考えていたら、長時間残業は確定です。

そこでおすすめの方法は「ワンリソース・マルチユース」です。つまり、同じ素材を使いまわすことです。例えば、うまく作られている企画書を他の案件でも修正して使いまわすことです。

 

これは皆さんも実践されているのではないでしょうか。会社ごとのある程度の書類の書式はあると思います。私の会社でもよく作成する書類についてはある程度揃っています。しかし、現在はみんなは必要ないけど、私とその周り少数には必要かもしれないものについては、時間があるときにコツコツ作っています。

これが運用された時は、チーム全体で時短と成果アップが実現できると信じています。

 

 

 

3

「決断」で迷わない

 

・準備は後。まずは「日程」を決める

年収の低い人は「正確さ」を重視し、年収の高い人は「段取り・成果の質」を重視するという驚きのデータがあります。大切なことは「正確さ」ではないことを示唆しています。

そこで段取りをよくするコツですが、何かをするとき、「準備は後。まずは日程を先にきめてしまう」ことです。

 

これは実践しています。また、うまくいかない場合も含めて保険を掛けて納期交渉もするようにしています。ただ、たまに抜ける場合があるので、慌ててスケジュールを空けるときがあります。日程を決めておくと、意外と準備ができていて、順序良く仕事を終えることができます。

 

 

 

・「機会ロス」マニアになる

効率を高める際に外せない視点があります。それは「機会ロス」です。

例えば、買ってくれたお客様ではなく、買ってくれないお客様に焦点を当てます。コンビニなら、どんな人が「サラダ」を買っているのかではなく、なぜに「サラダ」を買わないかを探ることです。その「機会ロス」をなくすことが、勝ち筋を見つける手掛かりになります。

 

これもある程度実践するように気を付けています。営業に進捗を確認して顧客の反応を分析しています。好感触ならもちろん嬉しいですが、うまくいっていない場合は理由を聞いて、今後の課題として、次の目標にしています。

 

 

 

・最短距離で成果を出すためにKSFを1つだけ選ぶ

最短距離で成果を出すためには、「勝ち筋」が必要です。「ロジックツリー」を使いましょう。モレなく、ダブリなく要素を出した上で、「最も効果的だと思われる要素」を1つだけ選ぶ方法です。この要素のことをKSF(キー・サクセス・ファクター)といいます。

 

課題や問題を分析するのは重要ですが、私の場合は時間がなかなか必要になります。なぜなら、部署で相談すると、やった方が良いことばかり出てきて、結局、すべてやることになるからです。絞ってから、ひとつひとつやっていけば良いのですが、いちいち報告するなら、全部やってから報告しろという風潮だからです。周りの同僚もそこの部分はあきらめてしまっているのが現状です。

よって、この点はまだまだ改善されるべきですが、まだ力がないので、方法が分かりません。

 

 

 

・直感でいい。やることを3つに絞る

「KSF」を決めた後は、具体的な方法の立案です。ただし注意点は1つ。あれもこれもやらないことです。時間とパワーは有限です。だからこそ、パワーを集中させることを絞りましょう。やり方は、まず「やること」は3つ以下に抑えることです。

 

・「できるか、どうか」で迷わない

いざ、「やることを絞る」となると、躊躇することもあるでしょう。でも今日からは「できるか、どうか」ではなく、「やるか、やらないか」で考えるようにしてください。

成果に差がつくのは、能力の問題ではなく、「行動を起こせるかどうか」です。

迷った時こそ、あれこれを悩まずに「やるかやらないか」と考えてみてください

 

この言葉はとても参考になりました。私はまず、できるかどうか悩んでしまいます。そんな時は自分がやってみたときの想像ができないからです。

しかし、それではなく、やってみてうまくいきそうにないなら、周りや上司の助けをもらってやってみても良いのではないかと思いました。うまくいかないという結果が出てからではなく、予想する能力はあるのだから、すべてがダメになる前に相談して、方向転換できるようにしたら、負担はありますが、失敗してからの負担よりかは軽いと思っています。

 

 

つづく

 

 

定時で帰れて成果UP

どうもミトコンドリオンです。

 

残業が続いて疲れていたため、何とかできないかと思い、この本を読んで、ヒントがないか探してみました。

 

 

定時で帰れて成果UP

絶対に残業しない人の時短(しごと)のワザ

伊庭正康(いば まさやす)

 

著者は「株式会社らしさラボ」の代表取締役の方です。

リクルートグループで短時間で成果を出す手法を駆使した「残業レス」の仕事術で、リクルート社の全国年間トップを4回、計40回以上の表彰を受けた実績がある方です。

その後、営業部長、関連会社の代表取締役を歴任され、2011年、研修会社「らしさラボ」を設立し、「らしさ」を活かして、短時間で圧倒的な成果を出すことをテーマとした営業力強化、リーダーシップ、ストレス対策研修・講演・コーチングを実施されています。

 

内容としては、

なぜ人は残業するのか、必要性はあるのか。といった疑問から始まり、具体的な時短術と成果を出す方法を紹介されています。

 

読んでいて、はっとさせられたのは、

「残業は誰も望んでいないということです」

やっている本人もやりたくて残業してないし、まして上司(経営者)だったら、残業代は払いたくないから時間内で成果を出して欲しいし、特に誰も望んでいないということに気づきました。

 

 

これから読んでいて、私も実践してみようと思った方法をあげていきたいと思います。

 

1

残業からの脱出

 

・「残業をする理由」をすべて疑ってみる

大手企業で行われた従業員の労働時間と成果を調査したところ、労働時間が短い人ほど、「時間当たりの生産性が高く、好業績である」という結果があるそうです。

それでも残業してしまうのは“周りに迷惑かける“かも”、明日困る“かも”、評価を下げる“かも”、結果を出せない“かも”という不安があるからです。

また、上司の多くは「残業することを評価対象としてない」という現状です。

 

私も仕事が予定通りいかないかもしれないから、今日できるなら残業してでもやってみよう、まだ周りも残っているから残業しようという気持ちがあり、残業を習慣的にやっていました。しかし、上記の事を思い返すと、まあ今日最低限やることはやったから帰ってみようと心に決めてみました。

 

 

・一日を三毛作でスケジューリングする

「人は朝に活動すると、“幸せ感”が高まり、そして1日の活動の立ち上がりが早くなる」というデータがあるそうです。

ここでおすすめの方法が「朝活(出勤前)」「昼活(出勤中)」「夜活(退社後)」と1日を3つのパーツに分ける方法です。

 

残業が遅くなると、夜活(退社後)の時間は無くなってしまい、残業続きで疲れていると、朝はギリギリまで寝てしまうと朝活(出勤前)もできなくなってしまいます。

実際、私も仕事して、家ではご飯食べて寝るだけという生活を続けており、なんだか単調な繰り返しで満足感、幸せ感は全然感じていませんでした。

 

 

・疲れ果てる前に「My定時時間」を決める

最高の力を発揮し“続ける”ためにも、「自分の定時時間(My定時時間)」を持つことです。

残業疲れや風邪等の病気は自己管理の結果です。疲れていてはだめです。

 

社会人は自己管理が大切とよく言われますが、残業に関しては皆さん無視していませんか。

仕事の進捗管理も自己管理の1つです。また、残業中は集中力が低下しているので、生産性も低下しています。

なので、自分でMy定時時間とまではいきませんが、体や手を動かす業務は〇〇時までにして、その後はメール確認や書類業務など、時間があまりかからず、好きな時間に切り上げられる業務に当てようと思い、実施しています。

実際に〇〇時になって、デスクに戻って仕事しています。そうすると、残業時間を調整できるようになりました。本当に急な案件ではない限り、時間になったら帰れるようになりました。

 

 

 

・まず、1ヶ月は「早く帰る」と決める

「残業をしない」と覚悟を決めても、なかなか徹底できないのが現状です。そこで、「ルーティン」にしてしまいましょう。やらないと落ち着かないという状態にすることがカギです。

・早起きすること→いつもより素敵な1日を過ごせた→やめられなくなる

・横断歩道の線だけを踏む→無事に1日を過ごせた→やめられなくなる

ちょっとした行動は簡単に習慣になります。

 

途中で挫折してしまいましたが、個人的働き方改革をやってみようと、どんなに仕事が残っていてもこの時間になったら帰るという生活を1週間やってみました。1週間も続きませんでしたが、早く帰れた日は読書ができたので、素敵な1日が過ごせたなと幸せ感がありました。

 

 

この本を読んでいて、私たちの生活は仕事をするだけではないということを改めて気づかされました。第1章では残業することが本当に必要かという時短のための下準備の章でした。先に時短の環境を作ってしまうという荒療治ですが、やってみたら仕事以外の面で幸せ感を感じることができました。

 

次回からも紹介したいと思います。

 

 

KILLTASK[キルタスク]

どうもミトコンドリオンです。

今回はビジネス書ではなく、小説を紹介しようと思います。

 

 

KILLTASK[キルタスク]

 

行成 薫(ゆきなり かおる)

 

1979年生まれ。宮城県仙台市出身。東北学院大学教養学部卒業。2012年「名も無き世界のエンドロール」(「マチルダ」改題)で第25回小説すばる新人賞を受賞しデビュー。他の著書に「バイバイ・バディ」「ヒーローの選択」「僕らだって扉くらい開けられる」「廃園日和」「ストロング・スタイル」「怪盗インビジブル」「本日のメニューは。」「スパイの妻」がある。

 

「狙うのは、脳天(ヘッド)か、心臓(バイタル)。必ず、一発で仕留めろ」

殺し屋(エージェント)見習いとして生きることになった「僕」。平凡な人生を送っていたが、家族を皆殺しにされ、その罪を着せられそうになったところを2人の殺し屋「天使」と「悪魔」に拾われたのだ。淡々と殺人案件(キルタスク)をこなしていく2人の下、狙撃手として技能を磨く僕には、偶然ある真実を知る。殺された家族に残された、犯人の刻印。それは「天使」がターゲットに残す図形と全く同じものだった。

 

究極まで人生「詰んだ」僕に、殺し屋は問いかける

「生きるか死ぬか、どっちがいい?」

『名も無き世界のエンドロール』の著者が描く、疾走エンターテイメント

 

感想

 

冒頭は顔に包帯を巻いた記憶のない男の夢から始まります。

主人公は家族を殺した罪を着せられた理由で表の世界では生きることができなくなり、生きるためにはKILLTASK(殺し案件)を遂行するしかない裏世界の住人となりました。

そこで出会った天使(伊野尾)と悪魔(辰巳)とともに殺し屋見習いとしてKILL TASKに携わっていきます。

 

疾走エンターテイメントということもありストーリーが次々に進むので、どんどん先が汁たくなります。設定が漫画やドラマ、映画等になりやすいと思いました。ただし、次々に話が進むので、主人公の心理は殺人はいけないが生きていくためには「しかたない」という結論でKILLTASKに向かうので、入り込みにくかったです。

また、ストーリーはそれぞれの登場人物視点になったり、時系列がバラバラだったりします。そこで登場人物たちが複雑に絡んでいきます。あー、あの時の人はこの人だったのかなど気づきがあります。徐々に分かる秘密や家族が殺された理由、天使と悪魔との関係、なぜ主人公がこの状況になったのかなど、徐々に分かっていきます。悪く言えば、うまくいきすぎる感が強いです。

もしかすると察しの良い方は先が読めてしまうかもしれませんが…。しかも、映像化するとネタバレになる部分もあるので、難しいかもしれません。残念。

 

読んでいて、KILLTASKを実行しているところはステルス系ゲーム、ミッション系のアクションゲームのようなシーンが頭に浮かびました。

ターゲットの後ろから忍び込んだり、建物から逃げるときだったり、狙撃手としてターゲットを狙うときなど、操作できたら面白いと思いました。でも、ストーリーありきのため、行き過ぎた行動ができないので、完全なゲーム化は無理ですが。

 

久々に物語を読みましたが、頭の中で人物が動いたり、風景が浮かぶので、面白かったです。たまには読んで想像力を使うのも良いと思いました。

 

 

 

はたらくプログラミング④

はたらくプログラミング④

 

どうもミトコンドリオンです。

 

プログラミングについてわかりやすく漫画化した「はたらくプログラミング」についての説明のつづきです。

 

「はたらくプログラミング」

著者 とりたす

監修 ウェブカツ!!

 

 

用語説明

 

ポスト変数($_POST)

「POST通信」でブラウザ側から送られてきたデータが格納される変数。

連想配列(インデックスに文字列を使用できる配列)の形式になっている。

 

キャッシュ

画像やHTMLのデータなどをインターネットを閲覧する側のブラウザに保存することにより、表示速度を向上させるもの。

 

form(フォーム)

入力・送信フォームを作成するHTMLタグで、inputをはじめとする入力フォームたちのまとめ役。フォームに入力されたデータは、送信ボタンを押すことでサーバー側のプログラムへと送信される。

HTMLの子分。

 

POST通信(ポストつうしん)

サーバーへ情報を登録する際に使用するHTTP通信の1種。

データ量が多いファイルや、他の人に見られたくない情報などをPOST通信で送信する。

 

バリデーション

フォームに入力された値が正しい形式になっているかを確認すること。

入力項目ごとに、未入力チェック、文字の長さチェック、形式チェックの処理を用意する。IF文が大活躍する処理。

PHPのIFが実行しているとき、北斗の拳ラオウに見える瞬間がある。

 

PDO(ピーディーオー)

データベースを操作する際に使用するPHPの「クラス」の1種(HTML/CSSの「クラス」とは別)。データベースへの接続やオプションの設定、SQL文の用意などデータベースの操作に関するさまざまな機能をもっている。

メガネをかけたインテリっぽい男性。

 

PDOによるデータベース接続

データベース名、ユーザー名、パスワード、オプション設定などを指定した「PDOクラスのオブジェクト」を生成することによって、特定のデータベースに接続する。

 

通常、データベースはPHPなどのプログラムが動いているWEBサーバ(アプリケーションサーバ)の近くの別サーバに構築され、有線で接続されている。

 

データベース

データを保管しておく倉庫。必要なタイミングでデータの取得、追加、更新、削除をすることができる。基本的には、データを表形式で扱う「ROB」(リレーショナル・データベース)を指す。

 

SQLエスキューエル/シークェル)

データベースの定義や操作を行う「データベース言語」の一種。SQLを使用するデータベース管理システムの例として「MySQL」などがある。

老人。PDOからはご老公と呼ばれている。

 

データベース

膨大な量のデータを効率的に扱うために行と列で構成される複数の「表」としてデータ管理されている。

 

テーブル

特定の種類のデータ一覧を保存しておく「表」にあたるもの。1つのデータベースの中に複数のテーブルを作成することができる。「ユーザー」や「商品」などの要素ごとにテーブルを分ける。

 

レコード

1件ぶんのデータを保存しておく「行」にあたるもの。例として、ユーザー情報テーブルのレコードにはあるユーザーのID、名前、自己紹介文、画像などの情報が収められている。

 

プライマリキー

テーブル内のレコードを識別して紐づけるための値。他のレコードと重複しない、短い数字などで扱いやすい、といった性質を持たせる必要がある。

 

テーブルに格納するデータの形式

Integer:整数

Character:文字列

Date:日付

Boolean:論理値(0または1)

 

カラム

レコードのそれぞれの項目を示す「列」にあたるもの。テーブルの作成時にあらかじめ指定する。必須の項目がない(または余計な項目がある)データを登録しようとするとエラーが発生する。

 

insert(インサート)

データベースに新しいレコードを挿入するSQL構文。

 

リストのサムネイル表示

データベースに登録された情報を繰り返し処理を用いて表示する。PHPでは、データの数だけ繰り返し処理を行う「foreach」を使用するのが一般的。

 

select(セレクト)

データベースから指定のデータを取得するSQL構文。

 

連想配列

数字の「インデックス」の代わりに文字の「キー」をラベルに使用した配列。「name」と書かれた箱の中に「Taro」という値が入っている、という感じ。

 

 

実務では、プログラミング言語をそのまま書くだけでなく、便利な機能を備えたライブラリやフレームワークを利用します。

CSSが塩対応をするライブラリ「Bootstrap」

PHPとHTMLの結びつきが強いコンテンツ管理システム「WordPress

JavaScriptがHTMLとCSSを統括するフレームワーク「Vue,js(VueCLI)」

 

Ruby(ルビー)

PHPと同じく、サーバ側で動作するプログラミング言語

王子様風。

 

Ruby on Rails(ルビー・オン・レイルズ)

Rubyの代表的なフレームワークRubyといえばRailsと言われるほど有名。品質の良いWEBアプリケーションを簡単に作れるため、日本のスタートアップ企業が自社のサービスに導入する例が多い。

レイルズは愛馬の名前。

 

フレームワーク

よく使われる汎用的な機能をあらかじめ装備したソフトウェア。WEBアプリケーションをより速く簡単に作れるだけでなく、複数人開発でコードの書き方を統一させることができる。

 

jQuery(ジェイクエリー)

正確には「ライブラリ」の一種。古くから利用されており、DOMノードをセレクタを使って操作したり、イベントハンドラ、アニメーション、そして非同期通信(Ajax)などの機能をより簡単に実装できる。

 

Ajax(エイジャックス)

非同期通信でページを読み込むjQueryのメソッドの1つ。「ajax」はAsynchronous JavaScript + XML の略で、JavaScriptでデータの非同期通信を行う技術のこと。

 

非同期通信(Ajax通信)

サーバにHTML形式ではないリクエストを送信することで、ページの一部を更新できる通信手段。HTMLを読み込む通常のHTTP通信(同期通信)と違い、任意のタイミングでデータを取得・反映でき、また通信中もほかの処理を行えることから、「非同期通信」と呼ばれる。

 

オートコンプリート

文字入力の補助機能の1つ。ユーザーが入力しはじめた先頭の数文字から推測される入力候補を一覧表示し、その中から選択できるようにする方式。jQueryのautocompleteメソッドで簡単に指定することができる。

PHPJavaScriptの共同作業で実行している。

 

以上。

 

プログラミングについて何も分からない方には、どんな風にプログラミングが動いているか少しは想像できるかもしれません。

まんがなので、手に取りやすいと思うので、おすすめです。

 

 

 

 

はたらくプログラミング③

どうもミトコンドリオンです。

 

プログラミングについてわかりやすく漫画化した「はたらくプログラミング」についての説明のつづきです。

 

「はたらくプログラミング」

著者 とりたす

監修 ウェブカツ!!

 

 

用語説明

 

IDとクラス

HTMLを構成する各要素を識別するための名前で、目印のようなもの。IDは1つのWEBページ内で重複できないが、クラスは同じものを何度でも使える。

 

header(ヘッダー)

ヘッダー部分を定義するタグ。

HTMLの子分。

 

main(メイン)

メインコンテンツ部分を定義するタグ。

HTMLの子分。

 

footer(フッター)

フッター部分を定義するタグ。

HTMLの子分。

 

HTMLの構造

HTMLは階層構造になっており、適切なタグで囲むことで文書に意味を持たせている。

 

エージェント・スミッス(クローラー

世界中のWEBページの情報を取得し、そのページの情報を検索エンジンのサーバーへ持ち帰って蓄積する。

 

SEO検索エンジン最適化)

クローラーは、WEBサイトのコンテンツの質やHTMLが論理的な文書構造になっているかなどを定期的に評価しており、その評価によって検索エンジンにおける検索順位が上下する。

 

ノード

タグによって定義されたHTMLの各要素のこと。IDやクラスを目印としてノードを指定する仕組みをDOM(Document Object Model)と呼ぶ。

 

CSSクレタ

どの要素にどのようなプロパティを適用するかを指定する方法。ID、クラス、タグ名で直接指定するだけでなく子ノードや親ノード、兄弟ノードなどを間接的に指定することもできる。

 

DIV(ディブ)

単体では特に意味を持たないが、囲った部分をブロックレベル要素(文書を構成する基本要素)としてグループ化する。

HTMLの子分。

 

position(ポジション)

要素の位置を決めるCSSプロパティ。設定した値によって基準位置が変わる。

CSSの妹分。

relative:現在位置からの相対的な位置

absolute:親要素を基準にした絶対的な位置

 

ID/クラスとセレクタ

CSSがうまく反映されないときは、HTMLで指定したID/クラス名と、CSSセレクタの内容が一致しているか確認しよう。初心者のうちはID/クラス名のタイプミスも多い。

 

hover(ホバー)

要素が特定の状態にある場合のスタイルを指定する「疑似クラス」の1つ。Hoverは、要素の上にマウスカーソルが乗ったときのスタイルを指定する。

CSSの妹分。

 

Transition(トランジション

CSSプロパティが変更された際に、一定の時間をかけてスタイルが変化(すなわちアニメーション)するように設定できるプロパティ。

CSSの妹分。

 

カーソル

ユーザーの現在の入力位置を指し示すマーク

 

input(インプット)タグ

ユーザーが入力したさまざまなデータを表示および保持する。Text(1行のテキスト入力)、checkbox(チェックボックス)、passwoord(パスワード用)など数多くの種類がある。

HTMLの子分。

 

getElementByld/Class

HTML文書内から、指定のIDまたはクラスを持つノードを検索するJavaScriptの基本的なメソッド。似たものに“querySelector”があるが、こちらは「セレクタ」でノードを指定する。

 

イベント

マウスボタンをクリックした、ページが読み込まれた、などの動作が起こったときに発生する。イベント発生時の処理を記述することを「イベントリスナを登録する」という。

 

addEventListener

ターゲットに特定のイベントが発生した際に、指定の関数を実行するJavaScriptの基本的なメソッド。

 

keyup(イベント)

何らかのキーを押したあとキーを離した際に発生するイベントの1種。

 

length(レングス)

文字列や長さや、配列の要素数を表すプロパティ。

 

span(スパン)

HTMLタグの1種。Spanタグで囲った文字は「インライン要素(文章の一部として扱われる)」としてグループ化される。

HTMLの子分。

 

innerHTML

HTML要素の中身を取得したり、書き換えたりできるプロパティの1種。

 

button(ボタン)

ボタンを作成するHTMLタグの1種。HTMLの子分。

 

click(クリック)

ターゲットの要素をクリックした際に発生するイベントの1種。

 

イベントの発火

指定のイベントが発生して関数が実行されることをイベントが「発火する」と呼ぶ。

 

display(ディスプレイ)

要素の表示形式を決めるCSSプロパティ“display:none”に設定すると要素が表示されなくなる。レイアウトにも影響を与えないので、見かけ上、完全に無いものになる。

 

classList(クラスリスト)

要素の持つクラスにアクセスできる。

classList.addでクラスの追加。

classList.removeでクラスの削除を行うことが可能。

 

複数条件セクレタ

特定の2つ(またはそれ以上)のクラスを持つ要素に対してのみ適用するプロパティを指定したCSSクレタ。“.modal.show”のように記述する。

 

transform(トランスフォーム)

要素を動かしたり大きさを変えたりするCSSプロパティ。

CSSの妹分。

 

opacity(オパシティ)

要素の透明度を指定するCSSプロパティ。

0.0:完全な透明。1.0:完全な不透明。

CSSの妹分。

 

モーダルウィンドウ

WEBページの全画面が覆い隠され、重要なメッセージが表示される。ユーザーに見せたい状態だけを見せるのに効果的。アニメーションを付けて表示する場合が多い。

 

 

つづく

 

 

はたらくプログラミング②

どうもミトコンドリオンです。

 

プログラミングについてわかりやすく漫画化した「はたらくプログラミング」についての説明のつづきです。

 

「はたらくプログラミング」

著者 とりたす

監修 ウェブカツ!!

 

用語説明

 

バグ

「悪さをする虫」の意味。主に、プログラム内部にひそむ不具合(エラー)のことを指す。

あるストーリーではPHPがバグを起こしてゾンビ化した。

 

500 internal server eroor (サーバー内部エラー)

ユーザーがアクセスしたプログラムの文法が誤っている場合になどに表示されるエラー。

 

エラーメッセージ

文法の誤りなどにより正しく動作しない箇所があるとそのエラーの内容が出力される。

ゾンビ化した(バグを起こした)PHPがずーっとつぶやいていた。

 

原因調査

不具合が生じた際にエラーメッセージを確認してプログラムの内容(ソースコード)を修正する作業。

 

セミコロン

PHPJavaScript言語で「1つの命令文の終わり」を意味する記号。

PHPの場合はイヤリングがセミコロンの形をしており、それを落としたことでバグが起こった。

 

エラー

JavaScriptPHPなどのプログラミング言語は、セミコロン(;)やカッコの書き忘れなどの些細な文法ミスでエラーが発生して動かなくなる。プログラミング初心者は見落としやすい

 

各言語のエラー

マークアップ言語であるHTMLやCSSは、文法ミスがあってもエラーにならない。また、JavaScriptPHPよりもやや文法にゆるい言語である。

本編ではバグを起こすのはPHPだけ。起こすと厄介なことになる。

 

変数

プログラミングの基本的な要素。数値や文字列の出し入れができ、自由に名前を付けることができる。

例:10文字以上ならその文字をユーザーに見せろ

 

console.log

「コンソール」と呼ばれるブラウザの入出力画面に変数の中身などを表示する。

 

コンソール

ブラウザに表示中のWEBサイトの状態を確認することができる。

 

if(イフ)

指定の条件を満たす場合と満たさない場合に別々の処理を行うための制御構文の1つ。

JavaScriptの使い魔。

 

false(フォールス)

if文の条件分岐の判定結果のひとつ。

「正しくない」「偽りの」という否定的な意味を持つ値。

 

true(トゥルー)

if文の条件分岐の判定結果のひとつ。

「正しい」「真の」という肯定的な意味を持つ値。

 

alert(アラート)

指定されたメッセージをポップアップ(ダイアログ)でブラウザの画面上に表示するメソッドの1つ。

JavaScriptの使い魔。

 

警告ダイアログ

alertで指定したメッセージと「OK」ボタンを持ったダイアログ。一般的にメッセージを表示するために使用される。

 

「ポップアップウインドウ」や「カウントダウン」とかもJavaScriptで作成が可能。

 

配列

変数の集合体。

インデックスを指定してその番号の変数を使用する。

 

インデックス

配列内の各データの識別番号。0からはじまり、データが追加されると自動的に増えていく。

 

FOR(フォー)

1つまたは複数の任意の処理を指定回数だけ繰り返す、PHPの制御構文の1つ。

PHPからはフォー先輩と呼ばれている。ロン毛でチャラそう。

 

カウンタ変数

繰り返し処理で使われる現在の繰り返し回数を示す値。1回の処理が終わるごとに1ずつ増やしていく。

 

IF(イフ)

指定の条件を満たす場合と満たさない場合に別々の処理を行うための制御構文の1つ

PHPの制御構文の1つ。

いかつい見た目だが、紳士的。

 

echo(エコー)

PHP内部で処理した計算結果や変数などの情報をHTMLに反映させる。

 

構文の例文

for(var i=0; I < 9; i++) {var temp = array[i]; →FORが「0」から「9」まで同じ処理を繰り返す。(※この数字は、配列のインデックスに対応している)

if(temp.length >= 10) { →FORの指揮下にいるIFが条件判定を行う。

echo temp;  →IFの指揮下にいるechoが処理を行う。

}締めのカッコ

}締めのカッコ

 

ローカル環境

プログラマのPC。インターネットを介さずにファイルに直接アクセスできる。ここでプログラムの動作確認を行う。

 

console.log(コンソール・ログ)

ブラウザの「コンソール」に変数の中身などを表示する。

JavaScriptの使い魔。

 

FOR(フォー)

1つまたは複数の任意の処理を指定回数だけ繰り返す。PHPの制御構文の1つ。

JavaScriptの使い魔。JavaScriptも使用できる構文。

 

function(ファンクション)

よく利用する処理をまとめて管理したり、使いまわしたりできる「関数」を宣言する。プログラミングの重要な要素。

JavaScriptの使い魔。

 

関数(かんすう)

複数の処理を1つにまとめたもの。1つの独立した処理として、何度でも使いまわすことができる。

 

ローカル変数

JavaScriptの場合、関数の中で宣言した変数はその関数の中でしか使えない。同じ名前の変数を宣言して中身が上書きされるのを防ぐ。

 

引数(ひきすう)

関数を呼び出すときは、いくつかの値を渡すことができる。関数は受け取った値を処理して、実行結果に反映させることができる。

 

戻り値

関数内で処理した値。関数の成果報告ともいえる。戻り値のある関数の呼び出しはこの戻り値に置き換えられる。

 

引数のある関数

多くの言語では、引数が不足していると関数は動かない(エラーになる)。ただし、引数に初期値を設定すれば、引数が渡されなくても動く。ちなみにJavaScriptは引数がなくても動いてしまう。

 

HTMLだけでもWEBサイトは作れる。

 

 

つづく

 

 

はたらくプログラミング

どうもミトコンドリオンです。

 

昨今、副業を認める企業が増えてきました。

自分のスキルアップ、収入を増やす、働き方改革等を目的に副業を始める人も増えてきたと思います。

 

副業の種類にもいろいろありますが、私が気になっているのは「プログラミング」です。

副業目的以外でもプログラミングを理解する、構築できると日常生活にも活かせると思うからです。

 

プログラミングに興味を持ったのですが、どう始めたら良いかわかりませんでした。ネット検索してもいろいろ言語やソフトの情報が出てくるのですが、仕組みについてあまりイメージができていませんでした。

 

そこで出会ったのがこの本です。

「はたらくプログラミング」

著者 とりたす

監修 ウェブカツ!!

 

テレビアニメの第2シーズンがはじまった「はたらく細胞」にちょっと似ているような気がします。

擬人化することでどんな動きをしているのか、どんな関係性なのか、がわかりやすくなっていました。

まんがになっているので、専門家の方にしてみたら、間違っている部分があるかもしれませんが、初心者、素人の私にしてみたら、イメージしやすい内容となっていました。

 

下記に登場人物や用語の説明を記載していきます。

 

 

JavaScript(ジャバスクリプト)

プログラミグ言語の1つ。WEBサイトに動きをつけるために使用されることが多い。

新入社員としてドメインに配属になる。女性。

はじめてなのでどうしてよいか分からない。また、自分についても知らないことが多い。

帽子をかぶっているが、髪の毛が一部はねている。「はたらく細胞」の主人公である赤血球のはねた髪の毛っぽい?

 

PHP(ピーエイチピー)

サーバー側で動くプログラミング言語

新たに配属されたJavaScriptに対して、はじめは冷たく接する。男性。

次第に仕事ぶりを評価し、協力するようになる。

 

HTML(エイチティーエムエル)

WEBサイトの構造を作るマークアップ言語。

WEBサイトの土台を作る大工さん的容姿の男性。

細かいことは気にしない。CSSとは昔からの仲。

 

CSS(シーエスエス

WEBページのスタイルを指定する言語。

JavaScriptにいろいろと教えてくれる。おしゃれで露出が多めな服装の女性。

HTMLとは昔からの仲。

 

HTTP(エイチティーピーピー)

インターネットの通信方式の1つ。サーバー/ブラウザ間のファイルのやり取りを行っている。

HTMLやCSSJavaScriptをサーバーからブラウザに運んでくれる。

船の船長さん。ワンピースの白ヒゲっぽい髭を蓄えている。笑い方はガハハ。

 

ブラウザ

HTMLやCSSなどのファイルを解析してWEBページを画面に表示する。

海に浮かぶ島にたとえられている。

 

サーバー

海の上に建てられたオフィスみたいにたとえられている。

ここにJavaScriptPHP、HTML、CSSは待機している。

 

ユーザー

ブラウザを通してWEBページを見ている。

空に浮かぶ太陽みたいな眼にたとえられている。JavaScriptたちは眼が開き切る前に仕事を終わらせないといけない。じゃないとWEBページが表示されないことになる。

 

エージェント・スミッス

ブラウザのルールに反するものを察知して捕える。めっちゃ強い。

ブラウザの管理人。マトリックスのスミスみたいな容姿。

WEBサイトの開発に関するさまざまなツールを提供している。

 

設計書

本作ではHTMLファイルを指す。HTTPを介してリクエストされ、PHPの処理が終わった後の状態。

これをもとにWEBページが構成される。

 

body(ボディ)タグ

HTMLの記述のうち画面上に表示する部分。コンテンツの土台となる。

 

h1タグ

文章の「見出し」を定義するタグ。

HTMLの子分。

 

pタグ

文章の「段落」を定義するタグ。

HTMLの子分。

 

img(イメージ)タグ

WEBページの中に画像を挿入することができるタグ。

HTMLの子分。

 

CSSプロパティ

大きさ、色、フォント、余白、境界線、配置、アニメーションなど、さまざまな種類のスタイルを指定することができる。CSSの能力(妹たち)。

 

width/height

要素の幅と高さを指定するプロパティ。

CSSの妹分。

 

border

要素の境界線の太さ、色、種類を指定するプロパティ。

CSSの妹分。

 

background-color

背景の色を指定するプロパティ

CSSの妹分。

 

color

文字の色を指定するプロパティ。

CSSの妹分。

 

ブラウザ側をフロントエンド、サーバー側をバックエンドと呼ぶ。

 

つづく