誰でも出来る！効率良くプログラムを書くたった1つの考え方
「参考書やサイトのサンプルで長いコードが書かれてるけどこんなに書くの…？」
「仕事のプログラムって毎回膨大な量を書かなきゃいけなくて大変そう…」
実は現場ではコツさえ掴んでしまえばそれほどコードを書かなくて済みます。
ここではプログラムを書く際の基本中の基本、王道的な考え方を教えます。
■テンプレート
早速結論からですが、それはテンプレートと呼ばれる、良く使うコードを予め用意しておくことです。
なぜテンプレートが有効かというと、ゼロから書くよりも時短・効率的になるからです。
仕事現場では様々な案件がありますが、たとえば「会員登録」「メールマガジン」「コメント投稿」など良く見るような機能は作り方もほぼ同じなので、一度テンプレートを作っておけば流用できます。
■テンプレートが無いとどうなるか？
私自身の経験談ですが、初めて入社したwebの会社で、ほぼゼロの状態からプログラムを書くことがありました。
しかし、先輩から「研修で使ったソースを元にして作っていいよ」と言われ、
そのとおりにやってみると、研修で使った機能がそのまま流用できる箇所が多く、
簡単なコピペでほぼ実装できることもありました。
もしテンプレートがなかった場合、本当に白紙の状態から書くことになっていたので、スケジュール的にも全く間に合わなかったです。
また、コピペと違って毎回微妙に違うコードになったり、タイプミスの可能性もあったりするので、バグが出来る原因にもなります。
テンプレートの有無をまとめると以下のようになります。
○テンプレートを使う場合
・以前使ったコードをコピペするだけなので簡単＆速い
・完成しているコードを使うので質が高い
・以前使ったことのある機能なので内容がだいたい理解できている
✕テンプレートがない場合
・ゼロからプログラムを書くので時間がかかる
・毎回微妙に違うコードになったり、タイプミスの可能性もあって不安定
・初めて使うコードなので、想定外の動作の可能性も高くなる
■テンプレートの作り方
テンプレートの重要性が理解できたところで、具体的な作り方を説明します。
基本的には作成中or作成済みのプログラムを基に切り取る形で構築していきましょう。
既に書いてあるものなので新しく書く必要がないですし、実際に使われているプログラムの方が応用しやすいです。
また、同じコードを使い続けていると、段々と細かい機能を追加してパワーアップできます。
これがとても重要で、そうして肉付けしていったテンプレートは自分にとって最強の武器と言ってもいいくらいに育っていきます。
5～7件も案件をまたいだテンプレートならば相当に使えるレベルになっているはずです。
仕事が増えるほどプログラムのレベルも上がり、さらに時短もできる、メリットしかありません。
今まで学習したプログラムからでも、十分にテンプレートは作れると思います。
似たような課題が出てきたら、昔書いたコードを流用してみてください。
気付いたら自分だけのテンプレートが出来ているはずです。
初心者でもカンタンに複雑なサイトを作れるたった1つの方法
私がまだ駆け出しエンジニアの頃、覚えることが多くて勉強がしたいのに
仕事は待ってくれずどんどんたまっていく…そんな日々を送っていました。
いつもと同じようにGoogle検索で調べている時に、ふと気付いたことがありました。
それからというもの、今まで苦労していた仕事がカンタンに完了できたり、
自分の中で明らかにレベルアップした感覚がありました。
当時の先輩からも「一皮むけたんじゃない？」と褒められた記憶があります。
この方法はすごく応用が効くので、一度覚えてしまえば長く使えるテクニックです。
逆に言えばこれを知らないと長い間苦労することになります…。
■ライブラリを活用する
その方法とは何か、結論としては「ライブラリを使う」ということになります。
ライブラリとは、予め用意された機能のまとまりです。
プログラムの中の１つのパーツと言い換えても良いです。
例えば「サイト内検索」「カレンダー」「郵便番号を入力すると住所が出てくる」など、様々なものがあります。
「カレンダー」…Hotpepper、美容院などのサイト
「郵便番号」…会員登録フォームなど
このように、有名なサイトでも多く使用されています。
つまりこれらの機能は利用ニーズも多く、覚えておくだけで仕事の幅も広がります。
■ライブラリのメリット
なぜこれを使うとレベルアップできるかというと、以下のような理由が挙げられます。
・時短/効率化ができる
例えば「カレンダー」をゼロから自分で作るとなると、その分の工数がかかってしまいます。
しかしライブラリは既に「カレンダー」として完成されているパーツなので、実質工数はゼロとなります。
・品質が保証されている
既に完成しているパーツと言いましたが、つまりバグも基本的にはありません。
もちろん例外的なバグもありますが、それでもゼロから作るよりははるかに安定した
品質が保証されているでしょう。
・自分好みのカスタマイズもしやすい
「カレンダーの祝日の色を変えたい」など、自分好みのカスタマイズもしやすくなっています。
ライブラリは多種多様の案件で利用ニーズがあるため、様々なオプションが用意されています。
オプションAは使いたいけどBは使いたくない…といういろいろな人のニーズに応えられるような作りになっているものがほとんどです。
■ライブラリの使い方
では、ざっくりとライブラリの使い方を説明します。
以下の３ステップです。
１．Google検索で調べる
２．ライブラリをダウンロードする
３．開発中のサイトに組込み、設定する
ほとんどのライブラリが、組み込み＆設定の方法を説明されています。
なのでライブラリのページを見れば実装は出来るでしょう。
しかも大体が１～数行のコードを書くだけで、その機能が使える状態になるため、工数は本当に30分とかのレベルです。
前述しましたが、ゼロから作ったら2～3日かかるような作業が30分。使わない手はありませんね。
ここではライブラリに関してご説明しました。
どうせなら効率的にスキルを身に着けて、早く仕事として確立させたいですよね。
まだ使ったことのない人も、チャンスがあれば是非使ってみてください！
【厳選1種のみ】IT業界に挑戦するための必須マインド
私の友人で、未経験からエンジニアになりたいという人が居ました。
その人は正社員自体の経験もなく、バイトや派遣での職種もバラバラで、エンジニアになりたい理由も「間違いなさそうだから」「手に職がほしいから」など不明瞭なものでした。
友人なのでアドバイスをしようと思っていたんですが、正直口を閉ざしてしまいました…笑。
私は企業勤めしていた時期に何度もリーダーとしてプログラマの採用面接を担当しています。
その時にも上記のような方はいらっしゃいましたが、ただ1つ、明確に違う点があれば採用の判断をすることもありました。
それは何でしょう？スキル？少なからずの経験？
この記事では、それが何かを解説しようと思います。
■状況分析ができること
では早速結論ですが、それは「状況分析ができること」です。
さらにはその状況を他人に説明できることをここでは指します。
例えば上記のような方が面接で来られた時、私は良くこう質問してました。
「出来ることと出来ないことを教えていただけますか？」
これに対し、例えば「今まで事務職だったので基本的なPC操作は問題なく、タッチタイピングもできます。プログラミングは趣味でhtmlを少し触ったことがある程度で、javascriptやRubyなどは言葉を知っているくらいです。」
これだけで十分なのです。
何故かというと、そもそもこちらは教える前提です。
教える側としては何を教えれば良いのか・何は教えなくてもいいのかが知りたい。
要は自己分析と目的(相手が何を求めているか)を踏まえて、要領の良い説明ができるかどうか。
これがエンジニアに取ってとても重要なスキルになります。
逆にこれが無い人だと、
「何もできません」→「何も」とは？
「プログラミングは未経験です」→じゃあ何なら経験あるの？
「htmlは知ってます」→じゃあ何を知らないの？htmlは完璧なの？
など、端的で何度も会話のやり取りが発生することになります。
ここで言いたいのは、面接時のやり取りが面倒というわけではなく、実際の仕事でお客さんがどういう状況で何を求めているかを正確に把握できるかどうか、ということです。
■状況分析ができるようになるには
ではどうすれば状況分析ができるようになるでしょうか？
色々なやり方があると思いますが、ここでは私がいつも行っている、メモ帳で出来る簡単な方法をご紹介します。
例として「買い物」について考えてみましょう。
今日の夕飯と、明日からの作り置きに必要な食材。それから乾電池、ティッシュ、洗剤などが必要とします。
まず「食材」「消耗品」と大きく分けます。
そして食材はそれぞれいつ食べる用なのか、どの料理に必要なのか、と分けていきます。
消耗品も同じ要領で、どこで・何に必要なのかで分けていきます。
そうすると以下のようなツリー状のメモが出来ると思います。
・買い物
└食材
└今日の夕食分：コンビニ弁当
└来週の作り置き
└浅漬け：きゅうり、わかめ、浅漬のもと
└生姜焼き：豚肉、玉ねぎ、キャベツ
└ポテトサラダ：じゃがいも、きゅうり、人参
└消耗品
└キッチン：スポンジ、洗剤
└その他：電池、ティッシュ
└その他：コンビニで申請書のコピー、PASMOのチャージ
上記が直感的にできるようになってくると、実際の仕事でも
「通販サイトを作りたいんだけど…」→「どんな商品？カテゴリは？支払い方法は？ターゲット層は？更新頻度は？誰が更新？」
などと必要な確認事項が瞬時にツリー状に頭に浮かび、クライアントに聞いて穴埋めしていく感覚が得られるようになります。
このように、状況分析は今からでも簡単に身につけられます。
この記事を読んだら、早速買い物メモを作ってみてください。
日常生活の中で意識するようにして、エンジニアに必要なマインドを修得しておきましょう！
【現場で当たり前に使う知識】要件定義/設計/デザイン編
※前回の記事を先に読むと理解が深まります。
「仕事の流れはなんとなくわかったけど、具体的にどうやるんだろう？」
「このまま現場に入っても大丈夫かな？」
そんな不安を感じてはいませんか？
ここでは現役エンジニアである筆者が当たり前のように使っているノウハウをお教えします。
もちろん自分で実際に経験して慣れていくことは必要ですが、
知ってるのと知らないのとでは雲泥の差があるでしょう。
今回は前編として要件定義/設計/デザインの3つを解説していきます。
１．要件定義
まずはどんなサイトにしたいのかをヒアリングし、文章や資料にしていきます。
・どんな人が利用するのか(性別、年齢、居住地域、好みなど)
・いつ利用するのか(朝の準備中、昼休み、夜ゴールデンタイムなど)
・なんのために利用するのか(悩みを解決したい、生活基準を上げたい、緊急で必要など)
基本的には上記のような、所謂5W1Hを基にヒアリングします。
また、雑談から思わぬヒントやサイトの根本となるべきテーマが見つかる場合もあります。
例えばビールの新商品LP案件で、「この商品、ドイツの○○ってビールと味が似てるらしくて…」というような雑談が出た場合、
「本場ドイツの○○ビールのような味わい」というキャッチコピーを見出しやバナーに入れたり、ドイツの国旗や現地のビアバーの写真素材を使ったり…という提案が出来たりします。
２．設計
お客様から聞いた要件を、具体的にどう作っていくかを設計します。
例として一般的な会員登録画面を想像してみてください。
画面としては「入力」「確認」「完了」の3つ。
入力画面の機能としては「初期表示」「エラーチェック」「確認画面への遷移」
確認画面は「入力項目の表示」「入力へ戻る」「登録して完了画面へ遷移」
完了画面は「データの最終チェック」「データベースへの登録」「完了メッセージ表示」
この辺りが最低限上がってくると思います。
上記のように、プログラムをどういう構造で、どういうパーツ(機能)に分けるのか。
各パーツはどういう機能を持たせて、どういう時に使うのかを考えていく作業が設計です。
プログラミングはプログラム言語で書きますが、設計は日本語で書きます(考えます)。
プログラミングはハードルが高いかもしれませんが、日本語であればできるはずです。
一般的なサイトを参考に骨組みを考えていき、クライアントの要件を満たすような設計をしていきましょう。
３．デザイン
概要の記事で、基本はノータッチですと書きましたが、可能であれば携わりたい工程でもあります。
理由としては、最初の要件定義でクライアントからいくら要望を聞き尽くしたとしても、実際にデザイナーがデザインした画面を見ると、細かい要望が新たに出てくる場合がほとんどだからです。
プログラマー視点だと、要件定義から設計を考えていたのに、デザインを見たら聞いてない仕様が追加されている…プログラマーあるあるです(笑)。
人間は言葉や文章だけよりも画像や模型がある方がイメージがつきやすい生き物なのでこれは仕方ありません。。
逆を言えば、要件定義の際にも、ある程度の画面イメージや操作方法などが資料としてあると、認識のズレが起こりづらくなります。これを専門用語でプロトタイピングといいます。
４．プロトタイピング
私の経験上、大規模な会社や老舗企業はプロトタイピングをやりたがらないです。
理由はいくつかありますが、主に社員の役割分担がきっちりしている弊害でしょう。
要件定義はディレクターがやるもの、デザインはデザイナー、開発はプログラマーとなると、要件定義の段階でデザイナーやプログラマーを同席させづらいのです。
今私はフリーランスで主に個人でやっているので、このあたりは流動的にやっています。
最初の依頼がメールやチャットで来て、ある程度のイメージが浮かんだらもう簡単な画面と疑似サイトを作ってしまいます。
そしてそれを基に本番の要件定義を行うのです。まさにプロトタイピングですね。
そうするとお互いのイメージが統一され、クライアントからの要望も出やすくなり、誤解も減ります。
もし今後入社する企業でこういった手法が取られていたら当たりだと思っていいでしょう。
まとめ
・要件定義
・設計
・デザイン
・プロトタイピング
【現場で当たり前に使う知識】概要とスケジュール感編
「ブログや動画で学んだことだけで本当に現場で通用するんだろうか…？」
「いざ仕事が来たときも慌てずに取り掛かれるだろうか…？」
学習中の方なら必ず不安に感じることだと思います。
私自身も、かつて独学でPHPを勉強していましたが、
現場に入ってから「あの時これを知っていれば…！」
と思うことが多々ありました。
このブログを見ている方は現役エンジニアの実体験を元に
最高効率の学習が出来ますのでご安心ください！
今回は、実際の案件がどういう流れで進むのか、その概要を
お伝えします。
これを知っておけば、案件に携わった時に何をすればいいのか、
次の段階に向けてどういう心積もりでいればいいのかなどが
予めわかるようになります！
■概要とスケジュール感
要件や規模、予算によってピンキリですが、ここでは1ヶ月程度の
比較的簡単なHP作成を例にします。
１．要件定義：2～3日
どんなHPにしたいのかをヒアリングし、文章や資料にしていきます。
誰向けのHPなのか、どういう目的なのかなどを聞き、
目的達成を目指して「要件」としていきます。
２．設計：5～7日
お客様から聞いた要件を、具体的にどう作っていくかを設計します。
プログラムをどういう構造で、どういうパーツに分けるのか。
各パーツはどういう機能を持たせて、どういう時に使うのか。
正直ここが肝です。ここがしっかりできていればプログラミングは
単純な作業になります。
逆にここが出来ていないと、試行錯誤しながらプログラミングすることになり、
最悪、手が止まってしまうこともありえます。
慣れてくると設計とプログラミングはほぼ同時に出来たりします。
３．デザイン：5～10日
基本はノータッチです。
ただ、顧客の要望はここで具体的に出てくるので、参加しておくと要点や要望が理解でき、後の工程(特にデバッグにかこつけた仕様変更(笑))の短縮化につながることも多いです。
４．コーディング・開発：5～10日
設計がしっかりしていれば後は手を動かすだけです。
ただ、細かいところで想定外はほぼ必ず起こるので、ある程度余裕(バッファ)を持たせてスケジュールを立てるのがコツです。
５．テスト・デバッグ：3～8日
実装したプログラムが設計通りに動作するかの確認をし、不具合があれば修正します。
通常の流れで想定した処理が行われるかを確認する正常系と、様々な場面やタイミングで想定外の操作をする異常系に大きく分かれ、異常系がメインとなります。
今回は全体の概要をざっくり説明しました。
詳細はまた別の記事で解説します。
■まとめ
・要件定義
・設計
・デザイン
・コーディング、開発
・テスト
【現場で当たり前に使う知識】コーディング/開発/テスト・デバッグ編
※概要とスケジュール感編、要件定義/設計/デザイン編も是非ご覧ください。
「学習サイトや参考書と同じやり方でコーディングできるのかな？」
「テストのやり方とか詳しく知らないけど大丈夫かな？」
独学だとこのような不安も出てくると思います。
この記事を読めば、開発でまず何をやるべきなのか、根本的なテストの考え方などがわかります。
１．コーディング
確定したデザインを基に、html/cssでのwebサイト実装を行います。
大きく分けて3つの工程があります。
・デザインファイルからの素材切り取り
photoshopなどデザイナーが作ったデザインファイルから、例えば1つのボタンや1枚の写真など、htmlの要素単位で画像を切り分けていきます。
この切り取り作業はデザイナーさんがやってくれる場合もあります。
(余談ですが個人的には全作業でここが一番面倒です…笑)
・htmlで大まかなブロック作成
デザインを参考にしながらタイトル・メニュー・メインコンテンツ部分などのブロック単位を大まかに分けてhtmlを書いていきます。(詳しくは過去記事もご参照ください)
・cssを入れながら全体調整
htmlが大まかに書けたらcssを少しずつ書いて、デザイン通りにブラウザ上での見た目を合わせていきます。
レスポンシブデザインならこの段階でスマホでも確認をしていきましょう。
２．開発
設計がしっかりできていれば、基本的には日本語をプログラム言語に置き換えるだけです。
慣れるまではコメントで何をしたいのかを細かいステップで書いていくと良いです。
例えば会員登録フォームの入力画面とかなら下記のようになるでしょう。
//入力画面表示
//フォームの値をリセット
//確認画面から戻ってきた場合は入力された値をセット
//入力値をチェック
//確認画面用にsessionに保存
//確認画面の処理を呼び出す
上記を基に、コメントの日本語をプログラム言語に置き換えていく感じです。
今は分からなくても大丈夫、文法がわかってきたらこの流れは自然と出来てきます。
３．テスト・デバッグ
実装したプログラムが設計通りに動作するかの確認をし、不具合があれば修正します。
大きく分けて2つの視点があります。
正常系：自分が書いたコードが想定通りに動くかどうかを確認します。
異常系：想定外の動作をされた時、例えば画面入力の途中でブラウザリロードをされたらどうなるか？などを確認します。
また、テストの範囲で分ける手法もあります。
単体テスト：１つの画面毎にテストを行います。
結合テスト：「新規会員登録」など１つの機能をテストします。
総合テスト：「新規会員登録」「カートに入れる」「支払い・決済」などすべてのテストを行います。
開発者やチームですべてのテストが完了後、お客様に実際に操作してもらう「受け入れテスト」があります。
あくまで最終確認なので、バグが出ることはないようにしておく必要があります。
まとめ
・コーディング
・開発
・テスト/デバッグ
【今から現場の感覚を養う】現場で使われてる用語を知っておく
「今勉強していることが現場で役立つか不安…」
「もしフリーのエンジニアになれたとして、本当に案件を捌けるんだろうか…」
こういった不安を感じることは多々あると思います。
何故不安を感じるのか。それは知識と経験がないからです。
経験は現場で積むしかありませんが、知識は今すぐにでも身につけられます。
まずは慌てず基本を学ぶことが大事ですが、
現場でよく使われる用語を早々に耳に入れておくと、
無意識に知識が蓄積されていき、後に必ず役立つはずです。
ではそんな用語を3つだけご紹介します。
・CMS
企業のホームページで、日々ブログのように記事をアップしたり、
イベント情報など定期的に更新する必要がある場合があります。
こういうニーズに応えられるシステムがCMSです。
簡単に言うとhtmlの知識が無い人でも、ページを更新できるものです。
開発に携わっていると、
「CMSを使いたい」
「一部CMSで構築されたサイトのカスタマイズをお願いしたい」
などの要件が良くあがってきますので、
CMSという言葉だけでも覚えておいてください。
これは聞き馴染みのある方も多いのではないでしょうか。
いわゆる通販サイトで、例えば楽天やAmazonなんかもECサイトです。
個人や規模の小さい会社などで、オリジナルのデザインや構成を
使いたい場合、楽天などでは実現が難しいことがあります。
そういった際に、BASEやShopifyというような、ECサイトを構築する
システムを使って開発することがあります。
導入～設定も非常に簡単で、カスタマイズ性も高いため、
こちらも多くの案件で使われる機会があります。
・動的サイト
こちらは決まった定義があるわけではないのですが、
ページに入った瞬間にブランドロゴがアニメーションで動いたり、
ページをスクロールさせると突然上下左右から派手なエフェクトが出てきたり、
そういった動的な仕掛けが施されているページのことを指します。
やり過ぎると視認性や操作性が悪くなったりするので諸刃の剣ですが、
ブランディングやインパクトをとりたい場合は有用な手段となります。
実はhtml/cssでもアニメーションを表現できます。
また、JavascriptやActionscriptなどのプログラムを実装すれば、
派手で複雑なアニメーションも実現可能です。
最初から着手するにはハードルが高いですが、もしこれらの技術に興味があれば、
目標の一つにしてみても良いかもしれません。
アニメーションを実装できるエンジニアは割と数が少ないので、
自身の市場価値も更に上げることができるでしょう。
まとめ
