「VS Code」を含む日記 RSS

はてなキーワード: VS Codeとは

2019-01-02

プログラミング素養

初めてプログラミングに触れたのは小学4年生の時。

Flashゲームを作りたくてアクションスクリプトの本を買ってもらったんだけど、本の通りに書いてもエラーが出て動かなかった。

今になってみると何故動かなかったのかの見当がつく、セミコロンコロンを打ち間違えてたんだ。

もし最初の本が初めてプログラミングに触れる初心者向きで、それこそ変数とは?関数とは?どんなことに気をつければいいのか、というところから一歩ずつ書いてある本なら投げ出さずに済んだかもしれない。

大学に入ってからJavaScriptPHPを少し触るようになった。

小学生の時の挫折があったからなのか、周りの学生よりも多少理解が早かった。

エラーが出たらエラー文でググる、がこの時の私の対処方法だった。

カッコの閉じ忘れや変数名間違いで数十分悩むこともザラだった。

しょーもない間違いを積み重ねていくうち、なんとなくエラーの原因に見当がつくようになってきた。

でも意味のわからない記述は全部おまじないだと思ってた。

他人コードを見ても、どこまでが元から用意されている機能で、どこからがこの人が新たに定義した何かなのかがわからない。

上手な人のコードは簡略化されすぎてて、私にはまるで理解できない。

JavaScript関数の書き方が何通りかあって、それぞれの違いがよくわからなかった。

困るのは見たことない書き方を見てもそれをググれないこと。記号が入り混じってて検索ワードとして成立しなかったり、そもそもプログラミングやってる人からしたら常識だったりして、わざわざ空は青いですよ、みたいな分かりきったことは書いてくれてないのだ。

たまたまプログラミングの得意な先輩に教えてもらう機会があって、色んなことを教えてもらった。

例えばツール

閉じ忘れや変数名間違い、全角スペースで数十分悩む必要は無い。だってツールが教えてくれるから…。

それまでメモ帳に毛の生えたようなテキストエディタを使ってたんだけど、SublimeTextとかVS Codeとか色んな選択肢があることを知った。すごいんだよ!コードを補完してくれる機能があったり、閉じ忘れてると教えてくれたりするの…。

こんな便利な関数があるよ、それは古い書き方で今はこんな新しい書き方が主流だよ、とか。

インデントは揃えようって口を酸っぱく言われた。確かに揃えた方が読みやすいよね。

エラーが出た時の対処方法自分とは違ってた。そうか、これ、原因になる行がエラー文に表示されてたのか…。

あとコンソール!何はともあれコンソール

どこまで値を渡せてるのか順番にコンソール出して確かめればいいって発想が自分に全く無かった。そうだよね、どこで失敗してるかわからないものね。

んで、就職して社会人になったわけだけど、コードを書く機会はほとんどない。あ、いやたまにある。ランダムおみくじを表示させる程度のものとか。

あとは趣味簡単ミニゲーム作ったりもする。

プログラミング、まあまあ好きだと思う。

でも自分にはその素養が無いって常々感じる。なんか根本の考え方が上手な人と全然違うみたい。

初心者エラー文読まない、読んでも見るだけで理解してないのはガチ

どうやったら上手な人と下手な人の溝が埋まるんだろう、ってたまに考えるんだけど、

人間やっぱ得手不得手ってあるよね。

かに教えて貰わずともボール蹴るのが上手な人も居れば、教えて貰っても下手な人もいるわけで。

でも学校の体育ってやり方教えてくれないよね?

跳び箱ぐらいかな、コツ教えてくれるの。踏切位置や手をつく位置、あれを上手くやれば高い段もするんって跳べる。

そういえば高校プログラミングの授業でもコツとか教えて貰わなかったな。

もうただ単純にこのコードを書いてくださいね、書きましたか、動きましたね、はい終わり。みたいな。

2018-10-31

増田プログラマー養成講座 その14 Webアプリの試作品作成

前回は、SQL文法を学びました。

今回は、データベースを使ったWebアプリ制作を通じて、SQLの使い方を確認してみましょう。

 

Webアプリとは?

WebブラウザーGoogle Chromeなど)で動作するアプリのこと。

ウェブアプリケーションWeb application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである

多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムWebサーバ側のプログラム協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。

 

準備

Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。

以前の講座(その6、その9)を参考にして、XAMPPCodeIgniterを用意しておこう。

 

Webアプリ制作の流れ

最近アプリの作り方は、「デザインスプリント」と呼ばれる方法流行ってます。本やネット情報がたくさんあるので調べてみよう。

 

ざっくりと、以下のような流れです。

  1. アイデア企画)を出す。
  2. アイデアを基に、ペーパープロトタイプ(紙の試作品)を作る。=アナログの試作品ノートなどにアプリの完成予想図、画面などを描く。
  3. ペーパープロトタイプを基に、動くモック(ハリボテ)を作る。=デジタルの試作品
  4. モック画面を基に、実際のプログラム作成して、アプリを完成させる。
  5. 完成したアプリを改良していく。

それでは順番にやってみよう。

 

アイデア

以前にデータベース練習をしたとき、「後で簡単チャット(おしゃべり)ができるWebアプリ作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。

 

ペーパープロトタイプ

チャット必要な画面は3つある。

  1. トップページの画面(新規投稿投稿一覧がある)
  2. 投稿更新する画面
  3. 投稿を削除する画面

ノートなどに描いて画面をデザインしてみよう。

 

モック

Webページを作るには、HTMLCSS知識必要だ。HTMLCSSを使ったことがなければ、本やネット情報勉強してみよう。

今回はCSSを使わずに、HTMLだけでシンプルWebページを作ってみよう。(練習から余計なもの無駄を省きたい。)

 

Webページ制作ツール

ブラウザーテキストエディター(またはIDE)が必要です。

特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料IDE統合開発環境)を使ってみよう。

インストール方法や使い方、メニュー日本語化のやり方は、検索して調べてみよう。

 

フォルダを作る。

デスクトップに「mock」というフォルダを作る。

 

ファイルを作る。

「mock」フォルダの中に

  1. index.html」 (トップページの画面)
  2. 「edit.html」 (投稿更新する画面)
  3. delete.html」(投稿を削除する画面)

という3つのファイルを作る。

テキストエディターで保存するとき文字コードを「UTF-8」にしておく。

 

ファイルの中身を編集する。

index.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <tr>

    <td>3</td>

    <td>2018-10-20 12:34:56</td>

    <td>Webアプリを作ってみる!</td>

    <td><a href="edit.html">編集</a></td>

    <td><a href="delete.html">削除</a></td>

   </tr>

   <tr>

    <td>2</td>

    <td>2018-09-10 22:33:44</td>

    <td>今日からプログラミングを勉強します。</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

   <tr>

    <td>1</td>

    <td>2018-08-01 11:22:33</td>

    <td>こんにちは!</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

  </table>

 </body>

</html>

 

「edit.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message" value="Webアプリを作ってみる!">

   <button>更新する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

delete.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form>

   <p style="background-color:lightpink">Webアプリを作ってみる!</p>

   <button>削除する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

以上でモックWebページ(HTMLファイル)ができました。

Webブラウザーで「index.html」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。

 

モックを作ってからWebサイトを作る方法

実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。(紙の仕様書はあまり使われる機会がない)

紙の仕様書アナログ)の代わりに、モック仕様書デジタル)として使うと、その後の段階がスムーズになります

どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。

 

プロトタイプ作成ツール

モック(動くハリボテ)を作るための便利なツールがいろいろあります

 

 

 

ちょっと長くなったので、モックを基に機能実装プログラミング)するのは次回にしましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミングの練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成 ←★今ここ★

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-07-29

anond:20180729211234

VS Codeだとプログラミングビルドデバッグ行為本体側が面倒になりそうであんまり使いたくないなあ

だってあっぷあっぷしながらIntelliJ使ってるのに

プログラム本文はVS Codeでもいいだろうけどそれ以外のビルドスクリプトとかライブラリ管理とかテストとかうわあああってなりそう

2018-07-25

WordExcelもしっかり動作

PC広告コピーで「WordExcelもしっかり動作」というのを見た。

でも今となってはWordExcelって軽いほうのアプリだよな。

WordExcelが動かないで、なにが動くのって感じだわ。

プレーンテキストなんて、AtomとかVS codeよりWordのほうが早く開けるし。

2018-07-02

anond:20180702210004

触る前に疑問に思ったんだが

vimCLIサクサク動くのがメリットであってElectronで包んだら意味なくね?

VS CodeAtomvimライクにする拡張入れたがいいんでないのと思ったんだがなにか違うの

2018-05-21

anond:20180521170615

サクラエディタ遣いならサクッとVS Codeに移行しておいて損は無いぞ。

 
アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん