6月17日 -JavaScriptを深く理解するために必要な知識について調べてみた。主にQiita検索を参考に-
１．今日の目標
まずは前回ウェブカツで書いていた用語について学ぶ。その上で動画視聴を続けてみる。単語は以下。腑に落ちたら→腑に落ちたと記載予定。深堀しすぎるとキリがないと思うのでまずは内容、概要の理解まで。基本的にQiitaの検索機能を使って調べる。情報が古い場合もあるが、とりあえずストック数順で並び替えるなど色々試しながら調べていく。
・cookieとセッション
・getとpost
・テーブル設計と正規化
・ログ設計
・例外処理
・テーブル結合(JOIN)
・影響調査法
・バリデーションとサニタイズ
・npmやyumといったパッケージ管理ツールとgulpなどタスクランナーツール
・ajaxと非同期処理
・Vue.js→腑に落ちた、react.js→腑に落ちた
(これらはJavaScriptのフレームワーク)
・npm→腑に落ちた、yum→腑に落ちた
(これらはパッケージ管理ツール)
・gulp→腑に落ちた、grunt→腑に落ちた
・ホイスティング→腑に落ちた、プロトタイプ→腑に落ちた(自分の理解が間違っている可能性あり)
・thisの4種類→雰囲気は掴んだ
２．結果・感想
語彙を調べると知らない語彙が出てくる。その繰り返し。でも調べていくうちに、「あ！こことここが関連してて、こういう風に使わているのか」みたいにふいに理解できるタイミングが来てくれることを期待。基本的にコピペはせず、同じ文章を書かせていただく場合も全てを手打ちにすること、それを読むことで理解を深めていきたいと思っている。実際手を動かして理解したつもりになっていても、声に出して読んでみたら上手く発音できなかったりする。
何かを理解しようと思う場合に一番効率がいいのはそれを誰かに教えること。教えようとしても自分が理解していない場所は上手く教えられない。その方法をうまく活用して、声に出して自分に教えるというイメージを持つことで理解度を高めていきたいと思う。
さきほど、TECH::EXPERTでエンジニアを目指しているユウマさんのブログを閲覧した。毎日10時間ほどの勉強をほぼ欠かさずしていて、2か月という期間ですごいスピード感で成長しているように思えた。私も頑張りたいと思った。スクールだとしっかりレールが敷いてあって、メンターがいて素敵な環境で勉強できることを知った。同時にプログラミングへの熱意と努力、「継続すること」の大変さを記事から感じた。
負けじと頑張りたい。
やはりプログラミングを頑張っている人、楽しんでいる人、同じような目標に向かって頑張っている人のブログは熱意を分けてもらえるような気持ちになる。そしてエンジニアとして働いている先輩方のブログからは知識や知恵、困難の乗り越え方や体験談などの貴重な情報を得ることができる。色んなブログ、twitterでのtweetを見ながら私も頑張っていきたい。
Qiitaの右側に検索オプションの使い方例が書いてある。これってすごい良心的だと思う。もし将来こういうサイトを作るならこういう機能も実装して利用者がプラスアルファの使い方を自分で考えられるようなサイトにしたい。でも、実装難しいのかな。if文で「もしtitle:やbody:という指定単語が出てきたらそのあとの空白行までの単語を指定単語の要素(titleやbodyやtagなど)の内容と比較演算子で照らし合わせてtrueの記事だけ表示する」とかっていう実装になりそうな予想。作ったことないから分からないけど。でもそういう実装が出来るように勉強していきたい。
scriptって書き過ぎてたまにsprict？あれ、どっちだっけ？ってなる。そして気付いたら8000文字超えているという事態に。先人の知識や知恵は素晴らしいということで。学ぶの楽しいからどんどん吸収していきたい。でも語彙を学んだだけではほぼ意味ないかもしれない。実際にプログラㇺを書いてエラー対応やら環境構築やらテストやら、大変な部分に触れてより楽しんでいけたらと思う。
３．学んだことの書き出し
npmについて
npmとはNode Package Managerの略。Node.jsのモジュールを管理するツール。npmはフロントエンドで使用するパッケージのバージョン管理を行うのに使われる。npmでインストールしたパッケージのバージョン情報をpackage.jsonに格納する。そのpackage.jsonからパッケージを一括でインストールすることができ、package.jsonを一元管理することでフロントエンドで使用するパッケージのバージョン管理を一元化することができる。node.jsをインストールすると同時にnpmもインストールされる。
JavaScriptにはモジュール機能(他のファイルを読み込んで使えるようにする機能)が用意されてなくて、その役割を果たすためにできたのがnode.js。node.jsはnpmというパッケージ管理ツールを使う。npmのリポジトリにnode.jsという言語で書かれた便利ツールがどんどん追加されている。node.jsはブラウザの枠にとらわれない汎用言語で、作られるツールも「コマンドラインで使って開発を楽にするツール」という趣が強い。
http-server：簡易Webサーバー
grunt：タスクランナー
bower：ブラウザで動くJavaScriptのためのパッケージ管理ツール。パッケージ例は(JQuery、AngularJS、パララックスなど)。bowerはnode.jsで実装されている。node.jsとして書かれたJavaScriptはそのままではブラウザでは動かない。browserifyを使えばnode.jsスタイルで書かれたコードをブラウザ上で動くものに変換できる。
実際に使う流れ：node.jsインストール→npmでbrowserifyをインストール→CommonJSスタイルでコーディング→browserifyでブラウザ向けにビルドして表示
これ色々学ぶことありそうだ。
yumとcurlについて
yum(Yellowdog Updater Modified)とはRedHat系ディストリビューション(centOSやFedoraなど)で利用されるパッケージ管理ツールのこと。パッケージとはある機能を持ったプログラムの集合のこと。レポジトリとはパッケージが保存されている場所のこと。サーバシステムにおけるレポジトリとは公開されているネットワーク上のどこかに置かれていることをさす場合が多い。
sudo yum install
sodu(スードゥー)とは一時的にroot権限でプログラムを実行するためのコマンド。rootユーザーとは、強力な権限を持ったユーザーであり、カレントユーザー(現在ログインしているユーザー)の権限を上回る。yumとはソフトウェアの導入と削除、依存関係の整理などを行うパッケージ管理ツール。curlとは、URLを使用してデータ取得するためのコマンドラインツールのこと。ハイフンと併用することで多様なオプションをつけられる。
yumとcurlの違い
yumはrpmのパッケージ管理システムを呼び出すときに使われる。rpmが個々のパッケージでyumが全体のパッケージというイメージ。rpmのみでは依存関係は自動解決されないのでyumを用いる。対してcurlはTP、FTPS、HTTP、HTTPSなどの様々な通信プロトコルに対応している。
rpmについて
rpm(RedHat Package Manager)とはパッケージを管理するコマンドのこと。rpmではインストール時におけるパッケージの依存関係の情報をRPMデータベースに登録し、アンインストール時に確認しに行く。rpmはアプリケーションのバイナリとそれを動かすために必要な各種ファイルが固まっているファイル。
yumコマンドとrpmコマンド、どちらを使う？
RPMパッケージのインストール・アンインストールはyumコマンドが良い。RPMパッケージについて詳しく調べたい時はrpmコマンドが良い。rpmコマンドビギナーはQueryモードを使いこなせるとレベルアップする。
Linuxの用語集(Linuxカーネル・ディストリビューション、パッケージ、シェル、ミドルウェア)
LinuxディストリビューションとはLinuxカーネルを様々な企業やエンジニアがカスタマイズして再配布されたもの
代表的なものとしてDebain系にUbuntu、Linux Mint、Red Hat系にCentOS、Amazon Linuxがある。
パッケージとは、Linuxでアプリケーションをインストールする際の形態のこと。Linuxはソースコードの状態で公開されているため、ユーザーがバイナリの形にコンパイルする手間がある。利便性を高めるためにあらかじめコンパイルされたバイナリといくつかの必要なファイルをひとまとめにしたものをパッケージという。
シェルとは、Linuxを操作するためにコマンドを打つ場所。シェルはユーザーからのコマンドを通訳してカーネルに渡したり、カーネルからのメッセージを通訳して出力したりする。bash、sh、zshなどがある。windowsではコマンドフロンプト、Powershellなどが該当する。
コマンドとは、シェルを通してLinuxを操作する命令のこと。代表的なコマンド例がリンク先にあり。
ミドルウェアとは、アプリケーションとOSの中間的な処理を行うソフトウェアのこと。OSだけでは業務に求められるほどの機能は備えていない。ミドルウェアをインストールすることで特定の処理や複雑な動作が可能になる。Apache(Webサーバ)、MySQL(DBサーバ)などを指す。
今回は中身を詳しく見ないが、将来的にLinux環境を使うことになったときのために貼りつけだけしておく。
Vue.jsについて
vue.jsとはMVVMと呼ばれる設計パターンを採用しているJavaScriptのフレームワークのこと。jsのフレームはたくさんあるがその中でも最もシンプルで学習しやすいフレームワークとして有名。リンク先で表示しているサンプルコードの実行例で、入力した文字列が上にそのまま表示されている。
Vue.jsの用語説明(データバインディングとディレクティブ)
データバインディングとは、データと描画を同期させる仕組みのこと。HTMLで作成するにあたりUIを操作するのはDOM操作。UIのパターンが膨大になるほどDOMの更新作業が面倒になり、ミスにつながる。データバインディングはそれを解決に導く。JavaScriptのデータとそれを使用する場所を紐づけてデータに変化が起きた時でも自動的に反映させる。
ディレクティブとは、Vue.jsのテンプレートに用意された特別な役割を持つ属性のこと。
Vue.jsの基本構造
アプリケーションの作成にあたり、コンストラクタ関数Vueを使ってVueインスタンスを作成する。その中でオプション(どんなデータにどんな処理をするか)を追加していく。オプションには使用するデータやメソッドを定義する。代表的なものとしてel、data、computed、createrd、methodsがある。
React.jsについて
React.jsはシンプルなJavaScriptのオブジェクトとしてDOM構造を表現する仮想DOMを構築する。実際のDOMへの反映の際は現在のDOMと比較して差分だけ適宜反映する。画面描画ごとに仮想DOMを構築しても実用十分な性能が出るという特徴を持つ。Reack.jsでは純粋なJavaScriptのオブジェクトとして仮想DOMを組むため、複雑なテーブルもJavaScript的に組み上げられる。React.jsでは状態を持ったコンポーネントを作れるので上位層から知る必要のないようなstateは子コンポーネントに封じきってしまえる。フォーム要素に値を記憶させるというデフォルトの機能をあえてなくして、「ユーザーからの入力」と「値の表示」を切り離すことで入力値の管理をシンプルにしている。React.jsは慣れれば快適だが始めるコストはある程度ある。理由は３つあり、最先端のJavaScript文法を多用する書き方、JSXという仮想DOMを直接JavaScriptで書けるようにするための文法拡張、それらを処理する環境構築をする必要があるから。
React.jsはFacebook社が公開したUI構築のためのjsライブラリのこと。コンポーネントという単位でUIごとに機能を宣言的に実装する。MVC/MVVMでいうところのView/View-modelのみを担当する。その他の部分はRedux/Fluxを組み合わせて構築する例が多い。HTMLのDOMを直接操作せず、仮想DOMに対して操作を行う。仮想DOMからHTMLDOMへの反映はReactが効率的に行ってくれる。JQueryと併用できる。BootstrapのようなUIのデザインライブラリとしての機能は持たない。
gulpについて
gulpとはnode.jsのStreamingAPIを利用したビルドシステムのこと。Gruntが抱えているいくつかの問題を解決する手段としてできた。Gulpを使えば様々な作業を自動化することができる。gulpは非依存型プラットフォームで、メジャーなIDEには対応しており、様々なプラットフォームで利用できる。大量のnpmモジュールを駆使すれば様々なことができて、使い方もシンプル。
gulpにはプラグインが必要になる。 何かのツールを導入するたびにそれに対応したgulpのプラグインが要求される。そうするとpackage.jsonにgulp-××が並ぶ。gulpはプラグインも駆使すれば大抵のことは自動化できる。gulp自体はただのラッパーでgulpで定義できるタスクは大体npm scriptsにshellで書ける。webpackがgulpのライバルとして登場。
webpackについて
webpackは複数のNodeモジュールをひとまとめにしてくれる。各種ローダーを入れればECMAScriptを変換したりCSSも読み込める。
webpackとは、複数のjsのファイルをひとつにまとめるツールのこと。機能ごとにjsファイルを分けて書くことでプログラムを楽しく、効率的に書くことができる。
scratch3.0について
scratch3.0とは子ども向けプログラミングツールのこと。
gruntについて
gruntとはフロントエンドまわりのファイルの圧縮・結合・最適化などの手順をスクリプト化できるツールのこと。スクリプト化しておくと面倒な作業を一発で実行できたり、自動化の手順を他の人と共有できる。Mac OS XへUNIXコマンドを簡単に追加できるようになる。PHP、Python、Rubyなどのプログラミング言語やMySQLなどの開発ライブラリを簡単な手順で追加することができる。gruntを使用する際に必要なファイルはGruntfile.jsとpackage.jsonのふたつ。
ホイスティングについて
ホイスティングとは変数の巻き上げのこと。変数の巻き上げとは、ローカル変数は関数内のどこで定義しても変数の宣言自体は関数内の先頭で行われたとみなされること。ホイスティングによる思わぬ不具合を防ぐためにローカル変数は関数内の先頭で定義するのが望ましい。
プロトタイプについて
JavaScriptには唯一のオブジェクト、グローバルオブジェクトが存在する。グローバルコンテキストで定数を定義すればグローバルオブジェクトのプロパティになる。function式で生成されるオブジェクトは全てprototypeプロパティを持つ。コンストラクタ(constructor)とは親クラスに向かうプロパティのこと。プロトタイプ(prototype)は子クラスに向かうプロパティのこと。
親クラス(=子クラス.constructor)
子クラス(=親クラス.prototype)
あれ、でもインスタンスを作る時ってselfのメソッドを引き継いでいた気がする。となると一時的にselfのメソッドなどを持ったままconstructorで親クラスに戻って新しいインスタンスを定義していることになるのか？難しい。
4つのthisについて
ECMAScript5の時代の4つのthisは、関数呼び出しパターン、メソッド呼び出しパターン、コンストラクタ呼び出しパターン、apply/bind/callパターンに分類されていた。ECMAScript2015でアロー関数が導入されると新しいセマンティクス(意味論)が持ち込まれることになり、thisを5つに分類することになった。ただ4つのthisとアロー関数のthisには大きな違いがある。
スコープは大きく分けて静的スコープと動的スコープの2種類がある。多くの言語では静的スコープが使われている。静的スコープは現在のスコープで変数が宣言されているなら現在のスコープの変数を調べ、なければソースコード上で１つ外側のスコープを調べるという手順を繰り返す。構文を解析する段階で変数名を解決できるので性的スコープと呼ばれる。動的スコープは現在のスコープで変数が宣言されているなら現在のスコープの変数を調べ、なければ実行のコンテキスト(文脈)において１つ外側のスコープを調べるという手順となる。実行時の状況によってどの変数を示すかが変わってくるため動的スコープと呼ばれる。
関数の外部とfunctionキーワードを用いた関数(非同期関数・ジェネレータ関数を含む)内のthisは動的スコープ。実行のコンテキストによって動的にthisの参照が解決される。このthisの決定パターンが先にあげた4つになる。
関数呼び出しパターン：thisの解決にあたり、thisを決定する要素を探してスコープを遡るとグローバルスコープにたどり着く。thisはグローバルスコープにおけるthis(strictモードの場合はundefined、そうでなければグローバルオブジェクト)として解決される。
メソッド呼び出しパターン：object.method(...)という特殊形式で呼び出すとmethod内のthisの参照はobjectに解決される。
コンストラクタ呼び出しパターン：new Constructor(...)という特殊形式で呼び出した場合、Constructor内のthisの参照はConstructor.prototypeをクローンして作った新しいオブジェクトに設定される。
apply/bind/callパターン：これらはFunctionオブジェクトのメソッドで、リフレクションのような機能を持っている。これらのメソッドは本来のthisの解決の過程に割り込んで引数にとったオブジェクトを優先的にthisに割り当てる。
アロー関数(非同期関数も含む)ではthisは静的スコープを持つ。thisは関数が定義された時点でそのスコープにおけるthisに静的に解決される。thisが他の変数と同様に扱われることになる。
thisとはthisが所属している関数を実行するオブジェクトのこと。thisには2パターンある。ひとつは所属しているオブジェクトそのものを指すthis。もうひとつはグローバルオブジェクトを指すthis。例があって分かりやすい。
４．明日の課題
５．参考URL
６．今後やりたいこと・高めたいスキル・優先順位
ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月16日 -ウェブカツについて-
１．今日の目標
ウェブカツについて納得がいくまで調べる。
２．結果・感想
twitterでウェブカツをしているプログラミング初学者の活躍を褒めている記事を見て、気になったのでとことん調べてみることにした。現在6月17日AM2:30。納得いくのが先か、眠気に負けるのが先か。妻に怒られるのが先か。現在3:40。とりあえずウェブカツに体験入学し、HTML部のコーヒーブレイクまで学んでみた。コーヒーブレイクの内容がとても濃厚なので一見の価値あり。YOUTUBE動画のコードが見づらいのでCtrl+上にコロコロして拡大して見るのがおすすめ。
３．学んだことの書き出し
HTML、CSS、JavaScript、PHP、SQLを習得することが大事
ATOMはリッチテキストエディタ。EcripseはIDE(統合開発環境)
最低限、勉強するべき項目
・cookieとセッションの違い
・getとpostの違い
・テーブル設計と正規化
・ログ設計
・例外処理
・テーブル結合(JOIN)
・影響調査法
・バリデーションとサニタイズ
・npmやyumといったパッケージ管理ツールとgulpなどタスクランナーツール
・ajaxと非同期処理
複数の言語を学び、ネットワークの仕組みや各種ツールの使い方を学ぶ必要がある
プログラミングで仕事ができる人になるために知るべきこと
・それぞれの言語で出来ることと出来ないことを知る
・エディタの使い方から各種ツール、フレームワークやパッケージ管理ソフトなどの使い方・使いどころを知る
・ネットワークやサーバー、通信やcookie、sessionの仕組みを知る
・要件定義書など仕様書(作るシステムの説明書)といった書類の見方を知る
・作りたいものから行程が想像できるようになる
言語についてどの深さまで理解しているか
・vue.jsやreact.jsというフレームワークは使えるか
・npmやyumというパッケージ管理ツールは使えるか
・gulpやgruntというタスクランナーやwebpackというツールは使えるか
・ホイスティングやプロトタイプは分かるか
・thisの4種類のパターンは分かるか
４．明日の課題
ウェブカツの学習を進める
５．参考URL
６．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月13日 -ライティングのコツについて学ぶ-
１．目次
- １．目次
- ２．今日の目標
- ３．結果・感想
- ４．学んだことの書き出し
- ５．明日の課題
- ６．参考URL
- ７．今後やりたいこと・高めたいスキル・優先順位
２．今日の目標
本日はライティングについて学んでみる。そしてサグーワークスのプラチナテストを受けてみる。
３．結果・感想
初の試み。参考にしたサイトを書き出し部分に埋め込んでみる。自分で見返す場合にも、どの記事から学ばせてもらったのかわかりやすいはず。試行錯誤。HTML編集で<hr>を書いて分かりやすいように区切る。
深夜1時ころからプラチナライターテストを始めたのが間違いだったと思う。この時間になると頭が回らなくて考えるのが難しい。眠くて眠くて、ひどい内容だと思う。結果は１週間から３週間ほどで出るらしいので期待しないで待ちたいと思う。
４．学んだことの書き出し
より早く文章を書くための3つの方法
①ノートに簡単な文章を書く
要点をまとめて書き出す
②口コミ検索
口コミを参考にする
③とにかく記事に挑戦して書く
同じようなジャンルの案件を繰り返し受ける
最後まで読んでもらう文章構成のコツ
①見出しに記事の具体的な内容を入れる
読んでもらうためには記事の内容をより具体的に表した見出しを作成する必要がある。
②シンプルに分かりやすい書き方を心がける
読者は知りたいことがあって記事を探している。そのため見出しを見ただけでこの記事に求める情報がありそうだと思ってもらう必要がある。
③粒度を揃える
簡単に粒度を揃える方法として、見出しの末尾に同じ名詞や動詞を使用する方法がある。
④見出しの親子関係を考える
大見出しでカテゴリ分けし、小見出しでその具体的な内容を書く。小見出しの内容が大見出しに含まれるものである必要がある。親子関係を整えるとライターにとっても情報整理がしやすくなる。
⑤見出しの順序を考える
見出しの順番は時系列、手順、起承転結という順番で並べる。
文章の流れを決める３つの構成例
①結論を先に書く
短い時間で必要な情報が得られる。スキマ時間を使って記事を読む読者層に対するコラム記事などにおすすめ。
構成：結論→理由・根拠→具体例→まとめ
②複数の情報を段落ごとに分けて紹介する
段落ごとに情報がまとまっていると読者が理解しやすく、必要な情報の取捨選択がしやすいというメリットがある。複数の情報を伝える記事におすすめ。
構成：リード文→情報→情報・・・→まとめ
③自分の主張や見解を伝える
自分の提案を受け入れてもらいたい時におすすめ。企業ブログなどで使用する場合は言葉遣いを丁寧に、柔らかい言い回しにするなどの工夫をした方がいい。
構成：伝えたい事→伝えたい理由→伝えたいことの具体例→懸念点・疑問点→懸念点・疑問点に関する解決策→伝えたいことまとめ
タイトルと見出し作成の重要性
① 読者はタイトルで読む記事を決める
②検索エンジンで上位表示してもらう
タイトル作成前に考えるべきこと
①記事のターゲットは誰か
ターゲットとはる読者を考えるのに必要な情報は、読者の性別や年代、趣味、悩み、職業など。
②何を伝えたいか
記事を読みたいと思ってもらうために、記事で伝えたい内容や記事の結論を明確にしておく必要がある。そのためにタイトルには記事の結論やテーマを表現する言葉を使う。
③検索でヒットするキーワードか
タイトルに、検索エンジンでヒットしやすいキーワードを入れる。タイトルや記事内容を考える前に、検索エンジンでヒットしやすいキーワードをリサーチしておく。「googletrends」「ハッシュタグ」などを参考に。
クリックされるタイトルをつけるコツ
①記事のテーマが分かる
記事のテーマが分かるタイトルだと、読者にクリックしてもらえる確率が上がる。記事のテーマをタイトルで示すには記事の内容や読者にとってのメリットが分かる表現にする。タイトルにターゲットを入れると該当読者のクリック率が上がる。
②読みたいと思える表現になっている
年数を記載し、新鮮さを表示する
読者を惹きつけるタイトルづけのパターン
①読み手の特徴を入れる
②記事内容の要約を入れる
③記事の結論を入れる
④数字を入れる
具体的な数字を入れると、記事のメリットがイメージしやすくなる。
⑤問いかけをする
見出しの重要性と作成のコツ
①見出しの重要性
本や雑誌の場合、目次を先に読んで本の概要をつかんでおくと長文でも読みやすくなる。Web記事でも長文の場合、読者は見出しに何が書かれているかで読み進めていくべきかどうか判断する。
②見出し作成のコツ
見出しは記事の内容を段落ごとに知らせる目次の役割を果たす。タイトルのように気を惹く見出しではなく、シンプルで分かりやすい表現にするのがおすすめ。Web記事は見出しの順番どおりに文章を読んでいくケースが多い。上から下へスムーズに読み進められるように理解しやすい順番に見出しを配置する。
記事を早く書くための3つの事前準備
①想定読者
②記事のゴール
③盛り込むべき情報
Webライターにありがちな悩み
①書くべきことを決められない
Webライターはクライアントからキーワードをもらって執筆する。キーワードをもらってもどのようなテーマで書けばいいのか、どのような情報を記事に盛り込めばいいか分からないという悩みが多い。迷いを迷いのまま、明確にできずに書くと記事全体の内容が薄かったり、情報量が多くても読者が求めるものにならないことがある。
②記事を書くのに時間がかかりすぎる
1記事書くのに時間がかかりすぎるとWebライターとして十分な収入を得るのが難しい。
読者に読まれる記事とはどんな記事か
①読者が知りたい情報が確実にある記事
読者が知りたいと考えている情報を、確実に、正確に伝える必要がある。読者は○○を知りたいという目的を持って検索した結果記事にたどり着く。その読者が抱く目的を果たすことがWeb記事の基本。
②読者の悩み解消に一役買う記事
読者の知りたい情報を渡すだけではなく、その背景の悩みの解消を手伝うことが、読者から支持される記事に不可欠。
読者に伝わる文章を書くために重要な3つの要素
①読者想定の設定
読者の悩みや疑問を解決するには記事を届ける読者像を調査し、把握しておく必要がある。想定読者とは、記事を読んでもらいたい人のこと。何が目的でそのキーワードで検索をかけるのかという観点から想定読者を設定する。与えられたキーワードで検索をかけて検索上位に出てきたWebサイトを参考にするのがおすすめ。想定読者を設定する理由は誰が何のために読む文章なのかがわかっていないと何を伝えたいのかが分からない曖昧な文章になりがちだから。
②記事のゴールの設定
読者に求められる記事は読者の課題を解決する「行動を起こしてもらう」記事。読者に行動を起こしてもらうには、記事のゴール設定が必要。記事のゴール設定とは、記事を読んだ結果、読者にどのような状態になってもらうか決めること。記事のゴールを設定することにより想定読者に何を伝えるべきか、何を省くべきかを判断する基準になる。
③必要な情報の洗い出し
具体的にどういう内容にするべきか必要な情報の洗い出しをする。情報の洗い出しとは、想定読者と記事のゴールを元に記事にもりこむべき情報を選別すること。それを行う理由は、読者の時間を奪わないことと、記事全体をスッキリさせて読者の途中離脱を防ぐため。
想定読者を設定するコツ
①検索上位ページで読者のニーズを把握する
想定読者を設定するには読者ニーズの把握が不可欠。読者ニーズを把握する際、Googleなど検索エンジンの上位ページを参考にするのがおすすめ。
②ターゲットとなる読者を具体的に設定する
想定読者は具体的であるほど必要な情報も絞り込みやすくなる。
③想定読者の疑問や悩みを予測する
想定読者を具体的に設定したら、読者がどのような悩みや疑問を持っているのか掘り下げていく。
記事のゴールを設定するコツ
①なぜそれを知りたいのかを考える
検索上位ページを読み込む、質問サイトでどのような質問がされているかを見てみるといった調査が必要。
②読み終わった後、すぐ行動に移せるようにする
知るだけでは解決しない。最初の一歩を踏み出してもらう。
読者に提供すべき情報を洗い出すコツ
①必要な情報と不要な情報を整理する
読者ニーズに合わせた選別をする。
②一歩踏み込んだ情報を探し出す
キーワードについてのより詳しい説明や、読者が参考にしやすい具体例などを選んでいく。
③メインテーマからずれていないか確認する
洗い出した情報を精査して不要な情報はバッサリ削除する。
記事ボリュームに合わせて短文と長文を使い分けるコツ
長文記事と短文記事の目的
①長文記事は「根拠」や「具体例」を掘り下げる
長文では根拠が見当たらないと記事全体の説得力が薄れて読者の心が離れていく。参考文献や他のサイトからの引用を散りばめて読者を惹きつける必要がある。難しい専門用語だけが並んだ文章には実際に起こった具体例を書いて読者の理解を助ける。
②短文記事は「情報」をストレートに提示
短文記事はスムーズに主題を明示し、確かな事実だけで文章を構成する。理論の展開も最低限に留める。短文記事では最小限の文章で最小限の情報を書くに留める。
③長文と短文で使い分けたい段落構成
長文記事では段落が多い方が読者に喜ばれる。「起承転結」「序破急」などの流れを意識しながら読者の興味を持続させると長文の完成度は高まる。重要な文章は書き方を変えて何度も登場させるなど、読者に優しい内容を心がける。
短文記事では段落が多くなりすぎると要点を絞りにくくなる。段落を少なくし、段落ごとの内容が濃密になるように工夫する必要がある。
論理的思考で説得力ある文章を書くコツ
ライティングで大切なのはテーマに応じて正しい情報を集めつつ、それを分かりやすく整理して読者に届けること。情報の羅列だけではなく記事を通しての主張や結論が欠かせない。そのために根拠と結論をセットにすることが論理的思考の第一歩。
論理的思考を助ける文章構成
①結論から述べる
②三段論法を使う
大前提、小前提、結論という流れの文章構成。２つの前提から結論を導き出すことで理路整然とした文章になる。
根拠づけのポイント
①根拠を複数示す
②根拠を深く掘り下げる
根拠が１つしかなくても掘り下げることで説得力が増す。
内容の薄い文章と濃い文章の決定的な違い
①読者に新しい知識を与えない「薄さ」
②キーワードに無関係な内容に字数を割く「薄さ」
上記2つの理由で内容の薄い文章になることを避ける。
そのために主題やキーワードから外れず新しい知識を提供する。
正しい文章を書くコツ
①正しい文章の基本は句読点
②「てにをは」をしっかり学ぶ重要性
③二重否定や前置きは不要
５．明日の課題
６．参考URL
ライティングハウツー | こぶたの鉛筆 - ライターのための情報メディア
７．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月11日 -Laravelについて学ぶ-
１．今日の目標
Laravelについて学んでみる
２．結果・感想
３．学んだことの書き出し
Laravelに標準で入っている機能は、テンプレートエンジン(Blade)、データベース(O/Rマッパー：Eloquent)、コマンドラインインターフェース(artisan)、ユーザー認証など
ls：現在のディレクトリにどんなファイルがあるか確認する
laravel -V：利用できるLaravelのバージョンを確認する
laravel new ディレクトリ名：指定した名前のディレクトリを作成する
起動したいディレクトリに移動して、php artisan serve：Laravelのウェブサーバーを起動する
ウェブサーバーを終了する場合はCtrl+c
laravel newコマンドの実行前に以下の設定をしておくとコマンドの実行時間を短縮できる
composer config -g repositories.packagist composer 'https://packagist.jp'
composer global require hirak/prestissimo
上記のPackagist.jpとPrestissimoはPHPの依存関係管理ツールCompserを日本で拘束に使えるようにするためのツール。前者はリポジトリのミラーサイト、後者はComposerのプラグイン。
php artisan make: model モデル名 -m -c -rでモデルとマイグレーション、コントローラを作成する
モデルを使うとPHPのオブジェクトとしてデータベースのレコードを操作できるようになる
php artisan migrateでモデルの内容をデータベースに反映する
ルーティング：特定のアドレスにアクセスした時、どの機能を呼び出すか設定する
４．明日の課題
５．参考URL
ITエンジニア・プログラマ向けの転職・就活・学習サービス【paiza（パイザ）】
Packagist.jp と Prestissimo を Itamae で導入して Serverspec でテストする | バシャログ。
６．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月10日 -基本情報技術者試験の勉強-
１．今日の目標
基本情報技術者試験の勉強を進める
２．結果・感想
３．学んだことの書き出し
コンピュータは1と0のみで情報を管理している
10進数をn進数に変換する方法
それぞれの桁をnで割って、余りを後ろから並べる
コンピュータは2進数と16進数を使う
2進数8桁をバイトという
日本語は2バイトで1文字
データ量が多い場合は補助単位を使う。キロ、メガ、ギガ、テラ、ミリ、マイクロ、ナノ、ピコ
n進数は各桁がnのべき乗になっている
nをn進数の基数という
10**-2=1/100
小数点以下はn**-桁数
変換しても割り切れない数値を循環小数という
指定した桁数を超え、正しい値を表示できなくなることを桁あふれ(オーバーフロー)といい、コンピュータはその仕組みを利用して引き算を行う
n進数で、その値を補えば最大値になる値を(n-1)の補数という
n進数で、その値を補えば桁あふれして0になる値をnの補数という
2進数の場合、1と0を逆にすると1の補数、それに1を足すと2の補数になる
コンピュータは値を格納する箱を確保してから値を入れるため、桁あふれしても自動で桁数を増やしたりしない
補数とは、その値を補えば最大値になったり桁あふれを起こしたりする値
固定小数点数とは小数点の位置が決まっている数値表現のことで、演算を行うのに都合がいい。先頭のビットで符号を表す。正が0、負が1。大きい数字や小さい数字を表現するにはかなりの桁数が必要になり、メモリに負担がかかるので、符号ビット、指数部、仮数部に分けて書く
ゾーン10進数とは10進数1桁を1バイトで格納する形式のことで、パック10進数とは10進数2桁を1バイトで格納する形式のこと。10進数をそのまま2進数に置き換えて表現することをBCD(Binary coded Dicimal)といい、計算誤差が小さいという特徴をもつ
ここまで「浮動小数点って何？」まで視聴
４．明日の課題
５．参考URL
基本情報技術者試験に役立つ無料youtube動画＆過去問 - NAVER まとめ
６．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月9日 --
１．今日の目標
２．結果・感想
３．学んだことの書き出し
良質のアウトプットを行うために必要なものは、十分なインプットと適度なスループットを確保すること。十分なインプットとは外部から知識を十分に仕入れること。適度なスループットとは外部から蓄えた知識を自分の中で咀嚼したり、他人と対話しながら自分の腹に落とすこと。インプット→スループット→アウトプットのバランスが上手く保たれている時に良質なアウトプットが生まれる。
４．明日の課題
５．参考URL
良質のアウトプットは「出がらしのお茶っ葉」からは生まれない!? | 立教大学 経営学部 中原淳研究室 - 大人の学びを科学する | NAKAHARA-LAB.net
応用情報午前問題の合格率を上げるためにボジ子がやってた、たったひとつのこと - カンボジアのボジ子。
６．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
6月8日 -プログラマーとして働くために必要な知識をまとめていく②-
１．今日の目標
将来の決定に生かせるようにプログラマーの基礎的な部分を調べてまとめる。
２．結果・感想
コメントコーディングで自分も他の人も理解しやすいコードが書けるように練習したい。テストについてもっと詳しく知りたい。りょうたくさんの記事はひとつの題材に絞って記事をまとめており、調べたい記事を探しやすい。さらにそれに関する参考URLも載っているのでその知識を深めやすい。現在私は1日ごとに勉強した内容を1記事に書いている。自分が後で見返しても思い出しやすいようにどうすればいいか。
３．学んだことの書き出し
コードを書き始める前に実装方法をコメントでまとめると何をすべきか明確にできて作業効率が上がる、考慮すべきポイントの抜け漏れが防げる、他の人にコードの内容・または考えが伝わりやすいというメリットがある
「理解しやすいコード」＝「可読性の高いコード」
書いた人の意図が理解しやすいコードは保守性が高い
コードの書き方は普段の会話と同等であるべき。質問の粒度と回答の粒度が同程度であれば相手が理解しやすい
粒度を揃えるトレーニングとしてコメントコーディングが有効
概念の上手い切り出し作業が粒度を綺麗に揃えることと役割分担に通じる
綺麗なコードを書くために設計時に意識すること
どういう概念(クラス、構造体、メソッド、プロパティなど)で切り出すか
誰(インスタンス)がするべきか
その人は何を知っている(プロパティ)べきなのか
どういう作業(メソッド)をさせるべきなのか
何を教えたら(引数)その作業ができるのか
その作業の結果(戻り値)は何か
概念に適切な名づけをする
プログラミングが遅い原因と解決策
①いきなりコードを書く→必要な作業を書き出す
プログラムを書く時は必要な作業工程をなるべく細分化して書き出す。それぞれの行程にかかる時間を見積もる。その後作業に入る。
②書き始めるのが遅い→前回の作業を記録する
その日のプログラムを書いた後にどこまで作業が進行したか、エラーなどの問題点を書いておく
③エラーの度に思考停止する→調べる、聞く
エラーの原因を検索する。teratailなどの質問サービスを使う。人に聞く。
④こだわりすぎる→優先順位を設定する
最低限必要な機能の実装を優先して実装する
⑤眠くて作業が捗らない→複雑な作業は朝にする
TDD(テスト駆動開発)とはユニットテストを主体として開発していく設計論のこと。TDDでのユニットテストはある関数の入力と出力はどういう形にすべきかだけを手を動かしながら考えるためにある。
TDDの基本
スパイクを打つとはタスク全行程の分からない(曖昧な)部分をなくしてから実装に取り掛かること。
スパイクを打つ流れ
①タスクのゴールを決める
チケット(タスク)作成者が何を実現しようとしているのかを理解し、最終的に実現したい事が出来るようになるにはどうするかを考えてゴールを決める。
②タスクを分割する
ゴールまでの実装を考える。その中で知らない技術や実装方法が分からない部分の技術調査、サンプルプロジェクト作成、動作確認を行う。よりタスクを分割し、実装するコードが思い描けている状態まで落としていく。
③コードのみの状態
コードのみの状態までタスクが分かれており、疑問点が１つもない状態であれば制度の高い全体の見積もりが可能。
テストケースとはソフトウェアが要件通りに動作するかチェックするために、どのような手順・観点でテストを行えばいいかをまとめたもの。効果的にテストをするためにテストケースの作成をする。「不必要なテストを省く」「異常系のテストも盛り込む」「解釈の齟齬が生じない表現で記述する」という3点を意識してテストケースを作成する。
テスト仕様書とはテスト観点とテストケースが記載されたドキュメントのこと。テスト観点とは機能が正しく動作した結果をどうテストするかという切り口のこと。
漏れなく、効率よくテストケースを洗い出す方法
①同値分割
同値分割とは入力値を有効・無効の集合に分割し、同じ部分集合に入る値は全て同じ結果とみなす方法のこと。
②境界値分析
境界値分析とはバグが多く潜む有効値と無効値の境界をテストする方法のこと。
③ディシジョンテーブル
ディシジョンテーブルとは状態や入力値と、状態や入力値の組み合わせであるルール、動作がまとめられた表のこと。ディシジョンテーブルを作成することでパターンが一覧化され、テストケースの抜けチェックに役立つ。
④ランダムテスト
上記の4手法でもバグが漏れる可能性があり、それを見つけるためにさらに追加でテストを行う方法。
ランダムテストとは手当たり次第に入力や操作を行う方法。アドリブテストやモンキーテストとも呼ばれる。セキュリティの脆弱性を発見するために予測不能なデータを入力するファズテスト、納品前に念のためシステムやソフトウェアをテストする際などの特殊な状況では有効。
４．明日の課題
５．参考URL
いきなりコードを書くより、コメントで実装方法をまとめた方が捗った話 - りょうたくのWEBエンジニア日記
脱・読みづらいコード！今日から一段上のプログラマーになる方法 5 選 - xin9le.net
プログラミングが遅い人の６つの原因と解決策 | IT初心者のトリセツ
後半ちょっと何言ってるか分からなかった
失敗しないテストケースの作り方と、効率よくテストを進める方法 | クラウド型テスト管理ツール「Qangaroo（カンガルー）」
６．今後やりたいこと・高めたいスキル・優先順位
WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
